DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS模板實現方法
JS模板實現方法
編輯:關於JavaScript     

概述

我們在使用JS渲染DOM時,一般使用字符串創建DOM然後附加到父元素上,如果附加的DOM是動態易變的,那需要在函數中寫大量邏輯。如果在控件實現過程中,這帶來的問題更為嚴重。

解決這個問題的常見解決方案是是使用模板,作為配置項傳入控件,實現數據和渲染的分離。具體的實現方法有以下方法:

  1. 字符串替換,使用正則匹配將數據替換進字符串中。
  2. 渲染函數,函數返回字符串。
  3. 模板引擎,可以將執行字符串中的函數(內置或者自定義的)

替換(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');

}

在處理循環,條件語句時,這是一種很好的解決方案。

優點:實現相對簡單,實現靈活,能滿足復雜數據結構,易於調試

缺點:

  1. 渲染函數作為配置項,不易理解。
  2. 函數較長時,使配置項臃腫。
  3. 每個場景都需要自己實現渲染函數。

模板引擎(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. 如果大量控件使用相同的模板,和相同的數據結構,每個控件單獨配置不便於使用,更好的方案是允許父控件配置模板。

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved