世界上最好用的純前端模板（沒有之一）

作者：ace-engine 2011-07-04 09:03:39

開發(fā) 前端

隨著Ajax技術(shù)的普及，純前端模板的使用頻率越來越高。我們需要一個易學(xué)、易用、高性能的模板系統(tǒng)來處理日益繁雜的需求變化。本文就向你推薦一款世界上最好用的純前端模板（沒有之一）。

隨著Ajax技術(shù)的普及，純前端模板的使用頻率越來越高。我們需要一個易學(xué)、易用、高性能的模板系統(tǒng)來處理日益繁雜的需求變化。

前端模板處理，有90%以上的情況都是在處理html相關(guān)字符串，針對這一特性我們設(shè)計了一種只包含html和js兩種語法的模板系統(tǒng)AceTemplate。

對于前端開發(fā)者，html和js是無需額外的學(xué)習(xí)成本。

特點(diǎn)

易學(xué)(只需html和js基礎(chǔ))，易用(最少的輸入)
智能(自動識別語法、標(biāo)識符)
擴(kuò)展便捷

語法

以行為單位，分為兩種html行和js行，自由穿插

判斷是否為html行的規(guī)則

◆ 特殊字符開頭;

示例：

漢字、#{value}、<div>

◆ Html標(biāo)記結(jié)尾;

示例：

>、src="1.gif" />

◆ 沒有“雙引號、單引號、分號、逗號，大小括號”，不是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)識符將識別為模板本身)  
 * @param {Object} data 格式化的數(shù)據(jù)  
 * @param {Object} helper 附加數(shù)據(jù)(默認(rèn)為模板對象)  
 */  
AceTemplate.format = function(id, data, helper)

register

注冊模板

/**  
 * 注冊模板，如果沒有參數(shù)則是注冊所有script標(biāo)簽?zāi)０? 
 * @param {String} id 模板ID  
 * @param {Element|String} target 模板對象或者是模板字符串，如果沒有則默認(rèn)獲取id對應(yīng)的DOM對象  
 */  
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/

◆ 集中測試。

<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: "&lt;b&gt;b&lt;/b&gt;"  
                                        },  
                                        {  
                                                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>