前端模板引擎doT.js的使用

刘玉平发布于2019-08-22 11:19 / 3217人阅读

前言

我们在做前端开发时，经常需要根据后台返回的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);

结果输出：

Hello world.
 200

求值(evaluate)

用法：{{ }}，可在表达式中使用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/

私有云服务器托管 dot.js视频 php模板的使用模板引擎 python模板引擎

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92179.html

前端模板引擎doT.js的使用

前言我们在做前端开发时，经常需要根据后台返回的json数据动态生成html并插入到页面中显示。最简单的方法就是通过jQuery去遍历数据拼接html，如以下： var data = { list: [{ id: 1, name: zhangsan, email: zhangsan@lwhweb.co...

defcon 2019-08-01 18:15 评论0 收藏0
mustache：web模板引擎

摘要：简介是一个轻逻辑模板解析引擎，它的优势在于可以应用在等多种编程语言中。这里主要是看中的应用。 mustache简介 Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。这里主要是看JavaScript中的应用。Javascript 语言的模板引擎，目前流行有 Mustac...

klivitamJ 2019-08-20 16:36 评论0 收藏0
浅谈web中前端模板引擎的使用

摘要：置换型模板引擎的优点实现简单，缺点效率低，无法满足高负载的应用请求。用途百度词条模板引擎可以让网站程序实现界面与数据分离，业务代码与逻辑代码的分离，提升开发效率，良好的设计也提高了代码的复用性。前端模板的出现使得前后端分离成为可能。模板引擎模板引擎-百度词条什么是模板引擎？（百度词条）模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据分离而产生的，它可以生成...

妤锋シ 2019-08-23 12:36 评论0 收藏0
浅谈 Web 中前后端模板引擎的使用

摘要：前端模板的出现使得前后端分离成为可能。总结本文简单介绍了模板引擎在前后端的使用，下文我们回到，重点分析下的使用方式以及源码原理。楼主对于模板引擎的认识比较浅显，有不正之处希望指出感谢前言这篇文章本来不打算写的，实话说楼主对前端模板的认识还处在非常初级的阶段，但是为了整个源码解读系列的完整性，在深入 Underscore _.template 方法源码后，觉得还是有必要记下此文，...

chenjiang3 2019-08-20 11:56 评论0 收藏0
基于TmodJS的前端模板工程化解决方案

摘要：原作者唐斌腾讯什么原名是一个简单易用的前端模板预编译工具。本文作者为来自腾讯团队的唐斌，他在本文中为我们分析了传统前端模板内嵌的弊端，如开发调试效率低下自动化构建复杂度比较高等特点，并针对目前现状给出了较好的解决方案。原作者: 唐斌（腾讯）| TmodJS什么 TmodJS（原名atc）是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同...

zhaochunqi 2019-08-20 13:35 评论0 收藏0