傳送門：https://github.com/xiangyuecn/BuildHTML

發這篇文章之前在掘金上點了一篇類似的模板引擎的文章看了一下，留意到了幾個字眼不允許在模板中使用javascript，而是提供了一些列的功能函式....開發新的helper，使用registerHelper function，就像寫微信小程式一樣複雜，限制這麼死做啥，寫什麼都要寫的很複雜很深層次的呼叫路徑，看著就難受，BuildHTML允許你使用你能夠使用的程式碼，哈哈~

copy之前說點什麼

html做點小功能（什麼都沒有），如果是要手動生成html這種操作，容易把程式碼搞得亂七八糟，如果使用模板並解析成html，就會簡單很多。

演示：https://xiangyuecn.github.io/BuildHTML/

以下內容copy自README

BuildHTML用於前端HTML模板解析

這段程式碼是以前在多個專案中使用的（包括PC端、移動端、還有Android、IOS Hybrid App），程式碼簡單輕巧，但功能一點都不簡單。100行程式碼不到，Uglify壓縮後1k大小（可選移除_eval後0.8k）。

演示地址：xiangyuecn.github.io/BuildHTML/

使用方法

一、引入程式碼

方法1：把程式碼直接複製到你專案的公共js檔案中使用。

方法2：將程式碼檔案引用到你的頁面中<script src="buildhtml.js"></script>

二、解析使用

引入程式碼後有兩個函式可用：BuildHTML、BuildHTMLArray，基本使用流程：

1. 定義模板，推薦使用script text/template標籤包裹文字資料(js模組化寫法參考完整功能演示)：

<script type="text/template" class="tp_action">
<div>
	{name}第一次使用模板，請多多指教。({:slogan}){{::html}}
</div>
</script>

<script>
var tp_action=$(".tp_action").html();
</script>
複製程式碼

2. 解析模板

var data={name:"豆豆",slogan:"<span style='color:green;font-size:12px'>面向大海春暖花開</span>"};
var html=BuildHTML(tp_action,data);

data.html="{fn:BuildHTMLArray.index}";
var list=[data,data,data];
html+=BuildHTMLArray(tp_action,list);
複製程式碼

3. 顯示解析後的資料

$("body").append(html);
複製程式碼

模板語法

HTML模板內通過嵌入特定的語法來實現內容的自動生成。

所有嵌入的程式碼可讀寫o物件(為啥用o，o=object，一個字母簡短啊)，o物件為當前傳入的資料物件（物件可以是object、數字、文字...）；多個嵌入程式碼塊之間如果需要傳遞變數資料，可以放入o物件中。

模板嵌入語法支援兩類：

一、{{}}：前置處理語法

此語法會在{}語法之前執行，可實現：

• 執行復雜程式碼返回結果
• 動態生成{}語法
• 定義內建模板（因為是前置處理，所以內建模板定義位置無關緊要）
• 定義函式和變數
• ...你想得到的作用

此語法支援三種寫法：

1. {{變數名=多行文字}}

定義多行文字變數，無返回值；一般用於內建模板定義。

變數名稱會賦值給o[變數名]，比如{{_tp_=多行文字}}，最終結果：o._tp_="多行文字"

2. {{:多行程式碼;返回純文字}}

立即執行多行程式碼，並將返回的內容當做純文字處理，如果有html會被轉義，比如：{{:var i="<div>";i}}結果為<div>。

注意：如果存在倒數第二行程式碼，程式碼結尾需要帶;。 其他地方無此要求，畢竟解析js程式碼格式是一件複雜的事情，加分號結尾省事的多。

3. {{::多行程式碼;返回html}}

立即執行多行程式碼，並原樣返回內容；這個和{{:}}語法一致，只是這個對返回結果不會轉義，用於返回html。比如：{{::var i="<div>";i}}結果為<div>。

二、{}：簡單語法

此語法求整個程式碼在一行，多行請使用前置處理語法。

此語法支援4種寫法：

1. {fn:單行程式碼;返回純文字}

執行一段程式碼，返回純文字，如果有html會被轉義。比如{fn:o.num=1;''} {fn:1+o.num}和{fn:var n=1+o.num;n}結果為2和2

2. {fn::單行程式碼;返回html}

這個和{fn:}語法一致，只是這個對返回結果不會轉義，用於返回html。

3. {屬性;可選單行程式碼;返回純文字}

讀取o物件的屬性值，返回純文字，如果有html會被轉義。比如：{name}表示取o.name作為返回值並轉義。

屬性後面可以跟複雜的表示式。比如：{num-100?'有':'無'}表示執行表示式o.num-100?'有':'無'作為返回值並轉義。

此語法是基於{fn:}語法，只是自動在程式碼前面加了o.，簡化了對物件屬性的獲取。

4. {:屬性;可選單行程式碼;返回html}

這個和{屬性}語法一致，只是這個對返回結果不會轉義，用於返回html。

