JavaScript模块化编程

常见写法

• 代码量少的情况下倒是无所谓，一单代码量大，全局变量变量名容易冲突。
• 方法之间没有明显的关系

<script  type="text/javascript">
  function open(){ ... }
  function close(){ ... }
</script>

---

对象写法

• 将相关的方法封装为一个对象
• 通过方法链调用，如：module.open();
• 会暴露全部内部成员，外部代码可以改变内部变量的值，如：module._count = -1

<script  type="text/javascript">
  var module = new Object({
    _count: 0,
    function open(){ ... },
    function close(){ ... }
  });
</script>

---

立即执行函数写法

• console.info(module._count); //undefined

<script  type="text/javascript">
  var module = (function(){
    var _count = 0;

    var open = function(){};
    var close = function(){};

    return {
      open: open,
      close: close
    }
  })();
</script>

---

放大模式

• 一个模块很大，必须分成几个部分
• 一个模块需要继承另一个模块
• 为 module 模块添加了一个新方法 open()，然后返回新的 module 模块

<script  type="text/javascript">
  var module = (function (mod){
    mod.open = function(){ ... };
    return mod;
  })(module);
</script>

---

宽放大模式

• 无法知道哪个部分会先加载
• 第一个执行的部分有可能加载一个不存在空对象
• 立即执行函数 的参数可以是空对象。

<script  type="text/javascript">
  var module = (function (mod){
    mod.open = function(){ ... };
    return mod;
  })(window.module || {});
</script>

---

输入全局变量

• 模块内部最好不与程序的其他部分直接交互
• 为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

<script  type="text/javascript">
  var module = (function ($, YAHOO){
    ...
  })(jQuery, YAHOO);
</script>