一、使用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时:
// 模块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时:
// 引入模块a,alias完全自定义
import alias from './a';
// 开放接口1
let f1 = function () {
// 使用模块a
alias.f1();
};
export default {f1};
总结
使用es6后,代码变得简洁是一方面,最重要的是消除了全局命名空间的污染,同时模块之间的依赖关系变得清晰明了。
虽然还没有浏览器很好的支持es6,不过使用babel可以将es6转为es5,现在就使用es6进行开发吧!