import, export，export default，exports - 導(dǎo)入導(dǎo)出方法總結(jié)

1.Export

注意：在一個(gè)模塊中，export 可以向外暴露多個(gè)
注意；使用export導(dǎo)出的成員，必須嚴(yán)格按照導(dǎo)出時(shí)候的名稱(chēng)，不能自定義，來(lái)使用 {} 按需接收
注意；使用export導(dǎo)出的成員，如果要換個(gè)名稱(chēng)，可以使用 as 起別名

模塊是獨(dú)立的文件，該文件內(nèi)部的所有的變量外部都無(wú)法獲取。如果希望獲取某個(gè)變量，必須通過(guò)export輸出，

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

或者用更好的方式：用大括號(hào)指定要輸出的一組變量

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

除了輸出變量，還可以輸出函數(shù)或者類(lèi)（class），

export function multiply(x, y) {
  return x * y;
};

還可以批量輸出，同樣是要包含在大括號(hào)里，也可以用as重命名：

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Attention:

export 命令規(guī)定的是對(duì)外接口，必須與模塊內(nèi)部變量建立一一對(duì)應(yīng)的關(guān)系

// 寫(xiě)法一
export var m = 1;

// 寫(xiě)法二
var m = 1;
export {m};

// 寫(xiě)法三
var n = 1;
export {n as m};


// 報(bào)錯(cuò)
export 1;

// 報(bào)錯(cuò)
var m = 1;
export m;

報(bào)錯(cuò)的寫(xiě)法原因是：沒(méi)有提供對(duì)外的接口，第一種直接輸出1，第二種雖然有變量m，但還是直接輸出1，導(dǎo)致無(wú)法解構(gòu)。

同樣的，function和class的輸出，也必須遵守這樣的寫(xiě)法。

// 報(bào)錯(cuò)
function f() {}
export f;

// 正確
export function f() {};

// 正確
function f() {}
export {f};

And：export語(yǔ)句輸出的接口，都是和其對(duì)應(yīng)的值是動(dòng)態(tài)綁定的關(guān)系，即通過(guò)該接口取到的都是模塊內(nèi)部實(shí)時(shí)的值。

位置：export模塊可以位于模塊中的任何位置，但是必須是在模塊頂層，如果在其他作用域內(nèi)，會(huì)報(bào)錯(cuò)。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

2.Import命令

export定義了模塊的對(duì)外接口后，其他JS文件就可以通過(guò)import來(lái)加載這個(gè)模塊，

// main.js
import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import命令接受一對(duì)大括號(hào)，里面指定要從其他模塊導(dǎo)入的變量名，必須與被導(dǎo)入模塊（profile.js）對(duì)外接口的名稱(chēng)相同。

如果想重新給導(dǎo)入的變量一個(gè)名字，可以用as關(guān)鍵字，

import { lastName as surname } from './profile';

import后的from 可以指定需要導(dǎo)入模塊的路徑名，可以是絕對(duì)路徑，也可以是相對(duì)路徑， .js路徑可以省略，如果只有模塊名，不帶有路徑，需要有配置文件指定。

注意，import命令具有提升效果，會(huì)提升到整個(gè)模塊的頭部，首先執(zhí)行。（是在編譯階段執(zhí)行的）

因?yàn)閕mport是靜態(tài)執(zhí)行的，不能使用表達(dá)式和變量，即在運(yùn)行時(shí)才能拿到結(jié)果的語(yǔ)法結(jié)構(gòu)（e.g. if...else...）

3.module的整體加載

除了指定加載某個(gè)輸出值，還可以用（*）指定一個(gè)對(duì)象，所有的變量都會(huì)加載在這個(gè)對(duì)象上。

// circle.js。輸出兩個(gè)函數(shù)

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}


// main.js 加載在個(gè)模塊

import { area, circumference } from './circle';

console.log('圓面積：' + area(4));
console.log('圓周長(zhǎng)：' + circumference(14));

//上面寫(xiě)法是逐一指定要加載的方法，整體加載的寫(xiě)法如下。
import * as circle from './circle';

console.log('圓面積：' + circle.area(4));
console.log('圓周長(zhǎng)：' + circle.circumference(14));

注意，模塊整體加載所在的那個(gè)對(duì)象（上例是circle），應(yīng)該是可以靜態(tài)分析的，所以不允許運(yùn)行時(shí)改變。

import * as circle from './circle';

// 下面兩行都是不允許的
circle.foo = 'hello';
circle.area = function () {};

4.export default

特點(diǎn)：

export.default向外暴露的成員，可以使用任意變量來(lái)接收
在一個(gè)模塊中，export default只允許向外暴露一次
在一個(gè)模塊中，可以同時(shí)使用export default 和export 向外暴露成員

之前的例子中，使用import導(dǎo)入時(shí)，都需要知道模塊中所要加載的變量名或函數(shù)名，用戶可能不想閱讀源碼，只想直接使用接口，就可以用export default命令，為模塊指定輸出

// export-default.js
export default function () {
  console.log('foo');
}

其他模塊加載該模塊時(shí)，import命令可以為該匿名函數(shù)指定任意名字。

// import-default.js
import customName from './export-default';
customName(); // 'foo'

導(dǎo)出多個(gè)

//導(dǎo)出
let a = 100;
let b = {};
let c = ()=>{}

export default {
  a,b,c
}

//導(dǎo)入
import module from './file';
console.log( module.a, module.b, module.c );

export和export.default混合導(dǎo)出

//導(dǎo)出
const author = "不要禿頭啊";

