import 與export詳解

ES6

1.export default

其他模塊加載該模塊時，import命令可以為該匿名函數指定任意名字。

如：

import Vue from 'vue'

vue里面的第三方模塊都是用了這個

使用import 不帶{ }如上，一定要用export default 導出，不能用export導出；

顯然，一個模塊只能有一個默認輸出，因此export default命令只能使用一次。

export defalut 只能用import boy from '模塊路徑'，不能帶{}

所以，import命令后面才不用加大括號，因為只可能唯一對應export default命令。

輸出一個叫做default的變量，對外借口就為default

2. export

export 導出的一定是類對象的像是

如：

export var name = "liuyang"
或
var boy = 'liuyang'
export {boy}
或
var boy = 'liuyang'
var gril = 'guo'
export {boy, girl}

這時在導入時也一定要import {boy} from '模塊路徑'

export本質是暴露出對外的接口，它們的實質是，在接口名與模塊內部變量之間，建立了一一對應的關系。

3. import

使用export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過import命令加載這個模塊。

如：

import  {boy} from '模塊路徑'

大括號里面的變量名，必須與被導入模塊對外接口的名稱相同，

import后面的from指定模塊文件的位置，可以是相對路徑，也可以是絕對路徑，.js后綴可以省略。

如果只是模塊名，不帶有路徑，那么必須有配置文件，告訴 JavaScript 引擎該模塊的位置。

Node 

1.exports

如：

 

var boy = 'liuyang'
exports.boy = boy

 

exports.'接口名' = 對象

導入時，用var ex = require('模塊路徑')，加載模塊就可以用ex.boy調用接口

當需要導入一個模塊的多個方法時可以用

var {boy, girl} = require('模塊路徑')

 

2.module.exports

用於直接導出對象可以直接用

//-------test.js------
var boy = 'liuyang'
module.exports = boy

------------main.js-------
var b = require('./test')
console.log(b)
//------結果liuayang----