前言
我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示。最简单的方法就是通过jQuery去遍历数据拼接html,如以下:
但是,这种通过拼接html的方式使用在比较简单的结构还好;如果结构比较复杂,拼接的时候还得注意引号之间的嵌套,而且代码维护起来也比较困难,代码可读性也差。因此使用模板引擎可以帮我们很好的避免这个问题。
常用的模板引擎有artTemplate、Jade、 Mustache、doT.js、juicer等,此编文章仅介绍doT.js的使用。
简介官方Github:https://github.com/olado/doT
doT.js快速,体积小并不依赖其他插件。
使用方法 配置doT.templateSettings默认配置:
doT.templateSettings = { evaluate: /{{([sS]+?)}}/g, interpolate: /{{=([sS]+?)}}/g, encode: /{{!([sS]+?)}}/g, use: /{{#([sS]+?)}}/g, define: /{{##s*([w.$]+)s*(:|=)([sS]+?)#}}/g, conditional: /{{?(?)?s*([sS]*?)s*}}/g, iterate: /{{~s*(?:}}|([sS]+?)s*:s*([w$]+)s*(?::s*([w$]+))?s*}})/g, varname: "it", strip: true, append: true, selfcontained: false };
如果你想使用自己的分隔符,可以根据自己需求修改doT.templateSettings中的正则。
以下是默认的分隔符列表:
{{ }}:用于求值(evaluate)
{{= }}:用于插值(interpolate)
{{! }}: 用于插值编码(encode)
{{# }}:用于编译时求值/包含局部模板(use)
{{## #}}:用于编译时定义(define)
{{? }}:用于条件语句(conditional)
{{~ }}:用于数组迭代(iterate)
其他说明
varname : 模板数据引用变量名
strip : 控制空白字符, true:全部去掉空格; false:保留空格
append : 性能优化设置。通过它调整性能,根据使用的 javascript 引擎和模板的大小,append 设置成 false,可能会产生更好的效果
模板编译函数function(tmpl, c, def)
tmpl : 模板文本
c : 自定义编译设置,如果为 null,用到 doT.templateSettings
def : 编译时求值的数据
默认情况下,调用此函数编译产生的方法有一个参数data,命名为it,即默认配置的varname。
插值(evaluation)用法:{{= }}
创建模板,默认情况下,模板中的数据用it作为引用,可修改配置中的varname来改变变量名;
使用:
var message = { msg: "Hello world.", code: 200 }; //使用doT.template(tplText)函数,tplText为模板文本 var tpl = doT.template($("#testTpl").text()); //某些浏览器可能会取不到模板内容,可用$("#testTpl").html() //传入数据获取html var html = tpl(message); console.log(html);
结果输出:
求值(evaluate)Hello world.200
用法:{{ }},可在表达式中使用js脚本
创建模板:
使用:
var result = { status: true, error: "" }; var tpl = doT.template($("#testTpl2").text()); var html = tpl(result); console.log(html);
结果输出:
条件语句(conditional)操作成功
用法:{{? }}
在上个 求值(evaluate) 例子中的模板恰好是条件判断,我们可以用{{? }}改写模板以达到一样的效果:
使用方法参考求值(evaluate)例子,最后输出html是一样的。
数组迭代(iterate)用法:{{~ }}
创建模板:
使用:
var data = { status: true, msg: "success", list: [{ id: 1, name: "zhangsan", email: "zhangsan@lwhweb.com" }, { id: 2, name: "lisi", email: "lisi@lwhweb.com" }] }; var tpl = doT.template($("#testTpl3").html()); var html = tpl(data); console.log(html);
结果输出:
编译时包含模板和编译时定义1 zhangsan zhangsan@lwhweb.com 2 lisi lisi@lwhweb.com
用法:{{# }}和{{## #}}
创建模板:
使用:
var work = { title: "完善项目一需求提取", content: "请研发部争取在月底前提取项目一需求", dealine: "2017-11-25 23:00" }; var def = { header: $("#testHeaderTpl").text(), body: $("#testPageTpl5").text() }; var tpl = doT.template($("#testBodyTpl").html(), null, def); var html = tpl(work); console.log(html);
结果输出:
工作内容:
以下使用"testHeaderTpl"模板内容:
标题:完善项目一需求提取
请研发部争取在月底前提取项目一需求截止时间:2017-11-25 23:00以下是编译时定义
更多用法可参考官方说明:http://olado.github.io/doT/
参考
http://olado.github.io/doT/
原文地址:https://www.lwhweb.com/2017/11/25/dot-js/
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92179.html
前言 我们在做前端开发时,经常需要根据后台返回的json数据动态生成html并插入到页面中显示。最简单的方法就是通过jQuery去遍历数据拼接html,如以下: var data = { list: [{ id: 1, name: zhangsan, email: zhangsan@lwhweb.co...
摘要:简介是一个轻逻辑模板解析引擎,它的优势在于可以应用在等多种编程语言中。这里主要是看中的应用。 mustache简介 Mustache 是一个 logic-less (轻逻辑)模板解析引擎,它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。这里主要是看JavaScript中的应用。Javascript 语言的模板引擎,目前流行有 Mustac...
摘要:置换型模板引擎的优点实现简单,缺点效率低,无法满足高负载的应用请求。用途百度词条模板引擎可以让网站程序实现界面与数据分离,业务代码与逻辑代码的分离,提升开发效率,良好的设计也提高了代码的复用性。前端模板的出现使得前后端分离成为可能。 模板引擎 模板引擎-百度词条 什么是模板引擎?(百度词条) 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据分离而产生的,它可以生成...
摘要:前端模板的出现使得前后端分离成为可能。总结本文简单介绍了模板引擎在前后端的使用,下文我们回到,重点分析下的使用方式以及源码原理。楼主对于模板引擎的认识比较浅显,有不正之处希望指出感谢 前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此文,...
摘要:原作者唐斌腾讯什么原名是一个简单易用的前端模板预编译工具。本文作者为来自腾讯团队的唐斌,他在本文中为我们分析了传统前端模板内嵌的弊端,如开发调试效率低下自动化构建复杂度比较高等特点,并针对目前现状给出了较好的解决方案。 原作者: 唐斌(腾讯)| TmodJS什么 TmodJS(原名atc)是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制,实现后端模板一样的同...
阅读 3656·2021-11-19 09:56
阅读 1366·2021-09-22 15:11
阅读 1081·2019-08-30 15:55
阅读 3347·2019-08-29 14:02
阅读 2865·2019-08-29 11:07
阅读 403·2019-08-28 17:52
阅读 3145·2019-08-26 13:59
阅读 410·2019-08-26 13:53