module.exports Node應用由模塊組成,採用CommonJS模塊規範。根據這個規範,每個文件就是一個模塊,有自己的作用域。在這些文件裡面定義的變數、函數、類,都是私有的,對外不可見,因此規避掉了作用域污染。 根據CommonJS規定,每個模塊內部,module變數代表當前模塊,這個變數 ...
module.exports
Node應用由模塊組成,採用CommonJS模塊規範。根據這個規範,每個文件就是一個模塊,有自己的作用域。在這些文件裡面定義的變數、函數、類,都是私有的,對外不可見,因此規避掉了作用域污染。
根據CommonJS規定,每個模塊內部,module變數代表當前模塊,這個變數是一個對象,它的exports屬性(即module.exports)是對外的介面。載入某個模塊,其實就是載入該模塊的exports屬性。
舉例:通過module.exports輸出變數 age 和 sayHelloTo 函數。
./MyModule.js
var age = 7;
var sayHelloTo= function (name) {
return "hello " + name;
};
module.exports.age = age;
module.exports.sayHelloTo=sayHelloTo;
require:用於載入模塊
var temp = require('./MyModule.js'); //這裡也可以使用 import myModule from './MyModule.js'
console.log(temp.age); // 7
console.log(temp.sayHelloTo("Steve")); // hello Steve
額外說明:對於自定義的模塊,需要使用相對路徑,否則會提示找不到模塊/組件(預設情況下,非相對路徑的引用,會從node_modules文件夾中查找)
exports 與 module.exports
為了方便,node為每個模塊提供了一個exports變數,指向module.exports。這等同於在每個模塊頭部,有這麼一行代碼:
var exports = module.exports;
因此,我們可以直接在exports對象上添加方法(等同於在 module.exports 添加一樣)
./MyModule.js
var age = 7;
var sayHelloTo= function (name) {
return "hello " + name;
};
exports.age = age; //等效於: module.exports.age = age;
exports.sayHelloTo=sayHelloTo; //等效於: module.exports.sayHelloTo=sayHelloTo;
P.S.不能直接將exports指向一個值,這會切斷 exports 與 module.exports 的聯繫(但是可以用module.exports來指向一個值)
./MyModule.js
var age = 7;
var sayHelloTo= function (name) {
return "hello " + name;
};
exports = age; //不要這麼乾。這麼做會切斷exports與module.exports的聯繫
不同於CommonJS,ES6使用 export 和 import 來導入、導出模塊
用 export 導出的模塊,需要用 import 來進行導入,而不能用 require。
P.S.:export 命令規定的是對外的介面,必須與模塊內部的變數建立一一對應的關係
const utils = {
showSth : function(){
console.log("showSth");
},
saySth : function(){
console.log("saySth");
}
}
//導出的3種方式
export var m = utils; // 方式1,這種方式在引用的時候需要這樣: import {m} from './utils.js';
export {utils}; // 方式2,用大括弧來導出變數,如果導出的變數有多個,則{變數1,變數2,變數3...,變數N}。這種方式在引用的時候需要這樣: import {utils} from './utils.js';
export {utils as myUtils}; // 方式3,這種方式在引用的時候需要這樣: import {myUtils} from './utils.js';
在引用的地方,也可以直接指定別名,如:import {myUtils as utils} from './utils.js';
MDN對於export和import的語法說明:
export語法:
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
import語法:
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
var promise = import(module-name);
export 和 export default
- export 和export default 均可用於導出(常量 | 函數 | 文件 | 模塊)等。
- 可以在其他文件中通過 import+(常量 | 函數 | 文件 | 模塊)名的方式,將其導入,以便能夠進行使用。
在一個文件或者模塊中,export、import 可以有多個,但 export default 僅有一個。
對於命名方式導出的,在導入的時候必須使用相應對象的相同名稱
```javascript
const utils = {
showSth : function(){
console.log("showSth");
},
saySth : function(){
console.log("saySth");
}
}
const name = "my name is Artech";
export {name}; //命名導出
export {utils};
引用的時候:import {utils,name as myName} from './utils.js';
```通過 export 方式導出,在導入時要用花括弧{ };而通過 export default 方式導出的,則不需要:
```javascript
如通過 export default 導出
export default utils;
則在使用的時候不用加花括弧,且導入時的名字可以自定義,如:
import myUtils from './utils.js'; 對於預設方式導出的,則導入的時候,名稱可以隨便取預設導出:不能使用 let,var 或 const 作為預設導出
```
import *
將一個js文件中定義的方法,模塊,對象等,全部導出,一般結合別名使用,如:
myModule.js
export const fun1 = ()=>{}
export const objInfo = {...};
使用:
demo.js:引用myModule.JS
import * as myAlias from './myModule';
//fun1()和objInfo都是定義在myModule中的方法和對象
myAlias.fun1();
myAlias.objInfo;