摘要: 下面介绍下dot的用法,其实用法非常简单 dot的API里有以下几种标签 

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 我的上篇博文详细介绍了jquery tmpl,因为我想在我的项目里引入JS模版,所以就研究了一下,有人告诉我这个引擎的速度很慢,于是我又去搜集了一下资料,结果发现jquery tmpl是最慢的,于是乎我就放弃了,对比下来发现胜出的有以下几种artTemplate,dot,juicer三个从速度上胜出(chrome),但是在IE下最终选择了dot,dot的文件是最小只有5K(没有压缩),并且在IE里也是最快的。

 

下面介绍下dot的用法,其实用法非常简单

 

dot的API里有以下几种标签

 

//{{ }} JS原生态代码

//{{= }} 变量运算,赋值 {{=it.f1 + it.f2}}

//{{! }} 赋值并且编码

//{{# }} 

//{{## #}} 

上面两个没有仔细研究,基本我也不用它

//{{? }} 条件语句

 

//{{~ }} 循环

 

其实条件语句和循环可以用{{if}}{{else if}}{{for(var i=0;i<length;i++)}}来代替,也就是JS的原生态代码

 

那么我们用到的只有前三种标签就完全够用了,下面给出一个例子,就很容易看明白了

 

 

 

复制代码

<script id="tmpl-demo" type="text/tmpl">

        {%if($data.suc){%}

            {%for (var i = 0; i < $data.users.length; i++) { %}

                {%var user=$data.users[i];%}

                <p style="margin-bottom:10px;">

                    <span style="margin-left:10px;">{%= user.Name%}</span>

                    {%! user.url%}{%=global%}

                </p>

            {%}%}

            {%each($data);%}

        {%}%}

    </script>

<script type="text/javascript">

function demo() {

    var fn = doT.template($("#tmpl-demo").html());

    $("#demo").append(fn(data));

}

</script>

<p id="demo"></p>

复制代码

 

 

 

 

可能是有人疑问,不是{{}}吗,其实dot允许自定义包括的标签,这样就会让你使用自己喜欢的模版标签

 

如,他的本来的设置是这样的,是不是很容易修改

 

复制代码

 var doT = {

            version: '1.0.1',

            templateSettings: {

                evaluate: //{/{([/s/S]+?(/}?)+)/}/}/g,

                interpolate: //{/{=([/s/S]+?)/}/}/g,

                encode: //{/{!([/s/S]+?)/}/}/g,

                use: //{/{#([/s/S]+?)/}/}/g,

                useParams: /(^|[^/w$])def(?:/.|/[[/'/"])([/w$/.]+)(?:[/'/"]/])?/s*/:/s*([/w$/.]+|/"[^/"]+/"|/'[^/']+/'|/{[^/}]+/})/g,

                define: //{/{##/s*([/w/.$]+)/s*(/:|=)([/s/S]+?)#/}/}/g,

                defineParams: /^/s*([/w$]+):([/s/S]+)/,

                conditional: //{/{/?(/?)?/s*([/s/S]*?)/s*/}/}/g,

                iterate: //{/{~/s*(?:/}/}|([/s/S]+?)/s*/:/s*([/w$]+)/s*(?:/:/s*([/w$]+))?/s*/}/})/g,

                varname: '$data',

                varoption: '$item',

                strip: true,

                append: true,

                selfcontained: false

            },

            template: undefined, //fn, compile template

            compile: undefined  //fn, for express

        }, global;

复制代码

 

 

我修改完就是下面这样的,非常简单

 

复制代码

var doT = {

        version: '1.0.1',

        templateSettings: {

            evaluate: //{/%([/s/S]+?(/}?)+)/%/}/g,

            interpolate: //{/%=([/s/S]+?)/%/}/g,

            encode: //{/%!([/s/S]+?)/%/}/g,

            use: //{/%#([/s/S]+?)/%/}/g,

            useParams: /(^|[^/w$])def(?:/.|/[[/'/"])([/w$/.]+)(?:[/'/"]/])?/s*/:/s*([/w$/.]+|/"[^/"]+/"|/'[^/']+/'|/{[^/}]+/})/g,

            define: //{/%##/s*([/w/.$]+)/s*(/:|=)([/s/S]+?)#/%/}/g,

            defineParams: /^/s*([/w$]+):([/s/S]+)/,

            conditional: //{/%/?(/?)?/s*([/s/S]*?)/s*/%/}/g,

            iterate: //{/%~/s*(?:/%/}|([/s/S]+?)/s*/:/s*([/w$]+)/s*(?:/:/s*([/w$]+))?/s*/%/})/g,

            varname: '$data',

            varoption: '$item',

            strip: true,

            append: true,

            selfcontained: false

        },

        template: undefined, //fn, compile template

        compile: undefined  //fn, for express

    }, global;

复制代码

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_7655.html