使用jquery-tmpl使JavaScript与HTML分离
背景：由于对JavaScript字符串拼接JavaScript变量产生了反感，也想用用JavaScript模板库，看了几个，由于时间原因选择了jQuery.tmpl.js,因为Visual Studio 对其的语法高亮支持。
0. 下载 jQuery templates plugin
jQuery Templates plugin vBeta1.0.0
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 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 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));- 上一篇 »js加载顺序 javascript在html中的加载顺序
- 下一篇 »，一CSS三种插入方式