JavaScript模板引擎-artTemplate-3.0

性能卓越的js模板引擎:https://github.com/aui/artTemplate
<h4>一、为什么使用JavaScript模板引擎</h4>项目中,部分模块(filter、toolbar)业务复杂,过多依赖jQuery去铺数据,导致整体性能不高,且使用jQuery操作导致代码量和冗余度增大,后期维护不变。使用JavaScript模板引擎可以有效的实现界面与数据分离(解耦),大大提升开发效率,且重用性较高。
<h4>二、什么是JavaScript模板引擎</h4>首先要说明,模板引擎不属于特定技术领域,它是跨领域跨平台的概念。在JavaScript下有模板引擎,在PHP下也有模板引擎,甚至Asp开发都会用到模板引擎技术。模板引擎可以生成特定格式的文档。JavaScript模板引擎,会生成一个标准的HTML文档。
<h4>三、什么场景下使用JavaScript模板引擎</h4>1、如果有大量的动态ajax请求数据并需要封装成视图展现给用户,现有的实现方式不满性能要求;
2、如果有大量的HTML段,是通过动态拼串生成;
3、如果在页面布局中,存在共性模块和布局,可以提取出公共模板,减少维护的数量。(当然模块化同样可以解决)
<h4>四、JavaScript模板引擎示例</h4>artTemplate提供了两个版本的模板语法可以选择:简洁语法({{}})、原生语法(<% %>)。选用原生语法,因为项目中使用了AngularJS,“{{}}”被angularjs的双向数据绑定占用,且原生语法支持原生JavaScript方法!
<pre>

QQ截图20170329135210.png

</pre>
<h6>artTemplate 简洁语法版</h6>
<h6>表达式:</h6>{{ 与 }}符号包裹起来的语句则为模板的逻辑表达式。
<h6>输出表达式:</h6>对内容编码输出:{{content}}
不编码输出:{{#content}}
编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。
<h6>条件表达式:</h6><pre>
QQ截图20170329140311.png

</pre>
<h6>遍历表达式:</h6>无论数组或者对象都可以用 each 进行遍历。
<pre>

1.png

</pre>
亦可以被简写:
<pre>


2.png

</pre>
<h6>模板包含表达式:</h6>用于嵌入子模板。
{{include 'template_name'}}

子模板默认共享当前数据,亦可以指定数据:
{{include 'template_name' news_list}}
<h6>辅助方法:</h6>
使用template.helper(name, callback)注册公用辅助方法:

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

模板中使用的方式:

{{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

支持传入参数与嵌套使用:

QQ截图20170329150747.png

{{time | say:'cd' | ubb | link}}
<h5>方法:</h5><h6>template(id,data)</h6>
根据 id 渲染模板。内部会根据document.getElementById(id)查找模板。
如果没有 data 参数,那么将返回一渲染函数。
<h6>template.compile(source, options)</h6>将返回一个渲染函数。<a href="http://aui.github.io/artTemplate/demo/compile.html">演示</a>

<h6>template.render(source, options)</h6>将返回渲染结果。
<h6>template.helper(name, callback)</h6>添加辅助方法。例如时间格式器:<a href="http://aui.github.io/artTemplate/demo/helper.html">演示</a>
<h6>template.config(name, value)</h6>更改引擎的默认配置


QQ截图20170329150747.png

<h4>使用预编译</h4>
可突破浏览器限制,让前端模板拥有后端模板一样的同步“文件”加载能力:

一、按文件与目录组织模板

template('tpl/home/main', data)

二、模板支持引入子模板

{{include '../public/header'}}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容