以下应用场景可以使用模板引擎,第一种大家会想到的就是采用replace直接替换里面的变量

一、应用项景

以下应用项景能够利用模板引擎:
1、假诺您有动态ajax央求数据并索要封装成视图显示给顾客,想要升高和谐的工效。
2、若是你是拼串族大概数组push族,殷切的冀望改动现存的书写方式。
3、假设您在页面布局中,存在共性模块和结构,你能够提抽出国有模板,缩小维护的数额。

1、入门实例

率先我们来看三个简短模板:

  <script type="template" id="template">
    <h2>
      <a href="{{href}}">
        {{title}}
      </a>
    </h2>
    <img src="{{imgSrc}}" alt="{{title}}">
  </script>

里头被{{ xxx }}包涵的正是我们要替换的变量。
随着我们也许由此ajax大概此外方式取得数量。这里大家和好定义了数量,具体如下:

var data = [
    {
      title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5",
      href: "http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/",
      imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg"
    },
    {
      title: "Nettuts+ Quiz #8",
      href: "http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/",
      imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg"
    }
  ];

ok,今后的标题正是我们怎么把数据导入到模板里面呢?

率先种大家会想到的正是采纳replace直接沟通里面包车型客车变量:

template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
i = 0, len = data.length,
fragment = '';

for ( ; i < len; i++ ) {
    fragment += template
      .replace( /{{title}}/, data[i].title )
      .replace( /{{href}}/, data[i].href )
      .replace( /{{imgSrc}}/, data[i].imgSrc );
}

result.innerHTML = fragment;

其次种的话,相对第一种相比较灵敏,采取的是正则替换,对于初级前端,很三个人对正则掌握的并非很好,平时也用的相当少。具体落实如下:

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);

 与第一种相比较,第三种代码看上去多了,不过意义实在更为有力了。第一种我们须求每一趟重复编辑变量名,假使变量名超多以来,会比较辛勤,且便于失误。第两种的就从不这几个苦恼。

 

  在自个儿的一篇有关智能搜索框异步加载数据的小说中,有博友给作者留言,以为笔者手写字符串拼接功用过低,轻巧出错。在通过一段时间的查找和学习之后,开采未来拼接字符串的方式都不在是温馨去书写了,而是使用Javascript引擎。而javascript引擎的本质就是帮大家把带有JavaScript代码的伪THTML语句编写翻译为HTML。

二、达成原理

差别模板间完成原理春兰秋菊,各有优缺,请按需选拔,以下示例以artTemplate模板引擎来深入分析。

2、模板引擎相关文化

透过上边包车型地铁事例,大家对模板引擎应该有个最先的认知了,上边我们来说课一些有关文化。

 

2.1 模板存放

模板日常都以停放到textarea/input等表单控件,也许script[type="text/html"]等标签中,如下:

<script id="test" type="text/html">
    {{if isAdmin}}

    <h1>{{title}}</h1>
    <ul>
        {{each user as name i}}
            <li> {{i + 1}} :{{name}}</li>
        {{/each}}
    </ul>

    {{/if}}
</script>

//textarea或input则取value,其余意况取innerHTML

2.1 模板存放

模板日常都以停放到 textarea/input 等表单控件,只怕 script 等标签中。譬如上面的例子,大家就是坐落 script 标签上的。

  一经有不打听的相爱的人,可早前往这两篇小说:

2.2 模板函数

