require 和 import對(duì)比區(qū)別

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

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

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

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

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

const myModule = require('myModule');

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

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

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

import * as myModule from 'myModule';

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

import {myFunction} from 'myModule';

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

import()

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

// 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ī)制來(lái)緩存通過(guò)import關(guān)鍵字加載的模塊。Rollup和其他模塊也都有類似的功能。

require()

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

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

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

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

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

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

最新評(píng)論