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

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

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

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

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

　　接下來我們要做的就是用JavaScript模板把HTML結(jié)構(gòu)（在這個案例中，是

　　標(biāo)簽）也從JavaScript中分離。

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

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

　　復(fù)制代碼 代碼如下:

　　{{title}}

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

　　復(fù)制代碼 代碼如下:

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

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

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

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

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

如何調(diào)試javascript腳本呢07-19

javascript跨域訪問的方法07-19

英語基礎(chǔ)入門05-25

入門須知羽毛球新手入門需知的常識08-28

舞蹈入門要點(diǎn)07-31

播音主持入門稿件03-13

梵語入門教程07-02

臺球的入門規(guī)則02-24

吉他入門技巧講解01-12

初學(xué)鋼琴的入門方法04-13