有關(guān)JavaScript模板入門(mén)參考

　　比如要在一個(gè)列表中利用ajax插入一個(gè)li的時(shí)候，我會(huì )直接把數據跟html標簽拼接成一句完整的html，然后插入到ul中。無(wú)論數據是從服務(wù)器端拿回的，或者是從用戶(hù)的input輸入中拿到的——無(wú)論哪種方法都是一樣。

　　這個(gè)拼接過(guò)程放在JavaScript文件中，顯得非常不優(yōu)雅。如果還把style也放在JavaScript中，那數據、結構還有樣式整個(gè)就是一鍋粥了，要維護這樣的代碼會(huì )讓人想自殺。最過(guò)分的就是把頁(yè)面上最終要生成的HTML都直接放在服務(wù)器端，ajax吐出數據就包含了

　　標簽，這樣的頁(yè)面幾乎不存在擴展性了，修改一個(gè)前臺樣式都要涉及后臺代碼的修改。

　　后來(lái)我們知道了不要在JavaScript中對DOM進(jìn)行style定制，而是只需要在CSS文件中定義好對應的class，然后在JavaScript中使用這個(gè)class就好。

　　接下來(lái)我們要做的就是用JavaScript模板把HTML結構（在這個(gè)案例中，是

　　標簽）也從JavaScript中分離。

　　市面上的JavaScript模板很多了，以handlebars這個(gè)優(yōu)秀的模板為例吧：

　　我們在頁(yè)面的html中定義模板：

　　復制代碼 代碼如下:

　　{{title}}

　　然后在我們的邏輯JavaScript代碼中可以把數據拼接到這一模版中：

　　復制代碼 代碼如下:

　　var source = $("#list-template").html(); //模板源，一般放在html的script中，這里我們使用jQuery，也可以使用其它方法直接獲得內容字符串

　　var template = Handlerbars.compile(source); //編譯生成一個(gè)模板template

　　var context = {title:"This is a todo item"} //獲得數據，數據一般從ajax或者input中取得

　　var html = template(context); //數據+模板=新的html

【JavaScript入門(mén)參考】相關(guān)文章：

JavaScript fontcolor方法入門(mén)實(shí)例07-07

對javascript的理解08-08

常用的JavaScript模式09-22

Javascript的this用法簡(jiǎn)述08-15

JavaScript學(xué)習筆記08-24

JavaScript 基礎教學(xué)09-29

JavaScript的課堂講解09-03

JavaScript常用方法匯總10-25

JavaScript數組常用方法介紹09-04

JavaScript中的with關(guān)鍵字07-24