介紹
今天遇到一個(gè)問(wèn)題,這個(gè)問(wèn)題也是我以前遇到的問(wèn)題,以前的方式,也是大多數(shù)人使用的方式。大家可以看看我的文章。
從前的方式——我估計(jì)也是大多數(shù)人使用的方式
比如以下的代碼——摘自新浪首頁(yè)的一段js代碼,這種方式也是大多數(shù)人使用的方式。
上面的代碼,你看完有什么反應(yīng)?你也許會(huì)把+=這種形式改成數(shù)組的push形式,有人說(shuō)push比這種字符鏈接要快,但是也快不了多少。
如果這種嵌入的html代碼很多,你也要這樣處理嗎?如果修改(添加或者刪除)某個(gè)html,那么你就要不斷的翻代碼,找對(duì)應(yīng)的標(biāo)簽,然后在找結(jié)束標(biāo)簽,你不覺(jué)得麻煩嗎?也許有人會(huì)這樣寫(xiě)(這個(gè)是我早期寫(xiě)的,也是我最慣于使用的方式)。
上面的代碼,我維護(hù)起來(lái)也是非常費(fèi)勁的,很多時(shí)候如果ui那邊添加了個(gè)標(biāo)簽,或者修改了下html結(jié)構(gòu),那我就頭疼了。
頁(yè)面模板化——全新的方式
這是我最近看了facebook的js代碼,偶然間發(fā)現(xiàn)以下的方式看起來(lái)不錯(cuò),希望與大家分享。
看我的index.html代碼
看我的js代碼
維護(hù)上面的html代碼我們是很容易的,下次無(wú)論html代碼結(jié)構(gòu)有什么變動(dòng),改起來(lái)都很方便。
總結(jié)
上面的代碼有很多問(wèn)題,大家不要見(jiàn)怪,這個(gè)只是我的簡(jiǎn)易版。
當(dāng)前的模板只支持簡(jiǎn)單的變量替換,有很多功能未開(kāi)發(fā)出來(lái),比如if標(biāo)簽,for標(biāo)簽,如果大家有興趣,可以試著做一下,如果做的比較成功,告知一下。如果能做個(gè)類似smarty的開(kāi)源框架,呵呵,咱們也可以為開(kāi)源事業(yè)做點(diǎn)貢獻(xiàn)不是。
文章來(lái)源:川山甲的博客