从iife（立即执行函数）到es6的module

一、使用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进行开发吧！