js模块的基本用法

js模块，在es6之前，实现都是通过立即执行函数实现。这里复盘这种古老的模块实现方式，其目的是：

1，了解js模块的最基本原理/基石.

2，为后来的模块化学习打下基础。

1,基本模块的书写方法：IIFE

  var MODULE = (function () {
    var my = {}, privateVariable = 1;
    function privateMethod() {
      // method that use in module
    }
  
    my.moduleProperty = 1;
    my.moduleMethod = function () {
      // module API.
    };
  
    return my;
  }());
这里声明了一个名为MODULE的全局模块，包含了两个公共的属性：一个名为MODULE.moduleMethod的方法和一个名为MODULE.moduleProperty的变量。另外，它还借助匿名的闭包函数维持了私有的内部状态。还有，通过之前介绍的模式，我们可以容易地引入任何需要的变量。

2，扩展：松耦合和紧耦合方式

var MODULE = (function (my) {   
    my.anotherMethod = function () {   
      // added method...   
    };   
  
    return my;   
  }(MODULE || {})); 


  //紧耦合扩展：对需要重写的方法进行保存。

  var MODULE = (function (my) {
    var old_moduleMethod = my.moduleMethod;
  
    my.moduleMethod = function () {
      // 方法重写，但通过old_moduleMethod仍然可以使用原来的方法...
    };
  
    return my;
  }(MODULE));

3，继承通过浅复制和添加方法实现：

var MODULE_TWO = (function (old) {
  var my = {},
           key;

  for (key in old) {
    if (old.hasOwnProperty(key)) {
      my[key] = old[key];
    }
  }

  var super_moduleMethod = old.moduleMethod;
  my.moduleMethod = function () {
    // 在克隆模块中重写方法，通过`super_moduleMethod`访问原始方法
  };

  return my;
}(MODULE));

4，子模块，

MODULE.sub = (function () {
  var my = {};
  // ...

  return my;
}());

以上代码，从理论上说，实现的特别基本。尽管还存在安全性等很多问题，但完整的说明了一个模块实现的基本方式。

扫描二维码关注公众号，回复： 2926299 查看本文章

参考文献/链接：

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

js模块的基本用法

猜你喜欢