Kajian awal tentang corak reka bentuk JavaScript_kemahiran javascript

Tujuan: Terdapat banyak corak reka bentuk Cuba catatkan kebaikan dan keburukan corak reka bentuk yang berbeza yang dipelajari supaya anda boleh merujuknya kemudian.

Kata Pengantar: Apabila saya membaca Elevation setengah tahun yang lalu, saya melihat bab tentang corak reka bentuk, saya keliru, bukan kerana saya tidak memahaminya, tetapi kerana saya tidak faham mengapa sangat menyusahkan hanya untuk mencipta objek. Sehinggalah saya baru-baru ini menyelesaikan projek kecil pertama saya barulah saya menyedari betapa buruknya ia akan berlaku tanpa spesifikasi dan sekatan yang sesuai apabila jumlah kod meningkat. Jadi saya beralih kepada ketinggian semula dan meringkaskan kebaikan dan keburukan beberapa corak reka bentuk mudah yang saya pelajari.

Teks: Artikel ini memperkenalkan sejumlah 7 corak reka bentuk, senario aplikasi, kebaikan dan keburukan mereka.

1. Mod kilang

Gunakan fungsi secara langsung untuk merangkum objek dan menggunakan objek sebagai nilai pulangan.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=person("Su",25); 

Kelemahan: Masalah dengan pengecaman objek Semua objek yang dicipta adalah contoh Objek dan sukar untuk dibezakan.

2. Corak pembina

function Person (name,age) {
  this.name=name;
  this.age=age;
  this.sayName=function () {
    alert(this.name);
  };
}
var me=new Person("Su",25); 

Kelebihan: Menggunakan corak pembina boleh menandakan kejadian sebagai jenis tertentu.

Kelemahan: Kaedah objek yang dicipta semuanya bersifat peribadi Jika anda hanya mahu menjana kaedah awam, ia akan menyebabkan pembaziran prestasi yang tidak perlu.

3. Mod prototaip

Gunakan warisan rantaian prototaip

function Person () {}
Person.prototype.name="Su";
Person.prototype.sayName=function () {
alert(this.name);}
var me =new Person(); 

Kelemahan: Semua sifat dan kaedah dikongsi mengikut keadaan. Apabila sifat dan kaedah mengandungi nilai jenis rujukan, mengubah suai sifat dan kaedah satu tika akan mempengaruhi semua kejadian lain.

4. Corak Pembina Prototaip

Sifat dan kaedah peribadi dijana menggunakan pembina, dan sifat dan kaedah awam diwarisi menggunakan prototaip. Menggabungkan kelebihan kedua-dua kaedah.

function Person (name,age) {
  this.name=name;
  this.age=age;
}
Person.prototype={
  constructor:Person,
  sayName:function () {
      alert(this.name);
  }
}
var me=new Person("Su",25); 

Kelemahan: Beri perhatian kepada pewarisan prototaip nilai jenis rujukan.

ps: Kod dalam gambar di atas menulis semula objek prototaip Pembina Orang dan menghalakan penunjuk objek prototaip ke objek, jadi sifat pembina menghala ke Objek dan bukannya Orang, jadi ia mesti ditetapkan secara eksplisit kepada Orang.

5. Mod Prototaip Dinamik

Pada asasnya, ia masih merupakan fungsi pembina Ia hanya menambah kaedah yang ditentukan pada objek prototaip apabila ia tidak wujud.

function Person (name,age) {
  this.name=name;
  this.age=age;
  if (typeof this.sayName!="function") {
    Person.prototype.sayName=function () {
      alert(this.name);
    }
  }
}
var me =new Person("Su",25); 

Kelemahan: Objek prototaip tidak boleh ditindih menggunakan literal objek. Kerana ini akan menjadikan penunjuk contoh menunjuk ke objek prototaip baharu. Dalam erti kata lain, kaedah sayName yang ditambahkan pada objek prototaip dalam rajah di atas akan menjadi tidak sah.

6. Corak pembina parasit

Gunakan operator baharu semasa membuat panggilan Selain daripada itu, saya tidak nampak sebarang perbezaan daripada mod kilang. Mencari nasihat daripada pakar.

function person (name,age) {
  var obj=new Object();
  obj.name=name;
  obj.age=age;
  obj.sayName=function () {
    alert(this.name);
  };
  return obj;
}
var me=new person("Su",25); //这里使用new操作符 

7. Corak Pembina Selamat

Tiada atribut awam, lumpuhkan ini dan hanya dedahkan API yang diperlukan untuk panggilan data. Sesuai untuk kawasan yang mempunyai keperluan keselamatan.

function Person (name) {
 var o=new Object();
 o.sayName=function () {
 alert(name);  
 }  
 return o;
}
var me=Person("Su"); 

Seperti yang ditunjukkan dalam kod di atas, atribut nama dalaman hanya boleh diakses melalui kaedah sayName.

Artikel ini memperkenalkan tujuh corak reka bentuk kepada anda, dan masing-masing memperkenalkan kelebihan dan kekurangannya, saya harap ia akan membantu untuk mempelajari pengetahuan berkaitan corak reka bentuk js.