Функциональная практика Javascript с AJAX

Question

В настоящее время я делаю проекты на freecodecamp.com, чтобы освежить свои навыки javascript и только что закончил виджет отчета о погоде. Он выполняет следующие функции:

• Получает апи из openweathermap.org и отображает погоду, основанную на широте пользователя и долготе
• Отображает город, описание погоды и скорость ветра
• Может переключаться между цельсием и 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

Там нет твердых планов вообще в это время, кроме возможного устаревания.