JS 模块通常的写法

Question

最原始写法

function m1(){
  //...
}
function m2(){
  //...
}

污染全局变量，看不出直接关系

对象写法

var module1 = new Object({
  _count: 0,
  m1: function () {
    //...
  },
  m2: function () {
    //...
  },
})

暴露了模块成员，内部成员可以被改写：module1._count = 5

立即执行函数写法

var module1 = (function () {
  var _count = 0
  var m1 = function () {
    //...
  }
  var m2 = function () {
    //...
  }
  return {
    m1: m1,
    m2: m2,
  }
})()

console.info(module1._count) //undefined

拓展模块

如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用"放大模式"

var module1 = (function (mod){
　　mod.m3 = function () {
　　　　//...
　　}
　　return mod
})(module1)

上面的代码为 module1 模块添加了一个新方法 m3()，然后返回新的 module1 模块。

拓展模块保险写法

在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。
如果采用上一节的写法，第一个执行的部分有可能加载一个不存在空对象

var module1 = (function (mod) {
  //...
  return mod
})(window.module1 || {})

输入全局变量

var module1 = (function ($, YAHOO) {
  //...
})(jQuery, YAHOO)