个人bolg地址

时至今日，基于后端JavaScript（Node.js）和MVC思想也开始流行起来。模板引擎是数据和页面分离工作中最重要的一环，在各大门户网站均有利用到模板引擎。

模板引擎有很多种，但是原理了解也是非常必要的。

什么是模板引擎，其根本原理就是将数据转换成“String”，再通过模板引擎抓取数据进行页面数据渲染。

看一个例子

 <script type="template" id="template">

     <h2>

       <a href="{{href}}">

         {{title}}

       </a>

     </h2>

     <img src="{{imgSrc}}" alt="{{title}}">

   </script>

这样的方法类似Angular和Vue中双向数据绑定。 {{ XXXX }} 是需要进行替换的数据。

var data = [

    {

      title: "我是标题1",

      href: "我是链接1",

      imgSrc: "我是图片1.jpg"

    },

    {

      title: "我是标题2",

      href: "我是链接2",

      imgSrc: "我是图片2.jpg"

    }

  ];

可以通过replace和正则的方法进行替换导入。

replace方法：

template = document.querySelector('#template').innerHTML,

result = document.querySelector('.result'),

attachTemplateToData;

// 将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在）。

attachTemplateToData = function(template, data) {

        var i = 0,

            len = data.length,

            fragment = '';

        // 遍历数据集合里的每一个项，做相应的替换

        function replace(obj) {

            var t, key, reg;

 　　　　　　

　　　　　　　//遍历该数据项下所有的属性，将该属性作为key值来查找标签，然后替换

            for (key in obj) {

                reg = new RegExp('{{' + key + '}}', 'ig');

                t = (t || template).replace(reg, obj[key]);

            }

            return t;

        }

        for (; i < len; i++) {

            fragment += replace(data[i]);

        }

        return fragment;

    };

result.innerHTML = attachTemplateToData(template, data);

不用再次去特意设置变量名。

doT.js模板引擎

1.   {{ = it.xxx }}  赋值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>   <!-- = 赋值-->

</head>

<body>

    <div id="interpolation"></div>

    <script id="interpolationtmpl" type="text/x-dot-template">  <!--script的ID是为了被doT模板引擎抓取语法和模板 type必须为该类-->

        <div>Hi {{=it.name}}!</div>  <!--it在模板里为数据源 it.name 等同于 dataInter.name -->

        <div>{{=it.age || ''}}</div> <!-- = 为赋值，如果不存在改数据，||'' 为空 -->

    </script>

</body>

<script src="./doT.js"></script>

<script src="./jquery.min.js"></script>

<script>
   //定义数据源

   var dataInter =  {"name":"jake","age":31};
　　// doT使用模板方法进行抓取script标签里的模板语法和布局

   var interText = doT.template($("#interpolationtmpl").text());
　　//  将数据赋值给id对应的div进行渲染。

   $("#interpolation").html(interText(dataInter));

</script>

</html>

2.   {{ for }}  循环

语法：  {{ for var KEY in DATA {  }}
                {{= key }}
                {{  }  }}

<body>

    <div id="evaluation"></div>

    <script id="evaluationtmpl" type="text/x-dot-template">

    {{ for(var prop in it) { }}

        <div>KEY:{{= prop }}--------VALUE:{{= it[prop] }}</div><!--将值进行赋值循环-->

    {{ } }}

    </script>

</body>

<script src="./doT.js"></script>

<script src="./jquery.min.js"></script>

<script>

   var dataEval = {
        "name":"Jake",
        "age":31,
        "interests":["basketball","hockey","photography"],"contact":{"email":"122@123.com","phone":"999999999"}
       };

   var evalText = doT.template($("#evaluationtmpl").text());

   $("#evaluation").html(evalText(dataEval));

</script>

要注意 {{ for(var prop in it) { }}  ...  {{  } }}   为闭合标签，是为了让其中的模板进行输出，以及让{{ ... }} 的表达式进行执行。

可能这种语法很多小伙伴们看不懂，但是 改变一下

 for(var prop in it) {

        <div>KEY:{{= prop }}--------VALUE:{{= it[prop] }}</div> <!--将循环进行赋值-->

     } 

把外面的花括号去掉了就能看懂了把。和上相比，只是将表达式都用双花括号包围起来，以便给doT模板引擎识别。
{{ for(var prop in it) { }}

        <div>KEY:{{= prop }}--------VALUE:{{= it[prop] }}</div><!--将值进行赋值循环-->

    {{ } }}

3.   {{~it.array:value:index}}  数组数据

语法：
     {{~data.array :value:index }}
       ...

<body>

    <div id="arrays"></div>

    <script id="arraystmpl" type="text/x-dot-template">

        {{~it.array:value:index}}  <-- ~ 为循环数组it.data -->

            <div>{{= index+1 }}{{= value}}</div>   <!--index为下标，初始值为0 ，可以进行计算-->

        {{~}}

    </script>

