騰訊IVWEB團隊：如何搭建高質量、高效率的前端工程體系 頁面結構繼承

騰訊雲技術社區-簡書主頁持續爲你們呈現雲計算技術文章，歡迎你們關注！

---

做者：莫卓穎

序言

相信不少程序員都會經歷兩件事：第一件事情是沒日沒夜加班擼代碼；第二件事情是寫的程序出現bug沒有及時發現而被老闆罵。

不知道你們有木有考慮從工具或者架構的角度出發去解決以上兩個問題，木有考慮的同窗也木有關係，本系列文章將會將會圍繞整個前端的開發流程出發解決這兩個問題，幫助你們提升產品質量以及開發效率。

文章導航圖

對於前端開發來講大體分爲5個階段：開發、聯調、測試、上線、監控維護，本系列文章將會選取每一個階段比較影響效率以及質量的點進行詳細描述。這一章咱們先來從開發階段出發考慮有哪些方面能夠作效率提高？

頁面結構繼承化

信不少同窗都會利用JS或css不完美的繼承成化方案實現功能或樣式的重用，不知道你們是否有考慮過頁面結構或者數據也可利用相似的繼承方式以便達到結構以及數據重用，咱們先來看一個例子以便更好了解HTML繼承的做用，以下圖：

假設A同窗和B同窗分別開發頁面A和B，這兩個頁面的特色是頁頭、頁腳和公共資源都是同樣的，惟一不一樣的就是內容部分（便是body）。B同窗發現這個特色後，聰明的只開發內容部分，其它相同等A同窗開發後把相同的代碼拷貝過來即可。相同部分以下圖紅框，不一樣部分以下圖黃框：

可是A同窗至關靠譜，他的程序常常出bug，致使每一次修改頁頭和頁腳都須要通知B同窗，而後B同窗須要把須要修改部分黏貼覆蓋到代碼中。這種方式很明顯會帶來兩個問題：一、修改困難，同一個修改須要同步屢次, 二、維護困難，須要維護大量相同的代碼。因而B同窗想到了另一種方式，把公共部分分別抽取爲單獨的一個文件，而後用inline的方式引入，方式以下圖所示：

把兩個頁面相同的meta,公共的css,功能的頁頭，公共的頁腳，公共的腳本統一抽取成一個文件，相信不少同窗都是使用相似的架構來設計Html,可是不知道有木有同窗考慮過這種方式的缺點：沒法進行顆粒度化的結構擴展以及修改。舉個例子，好比嵌入的head.html，若是說每一個頁面某個模塊大部份內容同樣，可是有一小部分都不同，咱們是否須要在這個模塊中使用大量的if else,使用這種方式很快會使得代碼沒法維護。所以更加理想的架構方式是讓HTML也具備繼承結構，把通用結構、數據放到base.html中，全部的頁面均繼承此base類（父類），繼承結構以下圖所示：

咱們先來看看定義的通用base.html(父類)的含義

,如上圖，咱們在通用父類中定義通用的屬性(如藍色框所示),相信在一個產品線中，全部頁面一致的部分包括通用的公共樣式（reset.css等）、通用的腳本庫（jquery等）、ico和某些meta,對於不變的無需定義屬性key,等有須要的時候再定義即可。頁面有可能不變的包括meta、title、header、footer等，可提早定義屬性key,見上圖的藍色框，定義好base類後，咱們的頁面即可簡化爲以下圖所示：

對於這些咱們相信到這不少同窗會產生疑問，html不像動態語言，具備inline以及繼承功能，怎麼樣才能達到上述功能，實現原理很簡單，藉助構建工具在編譯的過程當中遍歷全部HTML文檔，找出全部的基類，而後讀取全部的子類，把子類的屬性覆蓋到父類即可，僞代碼以下圖：

總結

頁面結構繼承早已經在動態語言模板smarty,velocity等實現，由於它能夠更加有效的管理模板以及提升開發效率，可是在html不支持相似的方式致使不多同窗使用相似的結構實現致使木有html維護的困難，經過本文學習，可簡單的實現HTML繼承已達到重用的目的。下篇文件將會闡述若是實現模塊化以便提高開發效率。

原文連接：http://ivweb.io/topic/5773c1a9af96c5e776f1f5c0

相關閱讀： 打造前端工程測試體系（1） 前端開發框架簡介:angular和react 一個只有99行代碼的JS流程框架

---

此文已由做者受權騰訊雲技術社區發佈，轉載請註明文章出處，獲取更多雲計算技術乾貨，可請前往騰訊雲技術社區