世界上最好用的純前端模板（沒有之一）
隨著Ajax技術(shù)的普及，純前端模板的使用頻率越來越高。我們需要一個(gè)易學(xué)、易用、高性能的模板系統(tǒng)來處理日益繁雜的需求變化。
前端模板處理，有90%以上的情況都是在處理html相關(guān)字符串，針對(duì)這一特性我們?cè)O(shè)計(jì)了一種只包含html和js兩種語法的模板系統(tǒng)AceTemplate。
對(duì)于前端開發(fā)者，html和js是無需額外的學(xué)習(xí)成本。
特點(diǎn)
- 易學(xué)(只需html和js基礎(chǔ))，易用(最少的輸入)
- 智能(自動(dòng)識(shí)別語法、標(biāo)識(shí)符)
- 擴(kuò)展便捷
語法
以行為單位，分為兩種html行和js行，自由穿插
判斷是否為html行的規(guī)則
◆ 特殊字符開頭;
示例：
- 漢字、#{value}、<div>
◆ Html標(biāo)記結(jié)尾;
示例：
- >、src="1.gif" />
◆ 沒有“雙引號(hào)、單引號(hào)、分號(hào)、逗號(hào)，大小括號(hào)”，不是else等單行語句;
示例：
- hello world
◆ Html屬性;
示例：
- a="12"、a='ab' b="cd"
◆ 樣式表達(dá)式。
示例：
- div.focus{color: #fff;}、#btnAdd span{}
html行負(fù)責(zé)輸出內(nèi)容
兩種表達(dá)式輸出;#{表達(dá)式}和!#{表達(dá)式}
#{表達(dá)式} 采用html字符串編碼輸出，默認(rèn)規(guī)避xss漏洞
!#{表達(dá)式} 采用原文字符串編碼輸出
js行負(fù)責(zé)邏輯處理
方法
format
格式化輸出
- /**
- * 格式化輸出
- * @param {String|Element} id 模板ID或是模板本身(非標(biāo)識(shí)符將識(shí)別為模板本身)
- * @param {Object} data 格式化的數(shù)據(jù)
- * @param {Object} helper 附加數(shù)據(jù)(默認(rèn)為模板對(duì)象)
- */
- AceTemplate.format = function(id, data, helper)
register
注冊(cè)模板
- /**
- * 注冊(cè)模板，如果沒有參數(shù)則是注冊(cè)所有script標(biāo)簽?zāi)０?
- * @param {String} id 模板ID
- * @param {Element|String} target 模板對(duì)象或者是模板字符串，如果沒有則默認(rèn)獲取id對(duì)應(yīng)的DOM對(duì)象
- */
- AceTemplate.register = function(id, target)
unregister
注銷模板
- /**
- * 注銷模板
- * @param {String} id 模板ID
- */
- AceTemplate.unregister = function(id)
例子
輸入輸出用例
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/case.html
調(diào)試：http://jsfiddle.net/zswang/hA7Jd/
◆ 集中測(cè)試。
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script src="../../scripts/ace-template.js"></script>
- <title>ace template examples</title>
- <style type="text/css">
- #log{
- width: 600px;
- height: 400px;
- }
- </style>
- </head>
- <body>
- <textarea id="log"></textarea>
- <script id="t1" type="text/template">
- if (this["title"])
- {
- #{title}
- }
- else
- {
- <b>無</b>
- }
- </script>
- <script>
- (function() {
- var log = document.getElementById("log");
- var list = [
- {
- input: ["#{this}", "<b>b</b>"],
- output: "<b>b</b>"
- },
- {
- input: ["!#{this}", "<b>b</b>"],
- output: "<b>b</b>"
- },
- {
- input: ["#{title}#{size}", {
- title: "t"
- }],
- output: "t"
- },
- {
- input: ["#{title}#{size + 2}", {
- title: "t"
- }],
- error: true
- },
- {
- input: ["#{1 + 2 + 3 + 4}"],
- output: "10"
- },
- {
- input: ["t1"],
- output: "\t\t\t\t<b>無</b>\n"
- }
- ];
- var message = [];
- for (var i = 0; i < list.length; i++) {
- var item = list[i];
- try {
- var output = AceTemplate.format(item.input[0], item.input[1]);
- if (output == item.output) {
- message.push("√" + i + "輸出結(jié)果符合預(yù)期。");
- } else {
- message.push("×" + i + "輸出結(jié)果不符合預(yù)期。-- " + output);
- }
- } catch(ex) {
- if (item.error) {
- message.push("√" + i + "異常符合預(yù)期。");
- } else {
- message.push("×" + i + "異常不符合預(yù)期。-- " + ex.message);
- }
- }
- }
- log.value = message.join("\n");
- })();
- </script>
- </body>
- </html>
示例普通循環(huán)用法
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/base1.html
調(diào)試：http://jsfiddle.net/zswang/S3rwL/
◆ 模板中的this代表數(shù)據(jù)本身，即format的data參數(shù);
◆ 邏輯部分用js，輸出部分用html，#{表達(dá)式}為變量替換。
示例和jquery混用
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/base2.html 調(diào)試：http://jsfiddle.net/zswang/dehd6/
◆ 邏輯部分和輸出部分將編譯成一個(gè)完整的js函數(shù)塊。
示例默認(rèn)防止XSS漏洞
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/secuity1.html
調(diào)試：http://jsfiddle.net/zswang/aXKQA/
◆ 輸出表達(dá)式默認(rèn)采用html編碼;
◆ 也可以使用!#{表達(dá)式}輸出原文。
示例嵌套模板
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/nesting1.html
調(diào)試：http://jsfiddle.net/zswang/YJWZA/
◆ 模板中helper是一個(gè)附加參數(shù)，默認(rèn)指AceTemplate本身;
◆ 采用不編碼輸出另一個(gè)模板渲染結(jié)果既實(shí)現(xiàn)嵌套。
示例遞歸模板
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/recursion1.html
調(diào)試：http://jsfiddle.net/zswang/JcwHg/
模板中可以調(diào)用自身遞歸輸出。
示例關(guān)鍵詞
http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/keyword.html
調(diào)試：http://jsfiddle.net/zswang/fvLX3/
使用html編碼輸出可以這樣：AceTemplate.format("#{this}", text);
通過helper參數(shù)，加入keyword方法
作者微博
http://weibo.com/zswang http://weibo.com/zinkey
原文鏈接：http://code.google.com/p/ace-engine/wiki/AceTemplate
【編輯推薦】
