首頁 > web前端 > js教程 > 主體

JavaScript輸入郵件信箱自動提示實例程式碼_javascript技巧

WBOY
發布: 2016-05-16 17:03:54
原創
1318 人瀏覽過

本來想把之前對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);   // 渲染字串     >
範例:

複製程式碼 程式碼如下:





ice demo



   



熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板