JavaScript中require和import的區別詳解

ES6標準釋出後，module成為標準，標準的使用是以export指令匯出介面，以import引入模組，但是在我們一貫的node模組中，我們採用的是CommonJS規範，使用require引入模組，使用module.exports匯出介面。

node程式設計中最重要的思想之一就是模組，而正是這個思想，讓JavaScript的大規模工程成為可能。模組化程式設計在js界流行，也是基於此，隨後在瀏覽器端，requirejs和seajs之類的工具包也出現了，可以說在對應規範下，require統治了ES6之前的所有模組化程式設計，即使現在，在ES6 module被完全實現之前，還是這樣。

node的module遵循CommonJS規範，requirejs遵循AMD，seajs遵循CMD，雖各有不同，但總之還是希望保持較為統一的程式碼風格。

AMD 與 CMD 與 Common.js的區別有哪些？

前端模組規範有三種：CommonJs,AMD和CMD。
CommonJs用在伺服器端，AMD和CMD用在瀏覽器環境
AMD 是 RequireJS 在推廣過程中對模組定義的規範化產出。
CMD 是 SeaJS 在推廣過程中對模組定義的規範化產出。
AMD:提前執行（非同步載入：依賴先執行）+延遲執行
CMD:延遲執行（執行到需載入，根據順序執行）

一、CommonJS

CommonJS就是為JS的表現來制定規範，因為js沒有模組的功能所以CommonJS應運而生，它希望js可以在任何地方執行，不只是瀏覽器中。

CommonJS定義的模組分為:{模組參照(require)} {模組定義(exports)} {模組標識(module)}

1、定義模組

根據CommonJS規範，一個單獨的檔案就是一個模組。每一個模組都是一個單獨的作用域，也就是說，在該模組內部定義的變數，無法被其他模組讀取，除非定義為global物件的屬性

2、模組輸出：

模組只有一個出口，module.exports物件，我們需要把模組希望輸出的內容放入該物件

3、載入模組：

載入模組使用require方法，該方法讀取一個檔案並執行，返回檔案內部的module.exports物件
require()用來引入外部模組；exports物件用於匯出當前模組的方法或變數，唯一的匯出口；module物件就代表模組本身。

4、模組module.exports與範例化方法

在nodejs中，提供了exports 和 require 兩個物件，其中 exports 是模組公開的介面，require 用於從外部獲取一個模組的介面，即所獲取模組的 exports 物件。而在exports丟擲的介面中，如果你希望你的模組就想為一個特別的物件型別，請使用module.exports；如果希望模組成為一個傳統的模組範例，請使用exports.xx方法；module.exports才是真正的介面，exports只不過是它的一個輔助工具。最終返回給呼叫的是module.exports而不是exports。下面看程式碼；
首先來看module.exports，新建一個hello.js，程式碼如下：　

module.exports=function(name,age,money){
        this.name=name;
        this.age=age;
        this.money=money;
        this.say=function(){
                console.log('我的名字叫：'+this.name+'，我今年'+this.age+'歲，月薪為：'+this.money+'元；')
        }
};

可以看到，module.exports被賦予了一個建構函式；再新建一個main.js，其中引入hello.js這個模組，把exports方法接受進來，main.js程式碼如下：

var Hello=require('./hello');
var hello=new Hello('jone','28','10000')
hello.say();

進入node環境，執行main.js，可以看到，已經列印出來：我的名字叫：jone，我今年28歲，月薪為：10元；
而在hello.js中，我們是賦予了exports一個函數 ，當然，也可以採用匿名函數的方式；見程式碼：

function hello(name,age,money){
        this.name=name;
        this.age=age;
        this.money=money;
        this.say=function(){
                console.log('我的名字叫：'+this.name+'，我今年'+this.age+'歲，月薪為：'+this.money+'元；')
        }
}
module.exports=hello;

以上modle.exports，這個模組很明顯是一個特別的物件模型；那如果採用物件範例的方法該如何實現呢？其實也很簡單，只需要給exports物件負值一個新的方法即可；見下面程式碼：

function hello(name,age,money){
        this.name=name;
        this.age=age;
        this.money=money;
        this.say=function(){
                console.log('我的名字叫：'+this.name+'，我今年'+this.age+'歲，月薪為：'+this.money+'元；')
        }
}
var Hello=new hello('jone','28','10000');
exports.add=Hello

在hello.js中，依然是一個建構函式，宣告了一個變數Hello，然後再把Hello賦值給exports自定義的add方法；那麼在main.js中，由於add已經是exports的一個自定義的實體方法了，因此我們可以直接這麼呼叫它：Hello.add.say()；見程式碼：

var Hello=require('./hello');
Hello.add.say()

進行node環境，執行main.js，可以看到，結果和上面一樣，都會輸出：我的名字叫：jone，我今年28歲，月薪為：10元；

二、AMD

AMD是"Asynchronous Module Definition"的縮寫，意思就是"非同步模組定義"。由於不是JavaScript原生支援，使用AMD規範進行頁面開發需要用到對應的庫函數，也就是大名鼎鼎RequireJS，實際上AMD 是 RequireJS 在推廣過程中對模組定義的規範化的產出

它採用非同步方式載入模組，模組的載入不影響它後面語句的執行。所有依賴這個模組的語句，都定義在一個回撥函數中，等到載入完成之後，這個回撥函數才會執行。

RequireJS主要解決兩個問題

多個js檔案可能有依賴關係，被依賴的檔案需要早於依賴它的檔案載入到瀏覽器
js載入的時候瀏覽器會停止頁面渲染，載入檔案越多，頁面失去響應時間越長

三、CMD

