文档章节

javascript 模板引擎artTemplate

lghyt
 lghyt
发布于 2016/06/14 09:55
字数 1507
阅读 175
收藏 0
点赞 0
评论 0

artTemplate

新一代 JAVASCRIPT 模板引擎

=================

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

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

另外,artTemplate 的模板还支持使用自动化工具预编译,这一切都在 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>
    
模板逻辑语法开始与结束的界定符号为&lt;% 与%&gt;,若&lt;%后面紧跟=号则输出变量内容。

渲染模板

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

演示

嵌入子模板

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

    <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)辅助方法一般用来进行字符串替换,如 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}}
    
安装:把 extensions/template-syntax.js 合并到 template.js 底部。
    
更多语法说明

自动化工具

预编译工具

使用它可以让前端模版不再受浏览器的限制,支持如后端模版一样按文件放置、include 语句等特性,可以像后端一样书写前端模板!

编译后的模板不再依赖前端模板引擎与后端,模板可以通过 SeaJS 或 RequireJS 等加载器进行异步加载,亦能利用它们成熟的打包合并工具进行上线前的优化,如合并与压缩。

项目主页:<https://github.com/aui/tmodjs>

抽取工具

./tools/combine.html

可以把 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)

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

更新记录

v2.0.2

1.    优化自定义语法扩展,减少体积
2.    [重要]为了最大化兼容第三方库,自定义语法扩展默认界定符修改为{{}}
3.    修复合并工具的BUG #25
4.    公开了内部缓存,可以通过template.cache访问到编译后的函数
5.    公开了辅助方法缓存,可以通过template.helpers访问到
6.    优化了调试信息

v2.0.1

1.    修复模板变量静态分析的BUG

v2.0 release

1.    编译工具更名为 atc,成为 artTemplate 的子项目单独维护:<https://github.com/cdc-im/atc>

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进行转义输出,原文输出可使用&lt;%==value%&gt;,也可以关闭默认的转义功能template.isEscape = false
3.    增加批处理工具支持把模板编译成不依赖模板引擎的 js 文件,可通过 RequireJS、SeaJS 等模块加载器进行异步加载。

授权协议

Released under the MIT, BSD, and GPL Licenses

© 著作权归作者所有

共有 人打赏支持
lghyt
粉丝 5
博文 1
码字总数 53
作品 0
海口
基于 Java 的 CMS 解决方案 - tjpcms

官网:http://www.tjpcms.com tjpcms 是一套基于 Java 的 CMS 解决方案,开源免费。其独有的实时配置增删改查的功能,是其区别于同类 cms 的最大特点,也是最大优势,极大减少了重复劳动。懂...

金盆洗手 ⋅ 2017/01/12 ⋅ 6

Lynx技术分析-JS引擎扩展设计

JS Binding 技术 Lynx(一个高效的跨平台框架) 的 JS Binding 技术最主要的目的是搭建一个高效的与 JS 引擎解耦的通信桥梁,同时具备 JS 引擎切换的能力。该技术经历了多次迭代,最终通过抽...

hxxft ⋅ 05/15 ⋅ 0

编译型 JavaScript 模板引擎 - PowJS

PowJS PowJS 是一个编译型 Real-DOM 模板引擎 工作在浏览器环境, 直接在 DOM Tree 上编译, 渲染. DOM Tree 就是模板. 采用原生 JavaScript 语法, 指令与 JavaScript 语句一一对应 单节点的 ...

喻恒春 ⋅ 2017/10/02 ⋅ 0

各种JS模板引擎对比数据(高性能JavaScript模板引擎)

最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据;通过测试artTemplate、juicer与doT引擎模板整体性能要有绝对优势; js模板引擎 JavaScri...

楠木楠 ⋅ 2016/11/03 ⋅ 0

Javascript动态执行JS(new Function与eval比较)

new Function与eval可以动态执行JS,只要把拼接好的JS方法,然后以字符串的形式传入到这两个函数,可以执行,其中new Function用在模板引擎比较多。 用 Function 类直接创建函数的语法如下:...

easonjim ⋅ 2016/12/28 ⋅ 0

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

本文将用最简单的示例代码描述现有的 javascript 模板引擎的原理,包括新一代 javascript 模板引擎 artTemplate 的特性实现原理,欢迎共同探讨。 artTemplate 介绍 artTemplate 是新一代 ja...

李朝强 ⋅ 2013/07/29 ⋅ 0

