世界上最好用的纯前端模板【没有之一】，AceTemplate高调亮相。

王集鹄 2011-07-04 12:59:26

加精

blog:http://blog.csdn.net/zswang/article/details/6582563

wiki:http://code.google.com/p/ace-engine/wiki/AceTemplate

概述

　　随着Ajax技术的普及，纯前端模板的使用频率越来越高。我们需要一个易学、易用、高性能的模板系统来处理日益繁杂的需求变化。

　　前端模板处理，有90%以上的情况都是在处理html相关字符串，针对这一特性我们设计了一种只包含html和js两种语法的模板系统AceTemplate。

　　对于前端开发者，html和js是无需额外的学习成本。
特点

易学（只需html和js基础），易用(最少的输入)
智能（自动识别语法、标识符）
扩展便捷

语法
以行为单位，分为两种html行和js行，自由穿插
判断是否为html行的规则

特殊字符开头；

示例：

汉字、#{value}、<div>

Html标记结尾；

示例：

>、src="1.gif" />

没有“双引号、单引号、分号、逗号，大小括号”，不是else等单行语句；

示例：

hello world

Html属性；

示例：

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)

/**

 * 注册模板，如果没有参数则是注册所有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)

例子
输入输出用例

http://ace-engine.googlecode.com/svn/trunk/examples/ace-template/case.html

调试：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: "<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>