Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Essential JavaScript Design Patterns For Beginners (作者:Addy Osmani)

More than 5 years have passed since last update.

JavaScriptデザインパターン:The Module Pattern

JavaScriptの勉強にすごく役に立つので、JavaScriptを勉強したい人にはお勧めです。

※The Module Patternサンプルソース

var nameSpace = nameSpace || {};
var nameSpace.someModule = nameSpace.someModule || (function(){

  // private attributes
  var privateVar = 5;

  // private methods
  var privateMethod = function(){
     return 'Private Test';
  };

  return {
    // public attributes
    publicVar: 10,
    // public methods
    publicMethod: function(){
      return ' Followed By Public Test ';
    },

    // let's access the private members
    getData: function(){
      return privateMethod() + this.publicMethod() + privateVar;
    }
  }
})(); //the parens here cause the anonymous function to execute and return
nameSpace.someModule.getData();

※The Revealing Module Patternサンプルソース

 var nameSpace = nameSpace || {};
 var nameSpace.myRevealingModule = nameSpace.myRevealingModule || (function(){

    var name = 'John Smith';
    var age = 40;

    function updatePerson(){
      name = 'John Smith Updated';
    }
    function setPerson () {
       name = 'John Smith Set';
    }
    function getPerson () {
       return name;
    }
    return {
        set: setPerson,
        get: getPerson
    };
}());

// Sample usage:
nameSpace.myRevealingModule.get();

勉強・分析・まとめ:

クロージャ即時関数の概念及びThe Singleton Patternを理解したら、The Module Patternも理解しやすくなりますね。Functionの中にFunction及び変数を定義することにより、Javaのprivateを真似できます。Functionの中のFunction(内部Function)がその外側のFunction(外部Function)の中に定義しているFunctionを参照できることを利用して、外部に公開したいFunctionをオブジェクトの中に入れて、Returnしたら、外部に公開できるようになります。The Revealing Module PatternはJavaのクラスの定義にちょっと似ていますね。

上記2つのサンプルソースを見比べたら、やはり下のThe Revealing Module Patternサンプルソースはお勧めです。なぜならば、The Module PatternサンプルソースではpublicVarをそのまま外部に公開したので、モジュールを使用した外部のソースではnameSpace.someModule.publicVar = "value";の形で値を設定したり、var param = nameSpace.someModule.publicVar;で値を取得したりすることになります。これだと後日publicVarの変数名をpublicVar2に変更したら、外部でそのモジュールを使用するソースも修正しなくてはいけなくなります。これは好ましくないことです、それでThe Revealing Module Patternサンプルソースのようにフィールドから値を取り出して返すメソッドGetter(ゲッター)とフィールドに値を入れるメソッド「Setter」(セッター)を通して外部に公開することでこの問題を解決できます。

aimoriu
技術をお金に変えて、経済的な自由を獲得するために、FXの手動トレードと自動トレードを研究しています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away