JavaScript模板引擎简介

最新推荐文章于 2024-09-03 07:22:54 发布

weixin_33898876

最新推荐文章于 2024-09-03 07:22:54 发布

阅读量99

点赞数

文章标签：前端 javascript 嵌入式 ViewUI

国内私募机构九鼎控股打造APP，来就送 20元现金领取地址： http://jdb.jiudingcapital.com/phone.html
内部邀请码： C8E245J （不写邀请码，没有现金送）
国内私募机构九鼎控股打造，九鼎投资是在全国股份转让系统挂牌的公众公司，股票代码为430719，为“中国PE第一股”，市值超1000亿元。

------------------------------------------------------------------------------------------------------------------------------------------------------------------

原文地址： Roc's Blog http://rocwang.me/js-template/

JavaScript模板引擎简介

现状

好吧，悲剧的是，JavaScript的前端模板引擎多如牛毛，让人眼花缭乱，以致于还有人做一个模板引擎选择器。但大致来说，js的模板引擎可以分为两大类：一类是“嵌入式”的，意思是说你可以将js直接写在模板里面，从而实现一些复杂的渲染逻辑；另一类是“无逻辑(Logic-less)”的，这种模板引擎的哲学是模板应当同逻辑尽可能的分离，因此，你不能在模板中随意加入js代码，而只能利用模板引擎本身提供的机制来实现一些简单的功能。

我选择了几个个人觉得比较有意思或者比较流行的js模板引擎(大部分是Logic-less类型的)，下面来一一介绍下。

mustache

说起来，mustache其实是一套与语言无关的模板系统规范，有多种的语言的实现，包括js。由于用其写成的模板中大量使用{，倒过来看像胡子，所以取名mustache。来看看demo：

模板：

<h1>{{header}}</h1>
{{#bug}}
{{/bug}}

{{#items}}
  {{#first}}
    <li><strong>{{name}}</strong></li>
  {{/first}}
  {{#link}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/link}}
{{/items}}

{{#empty}}
  <p>The list is empty.</p>
{{/empty}}

数据：

{
  "header": "Colors",
  "items": [
      {"name": "red", "first": true, "url": "#Red"},
      {"name": "green", "link": true, "url": "#Green"},
      {"name": "blue", "link": true, "url": "#Blue"}
  ],
  "empty": false
}

渲染结果：

<h1>Colors</h1>
<li><strong>red</strong></li>
<li><a href="#Green">green</a></li>
<li><a href="#Blue">blue</a></li>

mustache是logic-less的，所以其一大特点是模板中没有任何if，for结构，而是通过数据的值来实现分支和循环的。这种分离带来的好处是模板清晰，易于维护。

handlebars

handlebars, 是一种胡子的样式，从名字你就能猜出，它肯定和mustache有联系。是的，handlebars的模板与mustache的兼容，可直接使用，并且handlebars提供了更多的功能。

handlerbars最大的特点是，它的模板是可以预先编译的。编译过程可以在浏览器端，甚至还可以通过node.js在服务器端进行。这样做的好处是，大大提高了模板渲染时的性能，而且handlebars在浏览器运行时的库依赖也可以减小。

另外，handlebars还在模板中支持一些新的语法结构。

hogan

hogan是来自于twitter的开源模板引擎，品质自然也不会差。同handlebars一样， hogan兼容mustache的规范，可以直接使用mustache的模板，而且也支持对模板的编译。

icanhaz

icanhaz是另一个基于mustache的模板引擎，icanhaz的一大特性是，可以自动扫描并绑定模板代码，这样，你就不用显式的调用渲染函数了。

Demo：

模板：

<script id="user" type="text/html">
  <li>
    <p class="name">Hello I'm {{ name }}</p>
    <p><a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p>
  </li>
</script>

渲染代码：

// I Can Haz User?
var user = ich.user(user_data_object)

在demo中，icanhaz自动导入的模板，并根据其id，在ich下生成同名的对象以供调用。

dust

dust的语法不兼容的mustache，但有它自己的一些特点，官方文档中说明如下。

异步/流式操作
浏览器/node兼容
增强的mustache/ctemplate语法
干净，底层的API
高性能
模板可组合

linkedin还选用它做为其正式的前端模板引擎(http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more)

但dust貌似很久没有更新了，一直停留在0.3版，最近的一次更新已经是在1年前了。

John Resig’s Micro-Templating

John Resig是jQuery的创建者，这位大牛写了一个微型的模板引擎，很有点意思：

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
    var cache = {};

    this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
        cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

        // Generate a reusable function that will serve as a template
        // generator (and which will be cached).
        new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +

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

    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
    };
})();

模板的例子：

<script type="text/html" id="item_tmpl">
    <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">
    <div class="grid_1 alpha right">
        <img class="righted" src="<%=profile_image_url%>"/>
    </div>
    <div class="grid_6 omega contents">
        <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
    </div>
    </div>
</script>

模板里还可以嵌入js代码：

<script type="text/html" id="user_tmpl">
    <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
    <% } %>
</script>

这个模板引擎实现的大致原理是：