JSシングルトンデザインパターン、組み合わせモード、オブザーバーパターン、戦略パターン

JSがされるについて设计模式与单例模式説明するようブログに提示し、導入をした：JSデザインパターンとシングルケースモデル

さて、ここで私はオブザーバーパターンのパターンとの組み合わせの私の理解することを、いくつかのインスタンスを結合します。

図1に示すように、複合モード：

組合せパターンは、オブジェクト間に形成され树形た構造。
そして、組み合わせモードの基本的なオブジェクト複合オブジェクト被一致对待。
オブジェクトを心配することなくお電話のちょうどその時、多くの層を持っています根部进行调用。
機能部品は、複数の達成するために組み立てられます批量执行。

スイッチ私たちは家に帰るとき、私たちは今、ユニバーサルリモートコントロールを持っていることを想像し、押し、次のことが実行されます。

ホームは、ドアを開けます
コンピュータを開きます
オープン音楽

// 先准备一些需要批量执行的功能
class GoHome{
    init(){
        console.log("到家了，开门");
    }
}
class OpenComputer{
    init(){
        console.log("开电脑");
    }
}
class OpenMusic{
    init(){
        console.log("开音乐");
    }
}

// 组合器，用来组合功能
class Comb{
    constructor(){
        // 准备容器，用来防止将来组合起来的功能
        this.skills = [];
    }
    // 用来组合的功能，接收要组合的对象
    add(task){
        // 向容器中填入，将来准备批量使用的对象
        this.skills.push(task);
    }
    // 用来批量执行的功能
    action(){
        // 拿到容器中所有的对象，才能批量执行
        this.skills.forEach( val => {
            val.init();
        } );
    }
}

// 创建一个组合器
var c = new Comb();

// 提前将，将来要批量操作的对象，组合起来
c.add( new GoHome() );
c.add( new OpenComputer() );
c.add( new OpenMusic() );

// 等待何时的时机，执行组合器的启动功能
c.action();
    // 在内部，会自动执行所有已经组合起来的对象的功能

したがって、我々はまとめることができます组合模式的特点：

1.批量执行
2.启动一个方法，会遍历多个方法，同时执行，有点类似于递归的感觉
3.组合模式略微耗性能，但是执行方便
 目前只是一个基础组合。
 高级组合：
1.组合成树状结构，每个对象下，还会有自己的子对象
2.如果执行了父对象的某个方法，所有的子对象会跟随执行
3.组合模式一般建议使用在动态的html结构上，因为组合模式的结构和html的结构，出奇的一致
4.基本对象和组合对象被一致对待, 所以要保证基本对象(叶对象)和组合对象具有一致方法

2、オブザーバ・モード：

Observerパターンもまた、また、GoFのが提案したオブザーバーモード、モデルをパブリッシュ/サブスクライブ、と呼ばれると呼ばれています23种软件设计模式的一种。
モードオブザーバ行为模式之一は、作用オブジェクトまたはプロセス（テーマデータ変更の自動リフレッシュ状態は、対応するオブジェクトを実行する他の個人に通知し、オブジェクトの状態が変更されたとき、自動的に他の関連するオブジェクトに通知することが可能であり、適切なを作りますデータ更新）。
この設計モデルを大幅にすることができ降低、プログラムモジュール間で耦合度容易にするために、更加灵活メンテナンスや拡張を。
するには观察的角度、対応する状況を見つけ、問題を扱います。
オブザーバーパターンは2つの役割が含まれています。
① 观察者（订阅者）：（加入者がいつでも参加するか、残すことができます）自分の情報やステータスを更新します。
② 被观察者（发布者）：対応する変更や実行を行うためには、出版社が発表した情報を受け取ります。
簡単に達成するために、簡単なブロードキャスト通信を実現する一对多対応関係を。
核心思想：観察者の状態を変更する場合に限り、視聴者がイベントオブザーバを購読しているようなので、観察者が見る人を取得するためにイベントの後に何をすべきかを気にせずに、視聴者に通知するためにイニシアチブを取るで、実際の手順であってもよいです実行加入者はコールバック関数。
Javascriptの例で実装：

// 我们向某dom文档订阅了点击事件，当点击发生时，他会执行我们传入的callback
element.addEventListener("click", callback, false)
element.addEventListener("click", callback, false)

簡単な例：
①

