前端講究 工程化，模塊化，組件化，層層遞進。

一、工程化

工程化是整個工程的結構、樣式和動作分離，工程化是一種思想而不是某種技術（當然為了實現工程化我們會用一些技術）。各種規范、技術選型、項目構建優化，JS/CSS模塊機、UI組件化等。
前端工程化就是用做工程的思維看待和開發自己的項目，而不再是直接擼起袖子一個頁面一個頁面開寫。

1. 在配置初始項目文件結構和基本文件依靠命令行（工具）自動生成， 代碼構建: webpack，腳手架：*cli，用于創建項目目錄結構。
2. 確定代碼規范，縮進，換行，以及各種預編譯工具less，coffee，保證輸出代碼的標準一致
3. 對JS文件是否規范化，進行單元測試。不用手動復制到jshint上去檢測，現在配置grunt監聽文件變動自動檢驗顯示檢驗結果還可以通過配置構建工具自動刷新瀏覽器實現文件實時變動監聽
4. 配置一下 grunt，gulp可以做自動任務，實時編譯，并且監測文件改變而做出響應
5. 用工具自動打包上傳到服務器
   
   

二、模塊化

頁面由多個模塊作用形成，互相不干擾，用的時候再加載，可引入各種其他模塊（js，css），擴展性高。模塊化是將之前一籠統的頁面分成由若干個模塊作用形成的頁面，這個過程（思想）叫模塊化。

1. 定義模塊
   根據CommonJS¹規范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變量，無法被其他模塊讀取，除非定義為global對象的屬性。
2. 模塊輸出
   模塊只有一個出口，module.exports對象，我們需要把模塊希望輸出的內容放入該對象。
3. 加載模塊
   加載模塊使用require方法，該方法讀取一個文件并執行，返回文件內部的module.exports對象。
   
   

三、組件化

組件化將頁面視為一個容器，頁面上各個獨立部分例如：頭部、導航、焦點圖、側邊欄、底部等視為獨立組件，不同的頁面根據內容的需要，去盛放相關組件即可組成完整的頁面。
將之前一籠統的頁面改善為一個個單獨的組件形成的頁面，過程（思想）叫組件化。

規則：

• 頁面上的每個獨立的、可視/可交互區域視為一個組件；
• 每個組件對應一個工程目錄，組件所需的各種資源都在這個目錄下就近維護；
  由于組件具有獨立性，因此組件與組件之間可以 自由組合；
• 頁面只不過是組件的容器，負責組合組件形成功能完整的界面；
• 當不需要某個組件，或者想要替換組件時，可以整個目錄刪除/替換。

保證組件的封閉性。因為JS方面是模塊化的。組件的功能界限問題。也就是什么是應該在組件內部實現，什么是應該由組件的調用者來實現的。對組件功能界限的定義是只負責UI相關的功能，所有的業務邏輯都是從調用者傳遞過的。也即是寫在param.js。所以param.js文件是非常重要的一個文件，里面基本包涵了這個頁面所有業務處理邏輯。很顯然，隨著頁面業務邏輯變的復雜，js文件將會變得越來越大。沒關系，把不同的組件參數分拆到不同的js文件里面去實現，然后建個專門的文件夾把它們組織起來。

四、規范化

由具體的前端框架而定目錄結構，目錄命名有約定俗成的意義。如：
1、src文件夾存放的是所有的的源代碼和其他靜態資源（比如圖片，iconfont)。
2、dist文件夾存放的是所有編譯后的代碼。
3、build文件夾存放的是所有工程化所需要的代碼。
4、document文件夾當然存放的文檔。

PS：模塊化和組件化一個最直接的好處就是復用，同時我們也應該有一個理念，模塊化和組件化除了復用之外還有就是分治，我們能夠在不影響其他代碼的情況下按需修改某一獨立的模塊或是組件，因此很多地方我們及時沒有很強烈的復用需要也可以根據分治需求進行模塊化或組件化開發。

---

1. 因為在網頁端沒有模塊化編程只是頁面JavaScript邏輯復雜，但也可以工作下去，在服務器端卻一定要有模塊，所以雖然JavaScript在web端發展這么多年，第一個流行的模塊化規范卻由服務器端的JavaScript應用帶來，CommonJS規范是由NodeJS發揚光大，這標志著JavaScript模塊化編程正式登上舞臺。 ??