require 和 import 詳解

前言

JS模塊化編程是前端小夥伴們必不可少的知識，下面妹子將於自認爲比較清晰的方式列舉出來。

1 require

特色：

• 1.運行時加載
• 2.拷貝到本頁面
• 3.所有引入

1.1 CommonJS

Node.js就是用CommonJS思想。
在CommonJS中，有一個全局性方法require()，用於加載模塊。

1.1.1 用法

var math = require('math');
math.add(2, 3);

var math = require('math');
const Math = new math(2, 3)
Math.add();

1.1.2 模塊寫法

模塊寫法分exports和module.exports。

exports.add = (x,y) => x+y;

module.exports = class math {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return  x+y;
  }
};

1.2 AMD

require.js和cujo.js就是用AMD思想。

AMD是」Asynchronous Module Definition」的縮寫，意思就是」異步模塊定義」。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。全部依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成以後，這個回調函數纔會運行。

第二行math.add(2, 3)，在第一行require(‘math’)以後運行，所以必須等math.js加載完成。也就是說，若是加載時間很長，整個應用就會停在那裏等。
這對服務器端不是一個問題，由於全部的模塊都存放在本地硬盤，能夠同步加載完成，等待時間就是硬盤的讀取時間。可是，對於瀏覽器，這倒是一個大問題，由於模塊都放在服務器端，等待時間取決於網速的快慢，可能要等很長時間，瀏覽器處於」假死」狀態。
所以，瀏覽器端的模塊，不能採用」同步加載」（synchronous），只能採用」異步加載」（asynchronous）。這就是AMD規範誕生的背景。

1.2.1 用法

//require([module], callback);
require(['math'], function (math) {
　math.add(2, 3);
});

1.2.1 模塊寫法

define(id?, dependencies?, factory)

• id:字符串，模塊名稱(可選)
• dependencies: 是咱們要載入的依賴模塊(可選)，使用相對路徑。,注意是數組格式
• factory: 工廠方法，返回一個模塊函數

一個模塊不依賴其餘模塊寫法

// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

模塊還依賴其餘模塊

define(['a','b'], function(a,b){
　　　　function foo(){
　　　　　　a.doSomething();// 依賴前置，提早執行
　　　　　　b.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

當require()函數加載上面這個模塊的時候，就會先加載Lib.js文件。

1.3 CMD

sea.js就是用CMD思想。
CMD是"Common Module Definition"的縮寫。相似於requirejs，可是seajs是依賴就近，延遲執行，requirejs是依賴前置，提早執行。

1.3.1 用法

seajs.config({
  alias: {
    'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'
  }
});

seajs.use(['./hello', 'jquery'], function(hello, $) {
  $('#beautiful-sea').click(hello.sayHello);
});

1.3.1 模塊寫法

define(function(require, exports, module) {
  var $ = require('jquery');

  exports.sayHello = function() {
    $('#hello').toggle('slow');
  };
   var b = require("b");
   b.doSomething();    // 依賴就近，延遲執行
});

2 import

特色：

• 1.編譯時加載
• 2.只引用定義
• 3.按需加載

可對比 require的特色，發現 import完勝 require,推薦用 import取代 require

2.1.1 用法

import有兩種模塊導入方式：命名式導入（名稱導入）和默認導入（定義式導入），以及 import()。

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";

• name－從將要導入模塊中收到的導出值的名稱
• member, memberN－從導出模塊，導入指定名稱的多個成員
• defaultMember－從導出模塊，導入默認導出成員
• alias, aliasN－別名，對指定導入成員進行的重命名
• module-name－要導入的模塊。是一個文件名
• as－重命名導入成員名稱（「標識符」）
• from－從已經存在的模塊、腳本文件等導入

import()

import()返回一個 Promise 對象。

// 報錯
if (x === 2) {
  import MyModual from './myModual';
}

引擎處理import語句是在編譯時，這時不會去分析或執行if語句，因此import語句放在if代碼塊之中毫無心義，所以會報句法錯誤，而不是執行時錯誤。沒辦法像require樣根據條件動態加載。
因而提案引入import()函數，編譯時分析if語句,完成動態加載。

if(x === 2){
  import('myModual').then((MyModual)=>{
    new MyModual();
  })
}

2.2.1 模塊寫法

export有兩種模塊導出方式：命名式導出（名稱導出）和默認導出（定義式導出），命名式導出每一個模塊能夠多個，而默認導出每一個模塊僅一個。

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
 
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
 
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;

• name1… nameN－導出的「標識符」。導出後，能夠經過這個「標識符」在另外一個模塊中使用* import引用
• default－設置模塊的默認導出。設置後import不經過「標識符」而直接引用默認導入
• －繼承模塊並導出繼承模塊全部的方法和屬性
• as－重命名導出「標識符」
• from－從已經存在的模塊、腳本文件…導出

參考資料

• https://raoenhui.github.io/es6/2018/12/06/import
• http://es6.ruanyifeng.com/#docs/module#import
• http://www.javashuo.com/article/p-nqwcfkgh-cs.html

Happy coding .. :)

來源：http://www.javashuo.com/article/p-fmvekbkx-hx.html