诚如都以templateFun(“id”, data卡塔尔(قطر‎;个中id为寄存模板字符串的因素id,data为要求装载的数据。

2.2 模板获取

诚如都以通过ID来博取,document.getElementById(“ID”State of Qatar:

//textarea或input则取value,其它情况取innerHTML
var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;

地点的是通用的模版获取格局,这样不管您是身处 textarea/input 仍然 script 标签下都得以获得到。

  天猫购物车页面 PC端和平运动动端实战

2.3 模板获取

诚如都以因此ID来得到,document.getElementById(“ID”卡塔尔国:

//textarea或input则取value,其它情况取innerHTML
var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;

2.3 模板函数

貌似都以templateFun("id", data卡塔尔国;个中id为存放模板字符串的因素id,data为必要装载的数量。

  Taobao购物车页面 智能搜索框Ajax异步加载数据

2.4 模板拆解解析——管理html语句和逻辑语句及任何格式化管理

那步的关键操作实际多余的空格,深入深入分析出html元素和逻辑语句及主要性字。例如:artTemplate.js中的代码完毕:

defaults.parser = function (code, options) {
    // var match = code.match(/([w$]*)(b.*)/);
    // var key = match[1];
    // var args = match[2];
    // var split = args.split(' ');
    // split.shift();

    //if isAdmin
    code = code.replace(/^s/, '');

    //["if", "isAdmin"]
    var split = code.split(' ');
    //if
    var key = split.shift();
    //isAdmin
    var args = split.join(' ');

    switch (key) {

        case 'if':
            //if(isAdmin){
            code = 'if(' + args + '){';
            break;

        case 'else':

            if (split.shift() === 'if') {
                split = ' if(' + split.join(' ') + ')';
            } else {
                split = '';
            }

            code = '}else' + split + '{';
            break;

        case '/if':

            code = '}';
            break;

        case 'each':

            var object = split[0] || '$data';
            var as     = split[1] || 'as';
            var value  = split[2] || '$value';
            var index  = split[3] || '$index';

            var param   = value + ',' + index;

            if (as !== 'as') {
                object = '[]';
            }

            code =  '$each(' + object + ',function(' + param + '){';
            break;

        case '/each':

            code = '});';
            break;

        case 'echo':

            code = 'print(' + args + ');';
            break;

        case 'print':
        case 'include':

            code = key + '(' + split.join(',') + ');';
            break;

譬如上例中:”{{if isAdmin}}”末了被解析成”if(isAdmin卡塔尔国{”,”{{/if}}“被深入深入分析成“}”。

2.4 模板深入深入分析编写翻译

模板拆解深入分析首假如指将模板中 JavaScript 语句和 html 分离出来,编写翻译的话将模板字符串编写翻译成最后的模版。下面的事例比较简单,还尚无提到到模板引擎的着力。

  源码地址:

2.5 模板编写翻译——字符串拼接成生成函数的进度

那步的显要操作即是字符串的拼接成生成函数,看看artTemplate的部分源码:

function compiler (source, options) {
    /*
    openTag: '<%',    // 逻辑语法开始标签
    closeTag: '%>',   // 逻辑语法结束标签
    escape: true,     // 是否编码输出变量的 HTML 字符
    cache: true,      // 是否开启缓存(依赖 options 的 filename 字段)
    compress: false,  // 是否压缩输出
    parser: null      // 自定义语法格式器 @see: template-syntax.js
    */
    var debug = options.debug;
    var openTag = options.openTag;
    var closeTag = options.closeTag;
    var parser = options.parser;
    var compress = options.compress;
    var escape = options.escape;

    var line = 1;
    var uniq = {$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1};

    //isNewEngin在6-8返回undefined
    var isNewEngine = ''.trim;// '__proto__' in {}
    var replaces = isNewEngine
    ? ["$out='';", "$out+=", ";", "$out"]
    : ["$out=[];", "$out.push(", ");", "$out.join('')"];

    var concat = isNewEngine
        ? "$out+=text;return $out;"
        : "$out.push(text);";

    var print = "function(){"
    +      "var text=''.concat.apply('',arguments);"
    +       concat
    +  "}";

    var include = "function(filename,data){"
    +      "data=data||$data;"
    +      "var text=$utils.$include(filename,data,$filename);"
    +       concat
    +   "}";

    var headerCode = "'use strict';"
    + "var $utils=this,$helpers=$utils.$helpers,"
    + (debug ? "$line=0," : "");

    var mainCode = replaces[0];

    var footerCode = "return new String(" + replaces[3] + ");"

    // html与逻辑语法分离
    forEach(source.split(openTag), function (code) {
        code = code.split(closeTag);

        var $0 = code[0];
        var $1 = code[1];

        // code: [html]
        if (code.length === 1) {

            mainCode += html($0);

        // code: [logic, html]
        } else {

            mainCode += logic($0);

            if ($1) {
                mainCode += html($1);
            }
        }

    });

    var code = headerCode + mainCode + footerCode;

上例中模板中的模板字符串代码会被拼接成如下字符串:

'use strict';
var $utils   = this,
    $helpers = $utils.$helpers,
    isAdmin  = $data.isAdmin,
    $escape  = $utils.$escape,
    title    = $data.title,
    $each    = $utils.$each,
    user     = $data.user,
    name     = $data.name,
    i        = $data.i,
    $out     = '';

if (isAdmin) {
    $out += 'nn   <h1>';
    $out += $escape(title);
    $out += '</h1>n  <ul>n        ';
    $each(user, function(name, i) {
        $out += 'n         <li>';
        $out += $escape(i + 1);
        $out += ' :';
        $out += $escape(name);
        $out += '</li>n      ';
    });
    $out += 'n </ul>nn ';
}
return new String($out);

接下来会被转移如下函数:

var Render = new Function("$data", "$filename", code);

/*Outputs:
function anonymous($data, $filename) {
    'use strict';
    var $utils   = this,
        $helpers = $utils.$helpers,
        isAdmin  = $data.isAdmin,
        $escape  = $utils.$escape,
        title    = $data.title,
        $each    = $utils.$each,
        user     = $data.user,
        name     = $data.name,
        i        = $data.i,
        $out     = '';
    if (isAdmin) {
        $out += 'nn   <h1>';
        $out += $escape(title);
        $out += '</h1>n  <ul>n        ';
        $each(user, function(name, i) {
            $out += 'n         <li>';
            $out += $escape(i + 1);
            $out += ' :';
            $out += $escape(name);
            $out += '</li>n      ';
        });
        $out += 'n </ul>nn ';
    }
    return new String($out);
}
 */
console.log(Render);

2.5 模板分隔符

要提议的是,不一致的沙盘模拟经营引擎所用的相间符大概是差别等,上边的例证用的是{{ }},而Jquery tmpl 使用的是<%  %>。

 

  GitHub:Uncle-Keith

2.5 装载数据,视图显示

/*Outputs:
<h1>User lists</h1>
<ul>
    <li>1 :zuojj</li>
    <li>2 :Benjamin</li>
    <li>3 :John</li>
    <li>4 :Rubby</li>
    <li>5 :Handy</li>
    <li>6 :CIMI</li> 
</ul>
*/
console.log(new Render(data, filename) + '');
//对象转换为字符串
return new Render(data, filename) + '';

3、jQuery tmpl 完毕原理解析

 jQuery tmpl是由jQuery的编辑者写的,代码小巧玲珑。总共20多行,作用却比大家地点的有力相当多。我们先来看一看源码:

(function(){
  var cache = {};

  this.tmpl = function tmpl(str, data){

    var fn = !/W/.test(str) ? 
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        "with(obj){p.push('" +

        str
          .replace(/[rtn]/g, " ") 
          .split("<%").join("t") 
          .replace(/((^|%>)[^t]*)'/g, "$1r")
          .replace(/t=(.*?)%>/g, "',$1,'")  
          .split("t").join("');")  
          .split("%>").join("p.push('") 
          .split("r").join("\'")
      + "');}return p.join('');");

    return data ? fn( data ) : fn;
  };
})();

初看是还是不是感觉某个懵,完全无法驾驭的代码。没事,前边大家会对源码举行讲授的,大家照旧先看一下所用的沙盘模拟经营

  <ul>
    <% for ( var i = 0; i < users.length; i++ ) { %>
         <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
    <% } %>
  </ul>

能够开掘,这么些模板比入门例子的模版更为复杂,因为中间还夹杂着 JavaScript 代码。JavaScript 代码应用 <%  %> 包涵。而要替换的变量则是用 <%=   %> 分隔离的。

下边小编再来对代码做个注释。不过即使看了疏解,你也不自然能相当的慢驾驭,最棒的方法是友好实际入手操作一次。

// 代码整个放在一个立即执行函数里面
(function(){
  // 用来缓存,有时候一个模板要用多次,这时候,我们直接用缓存就会很方便
  var cache = {};

  // tmpl绑定在this上,这里的this值得是window
  this.tmpl = function tmpl(str, data){

    // 只有模板才有非字母数字字符,用来判断传入的是模板id还是模板字符串,
    // 如果是id的话,判断是否有缓存,没有缓存的话调用tmpl;
    // 如果是模板的话,就调用new Function()解析编译
    var fn = !/W/.test(str) ? 
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      new Function("obj",
     // 注意这里整个是字符串,通过 + 号拼接
        "var p=[],print=function(){p.push.apply(p,arguments);};" +
        "with(obj){p.push('" +

        str
      // 去除换行制表符tnr
          .replace(/[rtn]/g, " ") 
      
      // 将左分隔符变成 t
          .split("<%").join("t") 
      
      // 去掉模板中单引号的干扰
          .replace(/((^|%>)[^t]*)'/g, "$1r")
      
      // 为 html 中的变量变成 ",xxx," 的形式, 如:t=users[i].url%> 变成  ',users[i].url,'  
      // 注意这里只有一个单引号,还不配对 
          .replace(/t=(.*?)%>/g, "',$1,'")  
      
      // 这时候,只有JavaScript 语句前面才有 "t",  将  t  变成   '); 
      // 这样就可把 html 标签添加到数组p中,而javascript 语句 不需要 push 到里面。
      .split("t").join("');") 
      
      // 这时候,只有JavaScript 语句后面才有 "%>", 将 %> 变成  p.push(' 
      // 上一步我们再 html 标签后加了 ');, 所以要把 p.push(' 语句放在 html 标签放在前面,这样就可以变成 JavaScript 语句
          .split("%>").join("p.push('") 

      // 将上面可能出现的干扰的单引号进行转义
       .split("r").join("\'")
    // 将数组 p 变成字符串。
      + "');}return p.join('');");

    return data ? fn( data ) : fn;
  };
})();

上边代码中,有贰个要建议的正是new Function 的使用 方法。给 new Function(卡塔尔国 传叁个字符串作为函数的body来协会二个JavaScript函数。编制程序中并不日常采用,但临时候应该是很有用的。

上边是 new Function 的基本用法:

// 最后一个参数是函数的 body(函数体),类型为 string; 
// 前面的参数都是 索要构造的函数的参数(名字) 
var myFunction = new Function('users', 'salary', 'return users * salary'); 

终极的字符串正是下边这种格局:

  var p = [],
    print = function() {
      p.push.apply(p, arguments);
    };
  with(obj) {
    p.push('     <ul>     ');
    for (var i = 0; i < users.length; i++) {
      p.push('          <li><a href="', users[i].url, '">', users[i].name, '</a></li>     ');
    }
    p.push('   </ul> ');
  }
  return p.join('');

当中的 print 函数 在我们的模板里面是还未有行使的。

要提出的是,采纳 push 的主意在 IE6-8 的浏览器下会比 += 的样式快,不过在当今的浏览器里面, += 是拼接字符串最快的措施。实地度量申明今世浏览器选用 += 会比数组 push 方法快,而在 v8 引擎中,使用 += 方式比数组拼接快 4.7 倍。所以 近期微微更加尖端的沙盘模拟经营引擎会 依照 javascript 引擎天性应用了三种区别的字符串拼接方式。

上边包车型大巴代码是摘自Tencent的 artTemplate 的, 依照浏览器的品种来接收差异的拼接格局。功效越强盛,所考虑的标题也会越多。

    var isNewEngine = ''.trim;// '__proto__' in {}
    var replaces = isNewEngine
    ? ["$out='';", "$out+=", ";", "$out"]
    : ["$out=[];", "$out.push(", ");", "$out.join('')"];

 

挑衅:有意思味的能够改用 += 来促成地方的代码。

 

三、常见JavaScript模板引擎及测验对照

  • BaiduTemplate —— 最简便好用的JS模板引擎(百度卡塔尔
  • artTemplate —— 高品质JavaScript模板引擎(TencentCDC卡塔尔
  • Velocity.js —— 来自Tmall的JS 模板引擎
  • JavaScript Templates —— 轻量、火速、强盛、无依附模板引擎
  • Juicer —— 高效、轻量的Javascript模板引擎
  • mustache.js —— Logic-less {{mustache}} templates with JavaScript
  • 各大Javascript模板引擎测验对照

上述就是本文对模板引擎的描述,多谢您的翻阅,文中不妥之处还望商量指正。

总结

模板引擎原理总计起来正是:先拿走html中对应的id下得innerHTML,利用起来标签和停业标签实行字符串切分,其实是将模板划分成两部份内容,一部分是html部分,一部分是逻辑部分,通过界别一些特殊符号举例each、if等来将字符串拼接成函数式的字符串,将两有个别各自经过处理后,再一次拼接到一同,最终将拼接好的字符串采取new Function(卡塔尔国的不二等秘书技转化成所急需的函数。

 

日前模板引擎的门类千千万万,效用也越来越强盛,不一致模板间达成原理连镳并驾,各有优缺,请按需接纳。

 

参照小说:

1、Quick Tip: Create a Makeshift JavaScript Templating Solution

2、JavaScript模板引擎的施用途景及完结原理

3、父辈手记(7):创设谐和的JavaScript模板小引擎

  回归正题,以下对artTemplate模板引擎的介绍会分为如下几部分内容:

  1.artTemplate模板引擎的中坚语法布局

  2.artTemplate模板引擎的着力使用办法

    2.1:使用叁个type="text/html"script标签贮存模板

    2.2:在javascript中寄放模板

    2.3:嵌入子模板(include卡塔尔(قطر‎

  3.artTemplate模板引擎使用实战

 

1.artTemplate主干语法布局

  artTemplate的语法构造很简短,就是{{}}。`{{}}``` 符号包裹起来的言辞则为模板的表明式。表达式又分为 输出表达式,条件表达式,遍历表达式,模板包蕴表明式。具体的能够看看GitHub:artTemplate 简洁语法版。官方网址对语法介绍的还是能,可是在这里边想在说一句,要深深记住表达式的写法和表明式有啥分类,对于明白引擎很有救助。

 

2.artTemplate模板引擎的运用方法

  首先,供给去官方网站下载 轻巧语法版,接下来在body尾部加载script文件。文件极小,独有2.7kb,不过成效非常常有力。

*  *2.1:使用三个type="text/html"script标签寄放模板

    运用script存放模板的时候要当心多少个地方。

    一方面是必需给script标签订义id,况兼一定要是id,不可能是class。因为在利用template(id,dataState of Qatar方法的时候,该方法会根据id渲染模板,引擎内部会基于document.getElementById(id)招来模板。假设选取class作为参数,artTemplate引擎会报错。如果未有data 参数,将回来一渲染函数。

    其余一端是在<!DOCTYPE html>script标签中的type类型默认为type/javascript。在script标签中,必须再一次证明type类型为text/html,不然会并未有效应。

    使用方法如下

     <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
                <li>索引{{i+1}} : {{value}}</li>
            {{/each}}
        </ul>
     </script>
     <script>
         var data = {
             title:'My Life',
             list:['篮球','桌球','游泳','滑轮','读书']
         };
         var html = template('test',data);
         $('.rascal').html(html);
     </script>

    渲染的页面如下:

    美高梅4688官方网站 1

  2.2:在Javascript中存放模板

    在Js中寄存模板应该会超少用到,因为在前面一个领域有一条军规,构造体制和行事三者必需抽离。倘诺把模版放在js文件内,会损坏那条规定。

    看看例子,知道一下调用的平整。实质上就是一段拼接字符串的经过。

     <script type="text/javascript">
         var source ="<ul>"
         + "{{each list as value i}}"
         + "<li>索引{{i+1}}:{{value}}</li>"
         + "{{/each}}"
         + "</ul>";

         var render = template.compile(source);
         var html = render({
             list:['篮球','桌球','游泳','滑轮','读书']
         });

         $('.rascal').html(html);
     </script>

    美高梅4688官方网站 2

  2.3:嵌入子模板(include卡塔尔(قطر‎

    嵌套模板跟第一种方式原理肖似,只但是在一个模板中调用了此外多个模板而已。

     <script id='test' type='text/html'>
         <h1>My Life</h1>
         {{include 'list'}}
     </script>
     <script id='list' type='text/html'>
         <ul>
             {{each list as value i}}
                     <li>索引{{i+1}}:{{value}}</li>
             {{/each}}
         </ul>
     </script>
     <script>
         var data = {
             "list":['篮球','桌球','游泳','滑轮','读书']
         };
         var html = template('test',data);
         $('.rascal').html(html);
     </script>

    美高梅4688官方网站 3

3.artTemplate模板引擎使用实战

  artTemplate官方网址给出的每二个例证其实都已经很好了,能够让每壹个人都超级轻巧的敞亮。可是自个儿感到独一的弱项正是,例子中的数据完全部是团结定义的。在其实支出中,客商阅览标每三个商品数量是这么来的:第一后端程序员通过一定语法连接数据库,然后将从数据库中获得的数码转变来JSON格式,最终前端工程师在经过一些措施将JSON数据渲染到页面上。所以大家的多少不能够和煦瞎造,而是经过Ajax异步加载。

  在自己的一篇 Taobao购物车页面 智能找寻框Ajax异步加载数据 小说中,一伊始是利用手写拼接字符串的点子去拼接字符串,这种方式效能低,轻便出错。后来全体制修改成了js模板引擎的秘籍。所以我会以Tmall购物车页面中智能寻找框Ajax异步加载商品数量的例证来证明artTemplate模板引擎。

  先放上一段代码。首要依旧想经过这一个大致的例证表明接下去要深究的主题素材。

     <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
                <li>索引{{i+1}} : {{value}}</li>
            {{/each}}
        </ul>
     </script>
     <script>
         var data = {
             title:'My Life',
             list:['篮球','桌球','游泳','滑轮','读书']
         };
         var html = template('test',data);
         $('.rascal').html(html);
     </script>

  上边代码中,要小心几点的就是:

  ♥ 遍历表达式中的list必得与剧本中data对象中的list同名,並且遍历表明式中的list必需是data对象中的三个属性。循环表达式中,要循环的是每二个data对象中的list数组,而不是data对象,那一点很首要。

  在这里个事例中,data对象中list属性是一个数组,数组中的每叁个值都以归纳数据类型,篮球斯诺克等。当然,可今后数组中传入复杂数据类型,如指标。表达这几个尤为重固然因为在循环表明式中循环的数据和给template(卡塔尔(قطر‎传入第一个参数的时候超级轻巧失误。

  ♥ 使用template方法时,第一个参数必需是id,而不能够是class。

  

  放上一段json数据代码。

美高梅4688官方网站 4美高梅4688官方网站 5

[
    [
        {
            "Query":"lan",
            "Results":[
                {
                    "Type":"AS",
                    "Suggests":[
                        {
                            "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031",
                            "num":339,
                            "max":764,
                            "discount":200,
                            "label":"liningBas",
                            "shop":"李宁官方网店",
                            "image":"csslining-bas.png",
                            "color":"颜色分类:荧光果粉/木梅红",
                            "size":"鞋码:42",
                            "nonDiscount":"¥539.00",
                            "bandCard":"cssnkCard.png",
                            "sevenDay":"csssevenDay.png",
                            "guarantee":"cssguarantee.png"
                        },
                        {
                            "Txt":" adidas阿迪达斯篮球男子篮球鞋Regulate",
                            "num":419,
                            "max":18,
                            "discount":120,
                            "label":"adidas",
                            "nonDiscount":"¥539.00",
                            "image":"cssidas.png",
                            "color":"颜色分类:银金属/深藏青蓝",
                            "shop":"adidas官方旗舰店",
                            "size":"鞋码:43.5",
                            "bandCard":"cssnkCard.png",
                            "sevenDay":"csssevenDay.png",
                            "guarantee":"cssguarantee.png"
                        }
                    ]
                }
            ]
        }
    ],
    [
        {
            "Query":"音速3",
            "Results":[
                {
                    "Type":"AS",
                    "Suggests":[
                        {
                            "Txt":"李宁2016新款男子篮球鞋音速3高帮反弹篮球场地鞋ABAL031",
                            "num":339,
                            "max":764,
                            "label":"liningBas",
                            "shop":"李宁官方网店",
                            "image":"csslining-bas.png",
                            "color":"颜色分类:荧光果粉/木梅红",
                            "size":"鞋码:42",
                            "nonDiscount":"¥539.00",
                            "bandCard":"cssnkCard.png",
                            "sevenDay":"csssevenDay.png",
                            "guarantee":"cssguarantee.png"
                        }
                    ]
                }
            ]
        }
    ]
]

basketBallShoes.json

  上面代码中,是一段须要被Ajax异步加载数据的货色数量。

  再放上使用三个type="text/html"script标签寄放模板的代码。

美高梅4688官方网站 6美高梅4688官方网站 7

    <script id='basketBallShoes' type="text/html">
        {{each Suggests as value i}}
            <div class="mainCommodity">
                <div class="shopInfo">
                    <div class="shopMsg">
                            <input type="checkbox" name="shopMsg" id='{{value.label}}' class='shopMsg-input' autocomplete="off">
                            <label for="{{value.label}}">店铺:
                        <a href="#">{{value.shop}}</a>
                    </div>
                </div>
                <div class="commodityInfo">
                    <ul>
                        <li class='td-chk'>
                            <div class="td-inner">
                                <input type="checkbox" name='checkbox' autocomplete="off" >
                            </div>
                        </li>
                        <li class='td-item'>
                            <div class="td-inner">
                                <a href="#" class='desImg'>
                                    <img src="{{value.image}}" alt='{{value.Txt}}'>
                                </a>
                                <div class="item-info">
                                    <div class="item-basis-info">
                                        <a href="#">{{value.Txt}}</a>
                                    </div>
                                    <div class="item-other-info">
                                        <div class="item-other-space"></div>
                                        <div class="item-other-list">
                                            <a href="#" title='支持信用卡支付'>
                                                <img src="{{value.bandCard}}" alt="支持信用卡支付">
                                            </a>
                                            <a href="#" class='sevenDay' title='7天无理由'>
                                                <img src="{{value.sevenDay}}" alt="7天无理由">
                                            </a>
                                            <a href="#" title='消费者保障服务'>
                                                <img src="{{value.guarantee}}" alt="消费者保障服务">
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class='td-info'>
                            <div class="td-info-msg">
                                <p>{{value.color}}</p>
                                <p>{{value.size}}</p>
                            </div>
                        </li>
                        <li class='td-price'>
                            <div class="td-inner">
                                <p class='non-discount'>{{value.nonDiscount}}</p>
                                <p class='discount'>¥{{value.num}}.00</p>
                                <div class="promotion">
                                    卖家促销
                                    <i class='promotionIcon'></i>
                                </div>
                                <div class="proSlidedown">
                                    <p class='newPro'>卖家促销:新品大特价</p>
                                    <p>优惠:¥200.00</p>
                                </div>
                            </div>
                        </li>
                        <li class='td-amount'>
                            <div class="item-amount">
                                <a href="#" class='amount-left amount-color'>-</a>
                                <input type="text" name='amountNum' value='1' autocomplete="off">
                                <a href="#" class="amount-right">+</a>
                            </div>
                            <div class="stock">
                                {{value.max}}
                            </div>
                            <div class="outNum">
                                最多只能购买
                                <!--
                                --><em>件</em>
                            </div>

                            </li>
                        <li class='td-sum'>
                            <em>¥</em><!--
                            -->{{value.num}}
                        </li>
                        <li class='td-operation'>
                            <p><a href="#" class='delete'>删除</a></p>
                        </li>
                    </ul>
                </div>
            </div>
        {{/each}}
    </script>
    <script id="search" type="text/html">
        <ul>
            {{each Suggests as value i}}
                <li>{{value.Txt}}</li>
            {{/each}}
        </ul>
    </script>
    <script id='delete' type='text/html'>
        <div class="undo-wrapper">
            <div class="deleteCom">
                <p>
                    成功删除
                    <em>1</em>
                    件宝贝,如果有无,可
                    <a href="#" class='turnBack'>撤销本次删除</a>
                </p>
            </div>
        </div>
    </script>

JS模板引擎

  上边代码中是急需被渲染的模版。比手写拼接字符串轻松比很多,何况效能高,错误率低。

  最后放上js达成相应功用的有的至关心保护要代码。

$.get('search.json',{'Query':$val}, function(data) {
    for (var i = 0; i < data.length; i++) {
        //如果值与json中的query字段匹配,动态加载html
        if ($val === data[i][0].Query) {
        var results = data[i][0].Results[0];
        //js模板引擎
        var $html = template('search',results);
        $('.list').html($html)
        }
    }
});

  这里想说的是给template方法的第四个参数和循环表达式供给被循环的字段。

  第一点是给template方法的第一个参数。首个参数字传送入了results,这里的results实质上正是在地点例子中data对象。只可是在JSON数码中results是多少个数组。

  第二点是在JS模板引擎中。在模板中是这么写的:{{each Suggests as value i}},这里的Suggests其实就也就是data对象中的list属性。在data对象中,list是三个数组,並且每一个值都是字符串;而在results数组中,Suggests是五个数组,但是它的每种值都以目迷五色数据类型,是目的。假使对数据类型不通晓的,可之前往那篇作品:Javascript对象美高梅4688官方网站, 。

美高梅4688官方网站 8

  

  artTemplate使用实战就介绍完了。在template方法的第四个参数和遍历表明式中供给被遍历的数额十分轻便写错,希望同学能够小心这点。

  若是有不通晓大概写错的地点,能够给自家留言。

 

  参照他事他说加以调查小说

  artTemplate

  atc-前端模板预编写翻译器

  高质量JavaScript模板引擎原理分析

  最简便的JavaScript模板引擎

  轻易易行JavaScript模版引擎优化

  javascript模板引擎原理,几行代码的事情

  伯父手记(7):塑造友好的JavaScript模板小引擎

  基于HTML模板和JSON数据的JavaScript交互

 

  源码地址:GitHub:Uncle-Keith

  转发请注脚出处:

 

  完。谢谢大家的阅读。

本文由美高梅4688官方网站发布于最新话题,转载请注明出处:以下应用场景可以使用模板引擎,第一种大家会想到的就是采用replace直接替换里面的变量

您可能还会对下面的文章感兴趣: