基于jquery ui的模板-优快云博客

本文介绍了一个基于jQuery的模板引擎实现，支持格式化输出和自定义函数，通过实例展示了如何使用此模板引擎来动态生成HTML内容。

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

最近工作不怎么忙看啦先jquery ui和exitjs，由感而发写啦个基于jquery的模板隐形，请大家多多指教

代码：

var self=this;

            self._execute=false;   //修正时间2010-4-23
            if(this.options.autoExecute){
                this.execute();
            }
        },
        destroy: function(){},
        widget: function() {
       return this.returnElement;
    },
    //设置和获取配置项
    _setOption: function(key, value){
        var self=this;
        $.Widget.prototype._setOption.apply(self, arguments);
    },

    applyTemplate: function(values){
        var self=this,
                options=self.options,
                userF=self.disableFormats !== true,
                fm=options.fm;
        if(options.compile){
            return self.compiled(values);
      }
        function fn(m, name, format, args){
            if(format&&userF){
                if (format.substr(0, 5) == "this.") {
                    return self.call(format.substr(5),values[name],values);
                }else if(format.substr(0, 1) == "."){
                    var temp=values[name][format.substr(1)];
                    return temp !==undefined ? temp : "";
                }
                else{
                    if (args) {
                        var re = /^\s*['"](.*)["']\s*$/;
                        args = args.split(',');
              for(var i = 0, len = args.length; i < len; i++){
                  args[i] = args[i].replace(re, "$1");
              }
              args = [values[name]].concat(args);
                    }else{
                        args = [values[name]];
                    }
                    return fm[format].apply(fm, args);
                }
            }else{
                return values[name] !== undefined ? values[name] : "";
            }
        }
        return options.html.replace(re, fn);
    },

    compile: function(){
        var self=this,
                options=this.options,
                useF = options.disableFormats !== true,
                fm=options.fm,
                body;
        function fn(m, name, format, args){
         if(format && useF){
            args = args ? ',' + args : "";
            if(format.substr(0, 1) != "."){
                if(format.substr(0, 5) != "this."){
                    format = "fm." + format + '(';
                }else{
                  format = 'this.call("'+ format.substr(5) + '", ';
                  args = ", values";
                }
            }
         }else{
             args= ''; format = "(values['" + name + "'] == undefined ? '' : ";
         }
         var tmp="";
         if(format.substr(0, 1) == "."){
             tmp="',values['"+name+"']['"+format.substr(1)+"'],'";
         }else{
             tmp="'," + format + "values['" + name + "']" + args + "),'";
         }
         return tmp;
      }
      body = ["this.compiled = function(values){ return ['"];
      body.push(options.html.replace(/\\/g, '\\\\').replace(/(\r\n|\n)/g, '\\n').replace(/'/g, "\\'").replace(re, fn));
      body.push("'].join('');};");
      body = body.join('');
      eval(body);
      return self;
    },
    call : function(fnName, value, allValues){
        return this.options[fnName](value, allValues);
    },
    execute: function(){
        var self=this;
        if(!self._execute){
            self.returnElement.html(self.tempElement);
            self._execute=true;
        }
        return self;
    }
    });
    $.extend($.ui.template, {
        version: "1.0"
    });
})(jQuery);

示例：

js代码：

(function($){
var data={
name:'ning cheng zeng',
age:25,
kids:{
name:'aaaaaaaaaaaa',
age:1
}
};
var tpl="<p>name:{name} </p><p>age:{age:f} </p><p>kids:name:{kids:.name} </p><p>name:{name:this.aa} </p>";
var format={
f:function(a,b){
return a+":"+(b-5)
}
}
$('h1').template({
html:tpl,
data:data,
fm:format,
autoExecute:false,
compile:true,
aa:function(a){
return a;
}
});
})(jQuery);

html代码:

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Templates Example</title>
         <script type="text/javascript" src="../jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../src/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../src/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../src/Template.js"></script>
    <script type="text/javascript" src="../src/XTemplate.js"></script>
    <script language="javascript" src="templates.js"></script>
</head>
<body>

<h1>Templates</h1>

</body>
</html>