AceTemplate

时间：2014-04-08 22:07:46 阅读：676 评论：0 收藏：0 [点我收藏+]

概述

　　随着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行负责逻辑处理

style、script标签和内容原样输出

方法

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)

例子

输入输出用例

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

调试：http://jsfiddle.net/zswang/hA7Jd/

集中测试。

<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:"&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 +"输出结果符合预期。");
                                                }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>