前端模塊化

解釋

前端模塊化是將一個複雜的系統分解出多個模塊，每一個模塊職責單1、相互獨立、高度解耦並可替換。通常前端模塊化指的是Javascript的模塊。最多見的是Nodejs的NPM包。

模塊化開發的四點好處：

• 避免變量污染，命名衝突
• 提升代碼複用率
• 提升了可維護性
• 方便依賴關係管理

模塊化也是組件化的基石，是構成如今色彩斑斕的前端世界的前提條件。

常見的模塊化規範

Javascript在早期的設計中就沒有模塊、包、類的概念，開發者須要模擬出相似的功能，來隔離、組織複雜的Javascript代碼，咱們稱爲模塊化。有了模塊化以後的代碼，咱們考慮更多的代碼使用和維護成本問題，而後就有不少模塊化的規範。常見的模塊化規範有CommonJs、AMD、CMD、ES6 Module等規範。

CommonJs

CommonJs是服務端模塊化規範，Nodejs採用了這個規範並把它發揚光大。

//example.js
var n = 1;
function sayHello( name ){
    var name = name || "Tom";
    return "Hello~"+name
}
function addFn(val){
    var val = val.x+val.y;
    return val
}
module.exports ={
    n:n,
    sayHello:sayHello,
    addFn:addFn
}
//main.js
var example = require('./example.js');
var addNum = {
    "x":10,
    "y":5
}
console.log( example )//查看example輸出的對外模塊接口；
console.log( example.n )//1;
console.log( example.sayHello("Jack") )// "Hello~ Jack";
console.log( example.addFn(addNum) ) //15;

CommonJS 加載模塊是同步的，因此只有加載完成才能執行後面的操做。像Nodejs主要用於服務器的編程，加載的模塊文件通常都已經存在本地硬盤，因此加載起來比較快，不用考慮異步加載的方式，因此CommonJS規範比較適用。但若是是瀏覽器環境，要從服務器加載模塊，這是就必須採用異步模式。因此就有了 AMD CMD 解決方案。

AMD（Asynchromous Module Definition） 異步模塊定義

AMD 是客戶端模塊管理工具庫RequireJS提出而且完善的一套模塊化規範，AMD 是基於異步加載模塊的方式。
特色 ：異步加載，不阻塞頁面的加載，能並行加載多個模塊，可是不能按需加載，必須提早加載所需依賴

// 用define 定義模塊
define({
    method1: function() {},
    method2: function() {},
});
// 定義模塊時引用其餘模塊
define(['module1', 'module2'], function(m1, m2) {
   ...
});
// require 調用模塊
require(['foo', 'bar'], function ( foo, bar ) {
        foo.doSomething();
});

CMD（Common Module Definition）通用模塊定義

CMD 是國內大牛玉伯提出來的，實現的庫是SeaJs.

// test1.js
define(function(require,exports,module){
    ...
    module.exports={
        ...
    }
})

// test2.js
define(function(require,exports,module){    
    var cmd = require('./test1') 
    // cmd.xxx 依賴就近書寫
    // 經過 exports 對外提供接口
    exports.doSomething = ...

    // 或者經過 module.exports 提供整個接口
    module.exports = ...
})

CMD與AMD的區別：

1. 對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。
2. CMD 推崇依賴就近，AMD 推崇依賴前置。

define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b') // 依賴能夠就近書寫
b.doSomething()
// ...
})
// AMD 默認推薦的是
define(['./a', './b'], function(a, b) {  // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
})

ES6 Module

在 ES6 以前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，後者用於瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，並且實現得至關簡單，徹底能夠取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。
ES6 的模塊自動採用嚴格模式，無論你有沒有在模塊頭部加上"use strict";並使用export、import 命令實現導出引用模塊。

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

// main.js
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}
//export default 命令

// export-default.js
export default function () {
  console.log('foo');
}
// import-default.js
import customName from './export-default';
customName(); // 'foo'

ES6 Module 與 CommonJS 的區別

1. CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
2. CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

區分模塊與組件

前端模塊側重的功能的封裝，主要是針對Javascript代碼，隔離、組織複製的javascript代碼，將它封裝成一個個具備特定功能的的模塊。
模塊能夠經過傳遞參數的不一樣修改這個功能的的相關配置，每一個模塊都是一個單獨的做用域，根據須要調用。
一個模塊的實現能夠依賴其它模塊。

前端組件更多關注的UI部分，頁面的每一個部件，好比頭部，底部、內容區，彈出框均可以成爲一個組件，每一個組件有獨立的HTML、CSS、JS代碼。
能夠根據須要把它放在頁面的任意部位，也能夠和其餘組件一塊兒造成新的組件。一個頁面是各個組件的結合，能夠根據須要進行組裝。

擴展：站在業務的角度架構的視角模塊組件又能夠這麼分。
模塊和組件都是系統的組成部分。
從邏輯角度拆分系統後，獲得的單元就是「模塊」。
從物理角度來拆分系統後，獲得的單元就是「組件」。
劃分模塊的主要目的是職責分離，劃分組件的主要目的是單元複用。
假設咱們要作一個學生管理系統，這個系統從邏輯的角度拆分，能夠分爲「登陸註冊模塊」「我的成績模塊」；從物理的角度來拆分，能夠拆分爲Nginx、Web服務器、MySql。

參考：
淺談前端模塊化
前端模塊與組件的區別
30分鐘學會前端模塊化開發
前端模塊化、組件化的理解
知乎玉伯回覆CMD和AMD的區別[阮一峯ES6 Module 語法]()[ES6 Module與CommonJs的差別化]()從零開始學架構（李運華）