JavaScriptのデザインパターン(シングルトン、観測モード、サブスクリプションモデルを公開し、プロキシモード)

最近、デザインパターンの一部を学んだ、個人的な理解は、より平易かもしれません。デザインパターンは、ランダム将来的に私たちのコードを書くのではなく、その保守性を高めるために、コードの再利用性を向上させるために、これらのアイデアに基づいてコードを書くことがより合理的であることができ、より標準化されたプログラミングルーチンのいくつかの前の練習の要約に基づいていますコードを書くときに我々は、これらのプログラミングルーチンを参照することができます。

例1.シングルモード

アイディア:クラスのインスタンスを1つだけ確実にするため、およびそれにアクセスするためのグローバルアクセスポイントを提供します。方法:クラスは、オブジェクトのインスタンスを1つだけ有することを確実に作成されない戻り、存在しない場合、直接リターンが存在する場合、最初の有無インスタンスを決定します。

 

2. Observerパターン

アイデア:件名(オブザーバー)を作成し、観測者(オブザーバー)クラス、観察者は更新され、視聴者を更新し、すべてのオブザーバに通知オブザーバを受け入れるための方法を提供することにあります。例えば、ここではビデオの中で、両親と子供たちを見て、子供の画像は、観察者になることですが、両親はオブザーバーですされています。子供が(ステータス更新を)泣いている場合、親は通知を受信し、適切な措置を取ります。

3.サブスクリプションモデルを公開

考えた:個人的に見ることができ、VUEデータバインディング実装は、ノンパラメトリックと彼の息子は、など、コンポーネントを渡し、このモデルはwebworker、のpostMessage、socket.io技術のモデル、H5の最も一般的なフロントエンドとして説明することができることを感じる達成することを約束その影、およびオブザーバーパターンに非常に似ており、一部の人々は、これら二つを区別しません。個人的に私は次のようにモデルが他の人が、マップの視覚的表現をイベントディスパッチセンターがありパブリッシュおよびサブスクライブ、両者の間に本質的な違いは、サブスクリプションモデルの加入者を解放された、出版社はクラスであることを感じます。

 

クラスPubSubの{

コンストラクタ(){

//加入者オブジェクト

        this.subscribers = {}

}

//サブスクリプションのプロパティ

    {(タイプ、FN)をサブスクライブ

        (もし!Object.prototype.hasOwnProperty.call(this.subscribers、タイプ)){

          this.subscribers [タイプ] = [];

        }

       

        this.subscribers[type].push(fn);

}

//取消订阅一个属性

    unsubscribe (type, fn) {

        let listeners = this.subscribers[type];

        if (!listeners || !listeners.length) return;

        this.subscribers[type] = listeners.filter(v => v !== fn);

}

//发布属性

    publish (type, ...args) {

        let listeners = this.subscribers[type];

        if  (!listeners || !listeners.length)  return;

        listeners.forEach(fn => fn(...args));       

    }

}

 

let ob = new PubSub();

ob.subscribe('add', (val) => console.log(val));

ob.publish('add', 1);

 4.代理模式

思想:这种模式在前端中也是非常常见的了,如图片懒加载(先通过一张loading图占位,然后通过异步的方式加载图片,等图片加载好了再把完成的图片加载到img标签里面。),es6中Proxy 对象,webpack中devserver的proxy。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

 

おすすめ

転載: www.cnblogs.com/ccj9697/p/11345006.html