在我的一次開發中，我遇到了一個需要利用ajax接受返回資料然後動態在網頁裡寫入一個特定格式的需求

傳統模式下我們是先準備一個字串，然後在通過選擇器選擇到相應節點然後新增，如下圖所示

但是這種模式下我們在寫這個字串的時候往往就特別麻煩，因為內容是在js的ajax裡面的，所以相應的程式碼高亮、對齊可能與我們直接寫的html程式碼有出入，並且最主要的是換行涉及大量的字串拼接，且後期維護也比較難。所以我設法找一個解決方案，於是就找到了art-template這個外掛

首先展示一下art-template下的程式碼，可以發現傳統方式的痛點都得以解決

具體使用方法：

1、引入art-template的js檔案

2、如上圖，在一個script標籤下寫上我們需要重複生成的程式碼，注意：這裡並不是我們要執行的js程式碼，只是我們準備了一個“模板”（為什 麼用script標籤？注意上面的程式碼中我的type並不是text/JavaScript，而是自定義了一個type，因此不會被當做js程式碼來處理。但是因為我們寫在的是script標籤裡面，所以瀏覽器在解析程式碼的時候並不會把他顯示在頁面中，即F12下不可見，可以有效的保護程式碼。而我們寫程式碼時呼叫，只需要給這個script標籤一個id即可獲取內容，我們也是dom選擇id來呼叫模板的）

3、在需要執行js的地方首先定義一個變數

如上圖 var context = {comments：res}，res是ajax返回的物件。可以理解為我們把res這個返回的物件放在一個叫comments的屬性上，然後最為一個新的物件放在context這個變數上面。其中comments是我們在第二步中的script標籤裡面需要使用的，context是我們執行最後一步需要使用的。

4、回到準備的模板當中（script標籤，以後統稱模板），利用{{each comments}}    以及結束語句{{/comments}}，我們就可以遍歷到comments裡面res的每一個元素（可以類比foreach迴圈）；在這對標籤裡面我們寫我們要寫的html程式碼即可

注意：如上圖我們可以用{{$value}}獲取每一次迴圈的當前元素，然後可以通過{{$value.屬性}}的方式獲取到對應的值，用{{$index}}可以獲取當前元素的下標

5、準備好模板後，回到我們js程式碼

如上圖var html = template("template"，context)。

template（）方法是外掛自帶的方法，第一個引數是模板對應的id，如上圖我就將id命名為template（可以隨意命名），第二個引數就是我們第三步的變數context，這個方法的返回值就是一個字串，具體字串的內容就同我們穿同方法寫的內容一模一樣，把這個字串賦值給變數html

6、將字串放入網頁中

在模板的幫助下我們的可視性是不是好多了呢？並且後期維護也更加方便了。

這是我在學校實訓的時候遇見的一個外掛，在此分享給大家。

我只是一個大二學生，寫的地方若有錯誤麻煩大家指出謝謝。