javascriptデザインモードと開発実践読書ノート

javascriptデザインモードと開発実践読書ノート
この文章のすべての内容は『Javascript設計モードと開発実践』から取っています.(興味のあるものは買うことができます.)自分の理解を少しずつ加えて、この文章を書く目的は、自分の設計モードに対する理解を強化することと、このブロックに接触したことのないエントリ者に対する参考をすることです.
この章の内容を読むには、Javascriptの対象に向けた知識が必要です.そうでないと、読むのは少し難しいかもしれません.
フロントエンドの一般的なデザインモデルの分類

単例モード

ポリシーモード

プロキシモード

ローズマリーモード

リリース-購読モード

コマンドモード

合成モード

テンプレート方法モード

享元モード

職責チェーンモード

仲介者モード

装飾者モード

状態モード

アダプターモード

単例モード

単一の例モードの定義:1つのクラスが1つのインスタンスだけであることを保証し、全体的なアクセスポイントにアクセスすることを提供する.
単一の例のモードはよく使われているモードで、いくつかのオブジェクトがあります.例えば、スレッドプール、グローバルキャッシュ、ブラウザのwindowオブジェクトなどが必要です.Javascriptの開発では、シングルモデルの用途も非常に広いです.
考えてみてください.ログインボタンをクリックすると、ページに登録浮遊窓が現れます.この登録浮遊窓は唯一です.何回登録ボタンをクリックしても、この浮遊窓は一回しか作成されません.この登録浮遊窓は単一のパターンで建設するのに適しています.
一例モードを実現する
標準を達成するための単一の例のパターンは複雑ではなく、現在はあるクラスのオブジェクトが作成されているかどうかを変数で表しています.

var Singleton = function(name){
    this.name = name;
};
Singleton.prototype.getName = function(){
    alert(this.name)
};
Singleton.getInstance =(function(){
    var instance = null;
    return function(name){
        if(!instance){
            instance = new Singleton(name);
        }
        return instance;
    }
})() ;
var a = Singleton.getInstance('tom');
var b = Singleton.getInstance('jerry');
console.log(a===b);//true

コードの説明:
Singleton.get Instance関数ではinstanceが空かどうかを判断し、空ならSingleton類を実例化します.このクラスは一度だけ実装されることが保証されます.単例モードに適合しています.
この方法は比較的簡単ですが、問題があります.このクラスの「不透明性」を増加させ、Singleton類の利用者はこれが単一の例類であることを知らなければなりません.以前のnew XXによって対象を獲得するのとは違って、ここではどうしてもSingleton.getsInstanceを使って対象を取ります.
透明なワンケースモードを実現
普通のクラスを使うように、直接的に実行すればいいです.実用化されたオブジェクトを呼び出す方法は必要ありません.

  var CreateDiv = function(html){
      this.html = html;
      this.init();
  };
  CreateDiv.prototype.init=function(){
      var div = document.createElement('div');
      div.innerHTML = this.html;
      document.body.appendChild(div);
  };
        ,    
 var Proxy = (function(){
     var instance;
     return function(html){
         if(!instance){
             instance = new CreateDiv(html);
         }
         return instance;
     }
 })();
 var a = new Proxy('tom');
 var b = new Proxy('jerry');
 alert(a===b);//true

クローズドを導入する理由:
はい、a=new Proxy('tom')の時、Proxyオブジェクトの中のinstance変数はずっとaに引用されています.instanceの赋価はnew CreateDivです.だからinstance変数は破壊されずに存在します.これも闭锁の核心の知识で、もし闭锁に惯れていないならば、私のブログの中の闭锁に関する知识を下へ见ることができます.
まとめ:
何回Proxyを実践化しても、実は一回だけです.これでワンケースモードが成立します.この中はプロキシモードを使って、管理の単例を担当するロジックをProxy類に移して完成します.このように見ると非常にはっきりしていますか?
JavaScriptのシングルモデル
以上で紹介したのは、従来のオブジェクト指向言語における実装であり、単一のオブジェクトは「クラス」から作成されたものです.類を中心とする言語の中で、これは自然なやり方です.
しかし、jsでオブジェクトを作成する方法は非常に簡単です.まずクラスを作成してから実行する必要はありません.
私たちは注文例の概念を振り返っています.

