首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

高效javascript模板引擎——doT.js原理及应用

2013年08月09日 发布 阅读(441) 作者:懒炖
什么是Javascript模板引擎 ?

随着WEB的发展,以及MVC模式的广泛应用。Javascript模板引擎逐渐被重视,它是数据与模板分离的关键环节。这么关键的一个环节,自然就引发的性能的择优。市面上现在有很多javascript模板引擎

目前完成的一个基于MVC模式的管理系统,综合考虑后,选择了doT.js,这篇文章主要也是介绍下它的优势及使用方法。

为什么选择doT.js,?

1、不依赖任何框架和库(如jQuery),纯原生的写法

2、doT.js文件小,文件大小只有4K,压缩后可达到2K。相比juicer(12k)和artTemplate(8k)小很多

3、doT语法默认使用{{ }} 作为语法分隔符,但它可以自定义。(我的项目中就把它改成<% %>形式了)

因此我们可以轻松扩展一下,就可以让它支持子模板(模板里面嵌套模板),如下

主模板用<% %>分隔,子模板用 {{ }}分隔

  1. //扩展,如果要在模板里嵌入子模板,请用{{ }}替换<% %>,在使用子模板前,应用templateChild替换{{ }}成<% %>
  2. doT.templateChild = function(template){
  3. return template.replace(/{{/gi, "<%").replace(/}}/gi, "%>");
  4. };

4、渲染数据过程中,如出错,有错误提示。很容易使用firebug找出错误所在处

5、在模板里面使用doT.js,完全可以用javascript原生语法来写,这让模板编写变得很容易,也不会让前端开发工程师又得学新的语法。

因此我们可以直接在模板里使用javascript的for循环、for in循环、if else、 等语名来输出我们的数据、或者使用var 定义变量,或用function定义函数就随你所欲啦

doT.js语法分隔符的自定义如何修改:

修改前,默认为{{ }}

  1. templateSettings: {
  2. evaluate: /\{\{([\s\S]+?\}?)\}\}/g,
  3. interpolate: /\{\{=([\s\S]+?)\}\}/g,
  4. encode: /\{\{!([\s\S]+?)\}\}/g,
  5. use: /\{\{#([\s\S]+?)\}\}/g,
  6. useParams: /(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,
  7. define: /\{\{##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\}\}/g,
  8. defineParams: /^\s*([\w$]+):([\s\S]+)/,
  9. conditional: /\{\{\?(\?)?\s*([\s\S]*?)\s*\}\}/g,
  10. iterate: /\{\{~\s*(?:\}\}|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\}\})/g,
  11. varname: 'it',
  12. strip: true,
  13. append: true,
  14. selfcontained: false
  15. }

修改后,为<% %> 即把修改前的{{变成\<\%,}}变成\%>就可以了。

  1. templateSettings: {
  2. evaluate: /\<\%([\s\S]+?\}?)\%\>/g,
  3. interpolate: /\<\%=([\s\S]+?)\%\>/g,
  4. encode: /\<\%!([\s\S]+?)\%\>/g,
  5. use: /\<\%#([\s\S]+?)\%\>/g,
  6. useParams: /(^|[^\w$])def(?:\.|\[[\'\"])([\w$\.]+)(?:[\'\"]\])?\s*\:\s*([\w$\.]+|\"[^\"]+\"|\'[^\']+\'|\{[^\}]+\})/g,
  7. define: /\<\%##\s*([\w\.$]+)\s*(\:|=)([\s\S]+?)#\%\>/g,
  8. defineParams: /^\s*([\w$]+):([\s\S]+)/,
  9. conditional: /\<\%\?(\?)?\s*([\s\S]*?)\s*\%\>/g,
  10. iterate: /\<\%~\s*(?:\%\>|([\s\S]+?)\s*\:\s*([\w$]+)\s*(?:\:\s*([\w$]+))?\s*\%\>)/g,
  11. varname: 'it',
  12. strip: true,
  13. append: true,
  14. selfcontained: false
  15. }

看到上面的代码,我们来分析一下各个参数的意义:

evaluate: 即<% %>,分隔符的定义

interpolate:即<%= %>,直接输出某个数据

encode: 即<%! %> ,英文解释:for interpolation with encoding

use: 即 <%# %> ,编译时输出。英文解解释: for compile-time evaluation/includes and partials

userParams: 编译时使用参数

define: 即 <%## %>,编译时定义

defineParams:编译时定义参数

conditional:即 <%?it.name %> <%??it.location%> <??><?>条件语句开始符

iterate:即<%~ %>,对数据的循环

varname:这里为“it”,这个特别要注意,这是我们传到模板中的数据的名称,如果传{“name”:”jerman”},那么调用name值就用it.name

doT.js如何与数据结合,生成带数据的html代码呢 ?

调用方法:

  1. //template是模板文件(即string)
  2. var doTtmpl = doT.template(template);
  3. //data数据文件,一般为json格式
  4. //html就是数据与模板生成好的html代码了,你可以使用jQuery.html()方法或原生innerHTML写入到任何div容器中了
  5. var html = doTtmpl(data);
  6. //简单调用
  7. var html = doT.template(template)(data)

使用doT.js制作模板的一些语法:

假设有数据 {“name”:”jerman”,”location”:”shenzhen”,”work”:”Front-end development engineer”,”number”:[1,2,3,4,5,6]},

分隔符自定义为:<% %>

varname值就为默认“it”

分隔符的使用

<% if(it.name){ %>
//分隔符里面我们可以使用原生的Javascript语法

我的名字叫<%=it.name%>

<%}%>

输出name值

<%= it.name%> 或使用 <%=it.companyname || it.name%>
//可以使用”||”判断数据是否存在,也可以使用条件语句: “? : “

条件语句

<%? it.name %>

Oh, I love your name, <%=it.name%>!

<%?? it.age === 0%>

Guess nobody named you yet!

<%??%> You are <%=it.age%> and still don’t have a name? <%?%>

循环输出数组

<%~data.system.Mains:value:index %>

<%=index%>:<%=value%>


<%~%>

对“片断”的支持

定义片断使用: <%##def.片断名称: #%>

输出片断使用: <%##def.片断名称%>

//定义一个片断joke

  1. <%##def.joke:
  2. 谁是<%=it.jermanName || "jerman"%>?
  3. #%>
  4. //定义一个片断snippet,并把片断joke插入进去
  5. <%##def.snippet:
  6. <div>Hi,<%=it.jakeName || "jake"%>,<%#def.joke%></div>
  7. #%> //输出片断sippet <%#def.snippet%>

doT英文参考资料:

http://olado.github.io/doT/

doT.js文件下载

https://github.com/olado/doT

目前版本为:1.0.0

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •