簡明 ES6 模塊

簡明 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)});