高性能JavaScript模板引擎template.js原理解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro tmpl的25/32倍(性能测试);artTemplate的模板还支持使用自动化工具预编译; artTemplate的库分为两种,一个是template.

artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro tmpl的25/32倍(性能测试);artTemplate的模板还支持使用自动化工具预编译;

artTemplate的库分为两种,一个是template.js(采用"{{ }}"),一个是template-native.js(采用"<%= %>");第一个是简洁语法版,第二个是原生语法(感觉像JSP)版,两个库的语法不可混用,否则会报错;本文主要是讲简洁语法

template.js是一款使用方便/性能卓越javascript模板引擎,简单/好用,支持webpack和fis,只有5K左右大小

原理

提前将Html代码放进一个<script id="test" type="text/html"></script>中,当需要用到时,在js里这样调用:var htmlstr = template("test",放Json数据或其他),然后$("#*").html(htmlstr),放进去就好

功能概述

提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果

特性

1.性能卓越,执行速度通常是Mustache与tmpl的20多倍(性能测试)

2.支持运行时调试,可精确定位异常模板所在语句(演示)

3.对NodeJS Express友好支持

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

5.支持include语句,可导入定义的其它模块

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

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

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

9.支持所有流行的浏览器

10.丰富的自定义配置

11.支持数据过滤

12.异常捕获功能

具体方法

引入template.js文件

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

编写模板

使用一个type="text/html"的script标签存放模板,或者放到字符串中:

<script id="test" type="text/html">  
  {{ if ifAdmin }}  //{{}}符号包裹起来的语句为模板的逻辑表达式
    <h1>{{ author }}</h1>
    <ul>
      {{each list as value i}}
        <li>{{ i+1 }} : {{ value }}</li>
      {{/each}}
    </ul>
  {{/if}}
</script>

