資訊專欄INFORMATION COLUMN
摘要：偶然在微博看到在上的一個(gè)共享和的問(wèn)題，而正好我們也解決了這個(gè)問(wèn)題。雖是如此，但是對(duì)于業(yè)務(wù)已經(jīng)固定的網(wǎng)站來(lái)說(shuō)，和只會(huì)一年更新一兩次。不過(guò)，如果發(fā)生收購(gòu)和被收購(gòu)時(shí)，會(huì)多更新一兩次。
偶然在微博看到在SegmentFault上的一個(gè)共享Header和Footer的問(wèn)題，而正好我們也解決了這個(gè)問(wèn)題。在這里，就分享一下我們的經(jīng)驗(yàn)咯。
業(yè)務(wù)場(chǎng)景我們的業(yè)務(wù)環(huán)境和58同城、搜房網(wǎng)這一類站點(diǎn)差不多。我們維護(hù)的站點(diǎn)主要有三個(gè)頁(yè)面：
一個(gè)用于搜索的首頁(yè)
一個(gè)搜索結(jié)果頁(yè)
一個(gè)用于顯示商品信息的詳細(xì)頁(yè)。
總體上和Google類似，有一個(gè)簡(jiǎn)潔的首頁(yè)，一個(gè)搜索結(jié)果頁(yè)，以及目標(biāo)網(wǎng)站頁(yè)。在舊有的系統(tǒng)中，這三個(gè)不同的頁(yè)面都是同一個(gè)代碼庫(kù)中。
而對(duì)于我們的新系統(tǒng)來(lái)說(shuō)，這些都是獨(dú)立的項(xiàng)目。因?yàn)槲覀冃枰珿oogle一樣可以快速打開(kāi)首頁(yè)，首頁(yè)就變成了一個(gè)部分內(nèi)容是動(dòng)態(tài)的，但是大部分時(shí)間是靜態(tài)網(wǎng)站。這一點(diǎn)可以參考我之前的另外一篇文章《編輯-發(fā)布-開(kāi)發(fā)分離》，僅僅只在編輯更新內(nèi)容的時(shí)候，才生成新的首頁(yè)（靜態(tài)頁(yè)面）。在這時(shí)，由于能限制用戶的訪問(wèn)速度，莫過(guò)于CDN了。
同時(shí)，我們還有幾個(gè)不同的博客及十幾個(gè)引流站點(diǎn)，這些都需要使用同樣的Header和Footer。對(duì)應(yīng)于我們的其他頁(yè)面，我們使用React來(lái)構(gòu)建，這意味著我們需要不同的模板。
并且當(dāng)我們?cè)谠O(shè)計(jì)新的系統(tǒng)的時(shí)候，我們有了一個(gè)更新網(wǎng)站UI的計(jì)劃。這意味著我們?cè)谔鎿Q舊有的系統(tǒng)完成之前，我們需要更新所有網(wǎng)站的UI，WTF！
So，在這時(shí)我們?cè)O(shè)計(jì)了第一個(gè)Share Header和Footer的架構(gòu)。
基于包與模板的共享接著，由于Release時(shí)間的限制，我們并沒(méi)有在一開(kāi)始的時(shí)候?qū)崿F(xiàn)基于腳本的共享方式。因此我們使用了內(nèi)部的UI框架，同時(shí)這個(gè)UI框架將會(huì)在我們的所有站點(diǎn)上使用——我們可以使用同樣的HTML和CSS。
因此在我們的新站點(diǎn)上，我們使用基于Bower與GitHub的Release方案——我們使用Grunt作為構(gòu)建工具。每次在本地啟動(dòng)Server的時(shí)候，我們都會(huì)更新依賴。因此，在我們的站點(diǎn)上，我們只需要更新bower.json中的版本號(hào)即可。
而對(duì)于我們的舊有站點(diǎn)上，因?yàn)槭且粋€(gè)遺留系統(tǒng)，沒(méi)有這么先進(jìn)的工具。并且從理論上來(lái)說(shuō)，不應(yīng)該會(huì)太多的時(shí)間和精力在上面，于是我們選擇了手動(dòng)復(fù)制的方案。
對(duì)于博客和其他站點(diǎn)，一部分使用手動(dòng)復(fù)制，一部分使用iFrame加載。因此在Release新版本的時(shí)候，我們會(huì)上傳新的Header和Footer到AWS S3上。
對(duì)于iFrame的站點(diǎn)來(lái)說(shuō)，他們就實(shí)現(xiàn)了動(dòng)態(tài)更新。對(duì)于其他站點(diǎn)來(lái)說(shuō)，就需要手動(dòng)更新。雖是如此，但是對(duì)于業(yè)務(wù)已經(jīng)固定的網(wǎng)站來(lái)說(shuō)，Header和Footer只會(huì)一年更新一兩次。不過(guò)，如果發(fā)生收購(gòu)和被收購(gòu)時(shí)，會(huì)多更新一兩次。
那么，對(duì)于那些使用的不是基于HTML，而是使用模板的站點(diǎn)怎么辦？
腳本生成的共享方式最明顯的一個(gè)問(wèn)題就是使用React的站點(diǎn)。因?yàn)榇蟛糠值哪０逡娑际强梢灾С謈lass=""，而React你只能用className=""。所以要么，我們將HTML寫在基本的模板文件里，如base.html；要么我們將class替換成className。架構(gòu)變換成如下所示的結(jié)構(gòu)：
所以，在這時(shí)理想的方式就是通過(guò)某種類型的模板來(lái)生成對(duì)應(yīng)的模板。即我們只需要有一個(gè)JSX的模板文件，然后替換其中的相應(yīng)內(nèi)容即可。
歡迎關(guān)注我的微信公眾號(hào)(或搜索phodal):
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/61786.html
摘要：最近用做了個(gè)單頁(yè)應(yīng)用的項(xiàng)目，頁(yè)面大概有個(gè)左右。詳見(jiàn)鏈接使用自定義事件的表單輸入組件優(yōu)雅解決的問(wèn)題的問(wèn)題由來(lái)已久，在單頁(yè)應(yīng)用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個(gè)單頁(yè)應(yīng)用的項(xiàng)目，頁(yè)面大概有15個(gè)左右。積累了一些開(kāi)發(fā)經(jīng)驗(yàn)在此做一些記錄.本文主要從可維護(hù)性方面來(lái)考慮SPA的開(kāi)發(fā)實(shí)踐 全站的顏色定義放在一個(gè)less或者scss的文件里，其他組件和頁(yè)面import...
摘要：最近用做了個(gè)單頁(yè)應(yīng)用的項(xiàng)目，頁(yè)面大概有個(gè)左右。詳見(jiàn)鏈接使用自定義事件的表單輸入組件優(yōu)雅解決的問(wèn)題的問(wèn)題由來(lái)已久，在單頁(yè)應(yīng)用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個(gè)單頁(yè)應(yīng)用的項(xiàng)目，頁(yè)面大概有15個(gè)左右。積累了一些開(kāi)發(fā)經(jīng)驗(yàn)在此做一些記錄.本文主要從可維護(hù)性方面來(lái)考慮SPA的開(kāi)發(fā)實(shí)踐 全站的顏色定義放在一個(gè)less或者scss的文件里，其他組件和頁(yè)面import...
摘要：最近用做了個(gè)單頁(yè)應(yīng)用的項(xiàng)目，頁(yè)面大概有個(gè)左右。詳見(jiàn)鏈接使用自定義事件的表單輸入組件優(yōu)雅解決的問(wèn)題的問(wèn)題由來(lái)已久，在單頁(yè)應(yīng)用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個(gè)單頁(yè)應(yīng)用的項(xiàng)目，頁(yè)面大概有15個(gè)左右。積累了一些開(kāi)發(fā)經(jīng)驗(yàn)在此做一些記錄.本文主要從可維護(hù)性方面來(lái)考慮SPA的開(kāi)發(fā)實(shí)踐 全站的顏色定義放在一個(gè)less或者scss的文件里，其他組件和頁(yè)面import...
閱讀 2921·2021-10-09 09:44
閱讀 3618·2019-08-30 15:54
閱讀 2225·2019-08-30 14:16
閱讀 2853·2019-08-30 13:09
閱讀 883·2019-08-30 13:08
閱讀 1360·2019-08-29 16:29
閱讀 1780·2019-08-26 13:57
閱讀 1987·2019-08-26 13:53
