家好，不知道大家听说过 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 创建一个简单的天气查询应用。

一、看看应用长啥样

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

• 在输入框里输入城市的英文名称，就会很直观的展示相关城市的天气信息，
• 如果输入的城市信息已经查询过了，则会有信息提示已经查询过此城市信息。
• 如果输入的城市信息不正确或者没找到匹配的城市，应用则会提示未查询到相关信息。
• 查询过的城市信息都会以列表的形式在这里展示。

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

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

<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

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

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

• flexbox 及 grid（网格）布局
• 媒介查询，完成响应式的支持
• 使用 fetch api 完成 AJAX 请求
• 常用的JS对DOM的操作
• ES6一些常用的新语法

三、 项目前的准备工作

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

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

下图是我在网络上找到的图标，喜欢的可以私信我进行获取。

四、创建HTML结构

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

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

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

初始化的 HTML 结构如下：

<section 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>
</section>
<section class="ajax-section">
  <div class="container">
    <ul class="cities"></ul>
  </div>
</section>

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

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

<li class="city">
  <h2 class="city-name" data-name="...">
    <span>...</span>
    <sup>...</sup>
  </h2>
  <span class="city-temp">...<sup>°C</sup></span>
  <figure>
    <img class="city-icon" src="..." alt="...">
    <figcaption>...</figcaption>
  </figure>
</li>

<sup> 用来展示上角标文本。

五、添加基础的样式

创建完基本的结构后，我们需要用 CSS 进行美化，如下代码所示我们定义了全局的颜色自定义变量，以及一些基础的样式外观，示例代码如下：

:root {
  --bg_main: #0a1f44;
  --text_light: #fff;
  --text_med: #53627c;
  --text_dark: #1e2432;
  --red: #ff1e42;
  --darkred: #c3112d;
  --orange: #ff8c00;
}
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
}
 
button {
  cursor: pointer;
}
  
input {
  -webkit-appearance: none;
}
  
button,
input {
  border: none;
  background: none;
  outline: none;
  color: inherit;
}
 
img {
  display: block;
  max-width: 100%;
  height: auto;
}
 
ul {
  list-style: none;
}
 
body {
  font: 1rem/1.3 "Roboto", sans-serif;
  background: var(--bg_main);
  color: var(--text_dark);
  padding: 50px;
}

六、添加主要的个性化样式

基础样式完成后，我们需要为两个 Section 区域添加样式

1、Section #1 Styles

首先我们需要完善下 Section 区域一的样式，当前屏幕大于 >700px，界面如下图所示：

当前屏幕小与等于700px时，应用名称、输入框、按钮各占一行，界面如下图所示：

完后的样式代码如下所示：

.top-banner {
  color: var(--text_light);
}
 
.heading {
  font-weight: bold;
  font-size: 4rem;
  letter-spacing: 0.02em;
  padding: 0 0 30px 0;
}
 
.top-banner form {
  position: relative;
  display: flex;
  align-items: center;
}
 
.top-banner form input {
  font-size: 2rem;
  height: 40px;
  padding: 5px 5px 10px;
  border-bottom: 1px solid;
}
 
.top-banner form input::placeholder {
  color: currentColor; 
}
 
.top-banner form button {
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  padding: 15px 20px;
  margin-left: 15px;
  border-radius: 5px;
  background: var(--red);
  transition: background 0.3s ease-in-out;
}
 
.top-banner form button:hover {
  background: var(--darkred);
}
 
.top-banner form .msg {
  position: absolute;
  bottom: -40px;
  left: 0;
  max-width: 450px;
  min-height: 40px;
}
 
@media screen and (max-width: 700px) {
  .top-banner form {
    flex-direction: column;
  }
   
  .top-banner form input,
  .top-banner form button {
    width: 100%;
  }
 
  .top-banner form button {
    margin: 20px 0 0 0;
  }
   
  .top-banner form .msg {
    position: static;
    max-width: none;
    min-height: 0;
    margin-top: 10px;
  }
}

2、Section #2 Styles

这部分区域，我们将用到网格布局进行展示城市天气信息列表，当然这部分区域也是要支持响应式的。

如果当前屏幕大于1000px，我们一行将展示4个城市信息，如下图所示：

当屏幕在 (>700px and ≤1000px) 时，显示三列；当屏幕 (>500px and ≤700px) 时；显示两列；当屏幕 (≤500px) 时，则显示一列。

