大型網站架構的技術細節：前端架構單頁應用的方法及發展趨勢

單頁應用用到的方法

首先明确一點，單頁本身隻是一個概念，其實就是把多個網頁合并成一個網頁。但是很多人會把單頁應用和一些架構或工具（如Vue-CLI、Angular2及後續版本）混為一談，認為隻能通過這些架構才能建立單頁應用。其實單頁應用還是一個網頁，基礎技術還是HTML+CSS+JavaScript，隻是單頁應用往往具備更複雜的互動、更多的網頁元素，是以導緻網頁内部非常複雜，子產品化的問題更加突出。而一些架構或工具（如Vue-CLI、Angular 2及後續版本）提供了完備的子產品化解決方案，是以使用這些架構開發單頁應用是相對容易的。實際上，單頁應用還是一個網頁，隻是比較複雜的網頁，下面介紹單頁應用用到的一些方法。

1.通過互動事件控制網頁元素

單頁應用隻是将多個網頁合并成一個網頁，是以我們還是可以通過一些互動事件來控制網頁元素的。如單擊某個按鈕後顯示某些頁面元素等。

2.通過路由

路由就是通過監聽URL的變化，來控制網頁元素。路由的方式有兩種，hash和history。下面首先介紹hash方式。

hash是URL中hash（#）及後面的部分，如http://localhost/abc/#/home中的#/home便為hash，浏覽器的位址欄隻更新這部分是不會引起頁面重新整理重載的。我們可以通過hashchange事件監聽URL的變化，然後再根據變化的值操作網頁元素。例如，HTML代碼如代碼3.42所示，其中單擊<a></a>标簽後改變了URL中的hash部分，JavaScript代碼如代碼3.43所示，URL中hash部分改變，觸發ChangePage()函數，在函數内可操作網頁元素。

代碼3.42　HTML代碼

<div>

…<a href="#/home">home</a>

…

</div>

代碼3.43　JavaScript代碼

//單擊<a></a>标簽後改變URL的hash部分，觸發ChangePage函數

window.addEventListener('hashchange', ChangePage);

function ChangePage(){

…

location.hash; //通過此變量擷取URL中hash部分，根據此部分的值再操作網頁元素

…

}

而history方式則利用了history.pushState()、history.replaceState()等API去修改URL的路徑部分，而使用這些API修改URL的路徑部分是不發生跳轉的。如将http://localhost/abc改成http://localhost/bcd，正常情況下，在浏覽器位址欄中手動修改是會發生跳轉的，但是通過這些API修改卻不會發生跳轉。但是，這些API不會觸發事件通知，隻會修改URL。是以我們需要自己觸發事件。例子如下所示，HTML代碼如代碼3.44所示，JavaScript代碼如代碼3.45所示，當單擊<a></a>标簽後，會被JavaScript攔截，JavaScript攔截後會執行history.pushState()函數并調用ChangePage()函數修改頁面元素

代碼3.44　HTML代碼

<div>

…

<a href="/home">home</a>

…

</div>

代碼3.45　JavaScript代碼

//監聽路由變化，當單擊浏覽器中的“前進”或“後退”按鈕時會觸發

window.addEventListener('hashchange', ChangePage);

…

//攔截<a></a>标簽單擊事件，調用history.pushState()修改函數URL并調用ChangePage()函數

var linkList = document.querySelectorAll('a[href]')

linkList.forEach(el => el.addEventListener('click', function (e) {

e.preventDefault();

history.pushState(null, '', el.getAttribute('href')); //改變

ChangePage();

}))

…

function ChangePage(){

…

//通過此變量擷取URL中的路徑部分，根據此部分的值再操作網頁元素

location. pathname;

…

}

對比“通過互動事件來改變網頁元素”和“通過路由改變網頁元素”這兩種方式，其實原理上都是監聽事件來改變網頁元素，隻是後者在單擊浏覽器中的“前進”或“後退”按鈕時能做出響應，而前者卻可能會跳轉到别的網頁。

注意：目前Vue.js、Angular、React.js都提供了路由的封裝，使用上會比上述原生方法簡單一些，而且這些架構會讓路由與自身的子產品化方法産生關聯，是以使用架構會讓單頁應用的開發更省力一些。

單頁應用的發展趨勢

對于單頁應用的讨論，網上有很多人都鼓吹把網站做成單頁應用，仿佛不是單頁應用的網站很快就會被淘汰一樣。但是在實際開發時，把整個網站做成一個單頁應用是十分危險的行為。具體問題有下面幾點：

·市面上的子產品化方案目前不夠好，網頁開發是簡單的，引用了子產品化架構後開發反而變困難了。

·缺少好的網頁本地緩存機制，每次使用者打開網站都需要下載下傳一次網頁。

雖然現在針對上面的問題有不同的解決方案，子產品化方面，可以通過學習掌握子產品化架構的使用；緩存方面，浏覽器可以緩存JavaScript、CSS等資源檔案。但是，在你幻想着并實際把整個網站做成一個單頁網站的時候，會發現網站内部代碼淩亂不堪，代碼層次無法辨認的同時，網站加載奇慢無比。這樣的項目筆者曾經曆過（把一個大型網站做成一個單頁應用），當時這個網站打開的時候需要幾分鐘，操作起來也是不流暢的，更糟糕的是，一般的計算機再想打開其他網頁的話會造成浏覽器崩潰。

是以，不要盲目地響應單頁應用的潮流，我們更應該着眼當下，畢竟網站是做給現在的人用的。現今的浏覽器畢竟不是作業系統，沒有完備的本地儲存機制，也沒有健全的記憶體管理和程序線程排程機制。現今浏覽器對于網頁的要求是，網頁必須是輕量的。

綜上，前端架構需要适當地使用單頁應用，權衡哪些網頁需要合并成一個單頁應用，哪些網頁必須要分離。

注意：按目前的技術發展趨勢來講，以後很可能會出現像桌面軟體和App那樣的Web應用，但是目前還是不建議把整個網站做成一個單頁應用。

小結

對于大型網站的前端網頁部分，很多人都誤認為隻要選好一個前端架構就能把前端網頁部分做得很好。但實際情況是，即使采用了最好的前端架構，也不一定能讓前端網頁的品質“過硬”。很多時候我們過于依賴某項現成的技術而忽略了項目的過程其實是量體裁衣的過程，每個項目都會有很多細節需要我們關注和解決。是以，前端架構開發人員應該對項目本身有足夠的認識，清楚前端工程存在哪些問題。而采用現成技術的根本，僅僅是因為它可以解決我們需要解決的一些問題。

本篇介紹了前端架構需要關注的細節與對應的解決方法，包括規整化、适配性和相容性、子產品化及單頁應用。另外，本章盡量還原了問題産生的原因，然後介紹具體的解決方法，希望讀者在了解了這些問題和解決辦法後，對前端架構能有一個清晰且全面的認知。

本文給大家講解的内容是大型網站架構的技術細節：前端架構，單頁應用

1. 下篇文章給大家講解的内容是大型網站架構的技術細節：後端架構，後端的工作原理
2. 覺得文章不錯的朋友可以轉發此文關注小編；
3. 感謝大家的支援