CommonJS模組開發

CommonJS定義

每個檔案就一個模組，有自己的作用域。在一個檔案裡面定義的變數、函式、類，都是私有的，對其他檔案不可見。

• 私有作用域不會汙染全域性作用域。
• 模組可載入多次，只會在第一次載入時執行一次，然後結果會被快取起來，
  以後在使用，就直接讀取快取結果。想要讓模組再次執行，必須清除快取
• 模組載入順序是按照其在程式碼中出現的順序

基礎用法

1、require()用來引入外部模組，
2、exports()用來匯出當前模組的變數和方法，
3、module物件代表模組物件

單變數方法匯出引入

// a.js  匯出
function add(a, b) {
    return a + b;
}
module.exports = add;
 

// b.js 引入
const add = require('./a.js');
console.log(add(10, 20));

多方法變數匯出引入

// a.js 匯出
function add(a, b) {
    return a + b;
}

function mul(a, b) {
    return a * b;
}

module.exports = {
    add,
    mul
};

// b.js 引入
const { add, mul } = require('./a.js');

console.log(add(10, 20));
console.log(mul(10, 20));
 

補充說明:

//const { add, mul } = require('./a.js');
const opt = require('./a.js');
const add = opt.add
const mul = opt.mul

和上面的註釋是等價的,這就是解構的語法.

物件解構
let node = {
        type : 'identifier',
        name : 'foo'
};
let {type,name} = node;
console.log(type);//'identifier'
console.log(name);//'foo'

ES6模組化開發

ES6的模組化分為匯出（export）與匯入（import）兩個模組。

export、import

在ES6中每一個模組即是一個檔案，在檔案中定義的變數，函式，物件在外部是無法獲取的。如果你希望外部可以讀取模組當中的內容，就必須使用export來對其進行暴露（輸出）。

然後可以建立一個檔案，以import的形式將這個變數進行引入:

單變數

export let myName="laowang";

import {myName} from "./test.js";
console.log(myName);//laowang

多變數

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"歲了"
}
export {
    myName,
    myAge,
    myfn
}
/******************************接收的程式碼調整為**********************/
import {myfn,myAge,myName} from "./test.js";
console.log(myfn());//我是laowang！今年90歲了
console.log(myAge);//90
console.log(myName);//laowang

如果你不想暴露模組當中的變數名字，可以通過as來起別名

let myName="laowang";
let myAge=90;
let myfn=function(){
    return "我是"+myName+"！今年"+myAge+"歲了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}
/******************************接收的程式碼調整為**********************/
import {fn,age,name} from "./test.js";
console.log(fn());//我是laowang！今年90歲了
console.log(age);//90
console.log(name);//laowang

也可以直接匯入整個模組，將上面的接收程式碼修改為：

import * as info from "./test.js";//通過*來批量接收，as 來指定接收的名字
console.log(info.fn());//我是laowang！今年90歲了
console.log(info.age);//90
console.log(info.name);//laowang

預設匯出（default export）

一個模組只能有一個預設匯出，對於預設匯出，匯入的名稱可以和匯出的名稱不一致。

/******************************匯出**********************/
export default function(){
    return "預設匯出一個方法"
}
/******************************引入**********************/
import myFn from "./test.js";//注意這裡預設匯出不需要用{}。
console.log(myFn());//預設匯出一個方法

可以將所有需要匯出的變數放入一個物件中，然後通過default export進行匯出

/******************************匯出**********************/
export default {
    myFn(){
        return "預設匯出一個方法"
    },
    myName:"laowang"
}
/******************************引入**********************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//預設匯出一個方法 laowang

同樣也支援混合匯出

/******************************匯出**********************/
export default function(){
    return "預設匯出一個方法"
}
export var myName="laowang";
/******************************引入**********************/
import myFn,{myName} from "./test.js";
console.log(myFn(),myName);//預設匯出一個方法 laowang