JavaScript輸入郵件信箱自動提示實例程式碼_javascript技巧
- WBOY原創
- 2016-05-16 17:03:541351瀏覽
本來想把之前對artTemplate原始碼解析的註解放上來分享下，不過隔了一年，找不到了，只好把當時分析模板引擎原理後，自己嘗試
寫下的模板引擎與大家分享下，留個紀念，記得當時還對比了好幾個模板引擎來著。
這裡所說的js的模板引擎，用的是原生的javascript語法，所以很類似php的原生模板引擎。
前端模板引擎的作用？
1. 可以讓前端開發更簡單，不需要為了產生一個dom結構而使用運算子去拼接字串，而只需要一個元素的（裡面的html模板），或者一個變數（儲存著模板），或一個範本檔
2. 易於維護，減少耦合，假使你的dom結構變化了，不需要更改邏輯代碼，而只需要更改對應的模板（文件）
3. 可以緩存，如果你的模板是一個類似.tpl的文件，那麼完全可以用瀏覽器去加載，並且還存下來。說到.tpl文件，可以做的不只是快取了，你還可以做到透過模組載入器
將.tpl作為一個模組，那就可以按需載入文件，不是更省寬頻，加快頁面速度嗎？
4. 等等等
前端模板引擎的原理？
原理很簡單就是 物件（資料）＋ 模板（含變數） －> 字串（html）
前端模板引擎的如何實現？
透過解析模板，根據詞法，將模板轉換成函數，然後透過呼叫函數，並傳遞物件（資料），輸出字串（html）
（當然，具體的還要看程式碼的）
就像這樣：
複製程式碼 程式碼如下:
var tpl = 'i am , years old'; // % 詞法，標記為變數
var obj = {
name : 'lovesueee' ,
name : 'lovesueee' ,
age : 24
};
var fn = Engine.compile(tpl); // 編譯成函數
var str = fn(obj); // 渲染字串 >