自己写的一个jquery模板引擎

转载 2011年10月17日 21:40: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(/\&gt;/ig, ">").replace(/\&lt;/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>

 

写一个属于自己的模板引擎【一】

参考文档《毛毛虫教你写一个属于自己的模板引擎》,自己也模仿着写一遍,原谅我比较懒,具体详解请百度原作者作品。 stupid.class.php ...
  • u013806814
  • u013806814
  • 2016-05-16 01:54:39
  • 474

一个自己写的PHP模板引擎

这是一个自己写的编译型的模板引擎(不包括缓存部分)贴上代码。有问题可以随时跟帖。 单文件版:JTemplate.class.php   1 2 3...
  • judyge
  • judyge
  • 2016-06-25 22:19:22
  • 501

自己写个jQuery

自己写个jQuery
  • u013861109
  • u013861109
  • 2016-10-23 00:22:45
  • 1227

由浅入深:自己动手开发模板引擎——置换型模板引擎(四)

受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术。本系列文章将会带您由浅入深的全面认识模板引擎的概念、设计、分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎。关于...
  • judyge
  • judyge
  • 2016-07-29 16:50:29
  • 491

由浅入深:自己动手开发模板引擎——解释型模板引擎

受到群里兄弟们的竭力邀请,老陈终于决定来分享一下.NET下的模板引擎开发技术。本系列文章将会带您由浅入深的全面认识模板引擎的概念、设计、分析和实战应用,一步一步的带您开发出完全属于自己的模板引擎。关于...
  • judyge
  • judyge
  • 2016-07-29 16:51:49
  • 664

自己写的一个Java渲染模板引擎:SimpleV

Java渲染模板框架有很多,著名的有Velocity等。鉴于最近在学习java,所以自己实现了一个。...
  • neuxq
  • neuxq
  • 2016-12-30 10:07:21
  • 1533

前端JQuery强大的物理模板引擎

未经允许,不得转载! 水平有限,欢迎指正交流! artTemplate的库分为两种,一个是template.js,一个是template-native.js,第一个是简洁语法版,第二个是原生语法(...
  • ime33
  • ime33
  • 2017-05-18 17:33:18
  • 2452

怎样写一个模板引擎

模板引擎是Web开发中通常用于动态生成网页的工具,例如PHP常用的Smarty、Python的Jinja、Node的Jade等。本文通过Python(Approach: Building a toy ...
  • wjy397
  • wjy397
  • 2016-05-12 08:33:42
  • 202

php模板引擎smaty之介绍

php模板引擎smaty的介绍
  • Dunran_ru
  • Dunran_ru
  • 2016-08-28 12:49:25
  • 756
收藏助手
不良信息举报
您举报文章:自己写的一个jquery模板引擎
举报原因:
原因补充:

(最多只允许输入30个字)