概述
我們在使用JS渲染DOM時，一般使用字符串創建DOM然后附加到父元素上，如果附加的DOM是動態易變的，那需要在函數中寫大量邏輯。如果在控件實現過程中，這帶來的問題更為嚴重。
解決這個問題的常見解決方案是是使用模板，作為配置項傳入控件，實現數據和渲染的分離。具體的實現方法有以下方法：
- 字符串替換，使用正則匹配將數據替換進字符串中。
- 渲染函數，函數返回字符串。
- 模板引擎，可以將執行字符串中的函數（內置或者自定義的）
替換（Substitute）
字符串替換是最簡單的實現模板的方式，看一下具體的實現：
1. 定義替換函數
/** * 替換字符串中的字段. * @param {String} str 模版字符串 * @param {Object} o json data * @param {RegExp} [regexp] 匹配字符串的正則表達式 */ function substitute(str,o,regexp){ return str.replace(regexp || /\\?\{([^{}]+)\}/g, function (match, name) { return (o[name] === undefined) ? '' : o[name]; }); }
2.使用配置項：
var config = { data : {value : '123',text:'abc'}, template : '<label>{text}</label><input type="text" value="{value}"/>' };
3. 在創建DOM的過程中我們這樣調用：
var str = substitute(template,data); $(str).appendTo('body');
通過以上示例，我們就完成了數據和字符串的解耦，可以靈活的用在控件中，當前大多數JS框架都提供了此種方式的模板。
在此基礎上可以有下面的擴展，感興趣的可以自己去實現：
1. 使用數字代替參數名：
如 '<label>{0}</label><input type="text" value="{1}"/>'
2. 嵌套使用對象屬性：
如 '<label>{obj.name}</label><input type="text" value="{obj.value}"/>'
優點：實現簡單，易於理解。
缺點：只能進行簡單的數據結構，無法處理循環、條件語句。
渲染方法（Render）
我們可以在渲染函數中處理非常復雜的邏輯，可以將渲染函數作為參數傳入配置項。
配置項：
var config = { data : [{value : '0',text:'abc'},{value : '1',text:'bcd'}], renderer : function(obj){ if(obj.value === '0'){ return obj.text; }else{ return '<img title="' + obj.text + '" src=""/>'; } } };
在使用時：
for(var i = 0 ; i< data.length; i++){ var obj = data[i], str = config.renderer(obj); $(str).appendTo('body'); }
在處理循環，條件語句時，這是一種很好的解決方案。
優點：實現相對簡單，實現靈活，能滿足復雜數據結構，易於調試
缺點：
- 渲染函數作為配置項，不易理解。
- 函數較長時，使配置項臃腫。
- 每個場景都需要自己實現渲染函數。
模板引擎（XTemplate）
每一個JS UI庫都會有一個功能強大的模板引擎，一個模板引擎需要實現以下功能：
1. 字符串替換
2. 處理復雜語句 條件、循環
3. 使用內嵌函數
4. 允許用戶傳入自定義函數
目前的模板引擎有2種常見的實現方式：
1. 使用正則分析字符串，執行其中的特殊語句邏輯，替換對應的數據
我們來看一下KISSY 模板的一個實例：
'Hello, {{#each users}}{{#if _ks_value.show}}{{_ks_value.name}}{{/if}}{{/each}}.'
上面這是一個模板，可以處理循環、條件語句。
2. 對字符串進行語法分析，生成語法樹，執行替換對應的標簽或數據。
下面是Ext的 xtemplate使用方式：
var tpl = new Ext.XTemplate( '<p>{name}\'s favorite beverages:</p>', '<tpl for="drinks">', '<div> - {.}</div>', '</tpl>' ); tpl.overwrite(panel.body, data);
優點：功能強大，靈活性高
缺點：使用復雜，更加不易理解。不便於調試。
問題思考
1. 控件中使用模板，可以將數據和DOM分離，但是如果一個控件中包含大量的模板，會增加使用者的工作量，而且不易於調試，需要權衡使用。
2. 如果大量控件使用相同的模板，和相同的數據結構，每個控件單獨配置不便於使用，更好的方案是允許父控件配置模板。