import和require詳解

一、import和require的基本概念

在JavaScript中，我們需要在代碼中使用其他代碼，最常見的方式就是使用import和require。

import是ES6中的概念，用於引入其他文件中導出的模塊，在瀏覽器端需要使用打包工具（如webpack）才能使用import。require是Node.js中的概念，用於引入其他文件中導出的模塊，Node.js本身就支持使用require。

下面是一段使用import引入模塊的代碼，該模塊導出了一個函數add：

// math.js
export function add(a, b) {
  return a + b;
}

// index.js
import {add} from "./math.js";
console.log(add(1, 2));  // 輸出3

下面是一段使用require引入模塊的代碼，該模塊導出了一個函數add：

// math.js
module.exports = {
  add: function(a, b){
    return a + b;
  }
};

// index.js
const math = require('./math.js');
console.log(math.add(1, 2));  // 輸出3

二、import和require的區別

import和require的區別主要有以下幾點：

1、import是ES6中的語法，require是Node.js中的語法；

2、import支持靜態優化，可以在編譯時靜態解析，不需要執行代碼就可以獲得引用的模塊，而require則是動態工作，必須在運行時才能查找並載入模塊；

3、import導入的模塊是只讀的，不能被修改，而require導入的模塊是可修改的；

4、import支持引用的模塊是ES6的標準模塊，而require支持的模塊類型更加豐富；

5、import引用的模塊路徑必須是字元串常量，而require引用的模塊路徑可以是變數或者表達式等。

三、import和require的用法實例

下面分別給出import和require的具體使用實例：

1、import的使用實例

index.js文件引入math.js中的add函數：

// math.js
export function add(a, b) {
  return a + b;
}

// index.js
import {add} from "./math.js";
console.log(add(1, 2));  // 輸出3

2、require的使用實例

index.js文件引入math.js中的add函數：

// math.js
module.exports = {
  add: function(a, b){
    return a + b;
  }
};

// index.js
const math = require('./math.js');
console.log(math.add(1, 2));  // 輸出3

3、使用import導入帶有默認導出的模塊

mod.js文件中有一個默認導出的函數：

export default function(x) {
  return x * x;
}

index.js文件中通過import導入該模塊，注意，在導入默認導出的模塊時，不需要寫花括弧，直接寫導出變數名稱即可：

import Mod from './mod.js';
console.log(Mod(3));  // 輸出9

4、使用require導入帶有默認導出的模塊

mod.js文件中有一個默認導出的函數：

module.exports = function(x) {
  return x * x;
}

index.js文件中通過require導入該模塊，注意，在導入默認導出的模塊時，不需要寫花括弧，直接寫導出變數名稱即可：

const Mod = require('./mod.js');
console.log(Mod(3));  // 輸出9

5、通過require實現模塊代碼的動態載入

下面是一個通過require實現模塊代碼的動態載入的例子，index.js中實現了在程序執行時再動態載入模塊：

// index.js
function loadModule(filename) {
  const module = {
    exports: {}
  };
  require(filename)(module, module.exports);
  return module.exports;
}

console.log(loadModule('./math.js').add(1, 2));  // 輸出3

四、結語

import和require都是非常重要的JavaScript模塊引用關鍵詞，import是ES6中的概念，require是Node.js中的概念，兩者在實現及應用方面都有所區別，但在使用上又具有相似性，在實際應用中需要因情況而定。