js模板引擎——art Template

简朴引见

javascript 模板引擎作为数据与界面星散事情中最重要一环,愈来愈受开发者关注。

artTemplate 是新一代 javascript 模板引擎,它采纳预编译体式格局让机能有了质的奔腾,而且充分利用 javascript 引擎特征,使得其机能不管在前端照样后端都有极为精彩的表现。

javascript 模板引擎基本道理

虽然每一个引擎从模板语法、语法剖析、变量赋值、字符串拼接的完成体式格局各有所差别,但症结的衬着道理仍然是动态实行 javascript 字符串。

可看:http://cdc.tencent.com/?p=5723 基本道理的例子

artTemplate 高效的隐秘

1、预编译
在平常的模板引擎完成道理中,由于要对模板变量举行赋值,所以每次衬着都须要动态编译 javascript 字符串完成变量赋值。而 artTemplate 的编译赋值历程倒是在衬着之前完成的,这类体式格局称之为“预编译”。

2、更快的字符串相加体式格局
很多人误以为数组 push 要领拼接字符串会比 += 快,要知道这仅仅是 IE6-8 的浏览器下。实测表明当代浏览器运用 += 会比数组 push 要领快,而在 v8 引擎中,运用 += 体式格局比数组拼接快 4.7 倍。所以 artTemplate 依据 javascript 引擎特征采纳了两种差别的字符串拼接体式格局。

运用要领

1、援用js文件:<script src=”js/arttmpl.js”></script>
2、页面中,运用一个type=”text/template”的script标签寄存模板:

<script id='doctor-template' type="text/template">
        <% for(var i in data){ var item=data[i]; %>
            <li class="mui-table-view-cell mui-media ">
                <a href="javascript:;" class="mui-navigate-right">
                    <div class="mui-media-object mui-pull-left">
                        <img src="<%=(item.photo)%>" width="100%">
                        <span class="mui-badge mui-badge-danger"><%=(item.score)%>分</span>    
                    </div>
                    <div class="mui-media-body">
                        <%=(item.name)%>&nbsp;<span class="mui-badge mui-badge-warning"><%=(item.position)%></span>
                        <p class="mui-ellipsis"><%=(item.hospital)%></p>
                        <p class="mui-ellipsis"><%=(item.desc)%></p>
                    </div>
                </a>
            </li>
        <% } %>
    </script>
    

模板逻辑语法最先与完毕的界定符号为<% 与 %>,若<%背面紧跟=号则输出变量内容。

3、衬着模板

template.render(id, data);

继承上面的例子:

var fragment = template('doctor-template', {
                "data":[
                    {
                        name:"王静",
                        score:4.5,
                        photo:'images/logo.png',
                        hospital:"江苏省中病院",
                        desc:'妇科、不孕不育症、月经病等',
                        position:'副医师'
                    },
                    {
                        name:"啦啦",
                        score:4.9,
                        photo:'images/logo.png',
                        hospital:"鼓楼病院",
                        desc:'儿童呼吸系统疾病的诊治,关于儿童疾病',
                        position:'主治医师'
                    }
                ]
            });

不转义HTML

模板引擎默许数据包括的 HTML 字符举行转义以防止 XSS 破绽,若不须要转义的处所可运用==。

<script id="test" type="text/template">
<%==value%>
</script>

若须要封闭默许转义,能够设置:

template.config('escape', false);

在js中寄存模板

var source =
      '<ul>'+    
        '<% for (var i = 0; i < list.length; i ++) { %>'+ 
               '<li>索引 <%= i + 1 %> :<%= list[i] %></li>'+
         '<% } %>'+
      '</ul>';
var data = {
        list: ['文艺', '博客', '拍照', '影戏', '民谣', '游览', '吉他']
};
var render = template.compile(source);
var html = render(data);
document.getElementById('content').innerHTML = html;

template.compile([id], source)将返回一个衬着函数。个中 id 参数是可选的,假如运用了 id 参数,能够运用template.render(id, data)衬着模板。

增加辅佐要领

template.helper(name, callback)辅佐要领平常用来举行字符串替代,如 UBB 替代、脏话替代等。

比方扩大一个UBB替代要领:

template.helper('$ubb2html', function (content) {
    return content
    .replace(/[b]([^[]?)[/b]/igm, '<b>$1</b>')
    .replace(/[i]([^[]?)[/i]/igm, '<i>$1</i>')
    .replace(/[u]([^[]?)[/u]/igm, '<u>$1</u>')
    .replace(/[url=([^]])]([^[]?)[/url]/igm, '<a href="$1">$2</a>')
    .replace(/[img]([^[]?)[/img]/igm, '<img src="$1" />');
});

在模板中的运用体式格局:

<%=$ubb2html(content) %>

注重:引擎不会对辅佐要领输出的 HTML 字符举行转义。

设置界定符

若前端模板语法与后端语法发生争执,能够修正模板引擎界定符,比方:

template.openTag = "<!--[";
template.closeTag = "]-->";

GitHub 地点

更多参考文档:http://aui.github.io/artTemplate/

    原文作者:dada86
    原文地址: https://segmentfault.com/a/1190000004974354
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