模板引擎原理

2021-08-28 16:49:44 字數 2207 閱讀 1272

1》模板概念

通常是指嵌入某種動態程式語言**的文字資料模板通過某種形式的結合可以變化出不同的結果,模板通常用來定義顯示的形式,能夠使資料展示更加豐富,而且容易維護

2》模板的好處

1)簡化了html書寫

2)通過程式設計元素(比如迴圈和條件分支),對資料的展現更具有控制力

3)分離資料與展現,使得展現的邏輯和效果更易維護

3》模板引擎

通過分析模板,將資料和模板結合在一起輸出最後的結果的程式稱為模板引擎

從模板引擎的實現上看,需要依賴編譯語言的動態編譯或者動態解釋的特性,以簡化實現和提高效能

4》實現原理

先獲取html中對應的id下的innerhtml,利用開始標籤和關閉標籤進行字串切分,其實是將模板劃分成兩部分內容,一部分是html部分,一部分是邏輯部分,通過區別一些特殊符號比如each,if等來講字串拼接成函式式字串,將兩部分各自經過處理後(正則處理),再次拼接到一起,最後將拼接好的字串採用new

function()方式轉換成所需要的函式

1.正則摳出要匹配的內容

2.裝入陣列

3.分辨js邏輯部分

4.引擎函式

5.把data扔進去

5》相關知識

1)模板存放:模板一般放置到textarea/input等表單控制項或者script等標籤中

2)模板獲取:一般通過id獲取

document.getelementbyid("id");

3)模板函式:一般都是templatefun("id",data),id是存放模板字串的元素id,data是需要裝載的資料

模板解析編譯:模板解析主要是指將模板中js語句和html分離出來,編譯的話將模板字串編譯創最終的模板

6》高效的秘密

預編譯:編譯賦值過程是在渲染之前完成的,arttemplate模板編譯器會根據一些簡單的規則提取好所有模板變數,宣告在渲染函式頭部

更快的字串相加方式:ie6-8瀏覽器下,push方法拼接字串會比+=快,現代瀏覽器+=會比push方法快。

arttemplate根據js引擎特性採用兩種不同的字串拼接方式

7》除錯模式原理

前端模板引擎不像後端模板引擎,它是動態解析,所以偵錯程式無法定位到錯誤,而arttemplate通過巧妙的方式讓模板除錯可以精確定位到引發渲染錯誤的模板語句

1)支援兩種型別的錯誤捕獲

(1)渲染錯誤:一般是因為模板資料錯誤或者變數錯誤

產生的,渲染的時候只有遇到錯誤才會進入除錯模式重新編譯模板,而不會影響正常的模板執行效率,模板引擎根據模板換行符記錄行號當執行過程遇到錯誤,立馬丟擲異常模板對應的行號,模板偵錯程式再根據行號反查模板對應的語句並列印到控制台

(2)編譯錯誤:一般是模板語法錯誤

,如不合格的巢狀,未知語法等,由於arttemplate沒有進行完整的詞法分析,故無法確定錯誤源所在的位置,只能對錯誤資訊與原始碼進行原文輸出,供開發者判斷

php模板引擎原理

訪問php檔案,php檔案會去載入模板引擎,通過模板引擎去載入模板然後替換模板裡面的變數 然後生成乙個編譯檔案 最後將該編譯檔案匯入 訪問的php檔案中輸出 第二次訪問的時候 如果 快取檔案存在或者沒有被改動則直接 匯入快取檔案 輸出 否則重新編譯 自定義的乙個模板引擎 mytpl.class.ph...

JavaScript模板引擎原理

一 前言 什麼是模板引擎,說的簡單點,就是乙個字串中有幾個變數待定。比如 var tpl hei,my name is name and i m age years old.通過模板引擎函式把資料塞進去,var data var result tplengine tpl,data hei,my na...

ejs模板引擎原理

核心function test obj templ return templ 複製 const fs require fs const path require path let str fs.readfilesync path.resolve dirname,index2.html utf8 fu...