• 调研js模板引擎


    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用。
     
    从这几个指标来比较js模板引擎:
    1 文件大小 - 影响网络传输时间
    2 执行速度(性能) - 影响响应速度,涉及模板解析和渲染
    3 语法简明/易用/灵活/自定义操作符 - 影响开发效率和维护难度
    4 错误处理/调试 - 影响开发效率和维护难度
    5 安全(XSS) - 是否防止XSS
     
    1 文件大小(压缩后)
    Mustache:5k
    doT:4k
    juicer:7.65k
    artTemplate(腾讯):5k
    baiduTemplate(百度):3k
    Underscore(Arale):11.7k - 不只是模板,还包含很多js语言增强功能
    Handlebars(Arale): 30.5k
     
    2 执行速度(不要迷恋速度)
    对于执行速度,不得不提模板“编译速度”和“渲染速度”。这几个主流模板都支持将模板预编译,然后再渲染。
    这里有一篇文章 《高性能JavaScript模板引擎原理解析》,说artTemplate的速度达到理论极限,实际说的是渲染速度,它的综合速度并不快。
    一般情况下,每页面只有一两个模板,执行时间差别不大。
    >>这里<<有个测试页面,根据artTemplate的测试页面 《引擎渲染速度竞赛》改的,揭示了几个主流js模板引擎的性能情况,大致结果截图如下:
     
    可以看出artTemplate,juicer,doT比其他模板引擎快很多。
     
     
    3 语法 简明/易用/灵活/自定义操作符 - 影响开发效率和维护难度
     
    语法需要一段时间的使用经验才能更深切地体会到优缺点,并且每个人喜欢的语法风格也不同,这部分可能略带个人主观色彩。
    这几个js模板引擎的语法可以粗略分为两种,一种是类似javascript的语法(doT, artTemplate, underscore),另一种是与javascript差异较大的语法(Mustache, juicer, handlebars)。从易上手的角度来看,类javascript语法更容易被新手掌握,但是熟练掌握之后,各个模板的语法都能满足我们的需求,可以按个人喜好来选择。
     
    Mustache声称是无逻辑(logic-less)模板,没有for、if...else...语法,但实际可以实现循环和分支,还可以实现更复杂的逻辑。
    doT模板语法灵活,阅读起来很易懂。可以方便地改造成 jquery插件
     
    <!--Mustache 的模板 -->
    <script id="Mustache" type="text/tmpl">
    <ul>
        {{#list}}
            <li>{{{index}}}. 用户: {{{user}}}/ 网站:{{{site}}}</li>
        {{/list}}
    </ul>
    </script>
    
    <!-- doT 的模板 -->
    <script id="doT" type="text/tmpl">
    <ul>
        {{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}
            {{ val = it.list; }}
            <li>{{=val[i].index}}. 用户: {{=val[i].user}}/ 网站:{{=val[i].site}}</li>
        {{ } }}
    </ul>
    </script>
    
    <!--juicer 的模板 -->
    <script id="juicer" type="text/tmpl">
    <ul>
        {@each list as val}
            <li>$${val.index}. 用户: $${val.user}/ 网站:$${val.site}</li>
        {@/each}
    </ul>
    </script>
    
    <!-- artTemplate 的模板 -->
    <script id="template" type="text/tmpl">
    <ul>
        <% for (i = 0, l = list.length; i < l; i ++) { %>
            <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站:<%=list[i].site%></li>
        <% } %>
    </ul>
    </script>
    
    <!-- underscore 的模板 -->
    <script id="underscoreTemplate" type="text/tmpl">
    <ul>
        <% for (var i = 0, l = list.length; i < l; i ++) { %>
            <li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站:<%=list[i].site%></li>
        <% } %>
    </ul>
    </script>
    
    <!-- Handlebars 的模板 -->
    <script id="Handlebars" type="text/tmpl">
    <ul>
        {{#list}}
            <li>{{{index}}}. 用户: {{{user}}}/ 网站:{{{site}}}</li>
        {{/list}}
    </ul>
    </script>
    
     
     
     
     
    4 错误处理/调试 - 影响开发效率和维护难度
    artTemplate 有详细的错误提示信息,查错方便,不影响后面代码的继续执行
    kissy template 错误信息直接输出在页面,而不是在控制台。不影响后面代码的继续执行
    juicer 控制台提示模板渲染出错,不影响后面代码的继续执行
    mustache 没有任何错误信息,不影响后面代码的继续执行
    其他控制台报脚本错误 js执行中断,不知道是哪里出错
     
    5 安全 - 是否防止XSS
    以上几个模板引擎全都支持html转义,防止XSS

    http://itindex.net/detail/44042-js-%E6%A8%A1%E6%9D%BF-%E5%BC%95%E6%93%8E

  • 相关阅读:
    bootstap 折叠
    AtCoder AGC019E Shuffle and Swap (DP、FFT、多项式求逆、多项式快速幂)
    Codeforces Gym 101630J Journey from Petersburg to Moscow (最短路)
    BZOJ 4042 Luogu P4757 [CERC2014]Parades (树形DP、状压DP)
    BZOJ 2734 [HNOI2012]集合选数 (状压DP、时间复杂度分析)
    BZOJ 2759 一个动态树好题 (LCT)
    Codeforces 1205C Palindromic Paths (交互题、DP)
    getopt实现传参自动识别
    powershell笔记
    bat语法需要注意的地方
  • 原文地址:https://www.cnblogs.com/daishuguang/p/3984057.html
Copyright © 2020-2023  润新知