使用 AJAX 的函数式 Javascript 实践 [重复]

Question

我目前正在 freecodecamp.com 上做项目以提高我的 javascript 技能，并且刚刚完成了一个天气报告小部件。它执行以下操作：

• 从openweathermap.org获取api，根据用户的经纬度显示天气
• 显示城市、天气描述和风速
• 可以在摄氏度和华氏度之间切换

我想成为一名更好的 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");
      };

    });

  });

}

您可以在 gist 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

除了最终弃用之外，目前根本没有确定的计划。