Rumah >hujung hadapan web >tutorial js >Pelajari kemahiran templat kaedah corak reka bentuk JavaScript pattern_javascript

Pelajari kemahiran templat kaedah corak reka bentuk JavaScript pattern_javascript

WBOY
WBOYasal
2016-05-16 15:19:051084semak imbas

1. Definisi

Kaedah templat adalah berdasarkan corak reka bentuk warisan, yang boleh meningkatkan kebolehskalaan sistem. Kelas induk abstrak dan subkelas dalam java
Kaedah templat terdiri daripada dua bahagian struktur, bahagian pertama ialah kelas induk abstrak, dan bahagian kedua ialah subkelas pelaksanaan konkrit.

2. Contoh

Kopi atau Teh
(1) Didihkan air
(2) Rendam daun teh dalam air mendidih
(3) Tuangkan teh ke dalam cawan
(4) Masukkan limau

/* 抽象父类:饮料 */
var Beverage = function(){};
// (1) 把水煮沸
Beverage.prototype.boilWater = function() {
  console.log("把水煮沸");
};
// (2) 沸水浸泡
Beverage.prototype.brew = function() {
  throw new Error("子类必须重写brew方法");
};
// (3) 倒进杯子
Beverage.prototype.pourInCup = function() {
  throw new Error("子类必须重写pourInCup方法");
};
// (4) 加调料
Beverage.prototype.addCondiments = function() {
  throw new Error("子类必须重写addCondiments方法");
};

/* 模板方法 */
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  this.addCondiments();
}

/* 实现子类 Coffee*/
var Coffee = function(){};
Coffee.prototype = new Beverage();
// 重写非公有方法
Coffee.prototype.brew = function() {
  console.log("用沸水冲泡咖啡");
};
Coffee.prototype.pourInCup = function() {
  console.log("把咖啡倒进杯子");
};
Coffee.prototype.addCondiments = function() {
  console.log("加牛奶");
};
var coffee = new Coffee();
coffee.init();

Menggunakan corak kaedah templat, rangka kerja algoritma subkelas dirangkumkan dalam kelas induk. Rangka kerja algoritma ini sesuai untuk kebanyakan subkategori dalam keadaan biasa, tetapi subkategori "personaliti" juga akan muncul.
Seperti dalam proses di atas, menambah perasa adalah pilihan.
Kaedah cangkuk boleh menyelesaikan masalah ini. Meletakkan cangkuk adalah cara biasa untuk mengasingkan perubahan.

/* 添加钩子方法 */
Beverage.prototype.customerWantsCondiments = function() {
  return true;
};
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  if(this.customerWantsCondiments()) {
    this.addCondiments();
  }
}

/* 实现子类 Tea*/
var Tea = function(){};
Tea.prototype = new Beverage();
// 重写非公有方法
Tea.prototype.brew = function() {
  console.log("用沸水冲泡茶");
};
Tea.prototype.pourInCup = function() {
  console.log("把茶倒进杯子");
};
Tea.prototype.addCondiments = function() {
  console.log("加牛奶");
};
Tea.prototype.customerWantsCondiments = function() {
  return window.confirm("需要添加调料吗?");
};
var tea = new Tea();
tea.init();

JavaScript tidak menyediakan warisan kelas sebenar dicapai melalui perwakilan antara objek.

3. "Prinsip Hollywood": Jangan hubungi kami, kami akan panggil anda

Senario penggunaan biasa:

(1) Corak kaedah templat: Menggunakan corak reka bentuk ini bermakna subkelas melepaskan kawalan dirinya dan sebaliknya memaklumkan subkelas oleh kelas induk. Sebagai subkelas, ia hanya bertanggungjawab untuk menyediakan beberapa butiran reka bentuk.
(2) Mod pemerhati: Penerbit menolak mesej kepada pelanggan.
(3) Fungsi panggil balik: permintaan tak segerak ajax merangkumkan operasi yang perlu dilakukan dalam fungsi panggil balik ini hanya dilaksanakan apabila data dikembalikan.

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn