Template 函数

一个闭包形成的单例模式，内部可用于存放一些ＨＴＭＬ模板。

看代码：

 

 

/**
 * 一个单例模式的模板函数
 * 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里面循环生成正则进行替换的方法效率太差了，改为利用正则的反向引用进行一次替换，特别是在模板内有大量需要替换的{$}时，效率有明显提高。