</body>

<script src="./doT.js"></script>

<script src="./jquery.min.js"></script>

<script>

   var dataArr = {"array":["banana","apple","orange"]};

   var arrText = doT.template($("#arraystmpl").text());

   $("#arrays").html(arrText(dataArr));

</script>

4.   {{ = it.xxx }}  赋值

语法：

{{? }} if
      {{?? }} else if
      {{??}} else

<body>

    <div id="condition"></div>

    <script id="conditionstmpl" type="text/x-dot-template">

        {{? !it.name }}<!--if有数据就跳过-->

            <div>Oh, I love your name, {{=it.name}}!</div>

        {{?? it.age === 1}}<!-- else if （age=31）执行此 -->

            <div>当前值为{{= it.age}}</div>

        {{?? !(it.age === 0)}}<!-- else if （age不为0）执行此 -->

            <div>Guess nobody named you yet!</div>

        {{?? !it.age == 0)}}<!-- 0本身为false  所有age为true 取反 -->

            <div>Guess nobody named you yet!</div>

        {{??}}

             You are {{=it.age}} and still dont have a name?

        {{?}}

    </script>

</body>

<script src="./doT.js"></script>

<script src="./jquery.min.js"></script>

<script>

    var dataEncode = {"name":"yzw","age":1};

    var EncodeText = doT.template($("#conditionstmpl").text());

    $("#condition").html(EncodeText(dataEncode));

</script>

提示：！it.age  当age为0的时候为true，非0为false，但是进行数据恒等（===）的时候，

如果想要将数据的结果进行取反，必须加个括号!(it.age === 0)  当age为0  ，为false  不等于!it.age === 0;

模板引擎还是非常好用的，其余的{{for 插值 with encoding }}、{{##}}就不在本文叙述了，在使用过程中至今还未使用到。

doT.js模板引擎及基础原理的更多相关文章

  1. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  2. doT.js 模板引擎的使用

    dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...

  3. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  4. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  5. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  6. 浅析js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  7. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  8. Epii.js 一个极其简单的Js模板引擎

    Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...

  9. 使用新一代js模板引擎NornJ提升React.js开发体验

    当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...

随机推荐

  1. 【模板小程序】求第n个质数

    #include <iostream> #include <vector> using namespace std; int nth_prime(int n) { vector ...

  2. C#中内嵌资源的读取

    起因 作为一个从Cpper转到C#并且直接从事WPF开发的萌新来说,正式编码过程中碰到了不少问题,一路上磕磕碰碰的.因为软件设计需求上的要求,需要将一些配置文件(XML.INI等)内嵌到程序中,等需要 ...

  3. WPF 使用DMSkin for WPF 快速搭建漂亮的WPF程序

    DMSkin-for-WPF是一个基于WPF的.Net WPF开源界面库,实现了无边框的WPF开发方案,内置部分控件模板. 你可以参照模板自行修改完善.(以下简称DFW). 核心 DFW实现了比较完美 ...

  4. 看完轻松年薪30w+

    弱鸡学git中,百度git追踪方面的博文,突然发现各种git的博文中突然插入了一个这个,不解,本以为又是某个大佬在分享他的心路历程,点进去打算喝鸡汤,666 怪不得标题党标题党这么的叫,可怕可怕,文章 ...

  5. c++多态性---虚函数

    虚函数与纯虚函数的区别: 1.拥有虚函数的类可以声明对象,但拥有纯虚函数的类不可以声明对象(只能声明一个指针,并且不能给其分配内存),并且将这个类称为抽象类 特点: 1.虚函数是动态绑定的基础. 2. ...

  6. qt中创建进程

    进程:1.QProcess 进程类 QProcess *a=new QProcess(); 2.启动void QProcess::start(const QString & command, ...

  7. msp430系统时钟

    转自 http://m.blog.csdn.net/blog/msdumin/38441493# MSP430基础时钟模块包含以下3个时钟输入源. 一.4个时钟振荡源 1.LFXT1CLK:  外部晶 ...

  8. Gentoo(贱兔)Linux安装笔记

      网上对于Gentoo Linux 的教程少之又少,所以这里我将自己的安装记录贴出来 希望对正在研究Gentoo 的小伙伴们有帮助! 1.确认连接到互联网,使用net-setup工具配置网络 roo ...

  9. PLECS—模型仿真——第十一周作业

    1. 直流电机单闭环调速系统比例控制仿真 (1)整体电路图 (2)控制部分电路图 (3)参数设置+仿真结果 2. 直流电机单闭环调速系统比例积分控制仿真 (1)参数设置 (2)仿真结果 3. 直流电机 ...

  10. Python后端(一)——客户端/服务端

    网址组成(四部分) 协议      http, https(https 是加密的http) 主机      g.cn zhihu.com之类的网址 ,因此一般不用填写 路径      下面的「/」和「 ...