關於ES6中的模組化的規範：export與import

• 2019 年 11 月 13 日
• 筆記

前言

其實對我個人來說，開始的時候對於export 與 import 用法挺模糊的。到現在為止也終於清楚一點了。

有一些前提我們需要了解清楚：

1、JS以前是沒有模組化這個概念的，沒有的後果就是程式碼顯得較亂。後來社區出現了兩種規範：CommonJS、AMD

2、對於我來說，問題出現就出現在這兩個規範上，由於沒有系統的學習，一會import 一會export 、一會require()

清楚了有兩個規範後（CommonJS、AMD），就要知道下面的事情：

1、CommonJS 是同步程式碼規範，Node.js的模組系統，就是參照CommonJS規範實現的。還有NPM也是遵循commonJS定義的包規範。

2、AMD意思是"非同步模組定義"，是前端模組規範。RequireJS就是實現了AMD規範的。

把上面我寫到的理解，對於我來說大致就能理解清楚了，下面就說一下相應的語法（主要CommonJS語法）

具體語法

CommonJS模組規範

1、模組引用

var math = require('math')

在CommonJS 規範中，通過require()方法，引入一個模組的API。

2、模組定義

// math.js  exports.add = function() {      var sum=0,          i = 0,          args = arguments,          l = args.length;      .....  }

CommonJS通過require引入模組，那麼通過什麼定義呢？ 通過：exports，上下文提供了exports對象用於導出當前模組的方法或變數，並且它是唯一的導出的介面。在模組中，還存在一個module對象，它代表模組本身，而exports是module的屬性。 在Node中，一個文件就是一個模組。

export 和 import

export

export就是向外導出一些東西，那麼這些東西有哪些呢？其實用一句前輩的話來說，你能想到的基本都能導出。

比如有：變數、常量、函數、類等等。

export let a  = xxx;    export const a  = xxx;    export {xx, xx, xx, xxxx}; // xx xxx 是已經定義好了的東西    export function sum(a, b) {    }    export class Person {    }

有一個特殊的是默認導出

也即：

export default 'aaa';

什麼意思，這需要和下面的import連著。

import

import 就是導入，和export對應。

import * as mode from "./xxx";    import {aa,vv,cc, ...} from "./xxx";

以上第一條就是導入所有，並重命名為mode 第二條導入aa,vv,cc

還有就是導入默認導出的！

import xxx from "./yyyy"; // 引入默認成員 即前文的export default

這就是和前文默認導出配合使用的：export default 'aaa';

還有就是以下的：

// 模組的程式碼引進來，不引入內部成員  import "./1.jpg"; // 通常需要使用webpack配合某個loader    // 非同步引入  let promise = import("./mode"); // 返回的是promise，非同步載入需要絕對路徑