自己写的一个jquery模板引擎(json比较好用)-优快云博客

本文介绍了一个简单的JS模板引擎实现案例，该引擎用于将JSON数据填充到HTML模板中，并通过具体示例展示了如何使用该模板引擎处理数据绑定及条件判断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是一个未完成的项目，缺乏对if等的支持，希望大家能提供一下参考的意见，让我把它写完

js代码部分
1

/// <reference path="jquery-1.3.2-vsdoc.js" />
2

var json =

{ "result": "success", "total": 3, "page": 1, "rows": [

{ "QuestionID": 45233, "QUserName": "游客", "Question": "我80多岁坐轮椅的母亲买了一张首都体育馆看排球的门票，她担心残疾人能否进去看，有没有残疾人看球平台和通道", "Answer": "您好！我们这里没有代理奥运会门票，您可以通过其他方式查询。感谢您对大麦票务的支持！", "QDate": "2008-8-18 9:44:20", "ADate": "2008-8-18 9:48:27" },

{ "QuestionID": 39672, "QUserName": "游客", "Question": "在左安路到首都体育馆公交几路?", "Answer": null, "QDate": "2008-3-3 10:25:34", "ADate": null },

{ "QuestionID": 36942, "QUserName": "游客", "Question": "西站到北京体育馆公交几路啊\r\n", "Answer": "您好：从北京西站南广场出发,乘坐122路下行(北京西站东-北京站东),在永定门东换乘36路环线(左安路-左安路),抵达北京体育馆. 约16.41公里就可以抵达北京体育馆。感谢您对中国票务在线的支持！", "QDate": "2007-12-20 18:05:15", "ADate": "2007-12-21 9:40:26"}] };
3

(function($)

{
4

jQuery.fn.jsonTemplateEngine = function(jsonData, options)

{
5

var setting = jQuery.extend(

{
6

exLeft: "<#", //匹配的左边限定符
7

exRight: "#>", //匹配的右边限定符
8

tempDate: "TemplateData", //jquery存储data所用的名称
9

appTo: null, //其他需要显示的对象，如果为空，则自身输出
10

showTime: 500,
11

callback: function()

{ } //处理完成后的自定义函数
12

}, options);
13

if (this.size() <= 0 || jsonData.length <= 0)

{ return this; }
14

var TemplateHtml;
15

if (this.data(setting.tempDate) != undefined)

{
16

TemplateHtml = this.data(setting.tempDate);
17

}
18

else

{
19

TemplateHtml = this.html();
20

this.data(setting.tempDate, TemplateHtml);
21

}
22

var _self = setting.appTo == null ? this : jQuery(setting.appTo); //如果是appTo追加到其他对象里面
23

_self.empty().hide();
24

//针对<,>被编码过后的处理问题
25

TemplateHtml = TemplateHtml.replace(/\>/ig, ">").replace(/\</ig, "<");
26

var specials = ["$", "^", "?", "/", ".", "*", "+", "?", "|", "(", ")", "[", "]", "{", "}", "\\"];
28

var escapeRegex = new RegExp("(\\" + specials.join("|\\") + ")", "g");
29

var escapedLeft = setting.exLeft.replace(escapeRegex, "\\$1");
30

var escapedRight = setting.exRight.replace(escapeRegex, "\\$1");
31

var re = new RegExp(escapedLeft + "(\\w+)" + escapedRight, "ig");
33

var arr = TemplateHtml.match(re);
34

jQuery.each(jsonData, function(i)

{
35

var temp = TemplateHtml;
36

jQuery.each(arr, function(n)

{
37

var obj = arr[n].replace(new RegExp(escapedLeft, "ig"), "").replace(new RegExp(escapedRight, "ig"), "");
38

temp = temp.replace(new RegExp(escapedLeft + obj + escapedRight, "ig"), eval("jsonData[" + i + "]." + obj));
39

//temp = temp.replace(new RegExp(escapedLeft + "\/if[\\s\\S]*?\/end" + escapedRight, "ig"), "11");
40

var funs = temp.match(new RegExp(escapedLeft + "\/if[\\s\\S]*?\/end" + escapedRight, "ig"));
41

alert(funs);
42

});
43

_self.append(temp);
44

});
46

if (jQuery.isFunction(setting.callback))

{ setting.callback(); } //执行函数
47

_self.show(setting.showTime);
48

return _self;
49

}
50

})(jQuery);
51

$(document).ready(function()

{
53

//$("#alert1").click(function() {
54

$("#temp").jsonTemplateEngine(json.rows,

{ "callback": function()

{ $("#output").html(json.total); } });
55

//});
56

});

页面代码部分
    <div id="temp" style="display:none">
    <h5><span class="fL"><b><#QUserName#></b> 提问：</span><span class="gray fR">提问于<#QDate#></span></h5>
           <div class="queCon">
              <p><#Question#></p>
               <#/if(<#Answer#>!=null)#><p><#Answer#></p>
               <#/else#>
               <p class="reaCon">大麦票务客服  回答于<span class="f10"><#ADate#></span></p>
              </div> <#/end#>
            </div>

<div id="alert1" style="margin-left:100px"><a href="javascript:void(0)">加载一下</a></div>
<div id="output"></div>

转载于:https://www.cnblogs.com/lyfeixue/archive/2009/05/05/1449974.html