art-template特性

  1. 性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)
  2. 支持运行时调试,可精确定位异常模板所在语句(演示)
  3. 对 NodeJS Express 友好支持
  4. 安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)
  5. 支持include语句
  6. 可在浏览器端实现按路径加载模板(详情)
  7. 支持预编译,可将模板转换成为非常精简的 js 文件
  8. 模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选
  9. 支持所有流行的浏览器
    <mark>案例使用原生语法</mark>

art-template.js下载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气预报-hao360接口</title>
    <link rel="stylesheet" href="css/weather.css">
    <script src="js/jquery-3.3.1.js"></script>
    <!-- 
        使用前段模板框架,生成html
        art-template
        1.引入art-template的包
        2.根据art-template的语法,编写模板
        3.使用模板
     -->
    <script src="js/template-native-debug.js"></script>
    <!-- 
    创建模板
    1.模板必须定义到一对<script>标签内
 -->
    <script id="wtTemplate" type="text/html">
     <li>         
         <h2><%= date %></h2>         
         <div class="day">
             <h3>白天天气</h3>
             <% for(var i=1;i<info.day.length;i++){ %>
                 <p><%= info.day[i] %></p>              
                 <% } %>
         </div>
         <div class="night">
             <h3>晚上天气</h3>
             <% for(var i=1;i<info.night.length;i++){ %>
                    <p><%= info.night[i] %></p>              
                    <% } %>
         </div>
     </li>
 </script>
    <script type="text/javascript">
        //声明回调函数
        function callback(data) {
            //1.拆解data数据 
            $('#wtInfo').html('');//清空已有的天气数据
            var wt = data.weather;
            //2.循环生成5个li标签,并且把数据渲染到li标签里
            $.each(wt, function (i, e) {
                var tag = template('wtTemplate', e);
                //3.把生成的li标签插入到ul里
                $('#wtInfo').append(tag);
            });

        }
        $(function () {
            //注册按钮btn点击事件
            $('#btn').on('click', function () {
                //1.获取选中的城市ID
                var cityCode = $('#selCity option:selected').val();
                //2.拼接出请求URL
                var url = 'https://cdn.weather.hao.360.cn/sed_api_weather_info.php?code=' + cityCode;
                //3.动态的在页面合适位置创建一个<script>标签,让它使用jsonp的原理,发出对后端数据接口的请求
                var tag = '<script src=' + url + '>';
                $('body').append(tag);
            });
        })


    </script>
</head>

<body>
    <div class="wt_container">
        <div class="city">
            <select id="selCity">
                <option value="101180201">大安阳</option>
                <option value="101010100">北京</option>
                <option value="101180101">郑州</option>
                <option value="101250101">长沙</option>
                <option value="101050101">哈尔滨</option>
                <option value="101130101">***</option>
                <option value="101280101">广州</option>
            </select>
            <button id="btn">查看天气</button>
        </div>
        <div class="weather">
            <ul id="wtInfo">

            </ul>
        </div>
    </div>

</body>

</html>

<mark>样式</mark>

*{
    margin: 0;
    padding: 0;
}
.wt_container{
    width: 800px;
    height: 360px;
    margin: 100px auto;
}
.wt_container .weather{
    width: 100%;
    height: 100%;
}
.wt_container .city{
    text-align: center;
    padding: 10px;
    font-family: "microsoft yahei";
}
.city button{
    padding: 10px 20px;
    background-color: #0e7fdf;
    border-radius: 4px;
    outline: 0;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
}
.city select{
    width: 200px;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
}
.weather ul{
    list-style: none;
    width: 100%;
}
.weather li{
    width: 140px;
    height: 100%;
    padding: 8px;
    margin: 0 1px;
    border: 1px solid #fff;
    float: left;
    font-size: 14px;
    color: #222;
    text-align: left;
    background-color: #50b2fb;
}
.weather li:hover{
    border-color: #333;
}
.weather li h2{
    text-align: center;
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #666;
}
.weather li div{
    padding: 0px 10px;
}
.weather li h3{
    font-size: 16px;
    padding: 10px 0;
}
.weather li p{
    font-size: 14px;
    padding: 2px;
}