欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS模板實(shí)現(xiàn)方法

 更新時(shí)間：2013年04月03日 15:27:35   作者：  
我們?cè)谑褂肑S渲染DOM時(shí)，一般使用字符串創(chuàng)建DOM然后附加到父元素上，如果附加的DOM是動(dòng)態(tài)易變的，那需要在函數(shù)中寫大量邏輯。如果在控件實(shí)現(xiàn)過(guò)程中，這帶來(lái)的問(wèn)題更為嚴(yán)重。

概述

我們?cè)谑褂肑S渲染DOM時(shí)，一般使用字符串創(chuàng)建DOM然后附加到父元素上，如果附加的DOM是動(dòng)態(tài)易變的，那需要在函數(shù)中寫大量邏輯。如果在控件實(shí)現(xiàn)過(guò)程中，這帶來(lái)的問(wèn)題更為嚴(yán)重。

解決這個(gè)問(wèn)題的常見(jiàn)解決方案是是使用模板，作為配置項(xiàng)傳入控件，實(shí)現(xiàn)數(shù)據(jù)和渲染的分離。具體的實(shí)現(xiàn)方法有以下方法：

  1. 字符串替換，使用正則匹配將數(shù)據(jù)替換進(jìn)字符串中。
  2. 渲染函數(shù)，函數(shù)返回字符串。
  3. 模板引擎，可以將執(zhí)行字符串中的函數(shù)（內(nèi)置或者自定義的）

替換（Substitute）

字符串替換是最簡(jiǎn)單的實(shí)現(xiàn)模板的方式，看一下具體的實(shí)現(xiàn)：

1. 定義替換函數(shù)

復(fù)制代碼 代碼如下:

/**

* 替換字符串中的字段.

* @param {String} str 模版字符串

* @param {Object} o json data

* @param {RegExp} [regexp] 匹配字符串的正則表達(dá)式

*/

function substitute(str,o,regexp){

return str.replace(regexp || /\\?\{([^{}]+)\}/g, function (match, name) {

return (o[name] === undefined) ? '' : o[name];

});

}

2.使用配置項(xiàng)：

復(fù)制代碼 代碼如下:

var config = {

data : {value : '123',text:'abc'},

template : '<label>{text}</label><input type="text" value="{value}"/>'

};

3. 在創(chuàng)建DOM的過(guò)程中我們這樣調(diào)用：

復(fù)制代碼 代碼如下:

var str = substitute(template,data);

$(str).appendTo('body');

通過(guò)以上示例，我們就完成了數(shù)據(jù)和字符串的解耦，可以靈活的用在控件中，當(dāng)前大多數(shù)JS框架都提供了此種方式的模板。

在此基礎(chǔ)上可以有下面的擴(kuò)展，感興趣的可以自己去實(shí)現(xiàn)：

1. 使用數(shù)字代替參數(shù)名：

如 '<label>{0}</label><input type="text" value="{1}"/>'

2. 嵌套使用對(duì)象屬性：

如 '<label>{obj.name}</label><input type="text" value="{obj.value}"/>'

優(yōu)點(diǎn)：實(shí)現(xiàn)簡(jiǎn)單，易于理解。

缺點(diǎn)：只能進(jìn)行簡(jiǎn)單的數(shù)據(jù)結(jié)構(gòu)，無(wú)法處理循環(huán)、條件語(yǔ)句。

渲染方法（Render）

我們可以在渲染函數(shù)中處理非常復(fù)雜的邏輯，可以將渲染函數(shù)作為參數(shù)傳入配置項(xiàng)。

配置項(xiàng)：

復(fù)制代碼 代碼如下:

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=""/>';

}

}

};

在使用時(shí)：

復(fù)制代碼 代碼如下:

for(var i = 0 ; i< data.length; i++){

var obj = data[i],

str = config.renderer(obj);

$(str).appendTo('body');

}

在處理循環(huán)，條件語(yǔ)句時(shí)，這是一種很好的解決方案。

優(yōu)點(diǎn)：實(shí)現(xiàn)相對(duì)簡(jiǎn)單，實(shí)現(xiàn)靈活，能滿足復(fù)雜數(shù)據(jù)結(jié)構(gòu)，易于調(diào)試

缺點(diǎn)：

  1. 渲染函數(shù)作為配置項(xiàng)，不易理解。
  2. 函數(shù)較長(zhǎng)時(shí)，使配置項(xiàng)臃腫。
  3. 每個(gè)場(chǎng)景都需要自己實(shí)現(xiàn)渲染函數(shù)。

模板引擎（XTemplate）

每一個(gè)JS UI庫(kù)都會(huì)有一個(gè)功能強(qiáng)大的模板引擎，一個(gè)模板引擎需要實(shí)現(xiàn)以下功能：

1. 字符串替換

2. 處理復(fù)雜語(yǔ)句 條件、循環(huán)

3. 使用內(nèi)嵌函數(shù)

4. 允許用戶傳入自定義函數(shù)

目前的模板引擎有2種常見(jiàn)的實(shí)現(xiàn)方式：

1. 使用正則分析字符串，執(zhí)行其中的特殊語(yǔ)句邏輯，替換對(duì)應(yīng)的數(shù)據(jù)

我們來(lái)看一下KISSY 模板的一個(gè)實(shí)例：

'Hello, {{#each users}}{{#if _ks_value.show}}{{_ks_value.name}}{{/if}}{{/each}}.'

上面這是一個(gè)模板，可以處理循環(huán)、條件語(yǔ)句。

2. 對(duì)字符串進(jìn)行語(yǔ)法分析，生成語(yǔ)法樹，執(zhí)行替換對(duì)應(yīng)的標(biāo)簽或數(shù)據(jù)。

下面是Ext的 xtemplate使用方式：

復(fù)制代碼 代碼如下:

var tpl = new Ext.XTemplate(
'<p>{name}\'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
tpl.overwrite(panel.body, data);

優(yōu)點(diǎn)：功能強(qiáng)大，靈活性高

缺點(diǎn)：使用復(fù)雜，更加不易理解。不便于調(diào)試。

問(wèn)題思考

1. 控件中使用模板，可以將數(shù)據(jù)和DOM分離，但是如果一個(gè)控件中包含大量的模板，會(huì)增加使用者的工作量，而且不易于調(diào)試，需要權(quán)衡使用。

2. 如果大量控件使用相同的模板，和相同的數(shù)據(jù)結(jié)構(gòu)，每個(gè)控件單獨(dú)配置不便于使用，更好的方案是允許父控件配置模板。

 

相關(guān)文章

最新評(píng)論