doT_模板.md

doT是一個性能很是高的JavaScript模板，能夠用於nodeJs和web端。 該項目在github上開源：github.com/olado/doT，官網內容相對簡單，國內也沒有太過詳細的使用說明（多是由於上手確實太簡單了）。

因爲官網文檔對於如何在node端和web端使用doT說明的比較詳細，這裏就再也不贅述。重點說明一下doT的編譯和語法。

doT compile

doT渲染模板分爲2個階段，這一點從它的使用方法中也能看出來：

var tempFn = doT.template(「<div>{{= it.foo}}</div>」);
var resultText = tempFn({foo: ‘hello world'});

這一點是與其餘主流的模板引擎不一樣的。
在compile階段，能夠依賴其餘模板文件，緩存模板等操做。還能夠傳入參數，經過條件判斷生成模板內容。
在頁面載入或是服務器啓動時，根據一些環境變量或其餘條件預先編譯模板，能夠進一步提升模板渲染是的效率。

doT.template方法的第2個參數爲配置項，第3個參數爲編譯時可接收的參數，參數在模板中被默認存儲在def對象下，具體用法在{{#}}語法中介紹。

doT.template方法返回值爲function類型：tempFn，tempFn接收的參數是模板渲染時可傳入的數據（與前面編譯時的數據不是同一份數據）。該數據在模板中被默認存儲在it對象下具體用法在{{}}和{{=}}等語法中都會介紹。

默認語法

下面的例子以web客戶端爲運行環境，例子中調用的全局變量的例子都是Bom下的window對象內容。若是是nodejs，則對應的全局變量有差別，但道理是同樣的。

提供一個比較簡單的doT模板在線編輯網站：kakanjau.github.io/dot

{{ }}

{{ }} interpolation 代碼片斷
{{ }} 的用法很是靈活，裏面能夠直接寫js語句。定義的變量能夠直接在{{= }}中調用。也能夠調用經過tempFn傳入的數據(數據默認放在it對象內)。

// 模板字符串：
{{
  var a = 1;
   it.a = a + 1;
}}

{{= a}} //  a 輸出 1
{{= it.a}}  // it.a 輸出 2

也能夠定義函數。並在其餘的{{}} 區塊內調用：

// 模板字符串：
{{
 function fn() {
   return 123
 }
}}

{{= fn()}} //  fn 輸出 123

也能夠直接運行匿名函數
{{
  (function() {
    it.b = 123
  })();
}}

{{= it.b}} // it.b經過直接執行的匿名函數賦值爲123

{{}}中的代碼塊隨時能夠被打斷，插入dom片斷等html內容：

// 模板字符串：
{{
  var a = 3;
  if(a > 2) {
}}
  a的值大於2
{{
  } else {
}}
  a的值小於2
{{
 }
}}

此外，{{}}中也能夠直接調用全局對象下的函數或變量。能夠以此特色實現比較複雜的功能（經過專用的命名空間給doT模板提供一些過濾器等特點的支持等）。

! 若是在tempFn函數的調用中不傳參數或者傳入的是undefined等空對象，則doT不會實例化it對象。此時在{{}}中賦值的it對象的值，{{=}}中沒法拿到（js的值引用問題）。

{{= }}

{{= }} evaluation 輸出表達式
{{= }} 將其中的內容直接輸出到html中。其中能夠是在{{ }}中定義的變量、經過函數傳入在it中的變量、也能夠是全局變量、甚至能夠是一個當即執行的function的返回結果。
能夠簡單的理解爲能夠獲取特定做用於下變量的單行js語句：

// 模板字符串：
{{
  it.a = 1;
  a = 2;
}}
{{= it.a}} it.a = 1
{{= a}} a = 2
{{= window}} window = [object Window]
{{= (function(){return 123})()}} function(){return 123})() = 123

{{! }}

{{! }} encode 轉義
{{! }} 會將其中的內容中特定字符進行轉義，如：{{! location.href}}

{{? }}

{{? }} conditionals 條件
{{?}}標籤必須成對出現，起始標籤中寫入判斷條件，並以另一個{{?}}標籤爲結束。該標籤和下面的{{~}}是{{if for}}的語法糖。

如上面的：

// 模板字符串：
{{
  var a = 3;
  if(a > 2) {
}}
  a的值大於2
{{
  } else {
}}
  a的值小於2
{{
 }
}}

能夠用本標籤簡寫爲：

// 模板字符串：
{{
  var a = 3;
}}
{{? a>2}}
  a的值大於2
{{?? true}}
  a的值小於2
{{?}}

{{~ }}

// 模板字符串：
{{
  var array = [1,2,3,4];
}}
{{~ array:value:index}}
  value:{{=value}}, index:{{=index}}
{{~}}

{{~}} array iteration 循環
{{~}}標籤必須成對出現，起始標籤中寫入對數組遍歷的變量賦值：{{~it.array :value:index}}，並以另一個{{~}}標籤爲結束。

{{# }}

{{#}} compile-time evalution/includes and partials 編譯時載入代碼片斷、文件
相似於宏編譯，在compile階段，將對應的變量或文件內容插入指定的位置
傳入的參數默認在對象def中。此外，經過{{## #}}定義的變量，也都是在def對象中的

用法與{{}}基本一致，只是生效的階段不一樣。

ps: 雖然官方文檔中提到了{{#def.loadfile(‘/snippet.text')}}這樣載入模板的例子。但其實這一功能並非默認集成的。loadfile函數須要本身去實現，並經過參數傳入。
因此在使用doT時，能夠考慮經過插件等形式封裝的時候，給def、it提供一些默認的行爲方法

{{## #}}

{{## #}} compile-time defines 編譯時變量定義

{{## #}}有兩種賦值方式：使用=賦值和使用:賦值。兩者的區別是，=賦值時，右側是一個js的表達式。能夠是函數定義、真值判斷、字符串等等，:賦值時，緊跟:以後的全部內容，都被當作靜態模板直接賦值給變量：

// 模板字符串：
{{##
  def.array = [1,2,3,4]
#}}
{{#def.array[0]}} 的值是 1

{{##
  def.array2:[1,2,3,4]
#}}
{{#def.array2[0]}} 的值是 [  // array2是字符串的：」[1,2,3,4]」，因此第0位是 [