JavaScript範本入門介紹_javascript技巧

例如要在一個清單中利用ajax插入一個li的時候，我會直接把資料跟html標籤拼接成一句完整的html，然後插入ul。無論資料是從伺服器端拿回的，或是從使用者的input輸入中拿到的——無論哪種方法都是一樣。
這個拼接過程放在JavaScript檔案中，顯得非常不優雅。如果還把style也放在JavaScript中，那資料、結構還有樣式整個就是一鍋粥了，要維護這樣的程式碼會讓人想自殺。最過分的就是把頁面上最終要生成的HTML都直接放在伺服器端，ajax吐出資料就包含了

標籤，這樣的頁面幾乎不存在擴展性了，修改一個前台樣式都要涉及後台代碼的修改。

後來我們知道了不要在JavaScript中對DOM進行style定制，而是只需要在CSS檔案中定義好對應的class，然後在JavaScript中使用這個class就好。

接下來我們要做的就是用JavaScript模板把HTML結構（在這個案例中，是

標籤）也從JavaScript中分離。

市面上的JavaScript模板很多了，以handlebars這個優秀的模板為例吧：

我們在頁面的html中定義模板：

複製程式碼 程式碼如下:

然後在我們的邏輯JavaScript程式碼中可以把資料拼接到這一模版中：

複製程式碼 程式碼如下:

var source = $("#list- template").html(); //模板來源，一般放在html的script中，這裡我們使用jQuery，也可以使用其它方法直接得到內容字串
var template = Handlerbars.compile(source); / /編譯產生一個模板template
var context = {title:"This is a todo item"} //取得數據，數據一般從ajax或input取得
var html = template(context); //數據範本=新的html

這就是基本的用法了，更多邏輯可以參考官方文件：http://handlebarsjs.com/