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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容