export,export default,module.exports,import,require之間的區(qū)別和關(guān)聯(lián)

module.exports

Node應(yīng)用由模塊組成,采用CommonJS模塊規(guī)范。根據(jù)這個規(guī)范,每個文件就是一個模塊,有自己的作用域。在這些文件里面定義的變量、函數(shù)、類,都是私有的,對外不可見,因此規(guī)避掉了作用域污染。

根據(jù)CommonJS規(guī)定,每個模塊內(nèi)部,module變量代表當前模塊,這個變量是一個對象,它的exports屬性(即module.exports)是對外的接口。加載某個模塊,其實就是加載該模塊的exports屬性。

舉例:通過module.exports輸出變量 age 和 sayHelloTo 函數(shù)。

./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 的聯(lián)系(但是可以用module.exports來指向一個值)

./MyModule.js
    var age = 7; 
    var sayHelloTo= function (name) { 
        return "hello " + name;
    }; 
    exports = age;  //不要這么干。這么做會切斷exports與module.exports的聯(lián)系

不同于CommonJS,ES6使用 export 和 import 來導(dǎo)入、導(dǎo)出模塊

用 export 導(dǎo)出的模塊,需要用 import 來進行導(dǎo)入,而不能用 require。
P.S.:export 命令規(guī)定的是對外的接口,必須與模塊內(nèi)部的變量建立一一對應(yīng)的關(guān)系

const utils = {
    showSth : function(){
        console.log("showSth");
    },
    saySth : function(){
        console.log("saySth");
    }
}
//導(dǎo)出的3種方式
export var m = utils; // 方式1,這種方式在引用的時候需要這樣: import {m} from './utils.js';
export {utils}; // 方式2,用大括號來導(dǎo)出變量,如果導(dǎo)出的變量有多個,則{變量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

  1. export 和export default 均可用于導(dǎo)出(常量 | 函數(shù) | 文件 | 模塊)等。
  2. 可以在其他文件中通過 import+(常量 | 函數(shù) | 文件 | 模塊)名的方式,將其導(dǎo)入,以便能夠進行使用。
  3. 在一個文件或者模塊中,export、import 可以有多個,但 export default 僅有一個。
    const utils = {
        showSth : function(){
            console.log("showSth");
        },
        saySth : function(){
            console.log("saySth");
        }
    }
    const name = "my name is Artech";
    export {name}; //命名導(dǎo)出
    export {utils};
    
    對于命名方式導(dǎo)出的,在導(dǎo)入的時候必須使用相應(yīng)對象的相同名稱
    引用的時候:import {utils,name as myName} from './utils.js';
    
  4. 通過 export 方式導(dǎo)出,在導(dǎo)入時要用花括號{ };而通過 export default 方式導(dǎo)出的,則不需要:
    如通過 export default 導(dǎo)出
       export default utils;  
    則在使用的時候不用加花括號,且導(dǎo)入時的名字可以自定義,如:
       import myUtils from './utils.js';  對于默認方式導(dǎo)出的,則導(dǎo)入的時候,名稱可以隨便取
    
    默認導(dǎo)出:不能使用 let,var 或 const 作為默認導(dǎo)出
    

import *

將一個js文件中定義的方法,模塊,對象等,全部導(dǎo)出,一般結(jié)合別名使用,如:

myModule.js
   export const fun1 = ()=>{}
   export const objInfo = {...};
demo.js:引用mymODULE。JS
    import * as myAlias from './myModule';
    //fun1()和objInfo都是定義在myModule中的方法和對象
    myAlias.fun1();
    myAlias.objInfo;
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容