简明 ES6 模块
簡(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)鍵字就可以了!
- 第二種方式:將要導(dǎo)出的對(duì)象放在export {}的{}中
2.2 默認(rèn)導(dǎo)出:export default 關(guān)鍵字
- 第一種方式:在要導(dǎo)出的函數(shù)或者類之前加 export default 關(guān)鍵字,其中名稱可以省略。這將會(huì)使其具有匿名函數(shù)和匿名類的功能。
- 第二種方式:用export default moduleName關(guān)鍵字導(dǎo)出
注意:使用命名導(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)入
| 默認(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)入我們需要的模塊,如以下。
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)部
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é)
- 上一篇: 本杰明 富兰克林 道德13准则
- 下一篇: OncePerRequestFilter