自己写的一个jquery模板引擎
来源:互联网 发布:java程序自我介绍 编辑:程序博客网 时间:2024/05/02 03:01
还是一个未完成的项目,缺乏对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, "<");2627 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");3132 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);4445 });46 if (jQuery.isFunction(setting.callback)) { setting.callback(); } //执行函数47 _self.show(setting.showTime);48 return _self;49 }50})(jQuery);5152$(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>
- 自己写的一个jquery模板引擎
- 一个自己写的PHP模板引擎
- 写一个属于自己的模板引擎【一】
- 自己写的一个Java渲染模板引擎:SimpleV
- 写一个自己的引擎
- 写一个自己的引擎
- 写一个自己的游戏引擎
- 怎样写一个模板引擎
- 自己写的一个JQUERY焦点图
- 打造一个自己的模板引擎(一)
- 打造一个自己的模板引擎(二)
- 打造一个自己的模板引擎(三)
- 打造一个自己的模板引擎(四)
- 写了一个简单实用的PHP模板引擎
- 自己动手写一个简单的php模板引擎
- 开发自己的模板引擎
- 自己写的一个简陋的C++队列模板
- 自己写的一个简陋的C++栈模板
- 采用OSGi框架开发项目的十个问题
- 在VC6.0中用GDI+调用png图片实现半透明渐变的特效窗口
- 四、Python:类
- 一次JQuery性能优化实战
- javascript学习(2)——变量
- 自己写的一个jquery模板引擎
- 配置SuperMap iServer 2.0的在线脚本开发
- 如何在IE,Firefox,Opera浏览器中支持页面弹出并回传数据
- STL学习之vector(1)
- Android移植之文件系统总结
- ASP.NET中实现访问链接的静态地址映射
- 几种JAVA加密算法
- ExtJS学习笔记 - onReady
- e71 510.21.009 权限破解