前端架構需要解決的問題

前端網頁就是這么簡單，除去圖片、視頻等資源外只有三部分，即標記網頁元素的html、設置元素樣式的css和負責交互處理的JAVAScript。

在軟件開發上，普遍認為架構設計能把復雜的工程代碼分解成相互耦合度較低的模塊，規劃整個工程。簡單地說，在大多數人的認知里，架構設計是為了分離代碼而存在的。更直接地說，架構設計就是為開發人員分工而存在的。而前端網頁是天然按照單個網頁解耦的（即網頁與網頁之間是獨立的），在大多數的前端工程中，一個網頁的復雜度剛好適合一個人的工作量。基于這樣的認知，前端網頁確實是不需要架構設計的，因為絕大多數的前端工程不存在分工的問題，每個前端工程師分幾個頁面就完事了。

而事實上，前端網頁的復雜度已經逐漸超出控制。在一些稍具規模的網站上，需要由幾十甚至上百個頁面組成；在一些復雜的網頁中（如在線畫圖，在線剪輯視頻），也需要由幾十甚至上百個小模塊組成。在大型網站的前端工程里，如果沒有架構設計，任由開發人員自由發揮的話，一定會出現代碼高度混亂和高度冗余的情況。這種情況是危險的，很大程度上會造成項目進度失控或運維成本過高等狀況。

再者，軟件架構并不是僅僅為了分工而存在的。架構是軟件整體結構的抽象描述，是一個軟件的基本思想，而分工只是結構抽象帶來的附加好處。

而基于這樣的認知，所有軟件（包括前端）都需要架構設計。但是如果網站只有幾個頁面，并且沒有任何擴展需求，此時還要大費周章地去做架構設計，就相當于牛刀宰雞了。

因此，在具有一定規模的前端工程中，是需要架構設計的。而前端架構，一般需要解決4個問題來提高前端網頁的質量和性能，即規整化、適配性和兼容性、模塊化、單頁應用。

規整化概述

由于前端頁面的易學性，導致很多前端開發工作都是由其他軟件工程師兼職的。即使一些專職的前端工程師，有相當一部分也沒有系統地學習過前端開發，所以前端代碼中會出現各種各樣的編寫習慣，很多代碼細節也過于粗糙，導致源源不斷地出現各種小問題。

由于前端的代碼在網上很容易找到，因此一些前端工程師會東找個例子，西找個例子，然后簡單地把代碼放到一起，頂多再模仿著寫幾行代碼或者在例子中修改幾個變量，這樣就算完成一個頁面了。像這樣在很多代碼細節還不清楚的情況下，直接把代碼堆到一起，看起來是很快就完成了一個頁面，但是一旦出現問題，便需要花很長的時間去“嘗試”出問題的位置，大部分情況下這種行為是得不償失的。

由于網上有很多網頁模板，看起來還很不錯，因此一些工程師便使用這些模板稍稍改動就算完成頁面了，導致整個網站是“色彩斑斕”“五彩繽紛”。

但是到網站發布前UI風格整頓的時候，網頁修改的工作量和重新做一次沒什么兩樣。

由于JavaScript語法的開放性，夸張地說，100個人用JavaScript就會有100種編程語言。越大的前端工程，越多的前端工程師，前端工程也會越混亂。

以上，浮躁地忽略學習過程、隨意地抄襲代碼、偷懶地使用網頁模板、一人一個樣的語法使用習慣和低估了前端工程的復雜性，這些都造成了前端結構極度混亂和代碼高度冗余的局面。雖然看上去功能是完成了，但是一旦發生Bug修正、需求變更、UI改版、交互方式變更等情況，都會出現工數和風險完全不可控的局面。

很多人可能會認為，前端是天然按照單個網頁解耦的，混亂是可以控制在一定范圍內的。但是，前端工程除了網頁標簽以外，往往還有CSS樣式文件和JavaScript腳本文件，這些文件是可以無限制地被多個網頁引用的。混亂的前端結構如圖3.16所示。

由此可知，在混亂的前端工程內部，其實并不是天然按照單個網頁解耦的。所以混亂其實不能天然被控制在一定范圍內。

圖3.16 混亂的前端工程結構

更可怕的是，這種不好的前端編程行為會遵循破窗效應，會感染到其他的前端工程師，甚至整個開發團隊。因此，前端架構第一個需要做的便是規整化，制定一些規則，以達到約束整個前端開發過程的目的。

適配性和兼容性概述

首先是適配性。現在的顯示設備多種多樣，前端網頁的顯示也不僅僅局限在PC瀏覽器當中。更多地，手機瀏覽器、某些嵌入網頁的App、平板電腦、電視，甚至是巨屏，都可能需要顯示前端網頁。這些林林總總的顯示設備，分辨率、長寬比各式各樣，交互方式也不盡相同，而前端頁面對這些設備的適應性，就是適配性。當然，網頁不需要適配所有的顯示設備，很多情況下，PC的網頁和手機的網頁都會分開實現。但是即使是只需要在PC瀏覽器顯示的網頁，也需要有一定的適配性，因為PC顯示器的分辨率不盡相同，瀏覽器的窗口也可以隨意縮放。