注意:{{}}这是都是对内容编码输出,写成{{#author}}是对内容不编码输出;编码可以防止数据中含有HTML字符串,避免引起XSS攻击

渲染模板(向模板插入数据并输出到页面)

var data = { 
  author:'宫崎骏',
  isAdmin:true,
  list:['千与千寻','哈尔的移动城堡','幽灵公主','风之谷','龙猫']
};
var html = template('test',data); //template(id,data):根据id渲染模板,内部会根据document.getElementById(id)查找模板,如果没有data参数那么将返回一渲染函数
document.getElementById('content').innerHTML = html;

输出结果

<h1>宫崎骏</h1>
<ul>
  <li>1 : 千与千寻</li>  
  <li>2 : 哈尔的移动城堡</li> 
  <li>3 : 幽灵公主</li>  
  <li>4 : 风之谷</li> 
  <li>5 : 龙猫</li> 
</ul>

语法

表达式

流程控制语句(if else)

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}

示例如下

<script id="test" type="text/html">
  <div>
    {{if bok == 22}}
      <h1>线上</h1>
    {{else if bok == 33}}
      <h2>隐藏</h2>
    {{else}}
      <h3>走这里</h3>
    {{/if}}
  </div>
</script>

嵌套的写法

<script id="test" type="text/html">
  <div>
    {{if bok}}
      {{if list.length >= 0}}
        <p>线上</p>
      {{else}}
        <p>没有数据</p>
      {{/if}}
    {{/if}}
  </div>
</script>

循环遍历语句

{{each name}}
索引:{{$index}}
值:{{$value}}
{{/each}}

示例如下

<script id="test" type="text/html">
  <div>
    {{if list.length >= 0}}
      {{each list as value index}}
        <p>编号:{{index+1}} -- 姓名:{{value.name}} -- 年龄:{{value.age}}</p>
      {/each}
    {{/if}}
  </div>
</script>

也可以简写为

<script id="test" type="text/html">
  <div>
    {{if list.length >= 0}}
      {{each list}}
        <p>编号:{{$index+1}} -- 姓名:{{$value.name}} -- 年龄:{{$value.age}}</p>
      {/each}
    {{/if}}
  </div>
</script>

调用自定义方法

辅助方法

使用template.helper(name, callback)注册公用辅助方法,可以直接在{{}}中调用:

<script id="test" type="text/html">  
  <div>
    {{if c == 100}}
      <ul>
        {{each person}}
          <li>姓名:{{$value.name}} -- 性别:{{show($value.sex)}}</li>
        {{/each}}
      </ul>
    {{/if}}
  </div>
</script>
<script>
  var data = {
    c:100,
    person:[
      {name:"jack",age:18,sex:1},
      {name:"tom",age:19,sex:0},
      {name:"jerry",age:20,sex:0},
      {name:"kid",age:21,sex:1},
      {name:"jade",age:22,sex:0}
    ]
  };
  //自定义函数
  template.helper('show',function(sex){
    console.log(sex); //同样可以打印日志到控制台
    if(sex == 0){
      return "男"
    }else if(sex == 1){
      return "女"
    }
  });
  var html = template('test',data);
  document.getElementById('app').innerHTML = html;
</script>

辅助方法,可以扩展常用的公共方法

template.helper('dateFormat', function (date, format) { 
 // .. 
 return value; 
}); 

在模板中的使用方式:

语法 : {{ data | funname : '第二参数' }};

具体调用为 : funname(data,'第二参数');

模板中使用的方式:{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

支持传入参数与嵌套使用:{{time | say:'cd' | ubb | link}}

注意:引擎不会对辅助方法输出的HTML字符进行转义

调用子模版

{{include 'main'}}引入子模板,数据默认为共享;{{include 'main' a}},a为制定数据,但是同样必须是父级数据,可以看看下面的例子,如果不注入的a的话,引入的子模板是接受不到数据的

<body>
  <div id="app"></div>
  <script id="main" type="text/html">  
    <ul>
      {{each list}}
        <li>{{$value}}</li>
      {{/each}}
    </ul>  
    {{include 'main' a}} <!-- include--导入其它模版,很实用的一个功能 -->
  </script>
  <script type="text/html">
    <div>
      <ul>
      {{each person}}
        <li>{{$value.name}}</li>
      {{/each}}
      </ul>
      {{include 'main' a}}
    </div>
  </script>
  <script>
    var data = {
      person:[
        {name:"jack",age:18},
        {name:"tom",age:19},
        {name:"jerry",age:20},
        {name:"kid",age:21},
        {name:"jade",age:22}
      ],
      a:{
        list:['文艺','博客','摄影','电影','民谣','旅行','吉他']
      }
    };
    var html = template('test',data);
    document.getElementById('app').innerHTML = html;
  </script>
</body>

template.config

配置template.js的自定义选项

option {Object} 配置的对象参数

return {Object} 配置对象的镜像

可配置参数

字段 类型 默认值 说明
openTag string {{ 逻辑语法开始标签
closeTag string }} 逻辑语法结束标签
escape boolean true 是否编码输出HTML字符
compress boolean false 是否压缩输出的html

template.registerFunction

注册自定义函数功能

字段 类型 说明
name string 自定义函数的名字,如果缺省会返回全部已注册的函数
fn function 自定义函数,如果缺省会返回名称为name的函数
return object/function 对象或函数

template.unregisterFunction

取消自定义函数功能

字段 类型 说明
name string 取消自定义函数的名字
return bollean 是否成功

template.registerModifier

注册自定义修复器功能。

字段 类型 说明
name string 自定义修复器的名字,如果缺省会返回全部已注册的修复器
fn function 自定义修复器,如果缺省会返回名称为name的修复器
return object/function 对象或函数

template.unregisterModifier

取消自定义修复器功能。

字段 类型 说明
name string 取消自定义修饰器的名字
return bollean 是否成功

template.noConflict+

在以原始方式使用template.js时会存在改函数(在模块化开发环境中不会存在),用来释放template.js占用的全局变量template,同时会返回template

return {Function} template

模板编码规范

1.不能使用javascript关键字作为模板变量(包括 ECMA5 严格模式下新增的关键字):

break, case, catch, continue, debugger, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with, abstract, boolean, byte, char, class, const, double, enum, export, extends, final, float, goto, implements, import, int, interface, long, native, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile, arguments, let, yield

2、模板运行在沙箱中,内部无法访问外部变量,除非给模板定义辅助方法。例如:

    template.helper('Math', Math)

模板中若任意引用外部对象,复杂的依赖管理将会让项目难以维护,这种方式将利于后续模板迁移(包括通过工具预编译)

在隔壁公司看到的:合理的要求是训练,不合理的要求是磨练

目录
相关文章
|
1月前
|
算法 Java 数据库连接
Java连接池技术,从基础概念出发,解析了连接池的工作原理及其重要性
本文详细介绍了Java连接池技术,从基础概念出发,解析了连接池的工作原理及其重要性。连接池通过复用数据库连接,显著提升了应用的性能和稳定性。文章还展示了使用HikariCP连接池的示例代码,帮助读者更好地理解和应用这一技术。
42 1
|
10天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
41 0
|
13天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
16天前
|
API 持续交付 网络架构
深入解析微服务架构:原理、优势与实践
深入解析微服务架构:原理、优势与实践
17 0
|
17天前
|
存储 供应链 物联网
深入解析区块链技术的核心原理与应用前景
深入解析区块链技术的核心原理与应用前景
|
17天前
|
存储 供应链 安全
深度解析区块链技术的核心原理与应用前景
深度解析区块链技术的核心原理与应用前景
24 0
|
27天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
42 0
|
1月前
|
供应链 安全 分布式数据库
探索区块链技术:从原理到应用的全面解析
【10月更文挑战第22天】 本文旨在深入浅出地探讨区块链技术,一种近年来引起广泛关注的分布式账本技术。我们将从区块链的基本概念入手,逐步深入到其工作原理、关键技术特点以及在金融、供应链管理等多个领域的实际应用案例。通过这篇文章,读者不仅能够理解区块链技术的核心价值和潜力,还能获得关于如何评估和选择适合自己需求的区块链解决方案的实用建议。
55 0
|
17天前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
47 2
|
2月前
|
缓存 Java 程序员
Map - LinkedHashSet&Map源码解析
Map - LinkedHashSet&Map源码解析
70 0

推荐镜像

更多