前端模板引擎入門

時間 2019-11-12

標籤前端模板引擎入門简体版

原文原文鏈接

模板引擎

模板引擎起到數據和視圖分離的做用，模板對應視圖，關注如何展現數據，在模板外頭準備的數據，關注那些數據能夠被展現。javascript

後端模板引擎

freemarker

以下介紹， java後臺的模板引擎， freemark介紹，其圖能很好標明這種關係。php

http://freemarker.org/html

Apache FreeMarker is a template engine: a Java library to generate text output (HTML web pages, e-mails, configuration files, source code, etc.) based on templates and changing data. Templates are written in the FreeMarker Template Language (FTL), which is a simple, specialized language (not a full-blown programming language like PHP). You meant to prepare the data to display in a real programming language, like issue database queries and do business calculations, and then the template displays that already prepared data. In the template you are focusing on how to present the data, and outside the template you are focusing on what data to present.前端

velocity

另一個 java模板引擎， velocity：java

http://velocity.apache.org/jquery

velocity是一個基於java的模板引擎，它容許任何人使用簡單可是強大的模板語言，引用 java代碼中的對象。git

Velocity is a Java-based template engine. It permits anyone to use a simple yet powerful template language to reference objects defined in Java code.github

按照MVC的思想分離任務， web頁面開發者關注如何將頁面作的好看，業務開發者關注寫首要的邏輯代碼。web

其對 JSP代碼是一種取代。ajax

When Velocity is used for web development, Web designers can work in parallel with Java programmers to develop web sites according to the Model-View-Controller (MVC) model, meaning that web page designers can focus solely on creating a site that looks good, and programmers can focus solely on writing top-notch code. Velocity separates Java code from the web pages, making the web site more maintainable over its lifespan and providing a viable alternative to Java Server Pages (JSPs) or PHP.

不單單能夠作HTML模板，也能夠作XML和sql其它重複性代碼生成工具。

Velocity's capabilities reach well beyond the realm of the web; for example, it can be used to generate SQL, PostScript and XML from templates.

前端模板引擎

隨着前端技術發展，和前端處理能力加強，愈來愈多的渲染邏輯在瀏覽器端實現，由此出現前端模板引擎，仿照後臺模板引擎方法，定義前端模板語言，實現前端模板引擎。

arttemplate

https://github.com/aui/artTemplate

新一代 javascript 模板引擎

編寫模板

使用一個type="text/html"的script標籤存放模板：

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

渲染模板

var data = {
    title: '標籤',
    list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;

演示

示例： http://aui.github.io/artTemplate/demo/basic.html

arttemplate 性能介紹

http://cdc.tencent.com/2012/06/15/%e9%ab%98%e6%80%a7%e8%83%bdjavascript%e6%a8%a1%e6%9d%bf%e5%bc%95%e6%93%8e%e5%8e%9f%e7%90%86%e8%a7%a3%e6%9e%90/

artTemplate 介紹

artTemplate 是新一代 javascript 模板引擎，它採用預編譯方式讓性能有了質的飛躍，而且充分利用 javascript 引擎特性，使得其性能不管在前端仍是後端都有極其出色的表現。在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。

art-template結合tomjs編譯工具效果更佳

https://github.com/aui/tmodjs/

若是在頁面中維護不少 <script>模板端段，則會很龐大，且解析效率不佳：

此工具容許各個模板獨自文件管理，而後精怪此工具合併壓縮，成爲一個可引用的模板文件：

使用默認的格式

TmodJS 默認將整個目錄的模板壓縮打包到一個名爲 template.js 的腳本中，可直接在頁面中使用它：
<script src="tpl/build/template.js"></script>
<script>
    var html = template('news/list', _list);
    document.getElementById('list').innerHTML = html;
</script>
template.js 還支持 RequireJS、SeaJS、NodeJS 加載。示例

指定格式（amd / cmd / commonjs)

此時每一個模板就是一個單獨的模塊，無需引用 template.js：
var render = require('./tpl/build/news/list');
var html = render(_list);

jquery template模板引擎

http://www.cnblogs.com/FoundationSoft/archive/2010/05/19/1739257.html

http://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html

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

    <!DOCTYPE html>
    <html>
    <head>
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
      <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    </head>
    <body>

    <ul id="movieList"></ul>

    <script>
      var movies = [
      { Name: "The Red Violin", ReleaseYear: "1998" },
      { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
      { Name: "The Inheritance", ReleaseYear: "1976" }
      ];

    var markup = "<li><b>${Name}</b> (${ReleaseYear})</li>";

    /* Compile the markup as a named template */
    $.template( "movieTemplate", markup );

    /* Render the template with the movies data and insert
       the rendered HTML under the "movieList" element */
    $.tmpl( "movieTemplate", movies )
      .appendTo( "#movieList" );
    </script>

    </body>
    </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。