JavaScript 設計パターンの責任連鎖パターンを学ぶ_JavaScript スキル

1. 定義

責任の連鎖パターン: 複数のオブジェクトにリクエストを処理する機会を与えることで、リクエストの送信者と受信者の結合関係を回避し、これらのオブジェクトをチェーンに接続し、それに沿ってリクエストはオブジェクトが処理するまでチェーンを通過します。

2. 例

• 次のシナリオを想定します:
• 私たちは携帯電話を販売する電子商取引ウェブサイトを担当しています。デポジット 500 元とデポジット 200 元の 2 回の予約を経て、正式な購入段階に達しました。デポジット500元を支払ったユーザーには100元のモールクーポンが付与され、デポジットを支払っていないユーザーには50元のモールクーポンが付与されます。通常購入に分類され、在庫に限りがある場合は購入が保証されない場合があります。
  

/* 传统方式实现 */
// orderType：[1:500, 2:200, 3:普通]，isPaid：true/false，stock：库存量
var order = function(orderType, isPaid, stock) {
  if(orderType === 1) {
    if(isPaid) {
      console.log("500元定金预购，得到100优惠券");
    } else {
      if(stock > 0) {
        console.log("普通购买，无优惠券");
      }else {
        console.log("库存不足");
      }
    }
  }else if(orderType === 2) {
    if(isPaid) {
      console.log("200元定金预购，得到50优惠券");
    } else {
      if(stock > 0) {
        console.log("普通购买，无优惠券");
      }else {
        console.log("库存不足");
      }
    }
  }else if(orderType === 2) {
    if(stock > 0) {
      console.log("普通购买，无优惠券");
    }else {
      console.log("库存不足");
    }
  }
}

order(1, true, 500);

/*职责链 */
var order500 = function(orderType, isPaid, stock) {
  if(orderType === 1 && isPaid === true) {
    console.log("500元定金预购，得到100优惠券");
  }else {
    return "nextSuccessor";
  }
};

var order200 = function(orderType, isPaid, stock) {
  if(orderType === 2 && isPaid === true) {
    console.log("200元定金预购，得到50优惠券");
  }else {
    return "nextSuccessor";
  }
};

var orderNormal = function(orderType, isPaid, stock) {
  if(stock > 0) {
    console.log("普通购买，无优惠券");
  }else {
    console.log("库存不足");
  }
};

Function.prototype.after = function(fn) {
  var self = this;
  return function() {
    var ret = self.apply(this, arguments);
    if(ret === "nextSuccessor") {
      return fn.apply(this, arguments);
    }
    return ret;
  };
}

var order = order500.after(order200).after(orderNormal);
order(1, true, 10);

利点: リクエストの送信者と N 人の受信者の間の複雑な関係を分離します。
欠点: 特定のリクエストがチェーン内のノードによって処理されるという保証はありません。

3. 例: ファイルアップロードオブジェクト

例 2: 責任連鎖モデルを使用してファイル アップロード オブジェクトを取得する
PS: 「JavaScript デザイン パターンの学習イテレータ パターン」を比較

function getActiveUploadObj() {
  try{
    return new ActiveObject("TXFTNActiveX.FTNUpload"); // IE上传控件
  }catch(e) {
    return "nextSuccessor";
  }
}

function getFlashUploadObj() {
  if(supportFlash().f === 1) {  // supportFlash见《JavaScript设计模式--迭代器模式》
    var str = '<object type="application/x-shockwave-flash"></object>';
    return $(str).appendTo($("body"));
  }
  return "nextSuccessor";
}

function getFormUploadObj() {
  var str = '<input name="file" type="file" class="ui-file" />';
  return $(str).appendTo($("body"));
}

var getUploadObj = getActiveUploadObj.after(getFlashUploadObj).after(getFormUploadObj);

console.log(getUploadObj());

スコープ チェーン、プロトタイプ チェーン、DOM ノード内のイベント バブリングのいずれであっても、責任の連鎖の影を見つけることができます。

以上がこの記事の全内容です。この記事が JavaScript プログラミングを学ぶ皆さんのお役に立てれば幸いです。 。