文档章节

javascript 模板引擎artTemplate

lghyt
 lghyt
发布于 2016/06/14 09:55
字数 1507
阅读 190
收藏 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

本文转载自:http://www.lvtao.net/web/javascript-artTemplate.html

共有 人打赏支持
lghyt
粉丝 5
博文 2
码字总数 53
作品 0
海口
高性能JavaScript模板引擎原理解析

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

李朝强
2013/07/29
0
0
第115天:Ajax 中artTemplate模板引擎(一)

一、不分离与分离的比较 1、前后端不分离,以freemarker模板引擎为例,看一下不分离的前后端请求的流程是什么样的? 从上图可以看出,前后端开发人员的工作耦合主要在(3)Template的使用。 ...

半指温柔乐
2017/12/15
0
0
一种web编程的新的模板处理思路

目前web开发中充斥着各种各样的模板引擎,从前端到后端,性能优劣暂且不论,剖析其大体工作方式,可以概括为:实例化模板!也就是将Controller处理结果生产的Model数据通过模板引擎渲染View(...

hanzhankang
2013/11/07
0
4
从零开始学 Web 之 Ajax(七)跨域

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
07/23
0
0
React 核心思想之声明式渲染

React 发展很快,概念也多,本文目的在于帮助初学者理清 React 核心概念。 React 及 React 生态 React 的核心概念只有 2 点: 声明式渲染(Declarative) 基于组件(Component-Based) 声明式渲染...

穿越过来的键盘手
07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
4
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部