簡明 ES6 模塊

1.什么是模塊

模塊就是一段代碼，這段代碼可以反復使用，經常單獨寫成一個文件,一旦加載會立即執行。

2.導出

導出有 2 種方式：命名導出和默認導出，分別用關鍵字export和export default表示

2.1 命名導出:export 關鍵字

• 第一種方式:在要導出的代碼前加上 export 關鍵字就可以了!

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

• 第二種方式:將要導出的對象放在export {}的{}中

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

2.2 默認導出:export default 關鍵字

• 第一種方式:在要導出的函數或者類之前加 export default 關鍵字，其中名稱可以省略。這將會使其具有匿名函數和匿名類的功能。

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關鍵字導出

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

注意:使用命名導出時，一個 js 文件可以 export 多個模塊；但是使用默認導出時，一個文件只能有一個模塊導出，否則將會報錯。

2.3 其他

2.3.1 重命名導出

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

2.3.2 從其他模塊導出

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.導入

導入方式語法描述

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

4.導出與導入之家的關聯

• 使用命名導出時，應用import {ModuleName}的方式導入；使用默認導出時，使用import moduleName的方式導入，無需加花括號。
• 導入的時候，我們可以只導入我們需要的模塊，如以下。

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

5. 在 script 中使用模塊

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

6.注意事項

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

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

7.實例

【實例 1】鏈接信息

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

【實例 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; }

【實例 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)});

轉載于:https://www.cnblogs.com/yejingping/p/10207345.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。