概述

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

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

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

替換（Substitute）

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

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

2.使用配置項：

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

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

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

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

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

2. 嵌套使用對象屬性：

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

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

缺點：只能進行簡單的數(shù)據(jù)結構，無法處理循環(huán)、條件語句。

渲染方法（Render）

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

配置項：

在使用時：

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

優(yōu)點：實現(xiàn)相對簡單，實現(xiàn)靈活，能滿足復雜數(shù)據(jù)結構，易于調試

缺點：

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

模板引擎（XTemplate）

每一個JS UI庫都會有一個功能強大的模板引擎，一個模板引擎需要實現(xiàn)以下功能：

1. 字符串替換

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

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

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

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

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

我們來看一下KISSY 模板的一個實例：

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

2. 對字符串進行語法分析，生成語法樹，執(zhí)行替換對應的標簽或數(shù)據(jù)。

下面是Ext的 xtemplate使用方式：

優(yōu)點：功能強大，靈活性高

缺點：使用復雜，更加不易理解。不便于調試。

問題思考

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

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

最新評論