JavaScript模板入門介紹
比如要在一個(gè)列表中利用ajax一個(gè)li的時(shí)候，我會(huì)直接把數(shù)據(jù)跟html標(biāo)簽拼接成一句完整的html，然后到ul中。無論數(shù)據(jù)是從服務(wù)器端拿回的，或者是從用戶的input輸入中拿到的——無論哪種方法都是一樣。
這個(gè)拼接過程放在JavaScript文件中，顯得非常不優(yōu)雅。如果還把style也放在JavaScript中，那數(shù)據(jù)、結(jié)構(gòu)還有樣式整個(gè)就是一鍋粥了，要維護(hù)這樣的代讓人想。最過分的就是把頁面上最終要生成的HTML都直接放在服務(wù)器端，ajax吐出數(shù)據(jù)就包含了<li>標(biāo)簽，這樣的頁面幾乎不存在擴(kuò)展性了，修改一個(gè)前臺(tái)樣式都要涉及后臺(tái)代碼的修改。
后來我們知道了不要在JavaScript中對(duì)DOM進(jìn)行style定制，而是只需要在CSS文件中定義好對(duì)應(yīng)的class，然后在JavaScript中使用這個(gè)class就好。
接下來我們要做的就是用JavaScript模板把HTML結(jié)構(gòu)（在這個(gè)案例中，是<li>標(biāo)簽）也從JavaScript中分離。
市面上的JavaScript模板很多了，以handlebars這個(gè)優(yōu)秀的模板為例吧：
我們?cè)陧撁娴膆tml中定義模板：
<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)文章
一文教你用JavaScript制作個(gè)簡(jiǎn)單的大轉(zhuǎn)盤游戲
日常生活中，我們經(jīng)常會(huì)見到形形色色的抽獎(jiǎng)活動(dòng)，例如九宮格、大轉(zhuǎn)盤等等……本文就來教大家如何利用JavaScript制作個(gè)簡(jiǎn)單的大轉(zhuǎn)盤游戲，感興趣的可以了解一下2023-02-02
js實(shí)現(xiàn)前端跨域postMessage的具體使用
這篇文章主要介紹了js實(shí)現(xiàn)前端跨域postMessage的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
uniapp實(shí)現(xiàn)微信小程序的電子簽名效果(附demo)
本文主要介紹了uniapp實(shí)現(xiàn)微信小程序的電子簽名效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
ionic實(shí)現(xiàn)滑動(dòng)的三種方式
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)滑動(dòng)的三種方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
作用域（scope）是javascript中一項(xiàng)令人棘手的的特性。所有面向?qū)ο缶幊陶Z言都有某種形式的作用域，不過和把這個(gè)概念放在什么上下文中有關(guān)。在javascript里，作用域是由函數(shù)劃分的。2009-06-06
javascript html5搖一搖功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了javascript html5搖一搖功能的實(shí)現(xiàn)過程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
JavaScript捕捉事件和阻止冒泡事件實(shí)例分析
這篇文章主要介紹了JavaScript捕捉事件和阻止冒泡事件,結(jié)合實(shí)例形式分析了冒泡的原理及javascript阻止冒泡的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
登陸成功后自動(dòng)計(jì)算秒數(shù)執(zhí)行跳轉(zhuǎn)
本文實(shí)現(xiàn)的是這樣的一個(gè)功能登陸成功后自動(dòng)查秒跳轉(zhuǎn)，具體示例如下，不了解的朋友可以學(xué)習(xí)下哦2014-01-01
淺談gulp創(chuàng)建完整的項(xiàng)目流程
本篇文章主要介紹了淺談gulp創(chuàng)建完整的項(xiàng)目流程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12