以下是基于媒介属性的网格布局：

.ajax-section {
  margin: 50px 0 20px;
}
 
.ajax-section .cities {
  display: grid;
  grid-gap: 32px 20px;
  grid-template-columns: repeat(4, 1fr);
}
 
@media screen and (max-width: 1000px) { 
  .ajax-section .cities {
    grid-template-columns: repeat(3, 1fr);
  }
}
 
@media screen and (max-width: 700px) {
  .ajax-section .cities {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
@media screen and (max-width: 500px) {  
  .ajax-section .cities {
    grid-template-columns: repeat(1, 1fr);
  }
}

为了让每个城市信息的效果更加生动，类似个卡片，我们可以使用 ::after 伪元素，利用 bottom 属性添加一个背景阴影的效果。

在这个卡片上，当接口请求成功时，我们需要展示当前城市的名称、所属国家、温度及具体的天气，天气通过图标和文字结合的形式进行展示，如下所示：

.ajax-section .city {
 position: relative;
 padding: 40px 10%;
 border-radius: 20px;
 background: var(--text_light);
 color: var(--text_med);
}

.ajax-section .city::after {
 content: ’’;
 width: 90%;
 height: 50px;
 position: absolute;
 bottom: -12px;
 left: 5%;
 z-index: -1;
 opacity: 0.3;
 border-radius: 20px;
 background: var(--text_light);
}

.ajax-section figcaption {
 margin-top: 10px;
 text-transform: uppercase;
 letter-spacing: 0.05em;
}

.ajax-section .city-temp {
 font-size: 5rem;
 font-weight: bold;
 margin-top: 10px;
 color: var(--text_dark);
}

.ajax-section .city sup {
 font-size: 0.5em;
}

.ajax-section .city-name sup {
 padding: 0.2em 0.6em;
 border-radius: 30px;
 color: var(--text_light);
 background: var(--orange);
}

.ajax-section .city-icon {
 margin-top: 10px;
 width: 100px;
 height: 100px;
}

七、添加 JavaScript

通过以上的操作我们把应用的样式弄完了，接下来我们开始完成核心的脚本代码。

1、当按钮提交时

当用户点击按钮或者按回车键时，我们的程序应该这么做：

• 阻止提交按钮的默认行为，防止刷新页面。
• 获取输入框输入的城市信息。

代码的基础结构如下所示：

const form = document.querySelector(".top-banner form");

form.addEventListener("submit", e => {
 e.preventDefault();
 const inputVal = input.value;
});

接下来我们来处理，如何展示城市列表的数据信息。

2、执行 AJAX 请求

假设第一次进入页面，城市列别还没相关信息，这种情况我们只需要发送 OpenWeatherMap 的 API 请求即可，遵循 API 文档，我们只需要传递申请的 API 的 key，城市名称即可，如下段代码所示：

const apiKey = "YOUR_OWN_KEY";
const inputVal = input.value;
 
...
 
const url = `https://api.openweathermap.org/data/2.5/weather?q=${inputVal}&appid=${apiKey}&units=metric`;

基于文档说明，我们通过JS自带的 fetch() 请求方法，处理AJAX请求，具体的示例代码如下：

...
 fetch(url)
  .then(response => response.json())
  .then(data => {
    // do stuff with the data
  })
  .catch(() => {
    msg.textContent = "Please search for a valid city ";
  });
  

下图为我们请求过来的数据格式：

3、编写单个城市卡片组件

数据请求成功后，我们就需要处理数据，展示城市的天气信息，填充到城市列表展示区域，相关代码如下所示：

const { main, name, sys, weather } = data;
const icon = `https://openweathermap.org/img/wn/${
  weather[0]["icon"]
}@2x.png`;
 
const li = document.createElement("li");
li.classList.add("city");
const markup = `
  <h2 class="city-name" data-name="${name},${sys.country}">
    <span>${name}</span>
    <sup>${sys.country}</sup>
  </h2>
  <div class="city-temp">${Math.round(main.temp)}<sup>°C</sup>
  </div>
  <figure>
    <img class="city-icon" src=${icon} alt=${weather[0]["main"]}>
    <figcaption>${weather[0]["description"]}</figcaption>
  </figure>
`;
li.innerHTML = markup;
list.appendChild(li);

这段代码我们两点需要说明下：

• 在这里 icon 图标变量，我们用的是 API 接口提供的，在后面的代码中我们需要替换成我们个性化的图标
• 在 .city-name 元素里面，我们添加 data-name 自定义属性，其值包含了 cityName,countryCode，主要方便我们处理重复请求已搜索过的城市，稍后的代码会处理。

4、重置表单输入接口请求完后，我们需要将表单输入框置空，提示信息置空，输入焦点重新聚焦到输入框。示例代码如下：

msg.textContent = "";
form.reset();
input.focus();

5、替换成自己的个性化图标

如下图所示，以下接口自带的几种图片我们需要一一对应成我们自己个性化的图标，名称也保持一致，放到我们的图片文件夹即可:

对应代码需要做相应的修改，如下所示：

//BEFORE
const icon = `https://openweathermap.org/img/wn/${
  weather[0]["icon"]
}@2x.png`;
 
//AFTER
const icon = `images/${
  weather[0]["icon"]
}.svg`;

6、阻止相同城市请求

为了防止多次提交同一个城市的信息 ，我们需要进行去重，要不就会发生如下的效果，并不是我们期望的：

这是个糟糕的用户体验，除此之外，还需要处理一个情况，如果一个城市，比如 Athens，在希腊是雅典，在美国为雅典-克拉克县，这种情况不能认为是重复的请求，我们支持用逗号分隔输入，前面城市后面国家简写。

基于以上的去重需求，刚才前面提及到的自定义 data-name 就派上用场了，完后的代码如下所示：

...
 
//1
const listItems = list.querySelectorAll(".ajax-section .city");
const listItemsArray = Array.from(listItems);
 
if (listItemsArray.length > 0) {
  //2
  const filteredArray = listItemsArray.filter(el => {
    let content = "";
    //athens,gr
    if (inputVal.includes(",")) {
      //athens,grrrrrr->invalid country code, so we keep only the first part of inputVal
      if (inputVal.split(",")[1].length > 2) {
        inputVal = inputVal.split(",")[0];
        content = el.querySelector(".city-name span").textContent.toLowerCase();
      } else {
        content = el.querySelector(".city-name").dataset.name.toLowerCase();
      }
    } else {
      //athens
      content = el.querySelector(".city-name span").textContent.toLowerCase();
    }
    return content == inputVal.toLowerCase();
  });
   
  //3
  if (filteredArray.length > 0) {
    msg.textContent = `You already know the weather for ${
      filteredArray[0].querySelector(".city-name span").textContent
    } ...otherwise be more specific by providing the country code as well `;
    form.reset();
    input.focus();
    return;
  }
}

接下来，我来解释下上述代码的一些关键点：

• 首先我们需要判断城市展示列表是否为空，如果为空，我们直接进行AJAX请求，如果不为空，我们将触发检查逻辑。
• 接下来，我们需要判断用不是否输入了逗号分隔用于城市+国家的形式进行精准搜索，通过 data-name 属性进行判断是否有重复的城市。
• 如果检查到有重复的城市，代码逻辑就不进行AJAX请求，系统将会提示用户已经查询过此城市信息，并重置表单输入内容为空。

特殊逻辑说明：

Note #1: 如果你通过逗号的形式精确搜索时，如果国家简写不正确的化（两个字母简写，比如 athens,aa），API接口不会返回任何信息。如果你输多于三个字母的国家简写，而且没有意义（比如 athens,aaaa），API接口 则会不考虑逗号的部分，则按照城市的信息默认搜索，比如直接返回希腊的雅典。

Note #2: 如果一个城市属于多个国家，没有进行逗号精准搜索的话，API 接口也不会把所有相关国家的城市都罗列出来，只会显示一个城市而已。

7、最后贴上完整的 JS 代码

'use strict';
const form=document.querySelector(".top-banner form");
const input=document.querySelector(".top-banner input");
const msg=document.querySelector(".top-banner .msg");
const list=document.querySelector(".ajax-section .cities");
const apiKey="YOUR_OWN_KEY（你申请的APIKEY）";

form.addEventListener("submit",e=>{
   e.preventDefault();
   let inputVal=input.value;
   const  listItems=list.querySelectorAll(".ajax-section .city");
   const listItemsArray=Array.from(listItems);

   if(listItems.length>0){
       const filteredArray=listItemsArray.filter(el=>{
           let content="";
           if(inputVal.includes(",")){
               if(inputVal.split(",")[1].length>2){
                   inputVal=inputVal.split(",")[0];
                   content=el.querySelector(".city-name span").textContent.toLocaleLowerCase();
               }else{
                   content=el.querySelector(".city-name").dataset.name.toLowerCase();
               }
           } else{
               content=el.querySelector(".city-name span").textContent.toLowerCase();
           }
           return content===inputVal.toLowerCase();
       });
       if(filteredArray.length>0){
           msg.textContent=`Your already know the weather for
           ${filteredArray[0].querySelector(".city-name span").textContent}
           ... otherwise be more specific by providing the country code as well 
           `;
           form.reset();
           input.focus();
           return;
       }
   }

   //ajax here
    const url=`https://api.openweathermap.org/data/2.5/weather?q=${inputVal}&appid=${apiKey}&units=metric`;
    fetch(url)
        .then(response=>response.json())
        .then(data=>{
            const { main,name,sys,weather } =data;
            const icon=`images/${weather[0]["icon"]}.svg`;
            const li=document.createElement("li");
            li.classList.add("city");
            const markup=`
            <h2 class="city-name" data-name="${name},${sys.country}">
            <span>${name}</span>
            <sup>${sys.country}</sup>
            </h2>
            <div class="city-temp">
            ${Math.round(main.temp)}
            <sup>°C</sup>
            </div>
            <figure>
            <img class="city-icon" src="${icon}" alt="${weather[0]["description"]}"
            <figcaption>${weather[0]["description"]}</figcaption>
            </figure>
            `;
            li.innerHTML=markup;
            list.appendChild(li);
        })
        .catch(()=>{
            msg.textContent="please search for a valid city ";
        });
    msg.textContent="";
    form.reset();
    input.focus();
});

小节

到这里我们的代码终于完成了，是不是很长，希望你能看下去，建议你还是亲手动手实践一遍享受下代码实践的成就感，这个应用还有许多地方改需要改进，比如ajax的等待请求提示，输入格式的验证等等，有兴趣的可以自己尝试下。本示例大家可以点击 扩展链接 进行在线体验。

写完这篇原创文章已是凌晨12点多，从实践到写文章花了将近12个小时以上，如果你喜欢我的分享，麻烦给个关注、点赞加转发哦，你的支持，就是我分享的动力，后续会持续分享实践案例，欢迎持续关注。

什么我们需要天气应用程序？

功能丰富的天气预报应用程序可以为各个行业提供巨大价值。天气应用程序的一些值得注意的好处包括：

提供对当地天气状况和即将到来的天气预报的即时访问，从而节省您的时间。

提供有关当前和预期天气状况的实时通知。

帮助政府和地方政府为自然灾害做准备并挽救生命。

帮助农民采取预防措施。

促进全球旅行和旅游业。

提供清晰的天气预报，这对航空和物流业至关重要。

1、需要构建一个天气应用程序

要成功构建天气应用，您需要执行以下操作：

熟悉使用JavaScript（Node.js）

文本编辑器，例如记事本或IDE。我最喜欢的是Visual Studio。

访问可靠的天气API，例如ClimaCell

访问地图服务

HTML，CSS和Bootstrap知识

一旦准备好这些，就可以了。

ClimaCell Weather API概述

ClimaCell是受欢迎的天气提供商，可通过易于使用的API 提供超准确的历史天气数据以及天气预报。

它的预测功能可帮助对天气敏感的行业中的用户在管理其业务时保持领先。

由MicroWeather提供支持的ClimaCell API提供了可操作的天气洞察力，该洞察力来自二十多种天气参数。用户还可以生成可视天气地图图层，以增强他们的体验。

建设过程

在本节中，我将向你展示如何创建一个预报应用程序，用户可以在其中输入名称或名称来输入他们的城市或任何其他位置，并从ClimaCell API获取天气数据。API通过返回数据来响应请求，然后将数据显示给用户。

安装NodeJS并创建一个新项目

在此项目中，我们将使用Node.js —一种最流行的JavaScript运行时环境。Node.js帮助开发人员创建快速的Web应用程序。它具有用于创建高级Web应用程序的各种库和模块。

如果您的设备上没有Node.js，则可以从官方网站进行安装。

安装后，我们将使用此命令初始化npm-Node.js使用的默认数据包管理器。

$ npm init

这将创建我们的项目，因此将提示您输入一些详细信息，例如软件包名称，描述，Git存储库等。

接下来，我们安装运行项目所需的模块。为了生成Node.js应用程序框架，我们使用express-构建Node.js Web应用程序的框架。

$ npm install express

安装Express框架可帮助您运行服务器，处理客户端请求以及将正确的HTML模板与响应连接。

接下来，我们还将安装unirest-一个简单而强大的解决方案，允许您请求库。

这将帮助我们向ClimaCell API发出请求并处理响应。

使用此命令：npm install unirest

至此，我们已经安装了必要的模块，并且项目已准备就绪。

接下来，我们使用快速生成器工具生成一个天气应用程序。在命令行上，键入以下内容：express --view=pug weather-app-nodejs

你现在应该在命令行上具有如下视图：

获取ClimaCell Weather API

要访问ClimaCell API，您需要在其页面上注册一个帐户。

创建帐户后，登录其Microweather API仪表板，如下所示：

在仪表板上，单击引用以检查API端点。如您所见，ClimaCell API有许多端点，包括短期预报，每小时预报，实时数据等等。

值得一提的是，每个端点都有自己的代码段。例如，这是获取实时天气数据的Node.js代码片段。

你可以在开发人员资源部分中了解有关使用ClimaCell API的更多信息。

修改应用程序

要调用ClimaCell API，我们首先需要编辑一些文件。在这里，您可以使用记事本或在IDE中打开项目目录，以便于编辑。它应显示如下：

我们通过将bootstrap添加到layout.pug开始修改文件。打开views目录，然后将此代码段插入文件中。

接下来，我们通过将下面的代码段添加到index.pug文件中来创建一个表单。

注意我们如何使用HTTP post方法将数据发送到服务器。上面的代码还将操作参数设置为天气路线，并将输入的文本添加为​​“ city”。

还添加了用于获取天气的输入按钮。

现在，我们在表单下方创建一个HTML表，以显示获取的天气记录。

插入上面的代码片段将创建一个如下表：

调用ClimaCell API

要将请求发送到ClimaCell API，我们必须安装request模块。

npm i request --save

接下来，我们在index.js文件中添加ClimaCell API凭据。在您的路线目录中打开文件，并添加在ClimaCell仪表板上获得的API密钥：

以下是添加API凭据的代码：

添加API凭据后，我们将更新索引路由。这是通过替换index.js文件中“ /”路由中的代码部分来完成的 。

我们首先在index.js中创建天气路线。

此代码段使输入表单中的数据可以发布到索引路由。用户输入城市名称后，将使用请求对象将其分配给城市变量。

然后将该URL附加城市名称和ID，并将请求发送到ClimaCell API。

ClimaCell API服务器响应以JSON文件形式返回，然后将其解析并馈送到输出模板。

例如，如果用户正在寻找波士顿的天气预报，则该应用将返回以下内容：

注-此示例中的温度以开尔文（Kelvin）显示，等于50°F或10°C。

添加地图以可视化您的数据

您可以将交互式地图集成到预测应用程序中，以增强用户体验。这可以通过为Web应用程序使用第三方地图服务提供程序来实现。

Mapbox就是这样一种工具，可帮助开发人员为其应用程序创建出色的天气图。它与任何天气应用程序无缝集成。

要使用Mapbox，请在其网站上注册并查看其API。有针对Android，iOS，Web和Unity的集成。在这种情况下，我们选择Web集成作为我们的工具。

我们可以安装Mapbox CDN或使用模块捆绑器。让我们使用模块捆绑器。

第一步是安装软件包。

npm install Mapbox-gl –save

接下来，通过在<head>中包含此代码段，将GL JS CSS文件添加到HTML文件中。

<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />

现在，我们可以将地图添加到我们的应用程序中。为此，请使用下面的代码段。

你可以通过替换地图来选择放置地图的位置

“ CONTAINER_ELEMENT_ID”。

这是使用Mapbox生成的示例地图：

下一步是什么？

至此，很多工作已经完成，你的应用程序可以使用ClimaCell API获取任何城市的天气预报。

但是，你可以考虑向应用程序添加更多交互功能或扩展其功能。

你可能需要添加以下的操作：

添加搜索功能。

改善用户界面的外观。

通过ID或名称查询应用程序。

显示目标城市及其相应ID的列表。

添加参数以显示其他天气数据。

集成实时通知和警告信号。

如你所见，基本的应用程序构建过程非常简单明了。通过遵循上述过程以利用天气API的功能，即使是初学者级的开发人员也可以在几分钟内启动并运行天气应用程序。