は、一例

だけであることを保証する.

は、グローバルアクセス

を行うことができる.
実はjsではこうです.
1 var a={}
まず、唯一無二のオブジェクトです.次に、全体的にアクセスできます.だからJavascriptの単一の例はこのように簡単です.
欠点も非常に明白であり、グローバル変数を汚染する.グローバル変数の汚染を解決するには、2つの一般的な方法があります.
1.名前空間を使う:

var namespace = {
    a:function(){
        alert(1);
    },
    b:function(){
        alert(2);
    }
}

2.クローズドパッケージを使用したプライベート変数

 var user = (function(){
     var name='one',
         age = 18;
     return {
         getInfo:function(){
             return name +'-'+age;
         }
     }
 })();

このように変数の大域汚染も回避できる.このように多くのjsの単一の例のモードを言って、しかし用途はそんなに大きくないようで、そんなに私達は惰性の単一の例を解説しにきます.
惰性の一例
不活性の一例とは、必要なときにのみオブジェクトのインスタンスを作成することです.不活性の一例は一例モードの重点であり、この技術は実際の開発において非常に有用である.
例:あるボタンをクリックすることによって、登録用のポップアップが表示されると仮定します.パチンコは唯一で、同時に二つのパチンコが存在することはあり得ません.
解決方法:

  var createLogin = (function(){
      var div;
      return function(){
          if(!div){
              div = document.createElement('div');
              div.innerHTML = '      ';
              div.className = 'pop';
              document.body.appendChild(div);
          }
         return div;
     }
 })();
 document.querySelector('#loginBtn').onclick=function(){
     var loginLayer = createLogin();
     loginLayer.style.display = 'block';
 }

このように惰性の単例を実現しました.いくらクリックしても、一つのパチンコしか作成できません.
このコードは依然として単一職責原則に違反しています.作成対象と管理書の例は全部createLogin対象の内部にあります.
もし私達は次回ページの中で唯一のiframeあるいはscriptタグを作る必要があるならば、必ずcreateLogin関数をコピーして、それからものを変えなければなりません.
明らかに私達ができるのはもっと賢いです.管理書の例と作成対象を分離します.

  var getSingle = function(fn){
      var res;
      return function(){
          return res||(res = fn.apply(this,arguments));
      }
  };
  var createLogin = function(){
      var div;
      div = document.createElement('div');
     div.innerHTML = '      ';
     div.style.display = 'none';
     document.body.appendChild(div);
     return div;
 };
 var createSingleLogin = getSingle(createLogin);

 document.getElementById('loginBtn').onclick=function(){
     var loginLayer = createSingleLogin();
     loginLayer.style.display = 'block';
 };

get Singleは単一例の論理を担当しています.
createLoginは、弾戸を作成したり、他の私たちが必要とする要素を担当しています.また、単例の論理とは結合されていません.
このような一例モードの用途は、オブジェクトの作成だけではない.
例えば、私たちは通常、ページのリストをレンダリングした後、次にこのリストにclickイベントをバインドします.ajaxを通じてリストにデータを動的に追加する場合、イベントエージェントを使用する前提で、clickイベントは実際には最初のレンダリングリストの時に一度だけバインドされる必要があります.jqueryでは、oneという方法でイベントを結びつけることができますが、実際には上記のようにすでにパッケージされているgetSingle関数を使ってもいいです.コードは以下の通りです.

  var getSingle = function(fn){
      var res;
      return function(){
          return res || (res = fn.apply(this,arguments));
      }
  };
  var bindEvent = getSingle(function(){
     document.getElementById('div').onclick=function(){
         alert('click');
    }
 });
 var render = function(){
     bindEvent();
 };
 render();
 render();
 render();

3回実行したが、イベントは一回だけ結合されていることが分かります.
リボン:
getSingle関数では、実際にもクローズドと高次関数が使用されており、単例モードは簡単で非常に使用されるモードであり、特に不活性の一例技術は、適切な時にオブジェクトを作成し、唯一の一つだけを作成し、より奇妙なことに、オブジェクトの作成と管理の一例の役割は二つの異なる方法に分散されている.この二つの方法を組み合わせるとシングルモードの威力があります.