理解exports

其實,Module.exports纔是真正的接口,exports只不過是它的一個輔助工具。 最終返回給調用的是Module.exports而不是exports。

所有的exports收集到的屬性和方法,都賦值給了Module.exports。當然,這有個前提,就是Module.exports本身不具備任何屬性和方法。如果,Module.exports已經具備一些屬性和方法,那麼exports收集來的信息將被忽略

 

ES6模塊主要有兩個功能:export 和 import

export 用於對外輸出本模塊(一個文件可以理解爲一個模塊)變量的接口

import 用於在一個模塊中加載另一個含有 export 接口的模塊。

假設a和b文件在同一目錄下

//a.js

var sex="boy";

var echo=function(value){

  console.log(value)

}

export {sex,echo}

//通過向大括號中添加sex,echo變量並且export輸出,就可以將對應變量值以sex、echo變量標識符形式暴露給其他文件而被讀取到

//不能寫成export sex這樣的方式,如果這樣就相當於export "boy",外部文件就獲取不到該文件的內部變量sex的值,因爲沒有對外輸出變量接口,只是輸出的字符串。

//b.js

//通過import獲取a.js文件的內部變量,{}括號內的變量來自於a.js文件export出的變量標識符。

import {sex,echo} from "./a.js"

console.log(sex) // boy

echo(sex) // boy

前面的例子可以看出,b.js使用import命令的時候,用戶需要知道a.js所暴露出的變量標識符,否則無法加載。

可以使用export default命令,爲模塊指定默認輸出,這樣就不需要知道所要加載模塊的變量名。

//a.js

var sex="boy";

export default sex(sex不能加大括號)

實例:

var config={...};

export default function getConfig() { return config; }

//原本直接export sex外部是無法識別的,加上default就可以了.但是一個文件內最多只能有一個export default。

//其實此處相當於爲sex變量值"boy"起了一個系統默認的變量名default,自然default只能有一個值,

//所以一個文件內不能有多個export default。

// b.js

//本質上,a.js文件的export default輸出一個叫做default的變量,然後系統允許你爲它取任意名字。

//所以可以爲import的模塊起任何變量名,且不需要用大括號包含

import any from "./a.js"

import any12 from "./a.js"

實例:

import getConfig from '../utils/config';

console.log(any,any12) // boy,boy

 

文章出處 https://www.cnblogs.com/papi/p/6951959.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章