1. 程式人生 > >js的import 與export詳解

js的import 與export詳解

node 直接 console 路徑 java strong tro {} 匿名函數

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調用接口

2.module.exports

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

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

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

js的import 與export詳解