功能的Javascript實踐與AJAX

Question

我目前做的項目freecodecamp.com刷上我的JavaScript技能，只是完成了氣象報告部件。它具有以下功能：

• 從openweathermap.org獲取API顯示基於用戶的緯度和經度
• 顯示的城市，天氣描述和風速
• 能攝氏度之間進行切換和ferenheit
天氣

我想成爲一個更好的JavaScript開發和利用最佳實踐工具和設計模式。因此，我懇請任何人有設計模式建議讓我的代碼更高效，更少冗餘，更實用。

此外，在控制檯顯示getCurrentPosition() and watchPosition() are deprecated on insecure origins爲什麼會這樣，是有從瀏覽器中獲取用戶的位置直接的方法嗎？

以下是我的javascript代碼：

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 

    var latitude = position.coords.latitude; 
    var longitude = position.coords.longitude; 

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=eee5ab7fffb62d126756d9b810ee1875", function(data) { 

     var temp = JSON.stringify(data.main.temp); 
     //Convert to Ferenheit 
     var temp2 = temp * 9/5 - 459.67; 
     //Round to 2nd decimal place 
     var temp3 = Math.round(temp2 * 10)/10; 
     //Display 
     $('#temperature').html(temp3 + " F"); 

     //Description 
     var description = data.weather[0].description; 

     //Wind speed 
     var wind = JSON.stringify(data.wind.speed); 

     //HTML disaply 
     $(".report").html("<li>" + data.name + "</li>" + "<li>" + description + "</li><li>" + wind + " knots</li>"); 

     //Toggle Logic 
     $('#celsius').on('click', function() { 
     var celsius = temp - 273.15; 
     var celsius2 = Math.round(celsius * 10)/10; 
     $('#temperature').html(celsius2 + " C"); 
     $('#celsius').removeClass('btn-default').addClass('btn-primary'); 
     $('#ferenheit').removeClass('btn-primary').addClass('btn-default'); 
     }); 

     $('#ferenheit').on('click', function() { 
     var temp = JSON.stringify(data.main.temp); 
     var temp2 = temp * 9/5 - 459.67; 
     var temp3 = Math.round(temp2 * 10)/10; 
     $('#temperature').html(temp3 + " F"); 
     $('#ferenheit').removeClass('btn-default').addClass('btn-primary'); 
     $('#celsius').removeClass('btn-primary').addClass('btn-default'); 

     }); 

     //Icons logic 
     if (description == "broken clouds" || "scattered clouds") { 
     $("i").addClass("wi-cloudy"); 
     } else if (description == "few clouds") { 
     $("i").addClass("wi-cloud"); 
     } else if (description == "clear sky") { 
     $("i").addClass("wi-day-sunny"); 
     } else if (description == "shower rain" || "rain") { 
     $("i").addClass("wi-rain"); 
     } else if (description == "thunderstorm") { 
     $("i").addClass("wi-storm-showers"); 
     } else if (description == "snow") { 
     $("i").addClass("wi-snowy"); 
     } else if (description == "mist") { 
     $("i").addClass("wi-dust"); 
     }; 

    }); 

    }); 

} 

你可以找到我的代碼的其餘部分的要點here。

再次感謝你，我感謝您的反饋。

Answer 1

要在Chrome工作，唯一的辦法就是從運行HTTPS頁面。

見https://github.com/stefanocudini/leaflet-gps/issues/15和https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

有沒有明確的計劃在所有的在這個時候，不是最終的折舊等。