在ES5中我們要進(jìn)行模塊華操作需要引入第三方類庫（common.js, require.js 等等），隨著前后端分離，前端的業(yè)務(wù)日漸復(fù)雜，ES6為我們增加了模塊話操作。（模塊化 區(qū)別 于 組件化，這個是兩個概念。

模塊化操作主要包括兩個方面。

• export :負(fù)責(zé)進(jìn)行模塊化，也是模塊的輸出。
• import : 負(fù)責(zé)把模塊引，也是模塊的引入操作。

export的用法：

export可以讓我們把變量，函數(shù)，對象進(jìn)行模塊話，提供外部調(diào)用接口，讓外部進(jìn)行引用。先來看個最簡單的例子，把一個變量模塊化。

單個變量的輸出

我們新建一個temp.js文件，然后在文件中輸出一個模塊變量。

export var a = '123456';

然后可以在index.js中以import的形式引入。

import {a} from './temp.js';console.log(a);

這就是一個最簡單的模塊的輸出和引入。

多變量的輸出

這里聲明了3個變量，需要把這3個變量都進(jìn)行模塊化輸出，這時候我們給他們包裝成對象就可以了。

var a ='123';var b ='456';var c = 'web';export {a,b,c}

函數(shù)的模塊化輸出

export function add(a,b){return a+b;}

as的用法

有些時候我們并不想暴露模塊里邊的變量名稱，而給模塊起一個更語義話的名稱，這時候我們就可以使用as來操作。

var a ='jspang';var b ='技術(shù)99';var c = 'web';export {x as a,y as b,z as c}

export default的使用

加上default相當(dāng)是一個默認(rèn)的入口。在一個文件里export default只能有一個。我們來對比一下export和export default的區(qū)別

1- export

導(dǎo)出：

export var a ='馬優(yōu)晨';export function add(a,b){return a+b;}

導(dǎo)入：

import {a,add} form './temp';//也可以分開寫

2- export default

導(dǎo)出：

export default var a='jspang';

導(dǎo)入：

import str from './temp';

ES6的模塊化不能直接在瀏覽器中預(yù)覽，必須要使用Babel進(jìn)行編譯之后正常看到結(jié)果。

總結(jié)

以上是生活随笔為你收集整理的ES6 模块化操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。