模板引擎doT.js

作为一名前端攻城师，经常会遇到从后台ajax拉取数据再显示在页面的情境，一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面！

<!-- 显示区域 -->
<div id="testid"></div>
<script type="text/javascript">
var testjson={"name":"张三","age":31,"fun":"吃东西"};//假设是后台拉取的数据
document.getElementById("testid").innerHTML="<p>"+
                                                "<span>姓名："+testjson.name+"</span>"+
                                                "<span>年龄："+testjson.age+"</span>"+
                                                "<span>爱好："+testjson.fun+"</span>"+
                                           "</p>";
</script>

这样不但写起来很麻烦，必须保证每一个引号正确，特别是如果数据里还有单双号的时候，还要注意单双引号混用，或者用转义，效率很低下，很容易出错，后面有接触到知道有JS模板引擎像百度的baiduTemplate(百度)\artTemplate（腾讯）\juicer（淘宝）\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate，在网上几翻选择，我还是选择了doT.js,它的大小只有4KB，渲染性能很好，而且直接支持原生的写法，不用依赖别的库，就像它官网写的一样：The fastest + concise javascript template engine，唯一的缺点就是报错让人不太理想。下面就让我们来一起了解下它的用法吧，让数据渲染飞起来吧，呵呵！


1,最常规用法{{=it.attr}}

<!-- 要显示的区域 -->
<div id="testid"></div>
<script type="text/x-dot-template" id="useType0">//模板存放区域 修改type类型，以免会被解析成js    <p>        <span>姓名：{{=it.name}}</span>        <span>年龄：{{=it.age}}</span>        <span>爱好：{{=it.fun}}</span>    </p></script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson={"name":"张三","age":31,"fun":"吃东西"},//定义要渲染数据，一般是从后台ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

得到的结果如下：


2,循环数组{{~}}

<!-- 要显示的区域 -->
<div id="testid"></div>
<!-- 模板存放区域 修改type类型，以免会被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <ul>
        {{~it:value:index}}
        <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{=value.fun}}</span></li>
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"张三","age":31,"fun":"吃东西"},
        {"name":"李四","age":24,"fun":"上网"},
        {"name":"王五","age":70,"fun":"散步，跑步"}
    ],//定义要渲染数据，一般是从后台ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

得到的结果如下：


3,条件渲染{{？}}{{？？}}，相当于原生的if else if

<!-- 要显示的区域 -->
<div id="testid"></div>
<!-- 模板存放区域 修改type类型，以免会被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <ul>
        {{~it:value:index}}
            {{?!value.age}}
                <li><span>姓名：{{=value.name}}</span><span>年龄：年龄数据缺失</span><span>爱好：{{=value.fun}}</span></li>
            {{??!value.fun}}
                <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：无趣的人</span></li>
            {{??}}
                <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{=value.fun}}</span></li>
            {{?}}
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"张三","age":31,"fun":"吃东西"},
        {"name":"李四","fun":"上网"},
        {"name":"王五","age":70}
    ],//定义要渲染数据，一般是从后台ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

得到的结果如下：


4,编码渲染{{!}},主要是为了防止代码注入以保障安全，如传入一个HTML片段或js片段，它会以字符串的形式渲染

<!-- 要显示的区域 -->
<div id="testid"></div>
<!-- 模板存放区域 修改type类型，以免会被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <ul>
        {{~it:value:index}}
            {{?value.bz}}
            <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{!value.html}}</span></li>
            {{??}}
            <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{=value.html}}</span></li>
            {{?}}
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
    ],//定义要渲染数据，一般是从后台ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

得到的结果如下：