export const age = "18";
export default author;

//導(dǎo)入 default參數(shù)名要一致 并且要在大扣號(hào)前面
import author, { age } from "./name";
//或者 可以對(duì)默認(rèn)參數(shù)重命名
//import { default as author, age} from "./name";
console.log(author, "author");
console.log(age, "age");

export default也可以用于非匿名函數(shù)前。

下面比較一下默認(rèn)輸出和正常輸出。

// 第一組
export default function crc32() { // 輸出
  // ...
}

import crc32 from 'crc32'; // 輸入

// 第二組
export function crc32() { // 輸出
  // ...
};

import {crc32} from 'crc32'; // 輸入

可以看出，使用export default時(shí)，import語(yǔ)句不用使用大括號(hào)。

*******import和export命令只能在模塊的頂層，不能在代碼塊之中。否則會(huì)語(yǔ)法報(bào)錯(cuò)。

這樣的設(shè)計(jì)，可以提高編譯器效率，但是沒(méi)有辦法實(shí)現(xiàn)運(yùn)行時(shí)加載。

因?yàn)閞equire是運(yùn)行時(shí)加載，所以import命令沒(méi)有辦法代替require的動(dòng)態(tài)加載功能。

所以引入了import()函數(shù)。完成動(dòng)態(tài)加載。

import(specifier)

specifier用來(lái)指定所要加載的模塊的位置。import能接受什么參數(shù)，import()可以接受同樣的參數(shù)。

import()返回一個(gè)Promise對(duì)象。

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

5.import()函數(shù)適用場(chǎng)合

1）按需加載：

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

above： import模塊在事件監(jiān)聽(tīng)函數(shù)中，只有用戶點(diǎn)擊了按鈕，才會(huì)加載這個(gè)模塊。

2）條件加載：

import()可以放在if...else語(yǔ)句中，實(shí)現(xiàn)條件加載。

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

6.module.exports的使用

exports 是 module.exports 的一個(gè)引用，即 exports = module.exports
module.exports 和 exports 不要同時(shí)使用，指向會(huì)有問(wèn)題

//導(dǎo)出
module.exports = { checkIDCIP };

//導(dǎo)入
const { checkIDCIP } = require('./utils'); //或者 import { checkIDCIP } from './utils';

exports的使用

// person.js --- 導(dǎo)出
var name = 'Tom';
var age = 18;

exports.getName = function() {
    return name;
}

exports.getAge = function() {
    return age;
}

// main.js --- 導(dǎo)入
var person = require('./person'); //或 import person from './person'

console.log(person.getName()); // 'Tom'
console.log(person.getAge());  // 18

CommonJS和ES6 Module的區(qū)別總結(jié)

一、區(qū)別：

CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是在靜態(tài)編譯期間就確定模塊的依賴。
兩者的模塊導(dǎo)入導(dǎo)出語(yǔ)法不同，CommonJS是module.exports，exports導(dǎo)出，require導(dǎo)入；ES6則是export導(dǎo)出，import導(dǎo)入。
ES6在編譯期間會(huì)將所有import提升到頂部，CommonJS不會(huì)提升require。
CommonJS 模塊的require()是同步加載模塊，ES6 模塊的import命令是異步加載，有一個(gè)獨(dú)立的模塊依賴的解析階段。
CommonJS導(dǎo)出的是一個(gè)值拷貝，會(huì)對(duì)加載結(jié)果進(jìn)行緩存，一旦內(nèi)部再修改這個(gè)值，則不會(huì)同步到外部。ES6 Module是對(duì)模塊的引?,即ES6 Module只存只讀，不能改變其值，具體點(diǎn)就是指針指向不能變，類(lèi)似const 。
import的接?是read-only（只讀狀態(tài)），不能修改其變量值。即不能修改其變量的指針指向，但可以改變變量?jī)?nèi)部指針指向。可以對(duì)commonJS對(duì)重新賦值（改變指針指向），但是對(duì)ES6 Module賦值會(huì)編譯報(bào)錯(cuò)。
兩者的循環(huán)導(dǎo)入的實(shí)現(xiàn)原理不同，CommonJS是當(dāng)模塊遇到循環(huán)加載時(shí)，返回的是當(dāng)前已經(jīng)執(zhí)行的部分的值，而不是代碼全部執(zhí)行后的值，兩者可能會(huì)有差異。所以，輸入變量的時(shí)候，必須非常小心。ES6 模塊是動(dòng)態(tài)引用，如果使用import從一個(gè)模塊加載變量（即import foo from 'foo'），那些變量不會(huì)被緩存，而是成為一個(gè)指向被加載模塊的引用，需要開(kāi)發(fā)者自己保證，真正取值的時(shí)候能夠取到值。
CommonJS中頂層的this指向這個(gè)模塊本身，而ES6中頂層this指向undefined。

二、共同點(diǎn)：

1.CommonJS和ES6 Module都可以對(duì)引?的對(duì)象進(jìn)?賦值，即對(duì)對(duì)象內(nèi)部屬性的值進(jìn)?改變

文章內(nèi)容轉(zhuǎn)載，參考鏈接：

export，export default，exports - 導(dǎo)入導(dǎo)出方法總結(jié)

JS ES6中export和import詳解

posted @ 2023-10-12 15:40 淺巷深念閱讀(1924) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

淺巷深念

import, export，export default，exports - 導(dǎo)入導(dǎo)出方法總結(jié)

CommonJS和ES6 Module的區(qū)別總結(jié)

一、區(qū)別：

二、共同點(diǎn)：

公告