精华内容
下载资源
问答
  • js模板引擎

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

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

    js模板引擎

    JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,从而出现在各大型网站 Twitter、淘宝网、新浪浪微博、腾讯QQ空间、腾讯微博等。那么他们各自性能怎么样?请看下面。
     

    通常模板引擎

     

    各模板测试数据

    引擎渲染速度竞赛

     

    100 条数据 × 10000 次渲染测试 [isEscape:false, isCache:true]

    ie8浏览器(8.0.6001.18702)

    chrome浏览器(版本 26.0.1410.64 m)

    chrome测试数据

    Apple safari浏览器(5.1.7(7534.57.2))

    safari测试数

    firefox浏览器(19.0.2)

    firefox测试数据

    奇虎360浏览器(版本号6.1.0.356,内核版本:21.0.1180.89)

    360测试数据

    测试结果

    js模板引擎对比数据

    通过对各模板引擎测试结果,可以看出
    artTemplate,juicer与doT引擎模板整体性能要有绝对优势;
    其中doT引擎模板在IE与safari浏览器表现非常优越;
    tmpl模板引擎在IE中运行能完美胜出,但在其它浏览器中表现就差很多;

    延伸
    通过对模板引擎的熟知,不同浏览器渲染能力也不一样;渲染快的打开网页速度就快;chrome与360浏览器打开速是最快的;ie浏览器的速度是最慢;

     

    各个模板引擎下载地址

     

    baiduTemplate:  http://baidufe.github.io/BaiduTemplate/

    artTemplate: https://github.com/aui/artTemplate

    juicer: http://juicer.name/https://github.com/PaulGuo/Juicer/zipball/master#download

    doTdoT source:https://github.com/olado/doT   Docs:http://olado.github.com/doT/

    tmplhttps://github.com/BorisMoore/jquery-tmpl

    handlebars:http://handlebarsjs.com/或https://raw.github.com/wycats/handlebars.js/1.0.0-rc.4/dist/handlebars.js

    easyTemplatehttps://github.com/qitupstudios/easyTemplate

    underscoretemplate: http://documentcloud.github.io/underscore/

    mustache:https://github.com/janl/mustache.js

    kissytemplate:https://github.com/ktmud/kissy

     

    相关引擎资料

     

    浅析js模板引擎

    高性能JavaScript模板引擎原理解析

    在前端开发中应用JS模板引擎 -- 事半功倍!

    转载于:https://www.cnblogs.com/libaoli/p/5066350.html

    展开全文
  • JS模板引擎

    2017-08-03 10:32:00
    本文的目的是对JS模板引擎进行描述和使用;提高开发成员对相应功能的开发效率,提升代码的可维护性,降低维护成本。 原有痛点 如下摘自部分代码,这样拼接维护是不是很繁琐,后期维护成本高; $.each...

    本文目的

    本文的目的是对JS模板引擎进行描述和使用;提高开发成员对相应功能的开发效率,提升代码的可维护性,降低维护成本。

    原有痛点

    如下摘自部分代码,这样拼接维护是不是很繁琐,后期维护成本高;

      $.each(SystemForm.systemFormfields, function (n, t) {
                        htmlField += '<li class="bbit-tree-node">';
                        htmlField += '<div  title="' + t.field + '" class="bbit-tree-node-el bbit-tree-node-leaf">';
                        htmlField += '<i class="fa fa-tags"><\/i> ';
                        htmlField += '<span class="bbit-tree-node-text">' + t.label + "<\/span><\/div><\/li>"
                    });
    

    JS模板引擎简介

        随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。

    各种模板引擎

    baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘宝)\doTtmplhandlebarseasyTemplateunderscoretemplate \ mustache \kissytemplate

    各种模板引擎对比:

     通过对各模板引擎测试结果,可以看出
       artTemplate,juicer与doT引擎模板整体性能要有绝对优势;
       其中doT引擎模板在IE与safari浏览器表现非常优越;
       tmpl模板引擎在IE中运行能完美胜出,但在其它浏览器中表现就差很多;

    延伸
        通过对模板引擎的熟知,不同浏览器渲染能力也不一样;渲染快的打开网页速度就快;chrome与360浏览器打开速是最快的;ie浏览器的速度是最慢;

    渲染速度对比

    我这里选用artTemplate;

    artTemplate模板引擎

    artTemplate 介绍

    artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充分利用 javascript 引擎特性,使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

    除了性能优势外,调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句,解决了编写模板过程中无法调试的痛苦,让开发变得高效,也避免了因为单个模板出错导致整个应用崩溃的情况发生。

    artTemplate 使用

    1、对象渲染

    定义模板

    <script id="test" type="text/html">
    name:{{name}}<br>
    age:{{age}}
    </script>

    js渲染

    var data={name:'yxtic',age:'0'};
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;

    全部代码

     1 <html>
     2 <head>
     3 <meta charset="UTF-8">
     4 <title>JS模板引擎实例</title>
     5 <script src="template.js"></script>
     6 </head>
     7 
     8 <body>
     9 <h1>模板引擎-对象</h1>
    10 <div id="content"></div>
    11 <script id="test" type="text/html">
    12 name:{{name}}<br>
    13 age:{{age}}
    14 </script>
    15 
    16 <script>
    17 var data={name:'yxtic',age:'0'};
    18 var html = template('test', data);
    19 document.getElementById('content').innerHTML = html;
    20 </script>
    21 </body>
    22 </html>
    View Code

     运行结果

    2、数组渲染

    定义模板

    <script id="test" type="text/html">
    <ul>
    {{each $data as item i}} 
           <li>name:{{item.name}}   age:{{item.age}}</li>
     {{/each}}
    </ul>
    </script>

    js渲染

    var data= [{name: 'aaa',age: '12', gender: 'male'},{name: 'bbb', age: '22', gender: 'female'}]; 
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;

    全部代码

     1 <html>
     2 <head>
     3 <meta charset="UTF-8">
     4 <title>JS模板引擎实例</title>
     5 <script src="template.js"></script>
     6 </head>
     7 
     8 <body>
     9 <h1>模板引擎-数组</h1>
    10 <div id="content"></div>
    11 <script id="test" type="text/html">
    12 <ul>
    13 {{each $data as item i}} 
    14        <li>name:{{item.name}}   age:{{item.age}}</li>
    15  {{/each}}
    16 </ul>
    17 </script>
    18 
    19 <script>
    20 var data= [{name: 'aaa',age: '12', gender: 'male'},{name: 'bbb', age: '22', gender: 'female'}]; 
    21 var html = template('test', data);
    22 document.getElementById('content').innerHTML = html;
    23 </script>
    24 </body>
    25 </html>
    View Code

    运行结果

    3、组合

    定义模板

    <script id="test" type="text/html">
    <ul>
    <h1>{{title}}</h1>
    <ul>
        {{each list as value i}}
            <li>索引 {{i + 1}} :{{value}}</li>
        {{/each}}
    </ul>
    </ul>
    </script>

    js渲染

    var data = {
        title: 'yxtic',
        isAdmin: true,
        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    }; 
    var html = template('test', data);
    document.getElementById('content').innerHTML = html;

    全部代码

     1 <html>
     2 <head>
     3 <meta charset="UTF-8">
     4 <title>JS模板引擎实例</title>
     5 <script src="template.js"></script>
     6 </head>
     7 
     8 <body>
     9 <h1>模板引擎-组合</h1>
    10 <div id="content"></div>
    11 <script id="test" type="text/html">
    12 <ul>
    13 <h1>{{title}}</h1>
    14 <ul>
    15     {{each list as value i}}
    16         <li>索引 {{i + 1}} :{{value}}</li>
    17     {{/each}}
    18 </ul>
    19 </ul>
    20 </script>
    21 
    22 <script>
    23 var data = {
    24     title: 'yxtic',
    25     isAdmin: true,
    26     list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
    27 }; 
    28 var html = template('test', data);
    29 document.getElementById('content').innerHTML = html;
    30 </script>
    31 </body>
    32 </html>
    View Code

    运行结果

     

     

    4、分支判断if else

        <script id="StepContentTmplate" type="text/html">
                        <ul>
                            {{each $data as item i}}
                          {{if i==0}}
                            <li class="first">
                          {{else}}
                            <li>
                          {{/if}}
                                <i class="node-icon fa fa-circle "></i>
                                <span class="time">{{item.CreateDate}} </span>
                                <span class="txt">{{item.Content}}</span>
                            </li>
                            
                            {{/each}}
                        </ul>
                    </script>

    5、自定义模板函数

    如下我这边自定义了一个内容格式化函数,即函数名为RemarkFormat来处理截取字符串;

     

     

    template.helper("RemarkFormat", function (value) {
        if (!value) {
            return "";
        }
        if (value.length > 10) {
            return value.substring(0, 10) + "...";
        }
        else {
            return value;
        }
    });

     

    在模板定义中使用方法:

    {{RemarkFormat(item.sm)}}

    下载&文档地址:https://github.com/aui/artTemplate

    demo下载

    https://github.com/yx09041/JSTemplateDemo

    其他模板引擎

    baiduTemplate:  http://baidufe.github.io/BaiduTemplate/

    artTemplate: https://github.com/aui/artTemplate

    juicer: http://juicer.name/https://github.com/PaulGuo/Juicer/zipball/master#download

    doTdoT source:https://github.com/olado/doT  

    Docs:http://olado.github.com/doT/

    tmplhttps://github.com/BorisMoore/jquery-tmpl

    handlebars:http://handlebarsjs.com/或https://raw.github.com/wycats/handlebars.js/1.0.0-rc.4/dist/handlebars.js

    easyTemplatehttps://github.com/qitupstudios/easyTemplate

    underscoretemplate: http://documentcloud.github.io/underscore/

    mustache:https://github.com/janl/mustache.js

    kissytemplate:https://github.com/ktmud/kissy

     

    推荐阅读

    高性能JavaScript模板引擎原理解析

    浅析js引擎

    转载于:https://www.cnblogs.com/yx007/p/7277897.html

    展开全文
  • JS 模板引擎

    2019-04-26 01:20:03
    NULL 博文链接:https://onestopweb.iteye.com/blog/2367291
  • js 模板引擎

    2019-10-05 07:42:48
    1 var template = document.querySelector('#template').innerHTML, 2 result = document.querySelector('.result'), ... 5 // 将模板和数据作为参数,通过数据里所有的项将值替换到模板的标签上(注意不是遍...
     1 var template = document.querySelector('#template').innerHTML,
     2   result = document.querySelector('.result'),
     3   attachTemplateToData;
     4  
     5 // 将模板和数据作为参数,通过数据里所有的项将值替换到模板的标签上(注意不是遍历模板标签,因为标签可能不在数据里存在)。
     6 attachTemplateToData = function(template, data) {
     7         var i = 0,
     8             len = data.length,
     9             fragment = '';
    10  
    11         // 遍历数据集合里的每一个项,做相应的替换
    12         function replace(obj) {
    13             var t, key, reg;
    14        
    15        //遍历该数据项下所有的属性,将该属性作为key值来查找标签,然后替换
    16             for (key in obj) {
    17                 reg = new RegExp('{{' + key + '}}', 'ig');
    18                 t = (t || template).replace(reg, obj[key]);
    19             }
    20  
    21             return t;
    22         }
    23  
    24         for (; i < len; i++) {
    25             fragment += replace(data[i]);
    26         }
    27  
    28         return fragment;
    29     };
    30  
    31 result.innerHTML = attachTemplateToData(template, data);

     

    参考:http://www.cnblogs.com/TomXu/archive/2011/12/15/2284752.html

    转载于:https://www.cnblogs.com/gaozejie/p/5063129.html

    展开全文
  • js模板引擎Nunjucks

    2019-12-29 23:44:01
    js模板引擎Nunjucks Nunjucks中文文档

    js模板引擎Nunjucks

    Nunjucks中文文档

    展开全文
  • 腾讯的js模板引擎template.js 方便ajax请求的数据进行遍历和数据绑定。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,798
精华内容 1,919
关键字:

js模板引擎