// 模拟事件监听式处理事件的过程
// 需要一个观察者(班主任)，创建一个事件容器（小本本），并准备on等方法（如何操作小本本）...
function Observer(){
this.msg = {};
}
// 向小本本中添加事件，消息
Observer.prototype.on = function(type, cb){
// 判断小本本中，有没有当前传进来的这个类型
// 如何没有，走else
if(this.msg[type]){
    // 如果有，直接给第一次设置的这个数组，添加个新数据
    this.msg[type].push(cb);
}else{
    // 给他设置一个对应的属性，同时，属性值需要提前写成数组
    this.msg[type] = [cb];
}
}
Observer.prototype.emit = function(type){
// 首先判断小本本中是不是已经记录
if(this.msg[type]){
    var event = {
        type:type
    }
    // 如果已经记录了信息，那么就去执行这个消息对应的所有的处理函数
    this.msg[type].forEach(val=>{
        val.call(this,event);
    })
}
}
Observer.prototype.off = function(type, cb){
// 首先判断小本本中是不是已经记录
if(this.msg[type]){
    // 准备保存符合传参的处理函数的索引
    var i = 0;
    // 遍历，判断，当前类型对应的每一个处理函数，依次作比较
    var onoff = this.msg[type].some((val, idx)=>{
        i = idx;
        return val === cb;
    })
    // 判断是否获取到重复的函数
    if(onoff){
        // 如果有，那么就在当前的消息处理函数的队列中，删除这个函数
        this.msg[type].splice(i, 1);
    }
}
}

// 首先创建一个观察者对象
var ob = new Observer();
// 准备两个处理函数
function a(){
console.log("找来谈话");
console.log(this);
}
function b(){
console.log("叫来家长");
}

// 随便绑定一个消息，给了两个处理函数
ob.on("早恋",a);
ob.on("早恋",b);

// 模拟事件的执行
ob.emit("早恋");

// 删除一个处理函数
ob.off("早恋", b);

// 模拟事件的执行
ob.emit("早恋");

②

var obj = {
    data: {
    list: []
      },
 }
 // defineProperty 可以观察 obj对象 的list 属性的使用
  Object.defineProperty(obj, 'list', {
       get() {
          console.log('获取了list 属性');
          console.log(this.data['list']);
          return this.data['list'];
      },
   		set(val) {
                console.log('值被更改了')：

                this.data['list'] = val;
        }
   })
// 获取了list属性，那么get 方法就会被调用
console.log(obj.list);
// 设置了list属性set 方法就会被调用
obj.list = ['a', 'b'];

注：メモリオブザーバモードの内容は、あなたがメッセージボックスで実行する必要がある。この方法で、実行する操作を加える; EMITは、操作を実行するために解放し、オフ、削除操作を行いました。

3、戦略モード：

ポリシーモードを定義します。アルゴリズムの家族を定義し、それぞれにそれらをカプセル化し、それらを交換します。それは次のとおりです。与えられた複数のプラン、特定の状態は、将来的に発生したときに、対応するプログラムの実施。

戦略モードでは目的、別の使用にアルゴリズムを実装することです。
ポリシーベースのプログラムモード至少由两部分組成物。
①最初の部分は、ポリシークラス（変数）の集合である、ポリシークラスは、特定のアルゴリズムをカプセル化し、特定の計算のために。
②第二部は、環境コンテキスト（変わらず）で、コンテキストがクライアントの要求を受け入れ、その要求は、ポリシークラスに委託されます。これを行うには、ポリシーオブジェクトへの参照を維持するために、コンテキストを説明します。
簡単な例：

/*策略类*/
var test = {
    "A": function (money) {
        return money + 6;
    },
    "B": function (money) {
        return money + 4;
    },
    "C": function (money) {
        return money + 2;
    }
};
/*环境类*/
var calculateBouns = function (level, money) {
    return test[level](money);
};
console.log(calculateBouns('A', 6)); // 12
console.log(calculateBouns('B', 6)); // 10
console.log(calculateBouns('C', 6)); // 8

戦略モードの利点：

ポリシーモデルは、様々なアルゴリズムのオブジェクトの完全なパッケージであり、これらのアルゴリズムは、オブジェクトの種々のために使用することができ、それは、任意の条件決意に供給することができます。

手数料および多型技術やアイデアの組み合わせを使用して、Strategyパターンは、効果的に複数の条件を避けることができる戦略パターンが条件文ならば多くのことを避けることができるという声明を選択します。

オープンにStrategyパターンが準拠 - クローズ原則、理解し、拡張するコードを容易にします。

戦略モードコードを再利用することができます。

huangfuyk。

公開された75元の記事・ウォンの賞賛304 ・は 60000 +を見て

プライベートの手紙の懸念

JSシングルトンデザインパターン、組み合わせモード、オブザーバーパターン、戦略パターン

おすすめ