使用天气API获取JavaScript + jQuery中的信息
请任何代码专家检查和改进我的代码？
HTML
API
Description:
Temperature: 这就是HTML。主要是带有id的标签来输出信息。
JavaScript
var ask = prompt("Type in your city or town that you want the weather for. Please make sure you write the first letter as capital letter and you spell it right.");
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q="+ask+"&units=metric&appid=32b8cd17f2ff5d84d72342dd7408bab2", function(data) {
console.log(data);
var icon = "https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var weather = data.weather[0].main;
var desc = data.weather[0].description;
var temp = data.main.temp;
var temp1 = temp + "℃"
$("#icon").attr("src", icon);
document.getElementById('weather').innerHTML = weather;
document.getElementById('desc').innerHTML = desc;
document.getElementById('temp').innerHTML = temp1;
});如果我可以使用jQquery以外的其他语言从API获取JSON文件，请让我知道，因为我觉得jQuery很令人困惑。
回答 2
Code Review用户
发布于 2019-02-25 22:29:23
变量
var icon = "https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
var weather = data.weather[0].main;
var desc = data.weather[0].description;
var temp = data.main.temp;
var temp1 = temp + "℃"
$("#icon").attr("src", icon);
document.getElementById('weather').innerHTML = weather;
document.getElementById('desc').innerHTML = desc;
document.getElementById('temp').innerHTML = temp1;这些变量都不是真正需要的。每个变量只使用一次，而且您没有对它们进行任何非常复杂的计算，因此，为了理解，甚至不需要它们。消除变量也会去掉这个temp1变量，坦白地说，这个变量有点难看--通常，当您必须开始向变量名添加数字时，您就知道自己做得太过分了。
试着做这样的事情：
$("#icon").attr("src", "https://openweathermap.org/img/w/" + data.weather[0].icon + ".png";);
document.getElementById('weather').innerHTML = data.weather[0].main;
document.getElementById('desc').innerHTML = data.weather[0].description;
document.getElementById('temp').innerHTML = data.main.temp + "℃";没有变量，相同的功能，同样可以理解。
您甚至不需要ask变量，但是我可以理解为什么要使用它，因为它确实是一个很长的问题。
jQuery
jQuery在今天的JavaScript中不是很重要。我建议大家了解一下fetch，从而了解Promises，这个设计更干净，也更好。
使用fetch的代码如下所示：
var ask = prompt("Type in your city or town that you want the weather for. Please make sure you write the first letter as capital letter and you spell it right.");
fetch(*url*).then(r => r.json()).then(data => {
...
});Code Review用户
发布于 2019-02-25 20:59:25
对您问题的答复
如果我可以使用Jquery以外的任何其他语言从api获取json文件，请告诉我，因为我发现Jquery非常令人困惑:-)。
正如在评论中提到的(以及一个已被删除的仅链接的答案)，有一些备选方案，包括但不限于：
- 香草JavaScipt：
- 其他库，其中一些在你可能不需要jquery.com/：上列出
总评
用户体验
您没有说明规范是否是分配/任务的一部分，或者只是您想出的东西，但是UX可以通过鼠标单击而不是加载页面等事件触发提示和Ajax请求来改进。
如果实现了这样的更改，那么明智的做法是将DOM引用缓存在变量中，而不是每次查询DOM。
var weatherEl = document.getElementById('weather');
var descEl = document.getElementById('desc');
var tempEl = document.getElementById('temp');
//function to prompt
//AJAX response callback
function ajaxResponse(data) {
//parse data
//...
weatherEl.innerHTML = data.weather[0].description;
descEl = data.weather[0].description;
tempEl.innerHTML = data.main.temp + "°C";
}这样，行可以更短，DOM不会每次被查询，而且您可能会消除那些赋值的变量，然后只使用一次。
也许模板系统将有助于改进更新DOM元素的过程，而不必单独更新每个项。
处理其他响应和错误
上面的代码似乎没有(优雅地)处理除成功调用API端点之外的任何响应。当用户在API不识别的城市中键入时，则返回404响应。如果您继续使用jQuery库，那么可以指定一个.fail()回调(请参阅$.getJSON()示例文档来处理这个问题。此外，如果发生服务器错误，则可能返回5xx响应。
此外，代码假定data.weather将是一个数组，并且至少有一个元素。如果其中任何一个都不是真的，会发生什么？虽然这似乎是不可信的，但它可能是可能的，也是值得防范的。
额外库
代码包括mousetrap.js和moment.js --我认为它们对应于库鼠夹和MomentJS，但代码似乎没有使用这些库。除非不包括其他代码使用这些库，否则可以删除这些库，以节省用户加载页面的时间。
https://codereview.stackexchange.com/questions/214121
复制相似问题
腾讯云开发者
