国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何優雅地共享Header和Footer

AWang / 921人閱讀

摘要：偶然在微博看到在上的一個共享和的問題，而正好我們也解決了這個問題。雖是如此，但是對于業務已經固定的網站來說，和只會一年更新一兩次。不過，如果發生收購和被收購時，會多更新一兩次。

偶然在微博看到在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):

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/61786.html

相關文章

  • 單頁應用SPA開發最佳實踐

    摘要：最近用做了個單頁應用的項目，頁面大概有個左右。詳見鏈接使用自定義事件的表單輸入組件優雅解決的問題的問題由來已久，在單頁應用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個單頁應用的項目，頁面大概有15個左右。積累了一些開發經驗在此做一些記錄.本文主要從可維護性方面來考慮SPA的開發實踐 全站的顏色定義放在一個less或者scss的文件里，其他組件和頁面import...

    mingzhong 評論0 收藏0

  • 單頁應用SPA開發最佳實踐

    摘要：最近用做了個單頁應用的項目，頁面大概有個左右。詳見鏈接使用自定義事件的表單輸入組件優雅解決的問題的問題由來已久，在單頁應用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個單頁應用的項目，頁面大概有15個左右。積累了一些開發經驗在此做一些記錄.本文主要從可維護性方面來考慮SPA的開發實踐 全站的顏色定義放在一個less或者scss的文件里，其他組件和頁面import...

    不知名網友 評論0 收藏0

  • 單頁應用SPA開發最佳實踐

    摘要：最近用做了個單頁應用的項目，頁面大概有個左右。詳見鏈接使用自定義事件的表單輸入組件優雅解決的問題的問題由來已久，在單頁應用中我們免不了需要處理這樣的。 最近用vue+vue-router做了個單頁應用的項目，頁面大概有15個左右。積累了一些開發經驗在此做一些記錄.本文主要從可維護性方面來考慮SPA的開發實踐 全站的顏色定義放在一個less或者scss的文件里，其他組件和頁面import...

    williamwen1986 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<