單頁應用用到的方法首先明確一點，單頁本身隻是一個概念，其實就是把多個網頁合並成一個網頁。但是很多人會把單頁應用和一些框架或工具（如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應用，但是目前還是不建議把整個網站做成一個單頁應用。小結對於大型網站的前端網頁部分，很多人都誤認為隻要選好一個前端框架就能把前端網頁部分做得很好。但實際情況是，即使采用瞭最好的前端框架，也不一定能讓前端網頁的質量“過硬”。很多時候我們過於依賴某項現成的技術而忽略瞭項目的過程其實是量體裁衣的過程，每個項目都會有很多細節需要我們關註和解決。因此，前端架構開發人員應該對項目本身有足夠的認識，清楚前端工程存在哪些問題。而采用現成技術的根本，僅僅是因為它可以解決我們需要解決的一些問題。本篇介紹瞭前端架構需要關註的細節與對應的解決方法，包括規整化、適配性和兼容性、模塊化及單頁應用。另外，本章盡量還原瞭問題產生的原因，然後介紹具體的解決方法，希望讀者在瞭解瞭這些問題和解決辦法後，對前端架構能有一個清晰且全面的認知。本文給大傢講解的內容是大型網站架構的技術細節：前端架構，單頁應用下篇文章給大傢講解的內容是大型網站架構的技術細節：後端架構，後端的工作原理覺得文章不錯的朋友可以轉發此文關註小編；感謝大傢的支持