JS中Require與Import區(qū)別是什么

本篇內(nèi)容主要講解“JS中Require與Import區(qū)別是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JS中Require與Import區(qū)別是什么”吧!

require 和 import對比區(qū)別

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

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

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

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

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

const myModule = require('myModule');

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

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

再看看import, 如果想導入整個模塊:

import * as myModule from 'myModule';

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

import {myFunction} from 'myModule';

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

import()

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

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

require()

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

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

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

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

到此，相信大家對“JS中Require與Import區(qū)別是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！