轉自鏈接:https://blog.csdn.net/weixin_43638968/article/details/108871430 https://www.cnblogs.com/kreo/p/11069640.html
一、require與import的區別:
CommonJS的由來
在早期沒有模塊化思想時代碼沒有很好的編寫規範,導致很多代碼、邏輯重複、缺乏條理性且不易管理維護,這也讓很多開發者頭疼不已。隨着JavaScript 社區的發展,社區爲JavaScript制定了相應的規範,而CommonJS規範的提出得到了大家的承認和廣泛的應用,2009年CommonJS就此誕生了。
CommonJS介紹
CommonJS實現了Javascript的模塊化規範,規範了模塊的特性和各模塊之間的相互依賴性,使得代碼可以更好的編寫和維護,同時提高了代碼的複用性。定義每個文件都是一個模塊(module變量代表當前模塊)並有自己的作用域,而每個文件裏面定義的變量、函數、類,都是私有的,對於其他模塊是不可見。模塊的exports屬性是對外的接口,只有通過exports導出的屬性才能被加載識別。Node就是基於CommonJs規範實現的,因爲CommonJS規範加載模塊是同步的,而服務器中的Node模塊都直接存儲在服務器本地硬盤中的,加載起來自然比較快,可以說node項目是CommonJs規範目前的最好實踐應用。
ECMAScript 6 (簡稱ES6)
ECMAScript是(European Computer Manufacturers Association Script)的縮寫,它是由ECMA國際標準化定製的一項JavaScript腳本語言的標準化規範。ECMAScript 6 是ECMA在2015年發佈的JavaScript 的規範標準,解決 ES5 的很多先天不足並引入了模塊化思想。ES6模塊的設計思想是儘量的靜態化,使得編譯時就能確定模塊的依賴關係以及輸入和輸出的變量。
import
import是ES6中的語法標準也是用來加載模塊文件的,import函數可以讀取並執行一個JavaScript文件,然後返回該模塊的export命令指定輸出的代碼。export與export default均可用於導出常量、函數、文件、模塊,export可以有多個,export default只能有一個。
require與import的區別
1,require是CommonJS規範的模塊化語法,import是ECMAScript 6規範的模塊化語法;
2,require是運行時加載,import是編譯時加載;
3,require可以寫在代碼的任意位置,import只能寫在文件的最頂端且不可在條件語句或函數作用域中使用;
4,require通過module.exports導出的值就不能再變化,import通過export導出的值可以改變;
5;require通過module.exports導出的是exports對象,import通過export導出是指定輸出的代碼;
6,require運行時才引入模塊的屬性所以性能相對較低,import編譯時引入模塊的屬性所所以性能稍高。
二、JS ES6中export和import詳解
1.Export
模塊是獨立的文件,該文件內部的所有的變量外部都無法獲取。如果希望獲取某個變量,必須通過export輸出,
// profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958;
或者用更好的方式:用大括號指定要輸出的一組變量
// profile.js var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; export {firstName, lastName, year};
除了輸出變量,還可以輸出函數或者類(class),
export function multiply(x, y) { return x * y; };
還可以批量輸出,同樣是要包含在大括號裏,也可以用as重命名:
function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion };
Attention:
export 命令規定的是對外接口,必須與模塊內部變量建立一一對應的關係
// 寫法一 export var m = 1; // 寫法二 var m = 1; export {m}; // 寫法三 var n = 1; export {n as m}; // 報錯 export 1; // 報錯 var m = 1; export m;
報錯的寫法原因是:沒有提供對外的接口,第一種直接輸出1,第二種雖然有變量m,但還是直接輸出1,導致無法解構。
同樣的,function
和class
的輸出,也必須遵守這樣的寫法。
// 報錯 function f() {} export f; // 正確 export function f() {}; // 正確 function f() {} export {f};
And:export語句輸出的接口,都是和其對應的值是動態綁定的關係,即通過該接口取到的都是模塊內部實時的值。
位置:export模塊可以位於模塊中的任何位置,但是必須是在模塊頂層,如果在其他作用域內,會報錯。
function foo() { export default 'bar' // SyntaxError } foo()
2.Import命令
export定義了模塊的對外接口後,其他JS文件就可以通過import來加載這個模塊,
// main.js import {firstName, lastName, year} from './profile'; function setName(element) { element.textContent = firstName + ' ' + lastName; }
import命令接受一對大括號,裏面指定要從其他模塊導入的變量名,必須與被導入模塊(profile.js
)對外接口的名稱相同。
如果想重新給導入的變量一個名字,可以用as關鍵字,
import { lastName as surname } from './profile';
import後的from 可以指定需要導入模塊的路徑名,可以是絕對路徑,也可以是相對路徑, .js路徑可以省略,如果只有模塊名,不帶有路徑,需要有配置文件指定。
注意,import
命令具有提升效果,會提升到整個模塊的頭部,首先執行。(是在編譯階段執行的)
因爲import是靜態執行的,不能使用表達式和變量,即在運行時才能拿到結果的語法結構(e.g. if...else...)
3.module的整體加載
除了指定加載某個輸出值,還可以用(*)指定一個對象,所有的變量都會加載在這個對象上。
// circle.js。輸出兩個函數 export function area(radius) { return Math.PI * radius * radius; } export function circumference(radius) { return 2 * Math.PI * radius; } // main.js 加載在個模塊 import { area, circumference } from './circle'; console.log('圓面積:' + area(4)); console.log('圓周長:' + circumference(14)); //上面寫法是逐一指定要加載的方法,整體加載的寫法如下。 import * as circle from './circle'; console.log('圓面積:' + circle.area(4)); console.log('圓周長:' + circle.circumference(14));
注意,模塊整體加載所在的那個對象(上例是circle
),應該是可以靜態分析的,所以不允許運行時改變。
import * as circle from './circle'; // 下面兩行都是不允許的 circle.foo = 'hello'; circle.area = function () {};
4.export default
之前的例子中,使用import導入時,都需要知道模塊中所要加載的變量名或函數名,用戶可能不想閱讀源碼,只想直接使用接口,就可以用export default命令,爲模塊指定輸出
// export-default.js export default function () { console.log('foo'); }
其他模塊加載該模塊時,import
命令可以爲該匿名函數指定任意名字。
// import-default.js import customName from './export-default'; customName(); // 'foo'
export default也可以用於非匿名函數前。
下面比較一下默認輸出和正常輸出。
// 第一組 export default function crc32() { // 輸出 // ... } import crc32 from 'crc32'; // 輸入 // 第二組 export function crc32() { // 輸出 // ... }; import {crc32} from 'crc32'; // 輸入
可以看出,使用export default時,import語句不用使用大括號。
*******import
和export
命令只能在模塊的頂層,不能在代碼塊之中。否則會語法報錯。
這樣的設計,可以提高編譯器效率,但是沒有辦法實現運行時加載。
因爲require是運行時加載,所以import命令沒有辦法代替require的動態加載功能。
所以引入了import()函數。完成動態加載。
import(specifier)
specifier用來指定所要加載的模塊的位置。import能接受什麼參數,import()可以接受同樣的參數。
import()返回一個Promise對象。
const main = document.querySelector('main'); import(`./section-modules/${someVariable}.js`) .then(module => { module.loadPageInto(main); }) .catch(err => { main.textContent = err.message; });
5.import()函數適用場合
1)按需加載:
button.addEventListener('click', event => { import('./dialogBox.js') .then(dialogBox => { dialogBox.open(); }) .catch(error => { /* Error handling */ }) });
above: import模塊在事件監聽函數中,只有用戶點擊了按鈕,纔會加載這個模塊。
2)條件加載:
import()可以放在if...else語句中,實現條件加載。
if (condition) { import('moduleA').then(...); } else { import('moduleB').then(...); }
三、Vue中驗證es6 import、export