如何在 JavaScript 中使用揭示模塊模式

Question

我偶然發現了這篇文章： JavaScript 的揭示模塊模式。 我想在我的項目中使用它。

假設我有一個函數abc並且我在我的主 JavaScript 文件中調用該函數。

這種模式會讓事情變得不同嗎？ 任何人都可以向我展示這種模式的基本示例嗎？

Answer 1

一個小例子：

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)

Answer 2

DC = 道格拉斯·克羅克福德
RMP = 揭示模塊模式

DC 和 RMP 之間的區別主要是組織性/可讀性

文章本身中提供了示例？ 你到底在問什么，因為這些東西與文件無關，而是與閉包有關。

您將所有內容都放在一個閉包（函數）中，並僅公開您希望訪問的那些部分。 DC的風格和RMP之間的區別是，在第一個功能在不同的地方被定義而在RMP，他們在同一個地方總是定義，然后在公共對象字面事后透露。

所以在 DC 和 RMP 中你有：

• 可以定義私有部分（變量和函數）的閉包
• 私處
• 公共結果，定義公開可見的功能和變量（狀態）

這兩種模式僅在可讀性上有所不同。 在 DC 情況下，您無法始終知道將在何處定義某些功能，但在 RMP 中，您始終知道一切都在私有部分。

Answer 3

揭示模塊模式在Essential JavaScript Design Patterns For Beginners文章中描述得非常好。

Answer 4

作者所稱的“Douglas Crockford's pattern for created objects”實際上是Richard Cornford等人開發的模塊模式。 請參閱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

Answer 5

我喜歡將揭示模塊模式與單例模式混合使用，以便我可以保持結構化代碼與模塊模式的好處：

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/

Answer 6

只想補充一點：使用這種模式，最好將全局依賴項作為參數/參數傳遞，以便它們是顯式的。 您不必這樣做，但這使您的模塊從第一眼就很清楚需要什么。 例如：

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

在此示例中，您可以立即在第一行看到您的模塊使用 jQuery 和其他一些負責加載功能的模塊。

Answer 7

https://www.realmelon.com/revealing-module-design-pattern-in-javaScript/

我寫了一篇關於它的文章。

你可以看看這個

Answer 8

顯示模塊的基本概念是您有一個封裝其數據和行為的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
    };
})());

注意(new (function SomeClass(){ ... })()); 句法。 使用new這樣可以讓你使用this封閉的內部關鍵字。 如果您需要從另一個類繼承屬性（ AbstractSomeClass.call(this, 998); ） AbstractSomeClass.call(this, 998);這很方便——但是，您仍然需要顯示您想要公開的屬性，例如：

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

另請注意，我們分配this到thus -這使我們能夠使用的父- this是有它自己的一個子類里面this范圍（ this.value = thus.name || name; ）

同樣，這些只是建議的一些約定和最佳實踐。

Answer 9

這是揭示模塊模式的小例子。

它提供了一個工具來聲明私有和公共函數，就像一個類。這是這種模式的主要好處。如果我們不想公開一些可以從全局訪問的功能，那么將其設為私有，其余的設為公有。下面是如何創建私有和公共函數的例子。還有一件事是一個可自我執行的代碼塊。

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

    })();

警報（計算器.abc（））； 它返回 5

警報（計算器。mulFunc（））； 它返回 50

並且 __divFunc() 將無法訪問，因為它在私有范圍內。 我們只能訪問那些在return 對象中聲明的函數，因為它是公共函數表示

Answer 10

對模塊外的代碼來說，差別不大。 在該文章的所有 3 個案例中，方法的調用方式相同。 但是模塊本身的結構在內部是不同的。

Crockford 的模塊模式和他們所謂的“揭示模塊模式”在結構上幾乎是一樣的。 唯一的區別是他們首先將方法分配給本地 var 以便更具可讀性。 但實際上並沒有什么特別之處，您的鏈接中有一些示例。