JavaScript中如何使用template插件？

本章跟大家介紹JavaScript中如何使用template插件，了解template插件的使用方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

外掛程式介紹：template 是一個高效能的JavaScript模板引擎。

外掛特性：

　　1、效能卓越，執行速度快（mustache 與tmpl 的20倍以上）；

　　2、支援執行時偵錯，可精準定位異常範本所在語句；

　　3、對NodeJS Express 有很好的支援；

　　4、安全，預設對輸出進行轉義；

　　5、可在瀏覽器端實作按路徑載入範本；

　　6、支援預編譯，可將範本轉換為非常精簡的js 檔案；

　　7、範本語句簡介，無需前綴引用數據，擁有簡潔版本和原生版本可供選擇；

　　8、支援所有流行的瀏覽器；

開始使用（有兩種語法， 此文章介紹的是簡介語法）

1） artTemplate 模板必須使用一個type="text/html" 的script 標籤用來存放模板（標籤中寫的是HTML）;

<script type="text/html"></script>

2 ) 開始寫自己的模板

<script id="model" type="text/html">
     <h1>{{title}}</h1>
     <ul>
         {{each list as value index}}
             <li>{{index+1}}、{{value}}</li>
         {{/each}}
     </ul>
 </script>

3） 使用資料渲染模板

var data ={
     title: '热爱的游戏',
     list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 }; var html = template('model',data); document.getElementById('box').innerHTML = html

artTemplate 簡潔語法介紹：

1 ) 使用先前需要引用簡潔語法的版本，例如：

<script src="template.js"></script>

2） 表達式：

　　{{ 和}} 符號包裹起來的語句則為模板的表達式。

3) 輸出表達式：

　　對內容編碼輸出： {{ title }}

　　對內容不編碼輸出： {{ #title }}

// 假如有这样一段数据，title 内出现了标签  var data ={
      title: &#39;<i>热爱的</i>游戏&#39;,
      list: [&#39;LOL&#39;,&#39;王者农药&#39;,&#39;梦三国&#39;,&#39;魔兽争霸&#39;,&#39;其它&#39;]
 }; {{ title }}  // 显示内容为：<i>热爱的</i>游戏 {{ #title }} // 显示内容为：热爱的游戏

4） 條件式

<script id="model" type="text/html">
    <h1>{{ title }}</h1>
    <ul>　　　　　// 判断条件自定
        {{if list.length>0}}
            {{each list as value index}}
                <li>{{index+1}}、{{value}}</li>
            {{/each}}
        {{else}}
            <p>没有内容</p>
        {{/if}}
    </ul>
</script>

5） 遍歷表達式

{{each list as value index}}
    <li>{{index+1}}、{{value}}</li>
{{/each}}// 也可以被简写为
{{each list}}
    <li>{{$index+1}}、{{$value}}</li>
{{/each}}

artTemplate 方法：

#template 函數中有兩個參數值。
   　第一個參數表示需要編譯的範本（填入的是模板的 ID）
第二個參數是需要填入模板的數據，傳回值是編譯之後的HTML字串；

artTemplate 預設配置

程式碼範例：

<script id="people" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{if peos.length>0}}
            {{each peos as p index}}
                <li>
                    {{index+1}}、
                    选手姓名：<span>{{p.name}</span>&#x3000;
                    年龄：<span>{{p.age}}</span>
                </li>
            {{/each}}
        {{else}}
            <p>没有内容</p>
        {{/if}}
    </ul>
</script>

<script>
    var data2 ={
        title: &#39;喜欢的职业选手&#39;,
        peos: [
            {
                name: "<b>Uzi</b>",
                age: 20
            },
            {
                name: &#39;Clearlove7&#39;,
                age: 20
            },
            {
                name: &#39;Korol&#39;,
                age: 21
            }
        ]
    }
    // 默认为true 不编译 输出为 <b>Uzi</b>　　//  false 编译 是否编码输出 HTML 字符
    template.config("escape",false); 
    var html2 = template(&#39;people&#39;,data2);
    document.getElementById(&#39;box2&#39;).innerHTML = html2;
</script

以上是JavaScript中如何使用template插件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！