JavaScript模板入門(mén)介紹
比如要在一個(gè)列表中利用ajax一個(gè)li的時(shí)候，我會(huì)直接把數(shù)據(jù)跟html標(biāo)簽拼接成一句完整的html，然后到ul中。無(wú)論數(shù)據(jù)是從服務(wù)器端拿回的，或者是從用戶(hù)的input輸入中拿到的——無(wú)論哪種方法都是一樣。
這個(gè)拼接過(guò)程放在JavaScript文件中，顯得非常不優(yōu)雅。如果還把style也放在JavaScript中，那數(shù)據(jù)、結(jié)構(gòu)還有樣式整個(gè)就是一鍋粥了，要維護(hù)這樣的代讓人想。最過(guò)分的就是把頁(yè)面上最終要生成的HTML都直接放在服務(wù)器端，ajax吐出數(shù)據(jù)就包含了<li>標(biāo)簽，這樣的頁(yè)面幾乎不存在擴(kuò)展性了，修改一個(gè)前臺(tái)樣式都要涉及后臺(tái)代碼的修改。
后來(lái)我們知道了不要在JavaScript中對(duì)DOM進(jìn)行style定制，而是只需要在CSS文件中定義好對(duì)應(yīng)的class，然后在JavaScript中使用這個(gè)class就好。
接下來(lái)我們要做的就是用JavaScript模板把HTML結(jié)構(gòu)（在這個(gè)案例中，是<li>標(biāo)簽）也從JavaScript中分離。
市面上的JavaScript模板很多了，以handlebars這個(gè)優(yōu)秀的模板為例吧：
我們?cè)陧?yè)面的html中定義模板：
<script id="list-template" type="text/x-handlebars-template">
<li>{{title}}</li>
</script>
然后在我們的邏輯JavaScript代碼中可以把數(shù)據(jù)拼接到這一模版中：
var source = $("#list-template").html(); //模板源，一般放在html的script中，這里我們使用jQuery，也可以使用其它方法直接獲得內(nèi)容字符串
var template = Handlerbars.compile(source); //編譯生成一個(gè)模板template
var context = {title:"This is a todo item"} //獲得數(shù)據(jù)，數(shù)據(jù)一般從ajax或者input中取得
var html = template(context); //數(shù)據(jù)+模板=新的html
這就是基本的 用法了，更多邏輯可以參考官方文檔：http://handlebarsjs.com/
相關(guān)文章
微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕往上滾動(dòng)的示例代碼
這篇文章主要介紹了微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕往上滾動(dòng)的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
獲取JavaScript用戶(hù)自定義類(lèi)的類(lèi)名稱(chēng)的代碼
獲取JavaScript用戶(hù)自定義類(lèi)的類(lèi)名稱(chēng)的代碼...2007-03-03
javascript類(lèi)型系統(tǒng) Array對(duì)象學(xué)習(xí)筆記
這篇文章主要介紹了javascript類(lèi)型系統(tǒng)之Array對(duì)象，整理關(guān)于Array對(duì)象的學(xué)習(xí)筆記，感興趣的小伙伴們可以參考一下2016-01-01
小程序云開(kāi)發(fā)實(shí)現(xiàn)數(shù)據(jù)庫(kù)異步操作同步化
這篇文章主要為大家詳細(xì)介紹了小程序云開(kāi)發(fā)實(shí)現(xiàn)數(shù)據(jù)庫(kù)異步操作同步化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
在web端，輸入的時(shí)候，很容易在文本框消失焦點(diǎn)的時(shí)候，點(diǎn)擊退格鍵，頁(yè)面就回退了，下面是一種屏蔽頁(yè)面回退鍵的方法,一起看看吧2016-12-12
JXTree對(duì)象，讀取外部xml文件數(shù)據(jù)，生成樹(shù)的函數(shù)
JXTree對(duì)象，讀取外部xml文件數(shù)據(jù)，生成樹(shù)的函數(shù)...2007-04-04
這篇文章主要介紹了深入淺析JavaScript中的scrollTop的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹(shù)（Binary Sort Tree）實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹(shù)（Binary Sort Tree）,結(jié)合實(shí)例形式詳細(xì)分析了二叉查找樹(shù)（Binary Sort Tree）的原理、定義、遍歷、查找、插入、刪除等常見(jiàn)操作技巧,需要的朋友可以參考下2019-08-08
實(shí)際上，setTimeout和setInterval的語(yǔ)法相同。它們都有兩個(gè)參數(shù)，一個(gè)是將要執(zhí)行的代碼字符串，還有一個(gè)是以毫秒為單位的時(shí)間間隔，當(dāng)過(guò)了那個(gè)時(shí)間段之后就將執(zhí)行那段代碼。不過(guò)這兩個(gè)函數(shù)還是有區(qū)別的2015-06-06
這篇文章主要介紹了使用JS在父頁(yè)面和子頁(yè)面間相互傳值方法,子頁(yè)面可以是window.open彈出的,也可以是iframe框架中的頁(yè)面,需要的朋友可以參考下2014-03-03