domTemplate.js前端HTML模板解析引擎
一個非侵入式、不會破壞原來靜態(tài)頁面結(jié)構(gòu)、可被瀏覽器正確顯示的、格式良好的前端HTML模板引擎。徹底實現(xiàn)前后端分離，讓后端專注業(yè)務的處理。
傳統(tǒng)MVC開發(fā)模式，V層使用服務器端渲染。美工設(shè)計好靜態(tài)HTML文件，交給后端工程師，需要轉(zhuǎn)換成Jsp、Freemarker、Velocity等動態(tài)模板文件。這種模式有幾個缺點
1、動態(tài)模板文件不能被瀏覽器解釋、必須要運行在服務器中才能顯示出效果
2、動態(tài)效果和靜態(tài)效果分別存在不同文件，美工和后端工程師需要分別維護各自頁面文件，其中一方需要修改頁面，都需要通知另一方進行修改
3、頁面數(shù)據(jù)不能分塊加載、獲取跨域數(shù)據(jù)比較麻煩
domTemplate.js 模板引擎是通過在標簽中添加自定義屬性，實現(xiàn)動態(tài)模板功能，當沒有引入domTemplate腳本， 則自定義標簽屬性不會被瀏覽器解析，不會破壞原有靜態(tài)效果，當引入domTemplate腳本，模板引擎回去解析這些標簽屬性， 并加載數(shù)據(jù)進行動態(tài)渲染。 下圖：對比服務器頁面渲染和使用domTemplate前端引擎開發(fā)流程
| 服務器端模板解析 | domTemplate前端解析 |
|---|---|
用法
導入jquery.js或者zepto.js和domTemplate.js
$(function () {
$.domTemplate.init(options);
//可以通過selector指定根節(jié)點，默認根節(jié)點是body,表示從body開始，渲染整個頁面
});
或者解析某一個html片段。
$('selector').domTemplate(options);
//渲染數(shù)據(jù)是通過h-model 自動去獲取數(shù)據(jù)，也可以通過data指定全局數(shù)據(jù)
if條件標簽
xxx
其他內(nèi)容
switch條件標簽
each遍歷標簽
遍歷List例子
- 李小璐
自定義標簽
$.domTemplate.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定義標簽名稱，用時要加上前綴，如定義'test'標簽，用時h-test=""用法
參數(shù)
Name Type Default Description ctx Context 上下文，一般會用到 ctx.options、渲染表達式函數(shù)：ctx.compile(exp)和模板渲染函數(shù)：ctx.tpl(exp) name string 標簽名稱 exp string 標簽值
自定義函數(shù)
可以通過$.domTemplate.registerHelper('functionName',function)添加自定義函數(shù)，實例:
xxx1
渲染結(jié)果
2016-05-30 11:20:42
自定義函數(shù)示例
$.domTemplate.registerHelper('toPrefix', function (value) { return 'test:'+value; });用法
xxx1
渲染結(jié)果
test:[email protected]