【JSConf EU 2018】JavaScript引擎: 精粹部分

JSConf EU 2018圆满结束, 谷歌V8的开发者Mathias Bynens以及Benedikt Meurer一起发表了《JavaScript Engines: The Good Parts™》演讲,本文将带领大家回顾一下演讲上所提到的重点。 演讲第一...

想成为工匠的码农 ⋅ 今天 ⋅ 0

artTemplate 动态加载模版,去掉默认的“”

模板定义 页面展示 里面的数据多了个"",如果手工去掉前后的"",页面就正常展示了。 想知道在加载数据的时候,怎么写才能不让它自动给我的数据添加""

whatwhowhy ⋅ 05/18 ⋅ 0

V8 JavaScript 引擎 6.7 发布:默认启用对 BigInt 的支持

V8 JavaScript 引擎 6.7 现已正式发布,V8 v6.7 带来了许多面向开发者的新特性,下面将简要进行介绍。 JavaScript 语言特性:V8 v6.7 默认启用对 BigInt 的支持。BigInts 是 JavaScript 中一...

局长 ⋅ 05/05 ⋅ 12

arguments 对象的老历史

本文经作者 柯拓 授权转载。原文地址:http://www.cnblogs.com/ziyunfei/p/5890322.html 引题:为什么 JavaScript 中的 arguments 对象不是数组 http://www.zhihu.com/question/50803453 Jav...

_朴灵_ ⋅ 05/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 20分钟前 ⋅ 0

彻底删除Microsoft Office的方法

参照此链接彻底删除Office https://support.office.com/zh-cn/article/%e4%bb%8e-pc-%e5%8d%b8%e8%bd%bd-office-9dd49b83-264a-477a-8fcc-2fdf5dbf61d8?ui=zh-CN&rs=zh-CN&ad=CN......

Kampfer ⋅ 35分钟前 ⋅ 0

大盘与个股之间关系

大盘走多:积极出手 顺势加码 大盘走空: 少量出手 退场观望 大盘做头:逆势减码 少量操作 大盘做底 : 小量建仓 小量试单

guozenhua ⋅ 37分钟前 ⋅ 0

Day16 LVM(逻辑卷管理)与磁盘故障小案例

lvm详解 简述 LVM的产生是因为传统的分区一旦分区好后就无法在线扩充空间,也存在一些工具能实现在线扩充空间但是还是会面临数据损坏的风险;传统的分区当分区空间不足时,一般的解决办法是再...

杉下 ⋅ 43分钟前 ⋅ 0

rsync实现多台linux服务器的文件同步

一、首先安装rsync,怎样安装都行,rpm,yum,还是你用源码安装都可以。因为我用的是阿里云的ESC,yum install rsync就ok了。 二、配置rsync服务 1.先建立个同步数据的帐号 123 groupadd r...

在下头真的很硬 ⋅ 56分钟前 ⋅ 0

前端基础(三):函数

字数:1685 阅读时间:5分钟 函数定义 在最新的ES规范中,声明函数有4中方法: -函数声明 -函数表达式 -构造函数Function -生成器函数 1.函数声明 语法: function name([param[, param2 [....

老司机带你撸代码 ⋅ 今天 ⋅ 0

Java虚拟机的Heap监狱

在Java虚拟机中,我是一个位高权重的大管家,他们都很怕我,尤其是那些Java 对象,我把他们圈到一个叫做Heap的“监狱”里,严格管理,生杀大权尽在掌握。 中国人把Stack翻译成“栈”,把Hea...

java高级架构牛人 ⋅ 今天 ⋅ 0

Spring MVC基本概念

只写Controller

颖伙虫 ⋅ 今天 ⋅ 0

微软重金收购GitHub的背后逻辑原来是这样的

全球最大的开发者社区GitHub网站花落谁家的问题已经敲定,微软最终以75亿美元迎娶了这位在外界看来无比“神秘”的小家碧玉。尽管此事已过去一些时日,但整个开发者世界,包括全球各地的开源社...

linux-tao ⋅ 今天 ⋅ 0

磁盘管理—逻辑卷lvm

4.10-4.12 lvm 操作流程: 磁盘分区-->创建物理卷-->划分为卷组-->划分成逻辑卷-->格式化、挂载-->扩容。 磁盘分区 注: 创建分区时需要更改其文件类型为lvm(代码8e) 分区 3 已设置为 Linu...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部