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;
}());

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

 

参考文献/链接:

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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值