摘要：所謂的模塊也叫元件或者組件，可以理解為可以服用的功能代碼。如遵循規(guī)范的和遵循規(guī)范的中的模塊化。是在文件中引模塊的。如果引用一個(gè)以上的組件，就可以用把這一組組件放在數(shù)組中就可以了，如下，，，二中的模塊化。

所謂的模塊也叫元件或者組件，可以理解為可以服用的功能代碼。比如說a頁面用功能了，b頁面用到了這功能了，所以我們可以把這個(gè)功能抽為組件，便于服用。那么javascript中的組件化如何使用呢，那么不得不提到下面的三種類型。
1.民間的庫。如遵循CMD規(guī)范的sea.js和遵循AMD規(guī)范的require.js.
2.node中的模塊化。
3.ES6中的模塊化。

我們來先講sea.js。雖然現(xiàn)在這個(gè)庫有些過時(shí)了。但是思想和理念還是不錯(cuò)的。

組件的定義：
在js文件中，使用define方法可定義組件。這個(gè)方法的參數(shù)是一個(gè)函數(shù)，里面有三個(gè)參數(shù)，依次分別是require，exports，medule。
require:是在js文件中引模塊的。
如

var a= require（“./a.js”）

exports:輸出的變量都掛載這exports上，這樣做的好處是減少對(duì)外暴露的變量。
如

   exports.mun=1;
   exports.name="lee;   
   exports.show = function(){
        renturn a+b;
    }

module：可以把返回的所以變量都寫在module里?？煞祷匾唤M。
如

 module.exports={
    a:12,
    b:5,
    show:function(){
    }
    //當(dāng)然了在es6中，json里的函數(shù)可以把“：函數(shù)名”去掉，簡寫為
   // show（）{
   // } 
}
當(dāng)然了es6中json中要是有函數(shù)，可以省略

組件的使用：
在html中，當(dāng)然先是引用sea.js了，在使用，在script中通過seajs.use()使用。

    
      
    如果引用一個(gè)以上的組件，就可以用把這一組組件放在數(shù)組中就可以了，如下：
     seajs.use(["./index1.js"，"./index2.js",.....],function(index1，index，....){
        console.log(module.add())
    })  
    

1，沒有define；
2，有exports，require，module
module.exports={a，b，c} 批量導(dǎo)出
3，引用自定義模塊，為了不和系統(tǒng)模塊沖突，
自定義模塊放在node_modules里，
或者前面加./強(qiáng)制指導(dǎo)加載的目錄。
定義模塊：

可以一個(gè)一個(gè)定義:

exports.a=12;
exports.b=5;

可以定義一組:

let a=12；
let b=5；
module.exports = {a,b}

引用模塊：
node.js 也是js，遵循cmd規(guī)范，使用require引用模塊。

let mod=require("./aaa.js"); 后綴.js可簡寫不寫。前面的./如果不寫，就需要把這個(gè)模塊放在node_modules文件夾里，不然會(huì)以node里的系統(tǒng)模塊有影響。

概述 ：
歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個(gè)大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項(xiàng)功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對(duì)開發(fā)大型的、復(fù)雜的項(xiàng)目形成了巨大障礙。
在 ES6 之前，社區(qū)制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務(wù)器，后者用于瀏覽器。ES6 在語言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡單，完全可以取代 CommonJS 和 AMD 規(guī)范，成為瀏覽器和服務(wù)器通用的模塊解決方案。
ES6 模塊的設(shè)計(jì)思想是盡量的靜態(tài)化，使得編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運(yùn)行時(shí)確定這些東西。比如，CommonJS 模塊就是對(duì)象，輸入時(shí)必須查找對(duì)象屬性。

命名導(dǎo)出：
可以直接在任何變量或者函數(shù)前面加export關(guān)鍵字，就可以將它導(dǎo)出。這種寫法非常簡潔，和平時(shí)幾乎沒有區(qū)別，唯一的區(qū)別就是在需要導(dǎo)出的地方加上一個(gè) export 關(guān)鍵字。
比如：

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

然后在另一個(gè)文件中這樣引用：

import { square, diag } from "lib"; 
console.log(square(11)); // 121
console.log(diag(4, 3));

你可能會(huì)注意到這個(gè)奇怪的語法 { square, diag } 不就是前面講過的 destructing嗎。所以你會(huì)以為還可以這樣寫：

 import lib from "lib";
 square = lib.square;

