Belajar corak reka bentuk JavaScript - kemahiran pattern_javascript penghias

Kadang-kadang kita tidak mahu kelas menjadi besar dan mengandungi banyak tanggungjawab sekaligus. Kemudian kita boleh menggunakan corak yang dihias.
Corak penghias boleh menambah beberapa tanggungjawab tambahan secara dinamik pada objek tanpa menjejaskan objek lain yang diperoleh daripada kelas ini.
Corak yang dihias membenamkan satu objek ke objek lain, yang sebenarnya bersamaan dengan objek ini dibalut oleh objek lain, membentuk rantai pembungkusan.

1 Tambah beberapa fungsi tambahan pada fungsi tanpa menukar fungsi asal

1. Simpan petikan asal

window.onload = function() {
  console.log(1);
};

var _onload = window.onload || function() {};

window.onload = function() {
  _onload();
  console.log(2);
}

Soalan:
(1) Pembolehubah perantaraan
mesti dikekalkan (2) Anda mungkin menghadapi masalah ini dirampas
Dalam contoh window.onload, tiada masalah seperti itu kerana apabila memanggil fungsi biasa _onload, ini juga menghala ke tetingkap, sama seperti semasa memanggil window.onload.

2 ini telah dirampas:

var _getElementById = document.getElementById;
document.getElementById = function(id) {
  console.log(1);
  return _getElementById(id);
}

return _getElementById(id); // 报错“Uncaught TypeError: Illegal invocation”

Oleh kerana _getElementById ialah fungsi global, apabila fungsi global dipanggil, ini menghala ke tetingkap, dan ini dalam document.getElementById dijangka menghala ke dokumen.

3 Selesaikan rampasan ini:

var _getElementById = document.getElementById;
document.getElementById = function(id) {
  console.log(1);
  return _getElementById.call(document, id);
}

2. Gunakan AOP untuk menghiasi fungsi

/* 让新添加的函数在原函数之前执行（前置装饰）*/
Function.prototype.before = function(beforefn) {
  var _self = this;
  return function() {
    beforefn.apply(this, arguments);  // 新函数接收的参数会被原封不动的传入原函数
    return _self.apply(this, arguments);
  };
};

/* 让新添加的函数在原函数之后执行（后置装饰）*/
Function.prototype.after = function(afterfn) {
  var _self = this;
  return function() {
    var ret = _self.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  };
};

document.getElementById = document.getElementById.before(function() {
  console.log(1);
});

3. Elakkan daripada mencemari prototaip

var before = function(fn, beforefn) {
  return function() {
    beforefn.apply(this, arguments);
    return fn.apply(this, arguments);
  };
};

var after = function(fn, afterfn) {
  return function() {
    var ret = fn.apply(this, arguments);
    afterfn.apply(this, arguments);
    return ret;
  };
};

document.getElementById = before(document.getElementById, function(){
  console.log(1);
});

4. Contoh – pengesahan borang pemalam

Digabungkan dengan [Pengesahan Borang] dalam "Mempelajari Corak Reka Bentuk JavaScript - Corak Strategi" , dan menggunakan ajax untuk menyerahkan pengesahan data, kesannya hebat!

Ubah suai kaedah sebelum di atas

var before = function(fn, beforefn) {
  return function() {
    if(beforefn.apply(this, arguments) === false) {
      // beforefn返回false，直接return，不执行后面的原函数
      return;
    }
    return fn.apply(this, arguments);
  };
};

/* 模拟数据验证*/
var validate = function() {
  if(username === "") {
    console.log("验证失败！");
    return false;
  }
  return true;
}
/* 模拟ajax提交*/
var formSubmit = function() {
  console.log("提交！！！");
}

username = 1;
formSubmit = before(formSubmit, validate); // 提交！！！
formSubmit();

username = "";
formSubmit = before(formSubmit, validate); // 验证失败！
formSubmit();

5. Mod penghias dan mod proksi

Mata yang serupa: Kedua-dua corak menerangkan cara menyediakan tahap rujukan tidak langsung tertentu untuk objek Bahagian pelaksanaannya mengekalkan rujukan kepada objek lain dan menghantar permintaan kepada objek itu.
Perbezaan:
(1) Mod proksi: Apabila akses tempatan terus menyusahkan atau tidak memenuhi keperluan, sediakan pengganti untuk ontologi ini. Tentukan fungsi utama secara setempat, dan ejen menyediakan atau menafikan akses kepadanya, atau melakukan beberapa perkara tambahan sebelum mengakses ontologi. (Ia masih melakukan perkara yang sama seperti badan utama)
(2) Mod penghias: tambah gelagat pada objek secara dinamik. (Anda tidak boleh menentukan semua fungsi objek pada mulanya, dan sebenarnya menambah tanggungjawab dan tingkah laku baharu pada objek)

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