使用jquery-tmpl使JavaScript與HTML分離

時間 2019-11-17

標籤使用 jquery tmpl javascript html 分離欄目 JQuery 简体版

原文原文鏈接

背景：因爲對JavaScript字符串拼接JavaScript變量產生了反感，也想用用JavaScript模板庫，看了幾個，因爲時間緣由選擇了jQuery.tmpl.js,由於Visual Studio 對其的語法高亮支持。html

0. 下載 jQuery templates pluginjquery

1. 準備工做github

1.1 JSON數據ajax

JSON數據在這裏相似於「接口文檔」，明確哪些數據必須對應到HTML的哪一個位置，還有一些做爲判斷條件的字段，能夠根據字段不一樣的值來顯示不一樣的樣式；這裏採用一段經轉換（JSON.parse(/*JSON String*/)）好的數據json

 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 HTMLapp

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. JavaScriptthis

 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));