jquery template.js前端模板引擎

作为现代应用，ajax的大量使用，使得前端工程师们日常的开发少不了拼装模板，渲染模板

在刚有web的时候，前端与后端的交互，非常直白，浏览器端发出URL，后端返回一张拼好了的HTML串。浏览器对其进行渲染。html中可能会混有一些php(或者php中混有一些html)。在服务端将数据与模板进行拼装，生成要返回浏览器端的html串。

这与我们现在做一个普通网页没什么区别。只不过现在，我们更常使用模板技术来解决前后端耦合的问题。

前端使用模板引擎，在html中写一些标签，与数据与逻辑基本无关。后端在渲染的时候，解析这些标签，生成HTML串，如smarty。其实前端与后端的交互在服务端就已经有一次了。

下面是自己敲的案例,非常直观来渲染前端页面,可以复制来看看

可以参照GitHub上面来看https://github.com/BorisMoore/jquery-tmpl

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
         #container{
             width: 400px;
             min-height: 300px;
             background-color: lightgreen;
             margin: auto;
             padding: 10px;
             text-align: center;
         }
         li{
             list-style: none;
             text-align: left;
         }

     </style>
     <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
     <script type="text/javascript" src="js/template.js"></script>
     <script id="weather" type="text/html">
         {{if weather}}
             {{each weather as value}}
                 <div>
                     <span>日期:{{value.date}}</span>
                     <ul>
                         <li>白天天气:{{value.info.day[1]}}</li>
                         <li>白天温度:{{value.info.day[2]}}</li>
                         <li>白天天气:{{value.info.day[3]}}</li>
                         <li>白天天气:{{value.info.day[4]}}</li>
                     </ul>
                     <ul>
                         <li>夜间天气:{{value.info.night[1]}}</li>
                         <li>夜间温度:{{value.info.night[2]}}</li>
                         <li>夜间天气:{{value.info.night[3]}}</li>
                         <li>夜间天气:{{value.info.night[4]}}</li>
                     </ul>
                 </div>
             {{/each}}
         {{/if}}
     </script>
     <script type="text/javascript">
         $(function(){
             $("#query").click(function(){
                 var code=$("#city").val();
                 $.ajax({
                     url : 'http://cdn.weather.hao.360.cn/api_weather_info.php',
                     data:{app:'hao360',code:code},
                     jsonp:'_jsonp',
                     jsonpCallback:'abc',
                     dataType:'jsonp',
                     success:function(data){
                         var html=template('weather',data);
                         $("#info").html(html);
                     }

                 })
             })
         })

     </script>
 </head>
 <body>
 <div id="container">
    <select id="city">
        <option value="101010100">北京</option>
        <option value="101020100">上海</option>
        <option value="101280101">广州</option>
        <option value="101280601">深圳</option>
    </select>
    <input type="button" value="查询" id="query">
    <div id="info"></div>
 </div>
 </body>
 </html>