How to use Revealing module pattern in JavaScript

小开

在初学者的基本 JavaScript 设计模式文章中对显示模块模式进行了很好的描述。

小开

To the code outside the module, it makes little difference. In all 3 cases in that article, the methods are called the same way. But the structure of the module itself is internally different.

克罗克福德的模块模式和他们所谓的“揭示模块模式”在结构上几乎是相同的。唯一的区别是，它们首先将方法分配给一个局部变量，以便更具可读性。但实际上它并没有什么特别之处，在你的链接中就有一些例子。

小开

DC = Douglas Crockford
RMP = 显示模块模式

DC 和 RMP 的区别主要在于组织/可读性

例子是在文章本身介绍？你到底想问什么，因为这些东西与文件没有任何关系，而是与闭包有关。

您将所有内容放在一个闭包(函数)中，并且只公开那些您希望可访问的部分。DC 样式和 RMP 之间的区别在于，在第一个函数中定义在不同的位置，而在 RMP 中，它们总是定义在相同的位置，然后在 公众人士对象文字中定义 暴露了。

所以在 DC 和 RMP 中，你有:

使定义私有部分(变量和函数)成为可能的闭包
私处
定义公共可见功能和变量(状态)的公共结果

这两种模式仅在可读性方面有所不同。在 DC 的情况下，您不能总是知道某些功能将被定义在哪里，但是在 RMP 中，您总是知道一切都在私有部分中。

小开

最佳答案

A small example:

var revealed = function(){
var a = [1,2,3];
function abc(){
return (a[0]*a[1])+a[2];
}


return {
name: 'revealed',
abcfn: abc
}
}();

在启动为 revealed赋值的匿名函数中，a和 abc对该函数是私有的。函数返回的是一个带有 name属性和 abcfn属性的对象文本，abcfn属性是对 abc function的引用。abc function使用私有变量 a。这都要感谢使用关闭(函数范围内的所有内容都可以被同一个函数中的所有其他内容引用)。

显示用法:

alert(revealed.name);    //=> 'revealed'
alert(revealed.abcfn()); //=> 5 (1*2+3)

小开

作者称之为“创建对象的道格拉斯·克罗克福特模式”的方法实际上是由理查德 · 康福德 et al开发的模块模式。见 http://groups.google.com/group/comp.lang.javascript/msg/9f58bd11bd67d937

至于例子，有很多。阅读下面的文章，并按照一些链接: http://peter.michaux.ca/articles/module-pattern-provides-no-privacy-at-least-not-in-javascript-tm

小开

揭示模块的基本概念是你有一个 Object，封装的数据和行为:

var Module = (function(){
var privateStuff = {};
var publicStuff = {};


return publicStuff;
})();

但是，在使用此模式时应该采用一些最佳实践。下面是一个带有一些属性的模块(“ Modulus”) ，它采用了以下一些实践:

function AbstractSomeClass(id) {
this.id = id;
return this;
}


var Modulus = (new (function SomeClass() {
var thus = this;


function NameClass(name){
this.value = thus.name || name;
}


AbstractSomeClass.call(this, 998);


this.name = 'Touring';
this.name = ( new NameClass('Hofstadter') ).value;


return {
id: this.id,
name: this.name
};
})());

Notice the (new (function SomeClass(){ ... })()); syntax. Using new like this allows you to use the this keyword 在里面 of the closure. This is handy if you need to inherit properties from another class (AbstractSomeClass.call(this, 998);) -- However, you'll still need to 揭示 the properties that you would like to have public, e.g.:

return {
id: this.id,
name: this.name
};

还要注意，我们将 this分配给 thus——这允许我们在具有自己的 this作用域(this.value = thus.name || name;)的子类中使用 Parent-this

同样，这些只是建议的一些约定和最佳实践。

小开

我喜欢混合使用 显示模块图案显示模块图案和 单例模式，这样我就可以保持结构化的代码和模块模式的好处:

var MyFunction = function(){


var _ = {
Init: function(){
_.Config.foo = "hello world";
},
Config:{
foo:null
},
ShowAlert:function(){
alert(_.Config.foo);
}
}


return {
Init: _.Init,
ShowAlert: _.ShowAlert
};
}();


MyFunction.Init();
MyFunction.ShowAlert();

我在我的博客上写了更多这方面的信息:

Http://curtistimson.co.uk/js/mixing-revealing-module-and-singleton-javascript-patterns/

小开

下面是显示模块模式的小示例。

它提供了一种工具来声明私有和公共函数，就像这是这个模式的主要好处。如果我们不想暴露一些可从全局访问的功能，然后使其私有和下面的例子是如何使私有和公共还有一件事，它是一个自执行的代码块。

  var Calculator = (function () {


var num1 = 10;
var num2=5
var _abc = function () {
return num1 - num2;
};


var _mulFunc = function () {
return num1 * num2;
};


var _divFunc = function () {
return num1/num2;
};


return {
//public scope
abc: _abc,
mulFunc:_mulFunc
};


})();

Alert (Calculator.abc ()) ; 它返回5

alert(Calculator.mulFunc()); it returns 50

而 _ _ divFunc ()将不能访问，因为它在私有作用域中。我们只能访问那些在 < strong > return 中声明的函数对象因为它是公共职能的代表

小开

只需要添加: 使用此模式，最好将全局依赖项作为参数/参数传递，以便它们是显式的。您不必这样做，但是这使得您的模块从第一眼起就非常清楚地需要什么。例如:

var myModule = (function ($, loadModule) {
"use strict";
})(jQuery, load);

在这个示例中，您可以立即在第1行看到您的模块使用 jQuery 和其他一些负责加载功能的模块。

小开

Https://www.realmelon.com/revealing-module-design-pattern-in-javascript/

我写了一篇关于它的文章。

你可以看看这个