一麸塞、使用es6之前(也沒用其他模塊管理插件)
a.js文件如下:
// 模塊a
var a = (function(){
// 私有方法
var _f = function () {
console.log('_f');
};
// 開放接口1
var f1 = function () {
console.log('f1');
};
// 開放接口2
var f2 = function () {
console.log('f2');
_f();
};
return {
f1: f1,
f2: f2
};
}());
b.js文件需要使用模塊a時(shí):
// 模塊b
var b = (function(){
// 開放接口1
var f1 = function () {
// 使用模塊a
a.f1();
};
return {
f1: f1
};
}());
二、使用es6之后
a.js變成:
// 模塊a
// 私有方法
let _f = function () {
console.log('_f');
};
// 開放接口1
let f1 = function () {
console.log('f1');
};
// 開放接口2
let f2 = function () {
console.log('f2');
_f();
};
export default {f1, f2};
b.js文件需要使用模塊a時(shí):
// 引入模塊a材失,alias完全自定義
import alias from './a';
// 開放接口1
let f1 = function () {
// 使用模塊a
alias.f1();
};
export default {f1};
總結(jié)
使用es6后呕寝,代碼變得簡潔是一方面,最重要的是消除了全局命名空間的污染,同時(shí)模塊之間的依賴關(guān)系變得清晰明了灿渴。
雖然還沒有瀏覽器很好的支持es6,不過使用babel可以將es6轉(zhuǎn)為es5胰舆,現(xiàn)在就使用es6進(jìn)行開發(fā)吧骚露!