您的位置:首页 > 其它

Template 函数

2010-05-30 21:44 169 查看
一个闭包形成的单例模式,内部可用于存放一些HTML模板。
看代码:

/**
* 一个单例模式的模板函数
* usage:
*   Template.register('tpl_info', '<li class="{$i}"></li>');
*   Template.get('tpl_a', {i:1}) 或 Template.get('tpl_a', [{i:'a'},{i:'b'}])
*/
var Template = (function(){
var tpl_list = [],         // 存放模板文件的列表
RE = /\{\$([^}]*)}/mg; // 匹配{$param}的正则

// 可以存放一些已有的模板
tpl_list["author"] = "Yan.Gf";

/**
* 注册一套模板文件到列表中
* @param {string} 模板文件的sid
* @param {string} 模板文件的内容
*/
function register(tpl_sid, content) {
if (typeof tpl_list[tpl_sid] !== "undefined") {
return "template exist";
}
tpl_list[tpl_sid] = content;
}

/**
* 返回已有模板文件的内容
* @param {string} 模板文件的sid
* @param {Object|Array} 模板文件对应的JSON对象:{a:1,b:2} or [{a:1,b:2},{a:1,b:2}]
* @return {string|Number} 绑定数据后的内容,找不到模板则返回-1
*/
function get(tpl_sid, tpl_obj) {
if (tpl_list[tpl_sid] === undefined) {
return -1;
}

var ret, arr_ret = [];

if (typeof tpl_obj === "undefined") {
ret = tpl_list[tpl_sid];
} else {
if (_isArray(tpl_obj)) {

for (var i=0, l = tpl_obj.length; i<l; i++) {
arr_ret.push(_bind(tpl_sid, tpl_obj[i]));
}

ret = arr_ret.join("");

} else {
ret = _bind(tpl_sid, tpl_obj);
}

}

return ret;
}

// 绑定数据的操作
function _bind(tpl_sid, tpl_obj) {
var tpl_content = tpl_list[tpl_sid];

return tpl_content.replace(RE, function(all, ex1){
return all = (typeof tpl_obj[ex1] !== "undefined") ?
tpl_obj[ex1] : all;
});
}

// 与get类似,但返回一个DOM元素节点
function getDOM(tpl_sid, tpl_obj) {
var oWrap = document.createElement("div");
var con = get(tpl_sid, tpl_obj);

oWrap.className = "template_wrap";
if (con !== -1) {
oWrap.innerHTML = con;
}

return oWrap;
}

function _isArray(o) {
return Object.prototype.toString.call(o) === '[object Array]';
}

return {
register: register,
get: get,
getDOM: getDOM
}
})()


测试:
Template.register("wel", "hello, {$name}, welcome to {$address}.<br />");

var arr_json = [
{name:"tom", address:"China"},
{name:"jack", address:"UK"}
]

var g = Template.getDOM("wel", arr_json);

document.body.appendChild(g);

// 2011-03-16
*  看了司徒正美的模板函数:http://www.cnblogs.com/rubylouvre/archive/2010/03/04/1678170.html,发现_bind里面循环生成正则进行替换的方法效率太差了,改为利用正则的反向引用进行一次替换,特别是在模板内有大量需要替换的{$}时,效率有明显提高。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: