Ketahui corak rantaian tanggungjawab corak reka bentuk JavaScript_kemahiran javascript

1. Definisi

Corak Rantaian Tanggungjawab: Beri berbilang objek peluang untuk memproses permintaan, dengan itu mengelakkan perhubungan gandingan antara pengirim dan penerima permintaan, menyambungkan objek ini ke dalam rantai, dan sepanjang ini Permintaan adalah melalui rantai sehingga objek mengendalikannya.

2. Contoh

• Anggap senario seperti ini:
• Kami bertanggungjawab ke atas laman web e-dagang yang menjual telefon bimbit Selepas dua pusingan tempahan dengan deposit masing-masing 500 yuan dan deposit 200 yuan, kami telah mencapai peringkat pembelian rasmi. Diskaun dilaksanakan untuk pengguna tempahan Pengguna yang telah membayar deposit sebanyak 500 yuan akan menerima kupon pusat membeli-belah 100 yuan diklasifikasikan sebagai pembelian biasa Dan apabila stok terhad, pembelian mungkin tidak dijamin.
  

/* 传统方式实现 */
// 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);

Kelebihan: Mengurai hubungan kompleks antara penghantar permintaan dan N penerima.
Kelemahan: Tiada jaminan bahawa permintaan tertentu akan diproses oleh nod dalam rantai.

3. Contoh: Objek muat naik fail

Contoh 2: Dapatkan objek muat naik fail menggunakan model rantai tanggungjawab
PS: Bandingkan "Belajar Corak Reka Bentuk JavaScript Iterator Corak"

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());

Sama ada rantai skop, rantai prototaip atau peristiwa yang menggelegak dalam nod DOM, kita boleh mencari bayang rantai tanggungjawab.

Di atas adalah keseluruhan kandungan artikel ini saya harap artikel ini akan membantu semua orang dalam mempelajari pengaturcaraan javascript. .