JS中Require與Import區別是什么

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

require 和 import對比區別

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

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

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

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

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

const myModule = require('myModule');

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

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

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

import * as myModule from 'myModule';

如果想導入指定內容:

import {myFunction} from 'myModule';

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

import()

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

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

require()

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

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

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

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

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