5,支持共用模块定义{{##def.}}定义，{{#def.}}引用模块

<!-- 要显示的区域 -->
<div id="testid"></div>
<!-- 模板存放区域 修改type类型，以免会被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <!-- 模块定义0 -->
    {{##def.togeter0:
        <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{!value.html}}</span></li>
    #}}
    <!-- 模块定义1 -->
    {{##def.togeter1:
        <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{=value.html}}</span></li>
    #}}
    <ul>
        {{~it:value:index}}
            {{?value.bz}}
                <!-- 引用模块0 -->
                {{#def.togeter0}}
            {{??}}
                <!-- 引用模块1 -->
                {{#def.togeter1}}
            {{?}}
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
    ],//定义要渲染数据，一般是从后台ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

得到的结果如下：

注：模块定义也可以一个json数据定义，再在生成模板函数函数的时候传入即可，示例如下，其中tmpljson就是在外面以json定义的模块：

<!-- 要显示的区域 -->
<div id="testid"></div>
<!-- 模板存放区域 修改type类型，以免会被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <!-- 模块定义0 -->
    {{##def.togeter0:
        <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{!value.html}}</span></li>
    #}}
    <!-- 模块定义1 -->
    {{##def.togeter1:
        <li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span><span>爱好：{{=value.html}}</span></li>
    #}}
    <ul>
        {{~it:value:index}}
            {{?value.bz===true}}
                <!-- 引用模块0 -->
                {{#def.togeter0}}
            {{??value.bz===false}}
                <!-- 引用模块1 -->
                {{#def.togeter1}}
            {{??}}
                <!-- 引用传入的模块 -->
                {{#def.testmode}}
            {{?}}
        {{~}}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false},
        {"name":"李四","age":24,"html":"<b>哈哈</b>"}
    ],//定义要渲染数据，一般是从后台ajax拉取
        tmpljson={"testmode":"<li><span>姓名：{{=value.name}}</span><span>年龄：{{=value.age}}</span></li>"}//以json格式定义模块
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML,undefined,tmpljson);//生成模板方法,传入了json定义的模块
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

得到的结果如下：


5,用原生的循环，条件渲染，这也是doT.js的一大吸引我的特点

<!-- 要显示的区域 -->
<div id="testid"></div>
<!-- 模板存放区域 修改type类型，以免会被解析成js -->
<script type="text/x-dot-template" id="useType0">
    <!-- 模块定义0 -->
    {{##def.togeter0:
        <li><span>姓名：{{=itz.name}}</span><span>年龄：{{=itz.age}}</span><span>爱好：{{!itz.html}}</span></li>
    #}}
    <!-- 模块定义1 -->
    {{##def.togeter1:
        <li><span>姓名：{{=itz.name}}</span><span>年龄：{{=itz.age}}</span><span>爱好：{{=itz.html}}</span></li>
    #}}
    <ul>
        {{ for(var i=0;i<it.length;i++){ }}
            {{ var itz=it[i]; }}
            {{ if(itz.bz){ }}
                <!-- 引用模块0 -->
                {{#def.togeter0}}
            {{ }else{ }}
                <!-- 引用模块1 -->
                {{#def.togeter1}}
            {{ } }}
        {{ } }}
    </ul>
</script>
<!-- 引入js文件 -->
<script type="text/javascript" src="doT.min.js"></script>
<script>
    /*基本用法*/
    var testjson=[
        {"name":"张三","age":31,"html":"<b>呵呵</b>","bz":true},
        {"name":"李四","age":24,"html":"<b>哈哈</b>","bz":false}
    ],//定义要渲染数据，一般是从后台ajax拉取
        tmpltxt=doT.template(document.getElementById("useType0").innerHTML);//生成模板方法
    document.getElementById("testid").innerHTML=tmpltxt(testjson);//数据渲染
</script>

得到的结果如下：

doT.js的国外的一个模板引擎，学习资料并不是特别多，没有中文文挡，在些记录只为想学doT.js的人而英文又不是特别好的人提供一个学习了解的地方，我了解的平时用到的也就这么多，如果有更好的全用方法，欢迎留言交流学习，如文章中有错误说的不对的地方，望留意指正，一起学习一起进步！晚安！！


模板引擎doT.js

时间： 2024-10-23 11:55:10

模板引擎doT.js的相关文章

发布一个开源极致的javascript模板引擎tpl.js

tpl.js(大家直接去https://git.oschina.net/tianqiq/tpl.js这个上面看) 简介 tpl.js是一个比较极致(极小,极快,极简单)的js模板引擎,可以在各种js环境中使用. 特性 1. 使用js作为模板语言,几乎无学习成本 2. 小巧,速度快到极致 3. 极简的语法,模板书写非常流畅 4. mit开源,无限制 语法说明 简述 tpl.js中模板语法中以行为单一,分为js行语句,和输出行语句.顾名思义,js行语句是编译时候会当做js执行的语句, 而输出行语句,

JavaScript模板引擎artTemplate.js——结语

再次首先感谢模板的作者大神,再次放出github的地址:artTemplate性能卓越的js模板引擎 然后感谢博客园的一位前辈,他写的handlebars.js模板引擎教程,对我提供了很大的帮助,也是由此自己写了一份简单的artTemplate.js的总结. 由于这次是工作期间匆忙中写的,所以有些不完善的地方,后续会继续补充的.

Javascript模板引擎mustache.js详解

mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可.不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中. 1. 从一个简单真实的需求讲起 目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前

art-template web模板引擎引入JS函数

art-template语法 可以在模板引擎中加入自定义的函数; template.defaults.imports.LocalShortDate = LocalShortDate; 在模板引擎中的用法: {{rec.add_time|LocalShortDate}} 这样就可以在模板引擎中使用函数了 原文地址:https://www.cnblogs.com/hool/p/11527697.html

JS 模板引擎 Handlebars.js 中文说明

Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切. Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Handlebars中,并开始使用Handlebars所提供的更丰富的功能. 开始 Handlebars模板看起来就像是正常的Html,并使用了嵌入的 handlebars 表达式. <div class="entry"> <h1>{{title}}</h1>

javascript模板引擎artTemplate.js——template()方法

template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染函数. 示例一如下: <div id="content"></div> <script src="../js/template.js" type="text/javascript" charset="utf-8

javascript模板引擎template.js使用

到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中,我们非常有用. 模板逻辑语法开始与结束的界定符号为<% 与%>,若<%后面紧跟=号则输出变量内容. 然后页面上就会展现: 原文地址:https://www.cnblogs.com/weiyf/p/9060520.html

&lt;script id=&quot;nav_template&quot; type=&quot;text/x-handlebars-template&quot;&gt; JS的模板引擎 Handlebars.js 模板引擎

http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/

Javascript库，前端框架（UI框架），模板引擎

JavaScript库:JQuery,undoscore,Zepto 纯Javascript语言封装, 前端框架(UI框架):Bootstrap,Foundation,Semantic UI,Pure.css 前端框架.UI框架,或者叫UI模板 HTML + CSS + (JavaScript)? 模板引擎: 叫HTML模板引擎?  模板文件(HTML)+(CSS)?+数据(JSON) =输入=> 模板引擎  =输出=>HTML (客户端)前端模板引擎(渲染),(服务器)后端模板引擎(渲染)