前端頁面構成：
結構（HTML）、樣式（CSS）、邏輯（JavaScript）
HTML：實際上並不能完成靜態頁面的建設，原因是現代的網站，HTML和HTML標籤樣式是分離的。
CSS：CSS對HTML結構進行佈局並對結構內部的元素進行樣式化，這樣就形成了用戶可見的靜態頁面。
JavaScript：的工作分為三個部分：
1、對於JS來說，HTML是一個文檔，JS的第一要務是操作文檔，使用
戶可以對頁面進行操作，構建交互功能，比如選項卡或輪播圖的切
換，頁面某個元素的特效、彈窗提示等等。
2、向後端請求動態數據以及數據整理與存儲。比如AJAX數據請求。
3、數據可視化，將後端請求會的數據與HTML模板結合，動態插入到
頁面中。
總結： JavaScript要做的事情就是對動態數據的獲取與管理，頁面動
態交互與頁面的動態渲染。
那麼企業的前端頁面架構又設計那些要點呢？
1、模塊化
對於編程來說，最基本的要素是『順序、判斷與循環』，所有的程序都是由這三個要素構成，由於程序的複雜性和多樣性，往往程序的結構會變得越來越複雜，這時候，模塊化的概念就誕生了，模塊化允許我們把一個複雜的程序，拆分成多個程序體，將複雜的程序拆分成簡單的或體積小的分支程序，或者將多段代碼完成一個功能的程序拆分成多個小功能的程序，那麼這些分支程序或小功能程序就是一個一個的模塊，他們可以被任意組合和複用。這樣既能解決程序間的耦合問題，也能讓模塊的功能得到極大的發揮，當然也能讓程序更易維護、更新與版本迭代。
2、插件化
這個比較好理解，插件的目的就是將一個功能封裝起來，用的時候直接調用就能實現功能，無需再次編寫業務邏輯，比如輪播圖插件，引用插件後，進行調用則可實現輪播功能。當然這個過程也不是那麼簡單，由於插件必須要具備複用性，所以必須使用面向對象的寫法，那麼要用插件就需要實例化插件進行配置和調用。
3、組件化
組件化，比模塊化的概念更加宏觀，模塊化是拆分一個程序成多個程序，而組件化是把一個項目橫向切成多個HTML/CSS/JS的組合，一個組合就是一個組件，在原本的結構、樣式、邏輯分離的基礎上，橫向的又切了一刀，讓多個結構、樣式、邏輯塊組合成一個完整的項目，這就是通俗的組件化設計。
當下企業的前端架構，必須以模塊化為基礎，進行組件化開發，多個開發者開發同一個項目，以組件為劃分完成組件的結構樣式與邏輯，邏輯內的程序拆分成多個模塊，為組件邏輯層所用。當然要完成這樣的架構必須依賴強大的前端工程化工具，比如webpack、gulp、grunt等等，依賴這些工程化工具可以完成打包工作，打包的過程就是組件與模塊組合的過程。開發者不必關注打包後的項目，而僅僅維護與更新打包前的項目就可以了