因此，前端架構應該考慮網頁的適配性。適配性做不好的網頁，很容易產生一些頁面錯位等用戶體驗不好的狀況，這種山寨的感覺會影響用戶對網站的第一印象。網頁需要適配的多種設備如圖3.17所示，但是在一般情況下，網頁不需要適配所有的設備，只需要適配選定的設備種類即可（如PC版網頁、移動端版網頁）。而對大型網站而言，大屏展示端不是必需的，但是PC端和移動端的適配需要充分對應。

圖3.17 網頁需要適配的多種設備

其次是兼容性。除了多種多樣的顯示設備以外，瀏覽器也是各式各樣的，這些瀏覽器即使都支持HTML 5，但有些CSS樣式配置和一部分瀏覽器API也是不一樣的，而前端頁面對這些瀏覽器的適應性，就是兼容性。目前比較流行的瀏覽器有Chrome、Firefox和Safari，當然還有很多其他瀏覽器，它們的內核大多數和Chrome是一樣的，所以兼容了Chrome、Firefox和Safari就相當于兼容了所有現代瀏覽器。而兼容性最大的挑戰莫過于IE了，IE 9以下版本不支持HTML 5，IE 9、IE 10、IE 11雖然支持HTML 5，但是都不太友好。當然了，也不是要讓網頁兼容所有瀏覽器，畢竟兼容瀏覽器帶來的工作量和測試量也是不小的。

因此，前端架構也應該考慮瀏覽器的兼容性。網頁需要適配的多種瀏覽器如圖3.18所示，這里忽略了一些用戶量不大或者沒有獨立瀏覽器內核的瀏覽器，如360瀏覽器、搜狗瀏覽器、百度瀏覽器、小米瀏覽器、華為瀏覽器等。

市場上瀏覽器很多，每個瀏覽器的不同版本之間也有區別，但一般情況下，網頁不需要兼容所有的瀏覽器，現在很多網站都放棄IE 6～IE 10了。對于大型網站而言，由于用戶使用的瀏覽器不集中，所以還是要盡量兼容足夠多的瀏覽器。

圖3.18 網頁需要適配的多種瀏覽器

模塊化概述

在前端的開發過程中，很多時候我們是在做重復的事情。例如，A頁面需要一個播放器，B頁面也需要一個播放器；C頁面有一個視頻列表，D頁面也有一個視頻列表，如圖3.19所示。諸如此類，頁面與頁面之間，會有很多類似的，甚至相同的部分。

圖3.19 網頁與網頁間相似的部分

面對這些類似的部分，比較原始的方法是直接復制代碼。這種方法很直接，但是復制的代碼需要重新調整和重新調試。如果復制的是其他人編寫的代碼，調整時間會更長。如果需要調整所有這些復制代碼的話，這個過程將會是相當無趣的。

現在，前端部分流行組件化，出現了如Bootstrap等前端組件工具箱，可以很簡單地畫出列表和導航欄，以及一系列通用的頁面組件。這些組件工具箱確實能幫助我們在UI描畫時省點力氣，但是，組件工具箱一般只是對HTML默認標簽進行了美化或者擴充，其無法提供現成的業務模塊（例如圖3.19中的視頻資源列表）。

其實，我們希望的是把這些通用的業務模塊做成獨立的部分，各個網頁通過簡單地調用即可把這些業務模塊拼接進來，就像搭建積木一樣，如圖3.20所示。這個就是模塊化，相同部分只有一份代碼。

圖3.20 網頁與網頁間相似的部分

單頁應用概述

傳統的網站會不斷地跳轉頁面，例如單擊搜索后會跳轉頁面，單擊翻頁后也會跳轉頁面。一旦出現跳轉頁面，用戶就需要等待重新加載頁面后才能繼續操作，如果在網絡不好的情況下，這種等待的體驗是糟糕的。為了改進這種糟糕的體驗，單頁應用（Single Page Web Application，SPA）的概念開始流行。單頁應用是指在瀏覽器中運行的應用，其在使用期間不會重新加載頁面。

簡單地說，單頁應用是把多個頁面合并成一個頁面。傳統網站與單頁應用的對比如圖3.21所示。

更簡單地說，單頁應用是只有一個前端頁面的網站，瀏覽器一開始會加載必要的HTML、CSS和JavaScript文件，之后所有的操作都會在這個頁面上完成。以翻頁操作為例，JavaScript腳本會向服務器請求翻頁所需要的數據，數據返回后，JavaScript腳本會進行DOM操作，修改頁面顯示的內容，如圖3.22所示。因此單頁應用只是刷新列表而不是重新跳轉頁面。

圖3.21 傳統網站與單頁應用的對比

圖3.22 單頁應用的翻頁操作

單頁應用能避免頁面跳轉的發生，提高用戶體驗，但是單頁應用也有不好的地方。由于單頁應用是把多個網頁合并成單個網頁，所以這個網頁的內容是相對龐大的，JavaScript腳本的內容也是復雜的，導致了單頁應用加載網頁資源的時間會比較長。如果把整個具有一定規模的網站做成一個單頁應用（想達到App或者桌面軟件的效果）的話，那將會是一個很不理智的行為，因為每次打開頁面都可能要花上五六分鐘，配置差一點的機器甚至會造成瀏覽器崩潰。

因此，前端架構不要極端地把一個網站做成單頁應用，而是需要適當地使用單頁應用，權衡哪些網頁需要合并成一個單頁應用，哪些網頁則必須要分離，如圖3.23所示。