新一代 javascript 模板引擎

2024-05-12 02:08

本文主要是介绍新一代 javascript 模板引擎,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

artTemplate

新一代 javascript 模板引擎

artTemplate 是新一代 javascript 模板引擎,它在 v8 中的渲染效率可接近 javascript 性能极限,在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。

引擎支持调试。若渲染中遇到错误,调试器可精确定位到产生异常的模板语句,解决前端模板难以调试的问题。

独有模板编译工具,它能把前端模板编译成不依赖模板引擎运行的JS文件,让前端模板可以突破浏览器的限制,实现像后端模板一样按文件与目录的方式组织、按需加载、include嵌套等。

这一切都在 2kb(gzip) 中实现!

快速上手

编写模板

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

<script id="test" type="text/html">
<h1><%=title%></h1>
<ul><%for(i = 0; i < list.length; i ++) {%><li>条目内容 <%=i + 1%> :<%=list[i]%></li><%}%>
</ul>
</script>

模板逻辑语法开始与结束的界定符号为<% 与%>,若<%后面紧跟=号则输出变量内容。

渲染模板

template.render(id, data)

var data = {title: '标签',list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template.render('test', data);
document.getElementById('content').innerHTML = html;

演示

嵌入子模板

<%include(id, [data])%>语句可以嵌入子模板,其中第二个参数是可选的,它默认传入当前的数据。

<script id="test" type="text/html">
<h1><%=title%></h1>
<%include('list')%>
</script><script id="list" type="text/html">
<ul><%for(i = 0; i < list.length; i ++) {%><li>条目内容 <%=i + 1%> :<%=list[i]%></li><%}%>
</ul>
</script>

演示

不转义HTML

模板引擎默认数据包含的 HTML 字符进行转义以避免 XSS 漏洞,若不需要转义的地方可使用两个=号。

<script id="test" type="text/html">
<%==value%>
</script>

若需要关闭默认转义,可以设置template.isEscape = false

演示

在js中存放模板

template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的,如果使用了 id 参数,可以使用template.render(id, data)渲染模板。

var source ='<ul>'
+    '<% for (var i = 0; i < list.length; i ++) { %>'
+        '<li>索引 <%= i + 1 %> :<%= list[i] %></li>'
+    '<% } %>'
+ '</ul>';var data = {list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};var render = template.compile(source);
var html = render(data);
document.getElementById('content').innerHTML = html;

演示

添加辅助方法

template.helper(name, callback)辅助方法一般用来进行字符串替换,如 XSS 过滤、UBB 替换、脏话替换等。

例如扩展一个UBB替换方法:

template.helper('$ubb2html', function (content) {return content.replace(/\[b\]([^\[]*?)\[\/b\]/igm, '<b>$1</b>').replace(/\[i\]([^\[]*?)\[\/i\]/igm, '<i>$1</i>').replace(/\[u\]([^\[]*?)\[\/u\]/igm, '<u>$1</u>').replace(/\[url=([^\]]*)\]([^\[]*?)\[\/url\]/igm, '<a href="$1">$2</a>').replace(/\[img\]([^\[]*?)\[\/img\]/igm, '<img src="$1" />');
});

在模板中的使用方式:

<%=$ubb2html(content) %>

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

演示

设置界定符

若前端模板语法与后端语法产生冲突,可以修改模板引擎界定符,例如:

template.openTag = "<!--[";
template.closeTag = "]-->";

演示

自定义语法

artTemplate 提供一个语法扩展用来简化模板逻辑语法。语法示例:

{if admin}<h3>{title}</h3><ul>{each list}<li>{$index + 1}: {$value}</li>{/each}</ul>
{/if}

详情

自动化工具

编译工具

./tools/compile

可把模版编译成不依赖模版引擎的js文件,这样前端模版也可以向后端模版一样按文件放置,并且支持include等语句。

编译后的模板可以通过RequireJS、SeaJS等加载器进行异步加载,亦能利用它们成熟的打包合并工具进行上线前优化。

抽取工具

./tools/combine/

可以把 HTML 中的模板提取出来以便把模板嵌入到 js 文件中。

与编译工具不同的是,抽取后的模板仍然依赖引擎运行。

模板编码规范

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)

artTemplate编译后的模板将运行在沙箱内,模板语句无法读写外部对象。

在使用原生语法的引擎中,模板中若引用外部对象,随着项目复杂度增加,那时候谁都不能确定模板中的变量到底是数据还是全局对象,这种复杂的依赖关系将为会项目带来巨大的维护成本。

更新记录

v2.0 release

  1. 编译工具增加NodeJS跨平台版本。感谢 @toobug
  2. 增加RequireJS加载编译后的模板的示例

v2.0 beta5

  1. 修复编译工具可能存在重复依赖的问题。感谢 @warmhug
  2. 修复include内部实现可能产生上下文不一致的问题。感谢 @warmhug
  3. 支持使用拖拽文件到compile.cmd图标上进行单独编译

v2.0 beta4

  1. 修复编译工具在压缩模板可能导致 HTML 意外截断的问题。感谢 @warmhug
  2. 完善编译工具对include支持支持,可以支持不同目录之间模板嵌套
  3. 修复编译工具没能正确处理自定义语法插件的辅助方法

v2.0 beta1

  1. 对非String、Number类型的数据不输出,而Function类型求值后输出。
  2. 默认对html进行转义输出,原文输出可使用<%==value%>,也可以关闭默认的转义功能template.isEscape = false
  3. 增加批处理工具支持把模板编译成不依赖模板引擎的 js 文件,可通过 RequireJS、SeaJS 等模块加载器进行异步加载。

授权协议

Released under the MIT, BSD, and GPL Licenses


演示例子 | 性能测试 | 引擎原理

© cdc.tencent.com


这篇关于新一代 javascript 模板引擎的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/981301

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

poj3468(线段树成段更新模板题)

题意:包括两个操作:1、将[a.b]上的数字加上v;2、查询区间[a,b]上的和 下面的介绍是下解题思路: 首先介绍  lazy-tag思想:用一个变量记录每一个线段树节点的变化值,当这部分线段的一致性被破坏我们就将这个变化值传递给子区间,大大增加了线段树的效率。 比如现在需要对[a,b]区间值进行加c操作,那么就从根节点[1,n]开始调用update函数进行操作,如果刚好执行到一个子节点,

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