es6 之前如何实现模块

es6之前，js并没有模块。随着代码复杂度提升，开发者们为了应对难以维护的代码而考虑使用js现有的特性去实现模块化。

模块要求：

1隐藏内部实现
2提供调用接口

函数内部的变量是私有对外不可见的,借用该特点可以实现隐藏内部实现的需要。

function ff(){
  var a=123;
  var b="abcdef";
}
console.log(a)//错误，a未定义

image.png

利用函数的返回对象，通过函数闭包特性，实现对内部数据对访问，间接实现了调用接口。
通过该接口，我们可以方便的使用模块内的功能，例如ffobj.f0();

function ff(){
  var a=123;
  var b="abcdef";
  var f0 = function(){
      console.log("a is :"+a);
  }
  
  return {a:a,b:b,f0:f0}
}

var ffobj = ff();

ffobj.f0()

image.png

简化定义与调用步骤，直接改为立即执行函数即可

const ffobj1 = function(){
  var a=123;
  var b="abcdef";
  var f0 = function(){
      console.log("a is :"+a);
  }
  
  return {a:a,b:b,f0:f0}
}();

image.png