APICloud - doT 模板

介绍

一个适用于混合开发的模板引擎
最近在做一个Apicloud的webApp,使用了Apicloud提供的api.js和doT.js

1.特点是快,小,无依赖其他插件,可适用于webApp
2.常用语法

{{ }}     for evaluation 模板标记符
{{= }}    for interpolation 输出显示，默认变量名叫it
{{! }}    for interpolation with encoding 编码后输出显示
{{? }}    for conditionals 条件分支，if条件的简写
{{~ }}    for array iteration 遍历数组

//使用步骤
数据源  ： json
模板 ：   数据显示的格式
区域 ：   数据显示的位置
调用方试 ： 填充数据

3.在Safari模板引擎渲染速度测试

image

4.doT.js框架下载链接 https://github.com/olado/doT

示例

1.模板

    <!--赋值-->
    <script id="interpolationtmpl" type="text/x-dot-template">
        <div>{{=it.name}}</div>
        <div>dot框架</div>
    </script>
    <!--循环map-->
    <script id="evaluationtmpl" type="text/x-dot-template">
        {{ for(var prop in it) { }}
        <div>键:{{= prop }}对应的值:{{= it[prop] }}</div>
        {{ } }}
    </script>
    <!--数组-->
    <script id="arraystmpl" type="text/x-dot-template">
        {{~it.interests:value:index}}
        <div>下标：{{= index }}对应的值：{{= value }}!</div>
        {{~}}
    </script>
    <!--条件-->
    <script id="conditionstmpl" type="text/x-dot-template">
        {{? it.name }}
        <div>name存在时走到这里, {{=it.name}}!</div>
        {{?? !it.age === 0}}
        <div>age等于零时走到这里!</div>
        {{??}}
        You are {{=it.age}}
        {{?}}
    </script>

2.区域（最终显示的位置）

    <div>
        ------赋值------
    </div>
    <div id="interpolation"></div>
    <div>
        ------循环------
    </div>
    <div id="evaluation"></div>
    <div>
        ------数组------
    </div>
    <div id="arraysation"></div>
    <div>
        ------条件------
    </div>
    <div id="condition"></div>

3.数据源与调用方式

    <script>    
            /**
             *  数据源  赋值
             */
            var dataInter = {
                "name" : "shuangqi1991",
                "age" : 88
            };
            //调用方式
            var interText = doT.template($api.text($api.byId('interpolationtmpl')));
            $api.html($api.byId('interpolation'), interText(dataInter));
            /**
             * 数据源 数组
             */
            var dataEval = {
                "name" : "shuangqi1991",
                "age" : 88,
                "interests" : ["basketball", "hockey", "photography"],
                "contact" : {
                    "email" : "shuangqi1991@qq.com",
                    "phone" : "999999999"
                }
            };
            //调用方式
            var evalText = doT.template($api.text($api.byId('evaluationtmpl')));
            $api.html($api.byId('evaluation'), evalText(dataEval));
            /**
             *  数据源 数组
             */
            var arrEval = {
                "interests" : ["basketball", "hockey", "photography"]
            };
            //调用方式
            var arrText = doT.template($api.text($api.byId('arraystmpl')));
            $api.html($api.byId('arraysation'), arrText(arrEval));
            /**
             *  数据源 条件
             */
            var dataCondition = {
                "name" : "ss",
                "age" : 2
            };

            //调用方式
            var conText = doT.template($api.text($api.byId('conditionstmpl')));
            $api.html($api.byId('condition'), conText(dataCondition));
        </script>

说明：

亲测在模板里{{= XXX}}、或者{{? XXX}}、即在"{{}}"内是可以直接使用全局变量以及方法名、 以及运算符
1.比如 {{= hostUrl + it.imageUrl}} 这里的hostUrl 为一个全局变量
2.{{= sayHello() }}这里sayHello()是一个有返回值的方法
3.使用三目运算符 {{? it.open ? "true":"false"}} 则条件真的时候返回true， 假的时候返回false

作者：Sean_Shi
链接：https://www.jianshu.com/p/f671201df514
来源：简书