require 和 import對比區(qū)別

在 JavaScript 中，require 和 import 都是用來導(dǎo)入模塊的。require 是 Node.js內(nèi)置的方法，而 import 是一個 ES6 標(biāo)準(zhǔn)的關(guān)鍵字。

require是同步(synchronous)的，會阻塞腳本的執(zhí)行，import是異步(asynchronous)的，加載過程不會阻塞腳本的執(zhí)行。

其實(shí)他們最大的區(qū)別，require只能對整個模塊進(jìn)行加載，而import可以選擇性的加載被拆分導(dǎo)出(individual export)的模塊。

拆分導(dǎo)出(individual export) 可以是 value, funcition, object

舉個例子，如果我們有一個模塊叫 myModule, 你可以通過 require 導(dǎo)入整個模塊:

const myModule = require('myModule');

如果想使用其中的方法或值，需要使用 . 符號去調(diào)用:

const myFunction = require('myModule').myFunction;

再看看import, 如果想導(dǎo)入整個模塊:

import * as myModule from 'myModule';

如果想導(dǎo)入指定內(nèi)容:

import {myFunction} from 'myModule';

相比較而言，import更靈活，也是在require之后ES推出的關(guān)鍵字，理論上import會全面的取替require。不過在Node.js還是會支持require，可以根據(jù)需求去選擇兩種語法。

import()

像前面說的，最大的優(yōu)勢是可以不導(dǎo)入整個模塊，而是按需導(dǎo)入。減少代碼量的同時，還增加了可讀性，下面是具體的例子:

// moduleA.js
export const x = 1;
export const y = 2;
// moduleB.js
import { x, y } from './moduleA';
console.log(x); // outputs 1
console.log(y); // outputs 2

Webpack有內(nèi)置的緩存機(jī)制來緩存通過import關(guān)鍵字加載的模塊。Rollup和其他模塊也都有類似的功能。

require()

在Node.js的上下文中，require() 是一個內(nèi)置的方法，會讀取一個JS文件，并執(zhí)行，然后返回一個導(dǎo)出的對象:

// app.js
const _ = require('lodash');
const arr = [1, 2, 3];
const sum = _.sum(arr);
console.log(sum); // outputs 6

需要注意??的是 require() 是同步代碼，在模塊加載完成之前會阻塞代碼的執(zhí)行。

還有一點(diǎn)，require() 可以利用緩存讓模塊只加載一次，即便很多文件都加載了這個模塊。意思是說當(dāng)用require加載了一個模塊，Node.js會去檢查這個模塊是否已經(jīng)被加載和緩存，如果是的話，就直接返回緩存的內(nèi)容。

英文原文鏈接(作者: Alex Ivanovs)

以上就是JS中Require與Import 區(qū)別對比分析的詳細(xì)內(nèi)容，更多關(guān)于JS Require對比Import區(qū)別的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論