art-template模板引擎使用方法之一示例

  <h2>近两天天气情况h2>
  <div>
    <input type="text" id="province" value="河北">省
    <input type="text" id="city" value="邯郸">市
    <button id="btn">查询button>
  div>
  <table>
    <thead>
      <th>时间th>
      <th>空气th>
      <th>温度th>
      <th>风向th>
      <th>风力th>
    thead>
    <tbody id="tbody">tbody>
  table>
  
  <script type="text/html" id="list">
    {{each list}}
    <tr>
      <td>{{dateFormat($value.update_time)}}</td>
      <td>{{$value.weather}}</td>
      <td>{{$value.degree}}℃</td>
      <td>{{$value.wind_direction}}</td>
      <td>{{$value.wind_power}}级</td>
    </tr>
    {{/each}}
  script>
  <script src="./jsonp.js">script>
  <script src="./template-web.js">script>
  <script>
    // 日期处理格式
    function dateFormat(str) {
      // 20200510100000
      var arr = str.match(/\d{2}/g);
      return arr[0] + arr[1] + '年' + arr[2] + '月' + arr[3] + '日 ' + arr[4] + ':' + arr[5] + ':' + arr[6];

    }
    // 在模块引擎中模板中使用外部全局变量
    template.defaults.imports.dateFormat = dateFormat;
    // 点击按钮查询
    btn.onclick = function () {
      // jsonp请求腾讯天气
      jsonp({
        url: 'https://wis.qq.com/weather/common',
        data: {
          source: 'pc',
          weather_type: 'forecast_1h',
          province: province.value,
          city: city.value
        },
        success: function (data) {
          var html = template('list', { list: data.data.forecast_1h })
          tbody.innerHTML = html;
        }
      })
    }
    btn.onclick();
  script>

解释：