CMD 即Common Module Definition通用模組定義，CMD規範是國內發展出來的，就像AMD有個requireJS，CMD有個瀏覽器的實現SeaJS，SeaJS要解決的問題和requireJS一樣，只不過在模組定義方式和模組載入（可以說執行、解析）時機上有所不同

語法

Sea.js 推崇一個模組一個檔案，遵循統一的寫法

因為CMD推崇

一個檔案一個模組，所以經常就用檔名作為模組id

CMD推崇依賴就近，所以一般不在define的引數中寫依賴，在factory中寫

factory是一個函數，有三個引數，function(require, exports, module)

require 是一個方法，接受 模組標識 作為唯一引數，用來獲取其他模組提供的介面：require(id)

exports 是一個物件，用來向外提供模組介面

module 是一個物件，上面儲存了與當前模組相關聯的一些屬性和方法

 JS 中的require 和 import 區別

1.ES6 模組的設計思想，是儘量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。

Require是CommonJS的語法，CommonJS的模組是物件，輸入時必須查詢物件屬性。

// CommonJS模組
let { stat, exists, readFile } = require('fs');

// 等同於
let _fs = require('fs');
let stat = _fs.stat;
let exists = _fs.exists;
let readfile = _fs.readfile;

above：整體載入fs模組（即載入fs所有方法），生成一個物件"_fs"，然後再從這個物件上讀取三個方法，這叫“執行時載入”，因為只有執行時才能得到這個物件，不能在編譯時做到靜態化。

ES6模組不是物件，而是通過export命令顯示指定輸出程式碼，再通過import輸入。

import { stat, exists, readFile } from 'fs';

above：從fs載入“stat, exists, readFile” 三個方法，其他方法不載入，

2.ES6模組預設使用嚴格模式，無論是否宣告“use strict” 

ES6 模組之中，頂層的this指向undefined，即不應該在頂層程式碼使用this。

Module 主要由兩個命令組成，import和export，export用於規定模組的對外介面，import命令用於輸入其他模組提供的功能

3.Export 

模組是獨立的檔案，該檔案內部的所有的變數外部都無法獲取。如果希望獲取某個變數，必須通過export輸出，

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

或者用更好的方式：用大括號指定要輸出的一組變數

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

除了輸出變數，還可以輸出函數或者類（class），

export function multiply(x, y) {
  return x * y;
};

還可以批次輸出，同樣是要包含在大括號裡，也可以用as重新命名：

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Attention:

export 命令規定的是對外介面，必須與模組內部變數建立一一對應的關係

// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};


// 報錯
export 1;

// 報錯
var m = 1;
export m;

報錯的寫法原因是：沒有提供對外的介面，第一種直接輸出1，第二種雖然有變數m，但還是直接輸出1，導致無法解構。

同樣的，function和class的輸出，也必須遵守這樣的寫法。

// 報錯
function f() {}
export f;

// 正確
export function f() {};

// 正確
function f() {}
export {f};

And：export語句輸出的介面，都是和其對應的值是動態繫結的關係，即通過該介面取到的都是模組內部實時的值。

位置：export模組可以位於模組中的任何位置，但是必須是在模組頂層，如果在其他作用域內，會報錯。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

4.Import命令

export定義了模組的對外介面後，其他JS檔案就可以通過import來載入這個模組，

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import命令接受一對大括號，裡面指定要從其他模組匯入的變數名，必須與被匯入模組（profile.js）對外介面的名稱相同。

如果想重新給匯入的變數一個名字，可以用as關鍵字，

import { lastName as surname } from './profile';

import後的from 可以指定需要匯入模組的路徑名，可以是絕對路徑，也可以是相對路徑， .js路徑可以省略，如果只有模組名，不帶有路徑，需要有組態檔指定。

注意，import命令具有提升效果，會提升到整個模組的頭部，首先執行。（是在編譯階段執行的）

因為import是靜態執行的，不能使用表示式和變數，即在執行時才能拿到結果的語法結構（e.g. if...else...）

5.module的整體載入

除了指定載入某個輸出值，還可以用（*）指定一個物件，所有的變數都會載入在這個物件上。

// circle.js。輸出兩個函數

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}


// main.js 載入在個模組

import { area, circumference } from './circle';

console.log('圓面積：' + area(4));
console.log('圓周長：' + circumference(14));

//上面寫法是逐一指定要載入的方法，整體載入的寫法如下。
import * as circle from './circle';

console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));

注意，模組整體載入所在的那個物件（上例是circle），應該是可以靜態分析的，所以不允許執行時改變。

import * as circle from './circle';

// 下面兩行都是不允許的
circle.foo = 'hello';
circle.area = function () {};

6.export default

之前的例子中，使用import匯入時，都需要知道模組中所要載入的變數名或函數名，使用者可能不想閱讀原始碼，只想直接使用介面，就可以用export default命令，為模組指定輸出

// export-default.js
export default function () {
  console.log('foo');
}

其他模組載入該模組時，import命令可以為該匿名函數指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

export default也可以用於非匿名函數前。

下面比較一下預設輸出和正常輸出。

// 第一組
export default function crc32() { // 輸出
  // ...
}

import crc32 from 'crc32'; // 輸入

// 第二組
export function crc32() { // 輸出
  // ...
};

import {crc32} from 'crc32'; // 輸入

可以看出，使用export default時，import語句不用使用大括號。

import和export命令只能在模組的頂層，不能在程式碼塊之中。否則會語法報錯。

這樣的設計，可以提高編譯器效率，但是沒有辦法實現執行時載入。

因為require是執行時載入，所以import命令沒有辦法代替require的動態載入功能。

所以引入了import()函數。完成動態載入。

import(specifier)

specifier用來指定所要載入的模組的位置。import能接受什麼引數，import()可以接受同樣的引數。

import()返回一個Promise物件。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。