ES6 module export 語法

 

 

將一個JS文件看作一個模塊，該模塊默認所有變量或方法是私有的，只能文件內訪問

在變量或方法前加上export 關鍵字，才可以在另外一個文件中通過import 訪問該文件中的變量或方法

詳細參考 ES6 module export語法 ，這個地方寫的真是太詳細了，下面寫一些我對它的體會

 

export 與 import 以接口 “ {對象1,對象2, ... }” 的方式鏈接文件，這與高級語言(Java/c/c++/go等)訪問外部文件的方式類似，這樣寫出來的JS更像是項目，而不再是一個腳本了

在高級語言中文件之間的鏈接建立是在編輯階段，執行的是編輯之后的文件，ES6的export/import也是如此，在執行之前所有相關的文件已經鏈接在一起了

再通過webpack這樣的工具，就可以將整個項目的JS打包成一個靜態JS文件

 

export default 

// 正確
var a = 1;
export default a;

export default a的含義是將變量a的值賦給變量default

 

 

實時取值、類似引用

export只是通過接口的方式，訪問另外一個文件中的變量或方法，這意味着如果所訪問的文件的變量發生了變化，接口會體現這種變化；具體位置不限定

 

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代碼輸出變量foo，值為bar，500 毫秒之后變成baz。

 

foo();

import { foo } from 'my_module';

上面的代碼不會報錯，因為import的執行早於foo的調用。這種行為的本質是，import命令是編譯階段執行的，在代碼運行之前。

 

 

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

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

 

// 寫法一
export var m = 1;

// 寫法二
var m = 1;
export {m};

// 寫法三
var n = 1;
export {n as m};

// 報錯
function f() {}
export f;

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

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

 

必須位於頂級作用域

因為export是在編輯階段鏈接文件，所以不能放入方法或塊等次級作用域以動態調用的方式使用

 

import

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

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

 

 

模塊整體加載

// 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));

 

export default

 

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

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