此語法是基於{fn::}語法，只是自動在程式碼前面加了o.，簡化了對物件屬性的獲取。

方法文件

BuildHTML(tp,obj)

tp:html模板字串。

obj:資料物件。

返回值:html結果。

BuildHTMLArray(tp,list,check)

tp:html模板字串。

list:物件陣列。

check:fn(item,index)，檢查函式，item為當前遍歷到的物件，index為item在list中的索引，返回false可以停止遍歷。

BuildHTMLArray.index

當前遍歷的索引。

完整功能演示

js（丟瀏覽器控制檯執行）：

var tp=[

 '<div txt="{txt}" style="display:{disable?"none":"假裝空白"}">'
,'	表示式文字:{txt}'
,'	表示式html:{:txt}'
,'	表示式html:{:txt.replace(/div/g,"p")}'
,'	函式返回純文字:{fn:var d="加"+o.html;Date.now()+d}'
,'	函式返回html:{fn::o.html}'
,'	函式+內建模板(巢狀):{fn::BuildHTML(o._tp_,o)}'
,'	函式+內建模板+列表(巢狀迴圈):'
,'	{fn::BuildHTMLArray(o._tp_,o.childs)}'
,'</div>'

,'定義內建模板(無返回值):{{_tp_='
,'	<div>'
,'		<span>{name}</span>'
,'	</div>'
,'}}'

,'執行程式碼返回文字:{{:o.name'
,'	+"<p>"'
,'}}'

,'執行程式碼返回html:{{::var p="<p>";'
,'	o.name+p'
,'}}'

,'執行程式碼返回文字:{{:'
,'	var c=0;'
,'	for(var i=0;i<1000;i++){'
,'		if(i%3)c++;'
,'	};'
,'	c'
,'}}！哈'

].join('\n');

BuildHTML(tp,{
	disable:false
	,txt:"內容<div>"
	,html:'<i>html</i>'
	
	,name:"小視訊<i>"
	,childs:[{name:"土豆<i>"},{name:"愛奇藝"}]
});
複製程式碼

結果

<div txt="內容&#60;div&#62;" style="display:假裝空白">
	表示式文字:內容&#60;div&#62;
	表示式html:內容<div>
	表示式html:內容<p>
	函式返回純文字:1528680191658加&#60;i&#62;html&#60;&#47;i&#62;
	函式返回html:<i>html</i>
	函式+內建模板(巢狀):
	<div>
		<span>小視訊&#60;i&#62;</span>
	</div>

	函式+內建模板+列表(巢狀迴圈):
	
	<div>
		<span>土豆&#60;i&#62;</span>
	</div>


	<div>
		<span>愛奇藝</span>
	</div>

</div>
定義內建模板(無返回值):
執行程式碼返回文字:小視訊&#60;i&#62;&#60;p&#62;
執行程式碼返回html:小視訊<i><p>
執行程式碼返回文字:666！哈
複製程式碼

縮小js檔案

BuildHTML用Uglify壓縮後1k大小，如果你對列表使用無多少要求，可以把對列表解析優化部分移除，然後變成了0.8k。

移除方法：刪除程式碼後段_eval部分，把程式碼中兩處引用_eval(x)()的程式碼改成eval(x)即可，結果：損失了eval解析快取，僅僅影響列表性質的模板解析速度，因為沒有快取了，每次都要呼叫重量級的eval或Function。

插曲：優化歷史

1. 最早版本是隻支援{}語法，{{}}前置處理語法是後面加的，最老版本只有不到20行程式碼，不過也很好用。

2. _eval快取是在{{}}語法之後加的，主要針對列表這種反覆呼叫相同模板的效能優化，經過兩次優化測試：

第一次、全部把模板解析成一個函式並快取此函式，以後每次呼叫都使用此函式，省去了解析過程。結果：列表效能大幅提升，只使用一次的模板解析效能下降明細，svn提交記錄：

BuildHtml升級成編譯成函式模式，列表build效率大幅提升，測試：將近50倍，單個build速度下降3倍
複製程式碼

第二次、eval增加快取，列表效能大幅提升，但比解析成函式慢一倍，不過整體很強勁（證實了：正規表示式替換開銷與函式執行開銷慢不了多少），svn提交記錄：

BuildHtml重新優化，只改造eval部分，其餘不動，列性build能比函式化的慢一倍，但比原始的快20倍，單個build和原始差不多，相對來說比函式化的強


測試結果：
原始
2842.516ms
3365.878ms

eval快取
124.680ms
3725.948ms

函式化
60.350ms
8512.252ms



測試程式碼：
for(var i=0;i<10000;i++){
	BuildHtml(tp);
}
console.timeEnd(1);


console.time(1);
for(var i=0;i<10000;i++){
	BuildHtml('<div class="{cls+'+Math.random()+'}">{html+'+Math.random()+'}{fn:FormatDate()+'+Math.random()+'}</div>');
}
console.timeEnd(1);
複製程式碼