小编典典

JavaScript设计模式:模块模式和显示模块模式之间的区别?

javascript

我最近正在读《 学习JavaScript设计模式》 这本书。我没有得到的是模块模式和显示模块模式之间的区别。我觉得他们是同一回事。有人可以举一个例子吗?


阅读 460

收藏
2020-05-01

共1个答案

小编典典

至少有三种不同的方法来实现模块模式,但是显示模块模式是唯一具有正式名称的模块模式后代。

基本模块模式

模块模式必须满足以下条件:

  • 私有成员住在封闭中。
  • 公共成员暴露在返回对象中。

但是这个定义有很多歧义。通过以不同方式解决歧义,您可以获得模块模式的变体。

显示模块模式

显示模块模式是“模块模式”变体中最著名和最受欢迎的模块。与其他替代方案相比,它具有许多优势,例如

  • 重命名公共功能而不更改功能主体。
  • 通过修改一行来将成员从公共更改为私人,反之亦然,而无需更改功能主体。

RMP除原始条件外还满足其他三个条件:

  • 闭包中定义了所有公共或私有成员。
  • 返回对象是没有函数定义的对象文字。所有右手表达式都是闭包变量
  • 所有引用都是通过闭包变量,而不是返回对象。

以下示例显示了其用法

var welcomeModule = (function(){
  var name = "John";
  var hello = function(){ console.log("Hello, " + name + "!");}
  var welcome = function() { console.log( hello() + " Welcome to StackOverflow!");}
  return {
    name: name,
    sayHello: hello,
    sayWelcome: welcome
  }
})();

如果你想使namesayHello私有的,你只需要注释掉返回对象相应行。

var welcomeModule = (function(){
  var name = "John";
  var hello = function(){ console.log("Hello, " + name + "!");}
  var welcome = function() { console.log( hello() + " Welcome to StackOverflow!");}
  return {
    //name: name,
    //sayHello: hello,
    sayWelcome: welcome
  }
})();

具有对象文字的模块模式

这可能是模块模式的最旧的变体。与RMP不同,此变体没有性感的正式名称。

除了原始条件外,它还满足以下条件:

  • 私有成员在闭包中定义。
  • 公共成员在返回对象文字中定义。
  • this只要有可能,都通过引用公共成员。

在下面的示例中,您可以看到与RMP相比,函数定义实际上是在返回对象文字中,而对成员的引用由限定this

var welcomeModule = (function(){
  return {
    name: "John",
    sayHello: function(){ console.log("Hello, " + this.name + "!");}
    sayWelcome: function() { console.log( this.hello() + " Welcome to StackOverflow!");}
  }
})();

请注意,与RMP一样,为了生成namesayHello私有化,指向name和指向sayHello各种函数体定义的引用也必须更改。

var welcomeModule = (function(){
  var name: "John";
  var sayHello = function(){ console.log("Hello, " + name + "!");};
  return {
    //name: "John",
    //sayHello: function(){ console.log("Hello, " + this.name + "!");}
    sayWelcome: function() { console.log( hello() + " Welcome to StackOverflow!");}
  }
})();

带返回对象存根的模块模式

此变体也没有正式名称。

除了原始条件外,它还满足以下条件:

  • 开头定义了一个空的返回对象存根。
  • 私有成员在闭包中定义。
  • 公开成员定义为存根的成员
  • 通过存根对象引用公共成员

使用我们的旧示例,您可以看到公共成员被直接添加到存根对象中。

var welcomeModule = (function(){
  var stub = {};
  stub.name = "John";
  stub.sayHello = function(){ console.log("Hello, " + stub.name + "!");}
  stub.sayWelcome = function() { console.log( stub.hello() + " Welcome to StackOverflow!");}
  return stub;
})();

如果你想namesayHello私人像以前一样,到现在,私有成员的引用必须改变。

var welcomeModule = (function(){
  var stub = {};
  var name = "John";
  var sayHello = function(){ console.log("Hello, " + name + "!");}

  stub.sayWelcome = function() { console.log( hello() + " Welcome to StackOverflow!");}
  return stub;
})();

摘要

显示模块模式与模块模式的其他变体之间的区别主要在于引用公共成员的方式。结果,RMP更加易于使用和修改,这也说明了它的流行。但是,(我认为)这些优势的代价是巨大的,Addy
Osmani在“揭示模块模式”一文中提到了这一点,

这种模式的缺点是,如果私有功能引用了公共功能,那么在需要补丁的情况下,该公共功能不能被覆盖。这是因为私有函数将继续引用私有实现,并且该模式不适用于公共成员,仅适用于函数。

引用私有变量的公共对象成员也应遵守上面的无补丁规则说明。

因此,使用“显示模块”模式创建的模块可能比使用原始“模块”模式创建的模块更脆弱,因此在使用过程中应格外小心。

2020-05-01