ECMAScript 6（ES6） 特性概覽和與ES5的比較10-模塊化

1.輸入/輸出值

支持從模塊導出或者導入值，而不會導致全局命名空間污染。

ECMAScript 6

// lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593

// someApp.js
import * as math from "lib/math"
console.log("2π=" + math.sum(math.pi, math.pi))

// otherApp.js
import {sum, pi} from "lib/math"
console.log(("2π=" + sum(pi, pi))

ECMAScript 5

// lib/math.js
LibMath = {};
LibMath.sum = function (x, y) {return x+y};
LibMath.pi = 3.141593;

// someApp.js
var math = LibMath
console.log("2π=" + math.sum(math.pi, math.pi));

// otherApp.js
var sum = LibMath.sum, pi = LibMath.pi;
console.log(("2π=" + sum(pi, pi));

2.默認值和通配符(wildcard 野卡片=通配符O(∩_∩)O)

將值標記爲默認導出值和值的混入。

ECMAScript 6

// lib/mathplusplus.js
export * from "lib/math"
export var e = 2.71828182864
export default (x) => Math.exp(x)

// someApp.js
import exp, {pi, e} from "lib/mathplusplus"
console.log("e^{π}="+ exp(pi))

ECMAScript 5

// lib/mathplusplus.js
LibMathPP = {};
for (symbol in LibMath)
    if (LibMath.hasOwnProperty(symbol))
        LibMathPP[symbol] = LibMath[symbol];
LibMathPP.e = 2.71828182846;
LibMathPP.exp = function (x) { return Math.exp(x) };

// someApp.js
var exp = LibMathPP.exp, pi = LibMathPP.pi, e = LibMathPP.e;
console.log("e^{π} = " + exp(pi));