Atitit 模板引擎總結 v4 saa

目錄

1. 模板引擎 1

1.1. 構成渲染引擎+指令系統 1

1.2. 模板語法mustache語法   es6 el語法 1

2. 常見模板步驟 1

2.1. 1）定義模板字串  1

2.2. 2）   構造模板引擎 預編譯模板 2

2.3. //構造上下文(Model) 2

2.4. 渲染模板  2

3. 流程渲染 if else  foreach 3

1. 模板引擎

Jsp+jstl    freemarker等

1. 1. 構成渲染引擎+指令系統
   2. 模板語法mustache語法   es6 el語法

Mybatis模板  #｛｝   ${}

1. 常見模板步驟

mustache的使用非常簡單，先通過script標籤引入它的js檔案，然後按下面的步驟操作： 

1. 1. 1）定義模板字串 

定義模板有2種方式，方式一就是在前面部分中看到的，直接用[...].join('')的方式在js程式碼中定義，方式二直接把模板內容用script定義在html中：

- Hide code

<script id="tpl" type="text/html">

    Hello {{name}}!</script>

然後在編譯模板之前，通過獲取tpl的innerHTML定義原始模板串：

- Hide code

var tpl = document.getElementById('tpl').innerHTML.trim();

具體要用哪種方式來定義模板，可以參考下面的建議： 
如果這個模板要用於多個頁面，推薦把模板定義在js程式碼中；如果這個模板只用於當前頁面，推薦直接定義到script標籤中，管理更方便。 

1. 1. 2）   構造模板引擎 預編譯模板

假設原始模板串已經定義好，並用tpl變數來引用，就可以通過下面的程式碼來預編譯模板：

- Hide code

Mustache.parse(tpl);

要注意的是，經過預編譯之後的tpl已經不再是原來的模板串了，連資料型別都變成陣列型別了，這都是預編譯的結果。 
 

1. 1.    //構造上下文(Model)

1. 1. 渲染模板 

渲染方式很簡單：

- Hide code

var htmlAfterRendered = Mustache.render(tpl1, obj);

obj引用的是一個數據源物件，mustache會把模板中那些屬性標籤，根據約定的規則，替換成物件的內容。htmlAfterRendered就是替換之後的字串，你可以用它完成你需要的DOM操作。

1. 流程渲染 if else  foreach

1. if-else渲染2）for-each渲染

3） 動態渲染

當prop屬性所引用的是一個函式，並且這個函式的返回值還是一個函式的話，mustache會再次呼叫這個返回的函式，並給它傳遞2個引數：text表示原來的模板內容，render表示mustache內部的執行渲染的物件，以便在這個函式內部可以通過這render物件，結合原來的模板內容，自定義渲染的邏輯，並把函式的返回值作為渲染結果（這個返回值渲染的邏輯跟{{prop}}標籤完全一樣）：

Javascript模板引擎mustache.js詳解 - 流雲諸葛 - 部落格園.html

Atitit freemarker模板總結.docx