但是其實(shí)這樣是錯(cuò)的，因?yàn)?import { square, diag } from "lib’; 是import的特有語法，并不是 destructing 語法，所以其實(shí)import的時(shí)候并不是直接把整個(gè)模塊以對(duì)象的形式引入的。

如果你希望能通過 lib.square 的形式來寫，你應(yīng)該這樣導(dǎo)入：

 import * as lib from "lib";
 square = lib.square;

不過值得注意的一點(diǎn)是，如果你直接用babel編譯，執(zhí)行是會(huì)報(bào)錯(cuò)的。因?yàn)?babel 并不會(huì)完全編譯 modules，他只是把 ES6 的modules語法編譯成了 CMD 的語法，所以還需要用 browserify 之類的工具再次編譯一遍。
如果你發(fā)現(xiàn) browserify 找不到 lib，可以改成 from ‘./lib’ 試試。

本質(zhì)上，export default就是輸出一個(gè)叫做default的變量或方法，然后系統(tǒng)允許你為它取任意名字。所以，下面的寫法是有效的。
大家會(huì)發(fā)現(xiàn)上面的寫法比較麻煩，因?yàn)楸仨氁付ㄒ粋€(gè)名字。其實(shí)很多時(shí)候一個(gè)模塊只導(dǎo)出了一個(gè)變量，根本沒必要指定一個(gè)名字。
還有一種用法叫默認(rèn)導(dǎo)出，就是指定一個(gè)變量作為默認(rèn)值導(dǎo)出：

 //------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from "myFunc";
myFunc();

默認(rèn)導(dǎo)出的時(shí)候不需要指定一個(gè)變量名，它默認(rèn)就是文件名。
這里的區(qū)別不僅僅是不用寫名字，而是 導(dǎo)出的默認(rèn)值就是模塊本身，而不是模塊下面的一個(gè)屬性，即是 import myFunc from "myFunc’; 而不是 import {myFunc} from "myFunc’;

默認(rèn)導(dǎo)出同樣可以結(jié)合命名導(dǎo)出來使用：
如果想在一條import語句中，同時(shí)輸入默認(rèn)方法和其他接口，可以寫成下面這樣。

import _, { each, each as forEach } from "lodash";

對(duì)應(yīng)上面代碼的export語句如下。

export default function (obj) {
  // ···
}

export function each(obj, iterator, context) {
  // ···
}

export { each as forEach };
上面代碼的最后一行的意思是，暴露出forEach接口，默認(rèn)指向each接口，即forEach和each指向同一個(gè)方法。

ES6規(guī)范只支持靜態(tài)的導(dǎo)入和導(dǎo)出，也就是必須要在編譯時(shí)就能確定，在運(yùn)行時(shí)才能確定的是不行的，比如下面的代碼就是不對(duì)的：

//動(dòng)態(tài)導(dǎo)入
var mylib;
if (Math.random()) {
    mylib = require("foo");
} else {
    mylib = require("bar");
}
//動(dòng)態(tài)導(dǎo)出
if (Math.random()) {
    exports.baz = ...;
}

總結(jié)一下，ES6提供了如下幾種導(dǎo)入方式：

// Default exports and named exports
import theDefault, { named1, named2 } from "src/mylib";
import theDefault from "src/mylib";
import { named1, named2 } from "src/mylib";

// Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from "src/mylib";

// Importing the module as an object
// (with one property per named export)
import * as mylib from "src/mylib";

// Only load the module, don’t import anything
import "src/mylib";

如下幾種導(dǎo)出方式：

 //命名導(dǎo)出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;

export function myFunc() {
    ...
}
export function* myGeneratorFunc() {
    ...
}
export class MyClass {
    ...
}
// default 導(dǎo)出
export default 123;
export default function (x) {
    return x
};
export default x => x;
export default class {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
};
//也可以自己列出所有導(dǎo)出內(nèi)容
const MY_CONST = ...;
function myFunc() {
    ...
}

export { MY_CONST, myFunc };
//或者在導(dǎo)出的時(shí)候給他們改個(gè)名字
export { MY_CONST as THE_CONST, myFunc as theFunc };

//還可以導(dǎo)出從其他地方導(dǎo)入的模塊
export * from "src/other_module";
export { foo, bar } from "src/other_module";
export { foo as myFoo, bar } from "src/other_module";