模塊加載器基礎學習，Commonjs 與 Seajs的區別；

1.概述

什麼是模塊化？

　　模塊化就是把系統分離成獨立功能個方法，須要什麼功能，就加載什麼功能；

優勢：

　　解決傳統編碼過程當中的命名衝突和文件依賴的問題；

　　提升代碼的可維護性，可複用性以及提升生產效率。

CommonJs

common.js主要用於服務器端；

common.js加載模塊是同步的，也就是說，加載完成以後執行後面的操做；

commonJs使用基於文件的模塊，因此一每一個文件只能定義一個模塊；

Node.js主要用於服務端編程，模塊都是存儲在本地的硬盤中加載比較快，因此Node.js採用的是common.js的規範；

common.js規範分爲三個部分：

module(模塊標識)：module變量在每一個模塊的內部，就表明當前模塊

require（模塊引用）：require()用來加載外部模塊，讀取並執行js文件，返回該模塊的exports對象；

exports（模塊輸出）：exports是對外的接口，用於導出當前模塊的變量和方法；

// aModule.js
const $ = require("jQuery");     // 用於其餘的模塊
let count = 1;
const numClick = function(){
    alert(++count)
}

module.exports = {                 // 使用module.exports 定義模塊公共接口
     countClick:function(){
           $(document).on("click",numClick )
    }
}

//使用咱們寫的module
const aModule = require("aModule");  //引入模塊

aModule.countClick();     //使用定義的公共接口

咱們須要注意的是：雖然咱們的在aModule.js中定義的 "全局變量" $ , count, numClick；在咱們的標準js文件中會生成全局變量，可是在Commonjs中它的做用域只存在於當前的模塊；

AMD(require.js) 主要用於瀏覽器端；

AMD就是異步模塊定義。它採用異步的方法加載模塊，經過define方法去定義模塊，require方法去加載模塊 ；

AMD模塊定義
若是這個模塊還依賴於其餘模塊，那麼define函數的第一個參數，必須是一個數組，指明該模塊的依賴；

define(["tool"],function(){
// 模塊邏輯
}}))

　　

// AMD模塊的加載
require(['modules'],callback);

// 第一個參數 ['modules'] ,是一個數組，裏面的成員就是要加載的模塊；

// 第二個參數 callback ,則是加載成功以後的回調函數。

require異步加載模塊，瀏覽器在加載過程當中不會失去響應；指定的回調函數，只有在前面的模塊加載成功後，纔會去執行，解決了依賴性的問題。

// a.js 定義a 模塊 依賴於b模塊
define(["b"],function(){
    console.log(b)
    var hello = function(){
        console.log("hello")
    }
    return {
        hello:hello
    }
})

// b.js  定義b模塊
define(function(){
    var name = "max";
    return {
        name : name
    }
})

　　

demo.html
<script>
    require.config({   // 配置路徑別名
        path : {
            'a':'./a',
            'b':'./b'
        }
    })
    require(['a','b'],function(a,b){    // 引入a,b模塊
        console.log(a); // {hello:function(){}}
        console.log(b); // {name:'max'}
    })
</script>

 

CMD(sea.js)

CMD 即通用模塊定義，CMD規範是國內發展過來的；Sea.js和 require.js解決的問題是同樣的，只不過在模塊的定義方法和加載方法不一樣。

CMD推崇就近依賴，延遲執行。文件時提早加載好的，只有在require的時候纔去執行文件；

在CMD規範中，一個模塊就是一個文件。

require 是能夠把其餘模塊導進來的一個參數；
exports 能夠把模塊內的一些屬性和方法導出；
module是一個對象，上面儲存了與當前模塊相關聯的一下屬性和方法；

define(function(require,exports,module){
    // 模塊代碼
})

a.js
define(function(require,exports,module){
    export.name = "max"
})

b.js
define(function(require,exports,module){ var a = require('./a'); export.hello = function(){ console.log("hello") } })

demo.html
<script>
    seajs.config({
        alias:{
            a:'./a',
            b:'./b'
        }
    })
    seajs.use(['a','b'],function(a,b){
        console.log(a);
        console.log(b);
    })
</script>

ES6模塊化：

ES6汲取了Commonjs 和 AMD 的優勢，語法簡潔，而且基於文件。支持異步加載，將來能夠成爲瀏覽器和服務端通用的模塊化解決方案；

ES6的主要思想是必須顯式的使用標識符導出模塊，才能從外部訪問模塊。其餘的標識符，甚至在頂級的頂級做用域中定義，也只能在模塊內使用；（與CommonJs同樣）

ES6提供了兩個標識符：

　　import：導入模塊標識符

　　export：從模塊外部指定標識符（用於把模塊中的內容暴露出來）

 

ES6的導出模式分如下幾種：

1.使用關鍵字export分被導出定義的變量和函數

export const name = 'hyh';
export function compare(){};
export class Car()

2.使用export將全部的模塊標識符所有導出

 const name = 'hyh';
 function compare(){};
 class Car()
export { name, compare }

3.使用expport default 關鍵字定義模塊的默認導出

export default class Car()

4.使用默認導出的同時還能夠導出指定的名稱

export default class Car();
export const name = "hyh"

5.經過關鍵字 as 設置別名

const name = "hyh"
export { name as myname }

 

ES6的引入模式

1.導入默認的導出

import car from 'aModule.js'

2.導入命名導出

import { name, compare } from 'aModule.js'

3.導入模塊中聲明的所有導出內容

import * as aModule from 'aModule.js'

4.經過別名導入模塊中聲明的所有導出內容

import {name as myname} from 'aModule.js'

5.導入默認導出和命名導出

import car,{name,compare} from 'aModule.js'

export 與 export default 的區別

導入模塊默認導出的內容，不須要使用花括號{}，能夠任意指定名稱

導入已命名的導出內容必須使用花括號，且名稱須要對應