Javascript 頁面模板化很多人沒有使用過的方法
比如以下的代碼——摘自新浪首頁的一段js代碼，這種方式也是大多數(shù)人使用的方式。
上面的代碼，你看完有什么反應(yīng)？你也許會(huì)把+=這種形式改成數(shù)組的push形式，有人說push比這種字符鏈接要快，但是也快不了多少。
如果這種嵌入的html代碼很多，你也要這樣處理嗎？如果修改（添加或者刪除）某個(gè)html，那么你就要不斷的翻代碼，找對(duì)應(yīng)的標(biāo)簽，然后在找結(jié)束標(biāo)簽，你不覺得麻煩嗎？也許有人會(huì)這樣寫（這個(gè)是我早期寫的，也是我最慣于使用的方式）。
上面的代碼，我維護(hù)起來也是非常費(fèi)勁的，很多時(shí)候如果ui那邊添加了個(gè)標(biāo)簽，或者修改了下html結(jié)構(gòu)，那我就頭疼了。 
頁面模板化——全新的方式
這是我最近看了facebook的js代碼，偶然間發(fā)現(xiàn)以下的方式看起來不錯(cuò)，希望與大家分享。
看我的index.html代碼
看我的js代碼
維護(hù)上面的html代碼我們是很容易的，下次無論html代碼結(jié)構(gòu)有什么變動(dòng)，改起來都很方便。
總結(jié)
上面的代碼有很多問題，大家不要見怪，這個(gè)只是我的簡易版。
當(dāng)前的模板只支持簡單的變量替換，有很多功能未開發(fā)出來，比如if標(biāo)簽，for標(biāo)簽，如果大家有興趣，可以試著做一下，如果做的比較成功，告知一下。如果能做個(gè)類似smarty的開源框架，呵呵，咱們也可以為開源事業(yè)做點(diǎn)貢獻(xiàn)不是。
作者：穿山甲
相關(guān)文章
javascript實(shí)現(xiàn)鏈接單選效果的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)鏈接單選效果的方法,可實(shí)現(xiàn)點(diǎn)擊鏈接改變其背景色的功能,同時(shí)可禁用對(duì)應(yīng)鏈接的跳轉(zhuǎn),需要的朋友可以參考下2015-05-05
本文主要介紹了canvas實(shí)現(xiàn)愛心和彩虹雨效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
原生JS實(shí)現(xiàn)動(dòng)態(tài)添加新元素、刪除元素方法
這篇文章主要介紹了原生js實(shí)現(xiàn)動(dòng)態(tài)添加新元素、刪除元素方法 ,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
輕松實(shí)現(xiàn)jquery手風(fēng)琴效果
這篇文章主要為大家介紹了實(shí)現(xiàn)jquery手風(fēng)琴效果的詳細(xì)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
詳解JavaScript閉包的優(yōu)缺點(diǎn)和作用
閉包是指在 JavaScript 中,內(nèi)部函數(shù)可以訪問其外部函數(shù)作用域中的變量,即使外部函數(shù)已經(jīng)執(zhí)行完畢,這種特性被稱為閉包,本文將給大家介紹一下JavaScript閉包的優(yōu)缺點(diǎn)和作用,需要的朋友可以參考下2023-09-09
Bootstrap輸入框組件簡單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap輸入框組件的簡單實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片放大預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Bootstrap下拉菜單實(shí)例代碼的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
LayUi使用switch開關(guān),動(dòng)態(tài)的去控制它是否被啟用的方法
今天小編就為大家分享一篇LayUi使用switch開關(guān),動(dòng)態(tài)的去控制它是否被啟用的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
UniApp使用manifest.json應(yīng)用配置的超詳細(xì)教學(xué)
這篇文章主要給大家介紹了關(guān)于uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置,manifest.json文件是應(yīng)用的配置文件,用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01