您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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

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

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

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

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不同,此变体没有性感的正式名称

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

在下面的示例中,您可以看到与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在“揭示模块模式”一文中提到了这一点,

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

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

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

javascript 2022/1/1 18:17:34 有670人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