比較Javascript中import和require的區別

本篇文章主要介紹了Javascript(es2016) import和require用法和區別詳解，具有一定的參考價值，有興趣的可以了解下

本文介紹了Javascript(es2016) import和require用法和差異詳解，分享給大家，如下：

寫個簡單js文件，假設名字為：lib.js 。 假設內容如下：

export const sqrt = Math.sqrt;
export function square(x) {
 return x * x;
}
export function diag(x, y) {
 return sqrt(square(x) + square(y));
}

這樣就可以在其他地方對lib中定義的屬性和方法進行引用，引用方法有兩種，也就時import和require。

//方法一
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));
//方法儿
import * as lib from 'lib';
square = lib.square;

也可以設定預設的匯出訊息，就需要在崽lib.js中定義 export default {}。 default後面可以接一個參數，也可以接一個陣列。書寫方法為：

 //------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

通常比較習慣用第一種。然後用import就可以得到這個陣列或則參數。但是import只能用於靜態導入，就是必須在文件開始的時候，在最上層就寫好。而require就可以實作動態載入。

載入方式	規格	#指令	特點
#執行階段載入	CommonJS/AMD	require	社群方案，提供了伺服器/瀏覽器的模組載入方案。非語言層面的標準。只能在執行時確定模組的依賴關係及輸入/輸出的變量，無法進行靜態最佳化。
編譯時載入	ESMAScript6+	#import	語言規格層面支援模組功能。支援編譯時靜態分析，便於JS引入宏和型別檢驗。動態綁定。

const incrementCounter = function ({dispatch,state}){
 dispatch(‘INCREMENT‘)
}
export default {
 incrementCounter
}
//require
let myAction = require(‘xxxxx‘);
myAction.default.incrementCounter()

以上是比較Javascript中import和require的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！