forked from goofychris/art-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
193 lines (189 loc) · 12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>artTemplate - JavaScript Template Engine</title>
<style type="text/css">
body { font-size:14px; color:#666; font-family:'Microsoft Yahei', Tahoma, Arial!important; font-family:Tahoma, Arial; background:#dbdfe3; }
a { color:#039; }
a:hover { color:#06C; }
img { border:none 0; }
pre { position:relative; padding:5px; font-size:12px; border:1px solid #EFEFEF; background:#F9F9F9; z-index:2; border-radius: 5px; }
pre:before, pre:after { visibility:hidden; display:block; content:""; width:0; height:0; border:9px solid transparent; position:absolute; }
pre:before { border-top-color:#EEF7F5; position:absolute; left:18px; bottom:-18px; z-index:2; }
pre:after { border-top-color:#c7dcd3; left:18px; bottom:-19px; z-index:1; }
pre.select { background:#EEF7F5 !important; border:1px solid #D7EAE2; border-right-color:#c7dcd3; border-bottom-color:#c7dcd3; }
pre.select:before, pre.select:after { visibility:visible; }
h1.title, h1.title a { text-align:center; color:#30475e; text-decoration:none; }
h1.title strong { font-size:42px; position:relative; }
h1.title strong:after { content:''; display:block; position:absolute; left:50%; bottom:24px; width:56%; margin-left:-28%; height:1px; box-shadow:0 20px 15px rgba(0, 0, 0, .8); }
h6.subTitle { text-align:center; font-weight:normal; color:#C1C1C1 }
#header, #main, #footer { width:640px; margin:auto; }
#header .summary { padding:20px; background:#30475e; color:#FFF; border-radius: 8px; zoom:1; font-size:14px; line-height:1.5; }
#header .summary:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#header .summary a { color:#FFF; }
#header .summary a:hover { color:#CCC; }
#header .summary strong { display:inline-block; width:5em; }
#header .summary p { margin:20px 0; }
#main .card { padding:20px; margin-top:60px; background: #FFF; border:1px solid #d1d6db; border-radius: 8px; }
#main .card:after { position:relative; z-index:-1; content: ""; display: block; height: 10px; border-radius: 10px; box-shadow:0 20px 20px rgba(2, 37, 69, .6); }
#main .card h2 { text-align:center; }
#main .card h3 { color:#30475e; }
#main .card ul dl { padding-left:1em; border-left:1px dashed #DDD; }
#main .card ul dt { padding:8px 0; font-weight:bold; }
#main .card ul dd { margin-left:0; }
#main .card ul dd dl { margin-left:2em; }
#footer { padding:20px 0; text-align:center; color:#999; }
#footer .copyright a { color:#999; }
@media only screen and (max-width:980px) {
h1.title {
font-size:24px;
}
#header, #main, #footer {
max-width:100%;
}
img {
max-width:100%
}
}
@media print {
#header .summary, a { color: #000 !important; }
#header, #main, #footer { width:auto; }
#main .card { padding:10px; margin-top:10px; box-shadow:none; border:none 0; border-top: 1px dashed #666; border-radius:0; }
#main .card h2 { text-align:left; }
#main .card:after { display:none; }
h1.title strong:after, #index { display:none; }
}
</style>
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32376609-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
</head>
<body>
<div id="header">
<h1 class="title"><a href="https://github.com/aui/artTemplate"><strong>artTemplate</strong></a></h1>
<div class="summary" id="summary">
<p>artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限，在 chrome 下<a href="./test/test-speed.html">渲染效率测试</a>中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。</p>
<p>引擎支持调试。若渲染中遇到错误，<a href="./test/test-debug.html">调试器</a>可精确定位到产生异常的模板语句，让富UI应用开发变得得心应手。</p>
<p>这一切都在 1.7kb(gzip) 中实现！<a href="https://github.com/aui/artTemplate" style="float:right; color:#CCC">View on GitHub</a></p>
</div>
</div>
<div id="main">
<div class="card">
<h2>快速上手</h2>
<h3>书写模板 </h3>
<p>模板逻辑语法默认采用原生的 javascript 语法，与微型模板引擎 tmpl 保持一致：模板逻辑语法开始与结束的界定符号为"<%" 与 "%>"，"<%"后面紧跟"="号则输出变量内容。</p>
<p>页面中 type="text/html" 的脚本标签会被浏览器忽略，可以不用考虑转义也能分行书写模板。例如定义一个 ID 为 "t-list" 的模板：</p>
<pre><script id="t-list" type="text/html">
<ul>
<% for (i = 0; i < list.length; i ++) { %>
<li>条目内容 <%= i + 1 %> ：<%= list[i] %></li>
<% } %>
</ul>
</script> </pre>
<h3>渲染模板 </h3>
<p><em>template.render(id, data)</em> </p>
<p>示例：</p>
<pre>var html = template.render('t-list', {
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
});</pre>
<p>template.render(id, data) 方法可以被简写成 template(id, data) 。</p>
<p>以上就是 artTemplate 的基本功能使用，可见 <a href="./test/test.html">./test/test.html</a> 演示，接下来是高级功能介绍。</p>
</div>
<div class="card">
<h2>编译模板</h2>
<p><em>template.compile([id], source)</em></p>
<p>页面中内嵌的模板可以直接渲染，如果要在 js 文件中定义模板需要提前编译模板语句。</p>
<p>id 参数是可选的，如果定义了 id 编译后的模板将被缓存到引擎内部，以后随时可以由 template.render(id, data) 方法进行渲染。</p>
<p>示例：</p>
<pre>var render = template.compile('<% for (var i in names) { %><%=name[i]%><% } %>');
var html = render(data);//渲染</pre>
<p>template.compile([id], source) 方法可以被简写成 template([id], source) 。</p>
</div>
<div class="card">
<h2>辅助方法</h2>
<p><em>template.helper(name, callback)</em></p>
<p>辅助方法一般用来进行字符串替换，如XSS过滤、UBB替换、脏话替换等。在使用原生语法的引擎中，模板中若引用外部对象，随着项目复杂度增加，那时候谁都不能确定模板中的变量到底是数据还是全局对象，这种复杂的依赖关系将为会项目带来巨大的维护成本。而 artTemplate 的模板语句是在沙箱中执行的，意味着强制断绝与全局对象的依赖，模板编写者无法再像原来一样随意读写外部对象，而需要公用的辅助方法统一由template.helper() 进行注册管理，强制语法规范有助于团队更好的协作。</p>
<p>例如扩展一个UBB替换方法：</p>
<pre>template.helper('$ubb2html', function (content) {<br /> return content<br /> .replace(/\[b\]([^\[]*?)\[\/b\]/igm, '<b>$1</b>')<br /> .replace(/\[i\]([^\[]*?)\[\/i\]/igm, '<i>$1</i>')<br /> .replace(/\[u\]([^\[]*?)\[\/u\]/igm, '<u>$1</u>')<br /> .replace(/\[url=([^\]]*)\]([^\[]*?)\[\/url\]/igm, '<a href="$1">$2</a>')<br /> .replace(/\[img\]([^\[]*?)\[\/img\]/igm, '<img src="$1" />');<br />});</pre>
<p>在模板中的使用方式：</p>
<pre><%= $ubb2html(content) %></pre>
<p>模板中内置方法：</p>
<p>include(id, [data]) data 参数可选，默认为传入当前模板数据</p>
<p>print(content)</p>
</div>
<div class="card">
<h2>设置界定符</h2>
<p>若前端模板语法与后端语法产生冲突，可以修改模板引擎界定符，例如：</p>
<pre>template.openTag = "<!--[";
template.closeTag = "]-->";</pre>
</div>
<div class="card">
<h2>模板语法规范</h2>
<p>1、不能使用 javascript 关键字作为模板变量(包括 ECMA5 严格模式下新增的关键字): </p>
<pre>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</pre>
<p>2、不能读写全局变量，除非给模板定义辅助方法。</p>
</div>
<div class="card">
<h2>合并工具</h2>
<p>有时候考虑到模板复用或者需要异步加载，可以使用 tools 目录下的 combine.html，把 HTML 中的模板提取出来以便把模板嵌入到 js 文件中。</p>
</div>
<div class="card">
<h2>与 tmpl 兼容</h2>
<p> artTemplate 可以通过简单的设置兼容 john 开发的 tmpl 微型模板引擎： </p>
<pre>var tmpl = template;
template.helper('tmpl', template.render);</pre>
<p>这样可以由 tmpl 平滑迁移到 artTemplate，并原来 tmpl 模板中的套嵌仍然有效，同时也解决了 tmpl 模板不能包含单引号与反斜杠的 BUG。</p>
<p>需要注意的地方：tmpl 模板中原来引用的全局变量会因为 artTemplate 沙箱机制导致无法访问，需要通过 template.helper() 方法进行定义。</p>
</div>
<div class="card">
<h2>演示</h2>
<ul>
<li><a href="./test/test.html">基本例子</a></li>
<li><a href="./test/test-compile.html">在javascript中存放模板</a></li>
<li><a href="./test/test-include.html">嵌入子模板</a></li>
<li><a href="./test/test-print.html">print</a></li>
<li><a href="./test/test-helper.html">辅助方法(访问公用数据)</a></li>
<li><a href="./test/test-debug.html">错误调试</a></li>
<li><a href="./test/test-tag.html">自定义界定符</a></li>
<li><a href="./test/test-undefined.html">未定义数据处理</a></li>
<li><a href="./test/test-tmpl.html">与tmpl兼容</a></li>
<li><a href="./test/test-compile-demo.html">模板编译原理演示</a></li>
<li><a href="./test/test-speed.html">引擎渲染速度竞赛</a></li>
</ul>
</div>
<div class="card">
<h2>语法扩展</h2>
<p>原生语法虽然自由强大但语句难免冗长，于是 artTemplate 提供一个语法扩展用来简化模板逻辑语法，以在功能与易用性之间取得平衡。 </p>
<p>语法示例：</p>
<pre>{if admin}<br /> <h3>{title}</h3><br /> <ul><br /> {each list as value index}<br /> <li>{index + 1}: {value}</li><br /> {/each}<br /> </ul><br />{/if}
</pre>
<p>使用文档：<a href="extensions/index.html">extensions/index.html</a></p>
<p>演示例子：<a href="extensions/test/index.html">extensions/test/index.html</a></p>
</div>
<div class="card">
<p>若有一定javascript基础，推荐阅读 <a href="http://book.douban.com/subject/6397064/">《基于 MVC 的 JavaScript Web 富应用开发》</a> ，你可以更好的采用模板引擎做到视图与数据分离。</p>
<p>反馈：<a href="http://t.qq.com/tangbin">腾讯微博</a> <a href="http://weibo.com/planeart">新浪微博</a></p>
</div>
</div>
<div id="footer">
<p class="copyright">© <a href="http://cdc.tencent.com">cdc.tencent.com</a></p>
<p class="validators"> <a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p>
</div>
</body>
</html>