使用jquery-tmpl使JavaScript与HTML分离

浏览数：25 / 时间：2015年06月08日

背景：由于对JavaScript字符串拼接JavaScript变量产生了反感，也想用用JavaScript模板库，看了几个，由于时间原因选择了jQuery.tmpl.js,因为Visual Studio 对其的语法高亮支持。

0. 下载 jQuery templates plugin

1. 准备工作

1.1 JSON数据

JSON数据在这里类似于“接口文档”，明确哪些数据必须对应到HTML的哪个位置，还有一些作为判断条件的字段，可以根据字段不同的值来显示不同的样式；这里采用一段经转换（JSON.parse(/*JSON String*/)）好的数据

 1 var MockResponseFromServer = {
 2     code: ‘1‘, // ‘1‘表示获取数据成功
 3     data: [
 4     {
 5         productid: "001",
 6         productname: "Lumia 930",
 7         productnumber: "GD1502001",
 8         productpic: "http://www.globalmediahk.com/uploads/magazine/15/3cc3ca3f-a403-42d9-a850-b9d08c88fd48.jpg",
 9         memberprice: 35,
10         price: 35,
11         quantity: 0
12     },
13     {
14         productid: "002",
15         productname: "Lumia 520",
16         productnumber: "GD1502002",
17         productpic: "http://blog.orange.pl/uploads/media/b/9/c/5/3/189d1cfd42952ad73b4d91c4700016151d0",
18         memberprice: 35,
19         price: 35,
20         quantity: 0
21     }],
22     msg: ‘成功‘
23 };

1.2 HTML

HTML 转换为 x-jquery-tmpl,{{}} ,${} {{if}}具体语法请参见插件的示例文档，这些符号在Visual Studio 下有语法高亮

 1 <script id="productItemTmpl" type="text/x-jquery-tmpl">
 2         {{if quantity=== 0}}
 3         <div class="gshow-box gshow-box-disabel">
 4             {{else}}
 5             <div class="gshow-box">
 6                 {{/if}}
 7                 <div class="gshow-box">
 8                     {{if quantity === 0 }}
 9                     <div class="disabelPanel"></div>
10                     {{/if}}
11                     <a href="${productDetailUrl}" target="_blank">
12                         <img class="gshow-box-img lazy" data-original="${productpic}" alt="${productname}">
13                     </a>
14                     <a class="g-title" href="${productDetailUrl}" target="_blank">￥${productname}</a>
15                     <div class="clearfix">
16                         <label class="fl">
17                             ￥${memberprice}
18                             <span class="discount">￥${price}</span>
19                         </label>
20                         <span class="fr">
21                             共<span class="color-red">${quantity}</span>件
22                         </span>
23                     </div>
24                 </div>
25     </script>

2. 编写HTML

 1 <body>
 2     <div class="container">
 3         <h1>产品列表</h1>
 4         <hr />
 5         <div id="ProductContainer" class="qg-gshow-temp clearfix">
 6         </div>
 7     </div>
 8     <script src="jquery-1.7.2.js"></script>
 9     <script src="jquery.lazyload.js"></script>
10     <script src="jquery.tmpl.js"></script>
11     <script src="IAPP.js"></script>
12 </body>

3. JavaScript

 1 (function ($) {
 2     var IAPP = {};
 3 
 4     IAPP.ProductTmpl = ‘ProductTmpl‘;
 5     IAPP.$ProductContainer = $(‘#ProductContainer‘);
 6 
 7     function setLazyloadImg() {
 8         /// <summary>
 9         /// 设置图片延迟加载
10         /// </summary>
11         $(‘img.lazy‘).lazyload({
12             effect: ‘fadeIn‘
13             , failure_limit: 10
14             , threshold: 50
15             , event: ‘scroll‘
16         });
17     }
18 
19     IAPP.loadDataByAjax = function (handler) {
20         /// <summary>
21         /// AJAX请求产品JSON数据
22         /// </summary>
23         /// <param name="handler">success回调处理函数</param>
24         $.ajax({
25             type: ‘POST‘,
26             url: ‘url/getdata.ashx‘,
27             data: { cmd: ‘productlist‘ },
28             dataType: ‘json‘,
29             success: handler,
30             error: function () {
31                 // error handler
32                 console && console.info(‘error:some message‘);
33                 // 当AJAX请求发生错误时，用模拟数据测试模板
34                 handler(MockResponseFromServer);
35             }
36         });
37     };
38 
39     IAPP.loadDataByAjaxHandler = function (result) {
40         /// <summary>
41         /// 回调函数
42         /// </summary>
43         /// <param name="result">response from server</param>
44         var l = 0, // 用于保存产品的个数
45          data, // 产品列表（Array）
46          entityObj; // 用于保存产品实体对象
47 
48         if (!result) { throw ‘no response from server‘; }
49 
50         if (result.code && result.code === ‘1‘) {
51             result.data && (data = result.data);
52             if (data && data.length) {
53                 l = data.length;
54                 while (l--) {
55                     entityObj = data.shift();
56                     // 产品链接
57                     entityObj[‘productDetailUrl‘] = ‘./product.aspx?pid=‘ + entityObj.productid;
58 
59                     $.tmpl(IAPP.ProductTmpl, entityObj).appendTo(IAPP.$ProductContainer);
60                 }
61 
62                 setLazyloadImg(); // 延迟加载
63             }
64         } else {
65             console && console.error(result.msg);
66         }
67     };
68 
69     ({
70         initTmpl: function () {
71             /// <summary>
72             /// 初始化jQuery.tmpl
73             /// </summary>
74 
75             // $.template(name/*模板名称*/,tmpl/*模板字符串*/)
76             // 说明：使用此方式可以根据模板名访问模板以达到复用模板
77             $.template(IAPP.ProductTmpl, $(‘#productItemTmpl‘).html());
78         },
79         initData: function () {
80             /// <summary>
81             /// 获取数据
82             /// </summary>
83             IAPP.loadDataByAjax(IAPP.loadDataByAjaxHandler);
84         }, init: function () {
85             /// <summary>
86             /// 所有的初始化动作
87             /// </summary>
88             this.initTmpl();
89             this.initData();
90         }
91     }).init();
92 
93 }(jQuery));