開(kāi)篇現(xiàn)在Web富應(yīng)用越來(lái)越多, 越來(lái)越多網(wǎng)站朝單頁(yè)面發(fā)展, 所有功能模塊都在一個(gè)頁(yè)面中創(chuàng)建. 作為一個(gè)合格的前端, 所負(fù)責(zé)的模塊一定是邏輯跟UI分離的, 通常的做法就是頁(yè)面代碼編寫(xiě)成模板, 然后往模板填充數(shù)據(jù)并輸出到頁(yè)面上. 關(guān)于前端模板的介紹和使用我就不說(shuō)了, 不了解的可以先看看這篇文章(http://www./archives/4564), 這里討論下使用模板引擎引入的另外一個(gè)問(wèn)題(也不是Bug啦~) — 頁(yè)面模板代碼放哪? 頁(yè)面模板代碼放哪呼~(yú)~總算到正題了(- -||). 說(shuō)回來(lái), 頁(yè)面模板的代碼到底要放哪呢?
話(huà)說(shuō)很久很久以前, 我也是把模板寫(xiě)在js里面的, 然后需要修改的時(shí)候就崩潰了~ 在一堆字符串里面找到想要改動(dòng)的地方就像是在一坨黃色的屎里面找個(gè)金戒指(惡…). 過(guò)了不久學(xué)乖了, 把模板像寫(xiě)html那樣換行和縮進(jìn), 就跟下面一樣.
然后代價(jià)是 — 要給會(huì)混淆的引號(hào)轉(zhuǎn)義以及每行末尾都要一個(gè)反斜杠! oh~天啊, 我可是程序員啊, 為什么要做這種重復(fù)無(wú)趣的工作! 于是很久很久以前的以后, 我又學(xué)乖了一次, 咱這次把模板寫(xiě)在html頁(yè)面里面, 放到一個(gè)特殊的script標(biāo)簽內(nèi), 用到的時(shí)候根據(jù)id找到這個(gè)script, 讀取innerHTML拿來(lái)用. 哇, 簡(jiǎn)直是perfect!~~吼吼~~
模板的飛來(lái)橫禍從此, 模板和頁(yè)面過(guò)著幸?？鞓?lè)的生活…然后直到有一天… A: 為什么打開(kāi)頁(yè)面的那個(gè)菊花轉(zhuǎn)那么久! 我:… 然后就如五雷轟頂般的醒悟, 由于是單頁(yè)面, 模板都堆積到頁(yè)面, 大大增加了首頁(yè)的大小, 沒(méi)什么邏輯的頁(yè)面竟然有37KB(gzip前). 更因?yàn)閖s/css/images等都放到了多臺(tái)cdn, 讀取速度快而且可以設(shè)置和利用瀏覽器cache. 而html頁(yè)面則只放在一臺(tái)web server, 而且因?yàn)榘姹镜容^快, 不能給html設(shè)置緩存策略(那樣會(huì)導(dǎo)致用戶(hù)那里不能及時(shí)更新). 王子和公主就這樣被硬生生拆散了~T_T 模板該放哪里如果現(xiàn)在要我把模板都改成js變量, 放到j(luò)s文件里, 我一定死給他看, 哼~ 然而, 只是, 可是, 但是, 加載速度還是得優(yōu)化啊. 既然開(kāi)發(fā)的時(shí)候要方便, 發(fā)布之后要速度, 那發(fā)布前用腳本把模板抽取到j(luò)s文件中不就結(jié)了? 頓時(shí)感覺(jué)柳暗花明又一村呀~~呼啦啦啦~~ 抽取的步驟為:
至于抽取用什么語(yǔ)言寫(xiě)都沒(méi)所謂啦, 僅僅是正則和文件操作, 推薦用nodejs, 真是太方便了. 不過(guò)大部分機(jī)器都木有裝, 需要自己裝. 有些環(huán)境不能隨便裝新程序, 那也可以用python寫(xiě)個(gè), 花半個(gè)鐘現(xiàn)學(xué)現(xiàn)用就夠了. 附上個(gè)NodeJs版的.
收尾經(jīng)過(guò)這么一搞, 把模板代碼抽出來(lái)之后, 首頁(yè)的大小立馬從37KB降到1.7KB. 雖然是個(gè)小技巧, 也足以成大謀. 那感覺(jué), 可是跟漲薪一樣爽哇~~ |
|
|
來(lái)自： 看見(jiàn)就非常 > 《tip》
