世界上最好用的純前端模板【沒有之一】，AceTemplate高調亮相。
阿新 • • 發佈：2019-01-02
概述
隨著Ajax技術的普及，純前端模板的使用頻率越來越高。我們需要一個易學、易用、高效能的模板系統來處理日益繁雜的需求變化。
前端模板處理，有90%以上的情況都是在處理html相關字串，針對這一特性我們設計了一種只包含html和js兩種語法的模板系統AceTemplate。
對於前端開發者，html和js是無需額外的學習成本。
特點
- 易學（只需html和js基礎），易用(最少的輸入)
- 智慧（自動識別語法、識別符號）
- 擴充套件便捷
語法
以行為單位，分為兩種html行和js行，自由穿插
判斷是否為html行的規則
- 特殊字元開頭；
示例：Html標記結尾；漢字、#{value}、<div>
示例：沒有“雙引號、單引號、分號、逗號，大小括號”，不是else等單行語句；>、src="1.gif"/>
示例： hello worldHtml屬性； 示例：樣式表示式。a="12"、a='ab' b="cd"
示例：div.focus{color:#fff;}、#btnAdd span{}
html行負責輸出內容
兩種表示式輸出；#{表示式}和!#{表示式}
#{表示式} 採用html字串編碼輸出，預設規避xss漏洞
!#{表示式} 採用原文字串編碼輸出
js行負責邏輯處理
方法
format
格式化輸出
/** * 格式化輸出 * @param {String|Element} id 模板ID或是模板本身(非識別符號將識別為模板本身) * @param {Object} data 格式化的資料 * @param {Object} helper 附加資料(預設為模板物件) */AceTemplate.format =function(id, data, helper)
register
註冊模板
/** * 註冊模板，如果沒有引數則是註冊所有script標籤模板 * @param {String} id 模板ID * @param {Element|String} target 模板物件或者是模板字串，如果沒有則預設獲取id對應的DOM物件 */AceTemplate.register=function(id, target)
unregister
登出模板
/** * 登出模板 * @param {String} id 模板ID */AceTemplate.unregister=function(id)
例子
輸入輸出用例
- 集中測試。
<html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><scriptsrc="../../scripts/ace-template.js"></script><title>ace template examples</title><styletype="text/css">#log{width:600px;height:400px;}</style></head><body><textareaid="log"></textarea><scriptid="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 +"輸出結果符合預期。");}else{ message.push("×"+ i +"輸出結果不符合預期。-- "+ output);}}catch(ex){if(item.error){ message.push("√"+ i +"異常符合預期。");}else{ message.push("×"+ i +"異常不符合預期。-- "+ ex.message);}}} log.value = message.join("\n");})();</script></body></html>
示例普通迴圈用法
- 模板中的this代表資料本身，即format的data引數；
- 邏輯部分用js，輸出部分用html，#{表示式}為變數替換。
示例和jquery混用
- 邏輯部分和輸出部分將編譯成一個完整的js函式塊。
示例預設防止XSS漏洞
- 輸出表達式預設採用html編碼；
- 也可以使用!#{表示式}輸出原文。
示例巢狀模板
- 模板中helper是一個附加引數，預設指AceTemplate本身；
- 採用不編碼輸出另一個模板渲染結果既實現巢狀。
示例遞迴模板
- 模板中可以呼叫自身遞迴輸出。
示例關鍵詞
- 使用html編碼輸出可以這樣：AceTemplate.format("#{this}", text);
- 通過helper引數，加入keyword方法