require和import的區別


1、require 和 import 的區別

node編程中最重要的思想就是模塊化,import 和 require 都是被模塊化所使用。在 ES6 當中,用 export 導出接口,用 import 引入模塊。但是在 node 模塊中,使用module.exports導出接口,使用 require 引入模塊。

兩者的區別如下:

遵循規范:

  • require 是 AMD 規范引入方式
  • import是 ES6 的一個語法標准,如果要兼容瀏覽器的話必須轉化成 ES5 的語法

調用時間:

  • require是運行時調用,所以require理論上可以運用在代碼的任何地方
  • import是編譯時調用,所以必須放在文件開頭

本質:

  • require 是賦值過程。module.exports后面的內容是什么,require的結果就是什么,比如對象、數字、字符串、函數等,然后再把require的結果賦值給某個變量,它相當於module.exports的傳送門
  • import 是解構過程,但是目前所有的引擎都還沒有實現import,我們在node中使用babel支持ES6,也僅僅是將ES6轉碼為ES5再執行,import語法會被轉碼為require

import 雖然是 es6 中的語法,但就目前來說,所有的引擎都還沒有實現import。

我們在 node 中使用 babel 支持ES6(在 node 當中,比如 node.js 代碼,也不能直接使用 import 來導入,必須使用 babel 支持才能使用 import 語法),實際上也是將 ES6 轉碼為 ES5 再執行,import 語法實際上會被轉碼為 require。這也是為什么在模塊導出時使 module.exports,在引入模塊時使用 import 仍然起效,因為本質上,import 會被轉碼為 require 去執行。

 

2、require() | exports 的用法

通過require引入基礎數據類型時,屬於復制該變量。通過require引入復雜數據類型時,屬於淺拷貝該對象。

2.1、導入模塊 require() 的用法

require() 函數用於在當前模塊中加載別的模塊。在函數內寫入模塊的路徑即可(相對路徑和絕對路徑都行)

var foo1 = require('./foo');   // .js 擴展名可忽略
var foo2 = require('./foo.js');

var data = require('./data.json');  //不僅僅是 JS 文件,也可以是其他文件

require 相當於module.exports的傳送門,module.exports 后面的內容是什么,require 的結果就是什么,比如對象、數字、字符串、函數等,然后再把 require 的結果賦值給某個變量。

 

require理論上可以運用在代碼的任何地方,甚至不需要賦值給某個變量之后再使用,比如:

require('./a')();                //假設a模塊是一個函數,此時將立即執行a模塊函數
var data = require('./a').data;  //假設a模塊導出的是一個對象
var a = require('./a')[0];      //假設a模塊導出的是一個數組

 

2.2、輸出接口 exports 的用法

exports 對象是當前模塊的導出對象,用於導出該模塊的方法或屬性。別的模塊通過 require() 函數引用別的模塊時實際上得到的就是別的模塊的 exports 對象:

exports.hello = function () {
    console.log('Hello World!');
};

上面代碼實際上就是導出了一個對象,通過該對象的 hello 屬性可以拿到該方法:

var obj = require('./index2.js')
obj.hello();    //輸出 Hello Word!
    

 

導出模塊的方法或者屬性可以直接用 exports,也可以使用 module.exports 來進行導出。通過module對象可以訪問到當前模塊的一些相關信息,但最多的用途是替換當前模塊的導出對象。

module.exports = function () {
    console.log('Hello World!');
};

實際上,exports是module.exports的一個引用,module.exports 指向的就是 exports。

console.log(exports === module.exports);   //輸出true

 

3、import | export 的用法

 import 是編譯時運行的(require是運行時的),它必須放在文件開頭,而且使用格式也是確定的,不容置疑。它不會將整個模塊運行后賦值給某個變量,而是只選擇import的接口進行編譯,這樣在性能上比require好很多。

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'

具體可參考:https://www.cnblogs.com/wenxuehai/p/11312851.html#_label1_1

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM