欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JavaScript中如何使用template插件?

程序员文章站 2022-03-18 15:32:07
...
本章给大家介绍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: '<i>热爱的</i>游戏',
      list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 }; {{ 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 默认配置

JavaScript中如何使用template插件?

代码示例:

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

以上就是JavaScript中如何使用template插件?的详细内容,更多请关注其它相关文章!