import和require的區別

Leon Aries發表於2018-09-27

node程式設計中最重要的思想就是模組化,importrequire都是被模組化所使用。

遵循規範
  • require 是 AMD規範引入方式
  • import是es6的一個語法標準,如果要相容瀏覽器的話必須轉化成es5的語法
呼叫時間
  • require是執行時呼叫,所以require理論上可以運用在程式碼的任何地方
  • import是編譯時呼叫,並不一定需要寫在開頭,import命令具有提升效果,會提升到整個模組的頭部
本質
  • require是賦值過程,其實require的結果就是物件、數字、字串、函式等,再把require的結果賦值給某個變數
  • import是解構過程,但是目前所有的引擎都還沒有實現import,我們在node中使用babel支援ES6,也僅僅是將ES6轉碼為ES5再執行,import語法會被轉碼為require

複製程式碼

require / exports :
遵循 CommonJS/AMD,只能在執行時確定模組的依賴關係及輸入/輸出的變數,無法進行靜態優化。
用法只有以下三種簡單的寫法:

const fs = require('fs')
exports.fs = fs
module.exports = fs
複製程式碼

import / export:
遵循 ES6 規範,支援編譯時靜態分析,便於JS引入巨集和型別檢驗。動態繫結。
寫法就比較多種多樣:

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

複製程式碼
  1. 通過require引入基礎資料型別時,屬於複製該變數。
  2. 通過require引入複雜資料型別時,資料淺拷貝該物件。
  3. 出現模組之間的迴圈引用時,會輸出已經執行的模組,而未執行的模組不輸出(比較複雜)
  4. CommonJS模組預設export的是一個物件,即使匯出的是基礎資料型別
載入方式規範命令特點
執行時載入CommonJS/AMDrequire社群方案,提供了伺服器/瀏覽器的模組載入方案。非語言層面的標準。只能在執行時確定模組的依賴關係及輸入/輸出的變數,無法進行靜態優化。
編譯時載入ESMAScript6+import語言規格層面支援模組功能。支援編譯時靜態分析,便於JS引入巨集和型別檢驗。動態繫結


import和require的區別


相關文章