Template 函数
2010-05-30 21:44
169 查看
一个闭包形成的单例模式,内部可用于存放一些HTML模板。
看代码:
测试:
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里面循环生成正则进行替换的方法效率太差了,改为利用正则的反向引用进行一次替换,特别是在模板内有大量需要替换的{$}时,效率有明显提高。
看代码:
/** * 一个单例模式的模板函数 * 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里面循环生成正则进行替换的方法效率太差了,改为利用正则的反向引用进行一次替换,特别是在模板内有大量需要替换的{$}时,效率有明显提高。
相关文章推荐
- 【phpcms-v9】phpcms-v9中模板载入函数template详解
- 对_.template函数的理解
- c++ template(10)类型函数
- Eclipse 注释模板 函数注释 类注释 文件注释 Code Template - 2
- c++ template(10)类型函数
- 记一template 函数实现过程---std::iterator_traits在泛型算法中的应用
- C++ 函数模板(十四)--template 泛型函数模板、通用函数、重载模板
- template函数和函数的重载的调用判断
- C++ 中Template 类、函数的编译过程
- C++ - 函数模板(function template)返回值
- C++ - 函数模板(function template) 的 重载(overload) 详解 及 代码
- 条款45:将与函数无关的代码抽离template
- C++ Template学习笔记之函数模板(4)——显式模板实参
- 编译器对C++ 11变参模板(Variadic Template)的函数包扩展实现的差异
- 条款35(考虑virtual函数以外的其他选择)之Template Method模式
- 在artTemplate的标签中使用外部函数的方法
- 应用template技巧来确定函数返回值类型
- golang模板template自定义函数用法示例
- [转]C++ Template学习笔记之函数模板(5)——模板编译模式
- 函数模板(Function Template)及带默认参数的函数 http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=25520556&id