簡(jiǎn)明 ES6 模塊

1.什么是模塊

模塊就是一段代碼，這段代碼可以反復(fù)使用，經(jīng)常單獨(dú)寫成一個(gè)文件,一旦加載會(huì)立即執(zhí)行。

2.導(dǎo)出

導(dǎo)出有 2 種方式：命名導(dǎo)出和默認(rèn)導(dǎo)出，分別用關(guān)鍵字export和export default表示

2.1 命名導(dǎo)出:export 關(guān)鍵字

• 第一種方式:在要導(dǎo)出的代碼前加上 export 關(guān)鍵字就可以了!

export var foo; export let foo; export const foo; export function myFunc() {} export function* myGenFunc() {} export class MyClass {}

• 第二種方式:將要導(dǎo)出的對(duì)象放在export {}的{}中

var foo1; let foo2; const foo3; function myFunc() {} class MyClass {} export {foo1, foo2, foo3, myFunc, MyClass}

2.2 默認(rèn)導(dǎo)出:export default 關(guān)鍵字

• 第一種方式:在要導(dǎo)出的函數(shù)或者類之前加 export default 關(guān)鍵字，其中名稱可以省略。這將會(huì)使其具有匿名函數(shù)和匿名類的功能。

export default function myFunc() {} export default function () {}export default function* myGenFunc() {} export default function* () {} export default class MyClass {} export default class {} export default foo; export default 'Hello world!'; export default 3 * 7; export default (function () {});

• 第二種方式:用export default moduleName關(guān)鍵字導(dǎo)出

========================= var foo1; export default foo1; ========================== let foo2; export default let foo2; ========================== export function myFunc() {}; export default myFunc;

注意:使用命名導(dǎo)出時(shí)，一個(gè) js 文件可以 export 多個(gè)模塊；但是使用默認(rèn)導(dǎo)出時(shí)，一個(gè)文件只能有一個(gè)模塊導(dǎo)出，否則將會(huì)報(bào)錯(cuò)。

2.3 其他

2.3.1 重命名導(dǎo)出

export { MY_CONST as FOO, myFunc }; export { foo as default };

2.3.2 從其他模塊導(dǎo)出

export * from 'src/other_module'; export { foo as myFoo, bar } from 'src/other_module'; export { default } from 'src/other_module'; export { default as foo } from 'src/other_module'; export { foo as default } from 'src/other_module'

3.導(dǎo)入

導(dǎo)入方式語法描述

默認(rèn)導(dǎo)入	import localName from 'src/my_lib';	-
命名空間導(dǎo)入	import * as my_lib from 'src/my_lib';	-
命名導(dǎo)入	import { name1, name2 } from 'src/my_lib';	-
重命名導(dǎo)入	import { name1 as localName1, name2 } from 'src/my_lib';	-
空導(dǎo)入	import 'src/my_lib';	僅加載模塊，不導(dǎo)入任何內(nèi)容
默認(rèn)導(dǎo)入+命名空間	import theDefault, * as my_lib from 'src/my_lib';	-
默認(rèn)導(dǎo)入+命名導(dǎo)入	import theDefault, { name1, name2 } from 'src/my_lib';	-

4.導(dǎo)出與導(dǎo)入之家的關(guān)聯(lián)

• 使用命名導(dǎo)出時(shí)，應(yīng)用import {ModuleName}的方式導(dǎo)入；使用默認(rèn)導(dǎo)出時(shí)，使用import moduleName的方式導(dǎo)入，無需加花括號(hào)。
• 導(dǎo)入的時(shí)候，我們可以只導(dǎo)入我們需要的模塊，如以下。

------lib.js----- export const PI = '3.14' export let perimeter = radius => {console.log('周長(zhǎng):', 2 * PI * radius) }-----main.js----- import {perimeter} from 'lib' perimeter(1);

5. 在 script 中使用模塊

<!--加載一個(gè)js模塊文件--> <script type="module" src="module.js"></script> <!-- 內(nèi)聯(lián)引入一個(gè)模塊 --> <script type="module"> import {sum} from './example.js'; let res = sum(1,2);

6.注意事項(xiàng)

• 直接使用模塊語法在瀏覽器中可能無效，需要 babel 等工具轉(zhuǎn)為可接受的語法
• 導(dǎo)出的 2 種方式 export 和 export default 在一個(gè)文件中最好用一種，盡量少混用
• 在 ES6 模塊中，default 是一個(gè)關(guān)鍵字，不要使用 default 作為 as 的重命名名稱
• import 后，import 的模塊將會(huì)被提升，放置于當(dāng)前代碼的最前端。因此，何處導(dǎo)入模塊并不重要。
• import 應(yīng)該是單獨(dú)的一條語句，不能在其他語句中運(yùn)行該語句。以下 example.js 中的操作將導(dǎo)致錯(cuò)誤。
• 導(dǎo)入的只是當(dāng)初模塊的只讀視圖，這意味著操作的模塊中的變量都存儲(chǔ)在模塊的內(nèi)部

-----example.js------ if(xxx){ import example from "mock" }

7.實(shí)例

【實(shí)例 1】鏈接信息

-----api.js----- export let linkInfo = [{name: '百度',address: 'baidu.com'},{name: '新浪',address: 'sina.com'},{name: '優(yōu)酷',address: 'youku.com'} ]-----main.js----- import {linkInfo} from "mock" console.log('鏈接信息:',JSON.stringify(linkInfo))

【實(shí)例 2】工具類

// 加解密算法 import CryptoJS from 'crypto-js';function getPrivate() {let result = 'abcdef';for (let i = 0; i < 10; i++) {result += i;}return result; }export function Encrypt(data) {let src = CryptoJS.enc.Utf8.parse(data);let encrypted = CryptoJS.AES.encrypt(src, CryptoJS.enc.Utf8.parse(getPrivate()), {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});return encrypted.ciphertext.toString(CryptoJS.enc.Base64); }export function Decrypt(data) {let decrypt = CryptoJS.AES.decrypt(data, CryptoJS.enc.Utf8.parse(getPrivate()), {mode: CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});var result = decrypt.toString(CryptoJS.enc.Utf8);return result; }

【實(shí)例 3】接口

-----api.js----- export default {addLink (link) {let params = {name: link.name,address: link.address}return http.post('/link/add', params).then(data => {return Promise.resolve(data)}).catch(e => {return Promise.reject(e)})},updateLink (link) {let params = {id: link.id,name: link.name,address: link.address}return http.post('/link/update', params).then(data => {return Promise.resolve(data)}).catch(e => {return Promise.reject(e)})},getLinkList () {let params = {currentPage: 1,pageSize: 20}return http.post('/link/list', params).then(data => {return Promise.resolve(data)}).catch(e => {return Promise.reject(e)})},deleteLink (link) {let params = {id: link.id}return http.post('/link/delete', params).then(data => {return Promise.resolve(data)}).catch(e => {return Promise.reject(e)})} }-----main.js----- import * as api from "./myLib"; api.addLink(myParams).then(res=>{console.log("well")}).catch(e => {console.log(e)});

轉(zhuǎn)載于:https://www.cnblogs.com/yejingping/p/10207345.html

總結(jié)

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

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