使用 Vanilla JavaScript 框架创建一个简单的天气应用

大家好，不知道大家听说过 Vanilla JavaScript 这款框架吗？最近我在浏览国外的一些技术网站时，这个词出现的频率实在是太高了，好多框架都宣称自己是基于 Vanilla JavaScript。那到底什么是 Vanilla JavaScript 呢？

vanilla-js.com 官方网站是这样介绍的：Vanilla JS is a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications.

Vanilla JS 是一个快速、轻量级、跨平台的JavaScript框架。我们可以用它构建强大的JavaScript应用程序。

大家是不是觉得很这个框架很强大呢，哈哈，不和大家卖关子了，Vanilla JavaScript 就是原生JavaScript。现在做前端项目，大家是不是都在用vue、react这样的框架呢，遇到一些复杂的功能和效果，就是想寻找是否有相关的插件呢，很少想到手工实现呢？大家是否想过这些问题，如果没有这些前端框架，我们是否还能顺利完成项目呢？

本篇文章，我将和大家一起使用原生 JavaScript 创建一个简单的天气查询应用。

一、看看应用长啥样

这是一款界面十分简洁大气的天气查询应用，大概的需求是这样的：

• 在输入框里输入城市的英文名称，就会很直观的展示相关城市的天气信息，

• 如果输入的城市信息已经查询过了，则会有信息提示已经查询过此城市信息。

• 如果输入的城市信息不正确或者没找到匹配的城市，应用则会提示未查询到相关信息。

• 查询过的城市信息都会以列表的形式在这里展示。

大概就是这些简单的需求，具体界面长啥样，如下图所示：

交互效果，请看下段视频展示：

是不是很漂亮呢，那还不赶紧和我一起动手完成这个应用。

二、本示例将会用到的知识点

• flexbox 及 grid（网格）布局

• 媒介查询，完成响应式的支持

• 使用 fetch api 完成 AJAX 请求

• 常用的JS对DOM的操作

• ES6一些常用的新语法

三、 项目前的准备工作

1、申请天气查询API首先我们需要寻找一个天气查询的API，方便我们集成。这样的API市面上比较多，比如阿里云市场就可以申请，不过好像是收费的，调用起来还需要后端配合，为了让大家快速上手，我推荐大家去国外 https://openweathermap.org/ 这个网站申请一个免费的API，之所以用这个，调用方便，通过URL地址传参就能进行调用，虽然高级功能需要付费，但是做个简单的天气查询应用，免费功能已经够用。

2、下载天气图标这个项目中，我们需要用天气图标直观的展示天气情况，这里我建议用SVG格式的图标，主要原因是矢量的形式，不失真，还有一个原因就是我们能根据自己的需要很方便的改变颜色。

下图是我在网络上找到的图标，喜欢的可以去这里下载：https://pan.baidu.com/s/1XS5Ua5c5SgUPiTqK_iXw7w 密码:041m

四、创建HTML结构

基本工作准备完后，我们就开始动手实践吧!

我们先定义两个<p>区域，第一个 p 区域，包含了应用名称、一个表单和一个提示信息文本。提示信息文本默认是没内容的，只有在特定的条件下才能显示，比如城市名称不正确或者重复输入已查询过的城市信息。

第二个 p 区域用来展示已查询过的城市列表，默认的情况，这个区域是没有查询信息的，只有输入城市信息，成功调用天气API接口时，才能显示相关信息。

初始化的 HTML 结构如下：

<p class="top-banner">
  <div class="container">
    <h1 class="heading">Simple Weather App</h1>
    <form>
      <input type="text" placeholder="Search for a city" autofocus>
      <button type="submit">SUBMIT</button>
      <span class="msg"></span>
    </form>
  </div>
</p>
<p class="ajax-p">
  <div class="container">
    <ul class="cities"></ul>
  </div>
</p>

autofocus 页面初始化时，输入焦点默认聚焦输入表单

你会注意到第二个 p 区域里，没有城市列表信息，这部分的结构，是通过JS代码动态生成的，基本结构如下：