自己動手擼個模板引擎（50行左右）

模板的誕生是為了將顯示與資料分離，模板技術多種多樣，但其本質是將模板檔案和資料通過模板引擎生成最終的html**。目前有著很多這種模板引擎，諸如node的ejs，jade，php的smarty。當然在用過這麼多的模板引擎後，也有著自己實現乙個簡易模板引擎的衝動。於是今天就實現了乙個簡單的模板引擎，這個模板引擎非常簡單，並不會涉及到語法分析，詞法分析等編譯原理相關知識，做的僅僅是將模板的js**執行。下面來和大家分享下：

語法參照的是ejs：

看下需要實現的目標：

// 模板**
<% for (var i = 0; i < 5; i++)  else  %>
<% } %>
/ul>
// 轉化為html後
0li>
12li>
13li>
14li>
15li>
ul>

下面來考慮下，其實形成上述的html的話，利用js拼接字串就可以做到，那麼對於模板來說，是不是可以將模板內的js**轉化為原生js**從而來實現呢？沒錯，這個簡單的模板引擎幹的就是這個事情，就是將模板內的被<% %>包裹的js**執行，從而將模板轉為html。

但是，如何做呢？可以採用function(引數名, 函式主體)，雖說這個平時不怎麼使用，但是在這個情況下是最好的選擇，將模板內的js**解析提取後當做引數傳入到function中：

/**
* 將模板引擎轉化為可用dom字串
* * @param  tpl
* @param  data 資料物件,為鍵值對形式,鍵值為資料名  
* @return 
*/function tpl2dom (tpl, data) /g, 
quotre = /\"/g,
main = "";    // 函式主體
function fn (d) 
}if (!main) ";\n
`;  
// res就是拼接的html字串
for (var i = 1; i < len; i++) `: 
`\n$`;       
main += `\nres += "$"
`;        }
main += "\nreturn res;";
}return data ? fn(data) : fn();
}

利用tpl2dom函式可以得到html，那下面在寫乙個函式來將html轉為dom節點。從下面的函式可以看出的就是，這個模板引擎所解析的模板，只能有乙個dom根節點：

var cachediv = document.createelement("div");
/** * 將可用dom字串轉為dom節點
* * @param  str
* @return 
*/function str2dom (str)

到此為止，模板引擎就基本完成了，既然是仿照的ejs，那麼在來完善下，比如img_tag：

// 注意,實現該函式需放到全域性
function
img_tag
(url)

完整**請見github，當然這個模板引擎只是乙個玩物，並不能用於生產，比如，根本沒有考慮到編譯時模板語法不正確，渲染過程中出錯時如何定位到具體位置。

自己動手擼個模板引擎（50行左右）

自己動手擼個簡易模板引擎（50行左右）

自己動手擼乙個靜態部落格生成器

乙個自己寫的PHP模板引擎

自己動手擼個模板引擎（50行左右）

自己動手擼個簡易模板引擎（50行左右）

自己動手擼乙個靜態部落格生成器

乙個自己寫的PHP模板引擎

相關推薦