JavaScript模板引擎Template,artTemplate模板引擎学习实

2019-10-05 08:33 来源:未知

  在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错。在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javascript引擎。而javascript引擎的实质就是帮我们把带有JavaScript代码的伪THTML语句编译为HTML。

 

template.js 一款 JavaScript 模板引擎,简单,好用。提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。

 

插件介绍:template 是一个高性能的JavaScript模板引擎。

1、特性

  如果有不了解的朋友,可以前往这两篇文章:

 

(1)、性能卓越,执行速度通常是 Mustache 与 tmpl 的 20 多倍(性能测试)(2)、支持运行时调试,可精确定位异常模板所在语句(演示)

  淘宝购物车页面 PC端和移动端实战

插件特性:

(3)、对 NodeJS Express 友好支持(4)、安全,默认对输出进行转义、在沙箱中运行编译后的代码(Node版本可以安全执行用户上传的模板)

  淘宝购物车页面 智能搜索框Ajax异步加载数据

  1、性能卓越,执行速度快(mustache 与 tmpl 的20多倍);

(5)、支持include语句

  源码地址:

  2、支持运行时调试,可精准定位异常模板所在语句;

(6)、可在浏览器端实现按路径加载模板(详情)

  GitHub:Uncle-Keith

  3、对 NodeJS Express 有很好的支持;

(7)、支持预编译,可将模板转换成为非常精简的 js 文件

 

  4、安全,默认对输出进行转义;

(8)、模板语句简洁,无需前缀引用数据,有简洁版本与原生语法版本可选

  回归正题,以下对artTemplate模板引擎的介绍会分为如下几部分内容:

  5、可在浏览器端实现按路径加载模板;

(9)、支持所有流行的浏览器

  1.artTemplate模板引擎的基本语法结构

  6、支持预编译,可将模板转换成为非常精简的 js 文件;

2、语法

  2.artTemplate模板引擎的基本使用方法

  7、模板语句简介,无需前缀引用数据,拥有简洁版本和原生版本可供选择;

(1)、使用

    2.1:使用一个type="text/html"script标签存放模板

  8、支持所有流行的浏览器;

引用简洁语法的引擎版本,例如: <script src="dist/template.js"></script> 

    2.2:在javascript中存放模板

 

(2)、表达式

    2.3:嵌入子模板(include)

开始使用(有两种语法, 此文章介绍的是简介语法)

{{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

  3.artTemplate模板引擎使用实战

  1) artTemplate 模板必须使用一个type="text/html" 的 script 标签用来存放模板(标签中写的是HTML);

(3)、输出表达式

 

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

对内容编码输出: {{content}} 
不编码输出: {{#content}} 
编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。

1.artTemplate基本语法结构

 

(4)、条件表达式

  artTemplate的语法结构很简单,就是{{}}。`{{}}``` 符号包裹起来的语句则为模板的表达式。表达式又分为 输出表达式,条件表达式,遍历表达式,模板包含表达式。具体的可以看看GitHub:artTemplate 简洁语法版。官网对语法介绍的还可以,不过在这里想在说一句,要记住表达式的写法和表达式有哪些分类,对于理解引擎很有帮助。

  2) 开始编写自己的模板

{{if admin}} 
 <p>admin</p> 
{{else if code > 0}} 
 <p>master</p> 
{{else}} 
 <p>error!</p> 
{{/if}} 

 

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

(5)、遍历表达式

2.artTemplate模板引擎的使用方法

 

无论数组或者对象都可以用 each 进行遍历。

  首先,需要去官网下载 简洁语法版,然后在body底部加载script文件。文件很小,只有2.7kb,可是功能十分强大。

  3) 使用数据渲染模板

{{each list as value index}} 
 <li>{{index}} - {{value.user}}</li> 
{{/each}} 

*  *2.1:使用一个type="text/html"script标签存放模板

 var data ={
     title: '热爱的游戏',
     list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 };

 var html = template('model',data);
 document.getElementById('box').innerHTML = html

亦可以被简写:

    使用script存放模板的时候要注意两个方面。

 

{{each list}} 
 <li>{{$index}} - {{$value.user}}</li> 
{{/each}} 

    一方面是必须给script标签定义id,而且只能是id,不能是class。因为在使用template(id,data)方法的时候,该方法会根据id渲染模板,引擎内部会根据document.getElementById(id)查找模板。如果使用class作为参数,artTemplate引擎会报错。如果没有 data 参数,将返回一渲染函数。

到了这一步,打开页面就可以看到效果了。

(6)、模板包含表达式

    另外一方面是在<!DOCTYPE html>script标签中的type类型默认为type/javascript。在script标签中,必须重新声明type类型为text/html,否则会没有效果。

 

用于嵌入子模板。

    使用方法如下

artTemplate 简洁语法介绍:

{{include 'template_name'}} 

     <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
                <li>索引{{i+1}} : {{value}}</li>
            {{/each}}
        </ul>
     </script>
     <script>
         var data = {
             title:'My Life',
             list:['篮球','桌球','游泳','滑轮','读书']
         };
         var html = template('test',data);
         $('.rascal').html(html);
     </script>

1) 使用之前需要引用简洁语法的版本,例如:

子模板默认共享当前数据,亦可以指定数据:{{include 'template_name' news_list}} 

    渲染的页面如下:

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

(7)、辅助方法

TAG标签:
版权声明:本文由金沙澳门官网4166发布于世界史,转载请注明出处:JavaScript模板引擎Template,artTemplate模板引擎学习实