expor和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 ;

除了輸出變數，還可以輸出函式或者類（class），

export function multiply(x, y) ;

還可以批量輸出，同樣是要包含在大括號裡，也可以用as重新命名：

function v1() 

function v2() 
export ;

attention:

export 命令規定的是對外介面，必須與模組內部變數建立一一對應的關係

// 寫法一

export var m = 1;
// 寫法二
var m = 1;
export ;
// 寫法三
var n = 1;
export ;
// 報錯
export 1;
// 報錯
var m = 1;
export m;

報錯的寫法原因是：沒有提供對外的介面，第一種直接輸出1，第二種雖然有變數m，但還是直接輸出1，導致無法解構。

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

// 報錯

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

and：export語句輸出的介面，都是和其對應的值是動態繫結的關係，即通過該介面取到的都是模組內部實時的值。

位置：export模組可以位於模組中的任何位置，但是必須是在模組頂層，如果在其他作用域內，會報錯。

function foo() 

foo()

2.import命令

export定義了模組的對外介面後，其他js檔案就可以通過import來載入這個模組，

// main.js

import from './profile';
function setname(element)

import命令接受一對大括號，裡面指定要從其他模組匯入的變數名，必須與被匯入模組（profile.js）對外介面的名稱相同。

如果想重新給匯入的變數乙個名字，可以用as關鍵字，

import  from './profile';

import後的from 可以指定需要匯入模組的路徑名，可以是絕對路徑，也可以是相對路徑， .js路徑可以省略，如果只有模組名，不帶有路徑，需要有配置檔案指定。

注意，import命令具有提公升效果，會提公升到整個模組的頭部，首先執行。（是在編譯階段執行的）

因為import是靜態執行的，不能使用表示式和變數，即在執行時才能拿到結果的語法結構（e.g. if...else...）

3.module的整體載入

除了指定載入某個輸出值，還可以用（*）指定乙個物件，所有的變數都會載入在這個物件上。

// circle.js。輸出兩個函式

export function area(radius) 
export function circumference(radius) 
// main.js 載入在個模組
import 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 ()

其他模組載入該模組時，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 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/$.js`)
.then(module => )
.catch(err => );

5.import()函式適用場合

1）按需載入：

button.addeventlistener('click', event => )

.catch(error => )
});

above： import模組在事件監聽函式中，只有使用者點選了按鈕，才會載入這個模組。

2）條件載入：

import()可以放在if...else語句中，實現條件載入。

if (condition)  else

ES6學習 模組化 import和export

關於js模組化的使用，大家肯定不陌生，現有的主要兩種 cmd和amd，還有一種相容cmd和amd寫法的umd。一般前端框架都支援amd，而node.js採用的是cmd的模組語法。es6中規範化了模組的匯入和匯出語法，在規範的15.2章節中。現在瀏覽器還都不支援，想要嘗試的可以使用traceur或者b...

export和import的基本用法

基本理論 export用於對外輸出本模組的介面 import用於在乙個模組中載入另外乙個模組 含有export或者不含有export 注 不含有export介面的模組直接引用 import assets js test.js 輸出變數 test.js export var a 2 import fr...

import和require用法示例

import和require的區別不用多說了，分屬於不同的規範，我們今天分別來試試怎麼使用它們 該規範通過exports和module.exports進行匯出，通過require進行匯入，我們看下面兩個簡單的例子 b.js module.exports c.js exports.cc hello c...