什么是前端工程化、模塊化、組件化？
前端工程化
工程化是一種思想而不是某種技術(當然為了實現工程化我們會用一些技術)
再用一句通俗的話來概括前端工程化:前端工程化就是用做工程的思維看待和開發自己的項目,而不再是直接擼起袖子一個頁面一個頁面開寫
前端模塊化
前端工程化是一個高層次的思想,而模塊化和組件化是為工程化思想下相對較具體的開發方式,因此可以簡單的認為模塊化和組件化是工程化的表現形式。
模塊化開發，一個模塊就是一個實現特定功能的文件，有了模塊我們就可以更方便的使用別人的代碼，要用什么功能就加載什么模塊。
模塊化開發的4點好處：
1 避免變量污染，命名沖突
2 提高代碼復用率
3 提高維護性
4 依賴關系的管理
那具體什么是模塊化呢？還是舉簡單的例子,我們要寫一個實現A功能的JS代碼,這個功能在項目其他位置也需要用到,那么我們就可以把這個功能看成一個模塊采用一定的方式進行模塊化編寫,既能實現復用還可以分而治之,同理在寫樣式的時候,如果我們需要某種特殊的樣式,會在很多地方應用,那么我們也可以采用一定的方式進行CSS的模塊化,具體說來,JS模塊化方案很多有AMD/CommonJS/UMD/ES6 Module等,CSS模塊化開發大多是在less、sass、stylus等預處理器的import/mixin特性支持下實現的
總體而言,模塊化不難理解,重點是要學習相關的技術並且靈活運用。
前端組件化
組件化也是工程化的表現形式。
①頁面上的每個獨立的、可視/可交互區域視為一個組件;
②每個組件對應一個工程目錄,組件所需的各種資源都在這個目錄下就近維護;
③由於組件具有獨立性,因此組件與組件之間可以 自由組合;
④頁面只不過是組件的容器,負責組合組件形成功能完整的界面;
⑤當不需要某個組件,或者想要替換組件時,可以整個目錄刪除/替換。
組件化將頁面視為一個容器,頁面上各個獨立部分例如:頭部、導航、焦點圖、側邊欄、底部等視為獨立組件,不同的頁面根據內容的需要,去盛放相關組件即可組成完整的頁面。
PS:模塊化和組件化一個最直接的好處就是復用,同時我們也應該有一個理念,模塊化和組件化除了復用之外還有就是分治,我們能夠在不影響其他代碼的情況下按需修改某一獨立的模塊或是組件,因此很多地方我們及時沒有很強烈的復用需要也可以根據分治需求進行模塊化或組件化開發。
模塊化規范
commonJS：commonJS由nodeJS發揚光大，這標志着js模塊化正式登場。
一 定義模塊
根據commonJS規范，一個單獨的文件是一個模塊，每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變量、函數、類，都是私有的，對其他文件不可見，無法被其他模塊讀取，除非為global對象的屬性。
二 模塊輸出
模塊只有一個出口，module.exports對象，我們需要把模塊希望輸出的內容放入該對象。
三 加載模塊
加載模塊用require方法，該方法讀取一個文件並且執行，返回文件內部的module.exports對象。
var name = 'Byron';
function printName(){
console.log(name);
}
function printFullName(firstName){
console.log(firstName + name);
}
module.exports = {
printName: printName,
printFullName: printFullName
然后加載模塊
var nameModule = require('./myModel.js');
nameModule.printName();
AMD：Asynchronous Module Definition 中文名是一步模塊
它是一個在瀏覽器端模塊化開發的規范，由於不是js原生支持，使用AMD規范進行頁面開發需要用到對應的函數庫，也就是大名鼎鼎的RequireJS，實際上AMD是RequireJS在推廣過程中對模塊定義的規范化的產出。
requireJS主要解決兩個問題：
1 多個js文件可能有依賴關系，被依賴的文件需要早於依賴它的文件加載到瀏覽器。
2 js加載的時候瀏覽器會停止頁面渲染，加載文件愈多，頁面失去響應的時間愈長。
//定義模塊
define(['dependency'],function(){
var name = 'Byron';
function printName(){
console.log(name);
}
return {
printName:printName
}
})
//加載模塊
require(['myModule'],function(my){
my.printName();
})
語法：
requireJS定義了一個函數define，它是全局變量，用來定義模塊。
define(id,dependencies,factory)
——id 可選參數，用來定義模塊的標識，如果沒有提供該參數，腳本文件名（去掉拓展名）
——dependencies 是一個當前模塊用來的模塊名稱數組
——factory 工廠方法，模塊初始化要執行的函數或對象，如果為函數，它應該只被執行一次，如果是對象，此對象應該為模塊的輸出值。
在頁面上使用require函數加載模塊；
require([dependencies], function(){});
require()函數接受兩個參數：
——第一個參數是一個數組，表示所依賴的模塊；
——第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊
AMD推崇的是依賴前置，被提前羅列出來並會背提前下載並執行，后來做了改進，可以不用羅列依賴模塊，允許在回調函數中就近使用require引入並下載執行模塊。
CMD：即common module definition
就像AMD有個requireJS,CMD有個瀏覽器實現的sea.js，sj要解決的問題和rj一樣，只不過在模塊定義方式和模塊加載時機上有所不同。
cmd是sea.js在推廣過程中的規范化產出，sea.js是另一種前端模塊化工具，它的出現緩解了requireJS的幾個痛點。
define(id, deps, factory)
因為CMD推崇一個文件一個模塊，所以經常就用文件名作為模塊id；
CMD推崇依賴就近，所以一般不在define的參數中寫依賴，而是在factory中寫。
factory有三個參數： function(require, exports, module){}
一，require require 是 factory 函數的第一個參數，require 是一個方法，接受 模塊標識 作為唯一參數，用來獲取其他模塊提供的接口；
二，exports exports 是一個對象，用來向外提供模塊接口；
三，module module 是一個對象，上面存儲了與當前模塊相關聯的一些屬性和方法。 demo // 定義模塊 myModule.js define(function(require, exports, module) { var $ = require('jquery.js') $('div').addClass('active'); }); // 加載模塊 seajs.use(['myModule.js'], function(my){ });
AMD與CMD區別
總結如下：
最明顯的區別就是在模塊定義時對依賴的處理不同。
AMD推崇依賴前置 在定義模塊的時候就有聲明其依賴的模塊
CMD推崇就近依賴 只有在用到某模塊的時候再去require
AMD和CMD最大的區別是對依賴模塊的執行時機處理不同，注意不是加載的時機或者方式不同。
為什么我們說兩個的區別是依賴模塊執行時機不同，為什么很多人認為ADM是異步的，CMD是同步的（除了名字的原因。。。）
同樣都是異步加載模塊，AMD在加載模塊完成后就會執行改模塊，所有模塊都加載執行完后會進入require的回調函數，執行主邏輯，這樣的效果就是依賴模塊的執行順序和書寫順序不一定一致，看網絡速度，哪個先下載下來，哪個先執行，但是主邏輯一定在所有依賴加載完成后才執行。
CMD加載完某個依賴模塊后並不執行，只是下載而已，在所有依賴模塊加載完成后進入主邏輯，遇到require語句的時候才執行對應的模塊，這樣模塊的執行順序和書寫順序是完全一致的。
這也是很多人說AMD用戶體驗好，因為沒有延遲，依賴模塊提前執行了，CMD性能好，因為只有用戶需要的時候才執行的原因。
- 目錄結構的制定
-- src # 源碼目錄 |__ index.js # 項目入口，注入store, 調用render方法 |__ App.js # 應用入口，頁面整體布局，處理頁面路由 |__ App.less # 全局共用樣式文件 |__ theme.less # 項目主題文件 |__ Components |__ ActiveChart # [組件ActiveChart ] |__ index.js # 組件實現源碼文件 |__ index.less |__ AxisTitle # [組件AxisTitle] |__ index.js # 組件實現源碼文件 |__ index.less |__ routes 定義應用的頁面容器組件 |__ Cockpit # [頁面1] |__ index.js # 頁面具體業務代碼 |__ indes.less |__components 頁面的私有組件 |__ WorkSpace # [頁面2] |__ index.js # 頁面具體業務代碼 |__ indes.less |__models |__ index.js # 導出封裝后的所有store，以及初始化saga |__ request.js # 封裝網絡請求，比如所所有的方法進行攔截（inspector） |__ model1 # [模塊1]store基於具體業務模塊來編寫，方便多頁面調用 |__ actionTypes.js |__ actions.js |__ reducer.js 封裝業務邏輯 |__ model2 # [模塊2] |__services |__model1.js 封裝接口請求 |__model2.js 封裝接口請求 |__common 公用的工具庫 |__chartUtil |__arrayUtil |__constants