如何優雅地共享Header和Footer

偶然在微博看到在SegmentFault上的一個共享Header和Footer的問題，而正好咱們也解決了這個問題。在這裏，就分享一下咱們的經驗咯。

業務場景

咱們的業務環境和58同城、搜房網這一類站點差很少。咱們維護的站點主要有三個頁面：

• 一個用於搜索的首頁

• 一個搜索結果頁

• 一個用於顯示商品信息的詳細頁。

整體上和Google相似，有一個簡潔的首頁，一個搜索結果頁，以及目標網站頁。在舊有的系統中，這三個不一樣的頁面都是同一個代碼庫中。

而對於咱們的新系統來講，這些都是獨立的項目。由於咱們須要同Google同樣能夠快速打開首頁，首頁就變成了一個部份內容是動態的，可是大部分時間是靜態網站。這一點能夠參考我以前的另一篇文章《編輯-發佈-開發分離》，僅僅只在編輯更新內容的時候，才生成新的首頁（靜態頁面）。在這時，因爲能限制用戶的訪問速度，莫過於CDN了。

同時，咱們還有幾個不一樣的博客及十幾個引流站點，這些都須要使用一樣的Header和Footer。對應於咱們的其餘頁面，咱們使用React來構建，這意味着咱們須要不一樣的模板。

而且當咱們在設計新的系統的時候，咱們有了一個更新網站UI的計劃。這意味着咱們在替換舊有的系統完成以前，咱們須要更新全部網站的UI，WTF！

So，在這時咱們設計了第一個Share Header和Footer的架構。

基於包與模板的共享

接着，因爲Release時間的限制，咱們並無在一開始的時候實現基於腳本的共享方式。所以咱們使用了內部的UI框架，同時這個UI框架將會在咱們的全部站點上使用——咱們可使用一樣的HTML和CSS。

所以在咱們的新站點上，咱們使用基於Bower與GitHub的Release方案——咱們使用Grunt做爲構建工具。每次在本地啓動Server的時候，咱們都會更新依賴。所以，在咱們的站點上，咱們只須要更新bower.json中的版本號便可。

而對於咱們的舊有站點上，由於是一個遺留系統，沒有這麼先進的工具。而且從理論上來講，不該該會太多的時間和精力在上面，因而咱們選擇了手動複製的方案。

對於博客和其餘站點，一部分使用手動複製，一部分使用iFrame加載。所以在Release新版本的時候，咱們會上傳新的Header和Footer到AWS S3上。

對於iFrame的站點來講，他們就實現了動態更新。對於其餘站點來講，就須要手動更新。雖是如此，可是對於業務已經固定的網站來講，Header和Footer只會一年更新一兩次。不過，若是發生收購和被收購時，會多更新一兩次。

那麼，對於那些使用的不是基於HTML，而是使用模板的站點怎麼辦？

腳本生成的共享方式

最明顯的一個問題就是使用React的站點。由於大部分的模板引擎都是能夠支持class=""，而React你只能用className=""。因此要麼，咱們將HTML寫在基本的模板文件裏，如base.html；要麼咱們將class替換成className。架構變換成以下所示的結構：

因此，在這時理想的方式就是經過某種類型的模板來生成對應的模板。即咱們只須要有一個JSX的模板文件，而後替換其中的相應內容便可。

歡迎關注個人微信公衆號(或搜索phodal):