Rumah >hujung hadapan web >tutorial js >Corak reka bentuk JavaScript corak kilang dan corak pembina kemahiran_javascript

Corak reka bentuk JavaScript corak kilang dan corak pembina kemahiran_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
2016-05-16 16:14:371383semak imbas

Apakah itu corak

Saya sedang bersiap untuk peperiksaan akhir sebentar tadi. Ia sangat memenatkan dan memenatkan, dan saya benar-benar tidak mempunyai masa untuk mengemas kini artikel Hari ini saya akan bercakap dengan anda tentang corak reka bentuk dalam JavaScript.

Pertama sekali, apa yang perlu kita ketahui ialah: corak ialah penyelesaian yang boleh diguna semula, manakala anti-corak ialah penyelesaian yang lemah untuk masalah tertentu.

Contoh biasa anti-corak js

1. Hantar rentetan kepada setTimeout dan setInterval bukannya fungsi, yang mencetuskan penggunaan dalaman eval().
2. Tentukan sejumlah besar pembolehubah dalam konteks global untuk mencemarkan ruang nama global
3. Ubah suai prototaip kelas Objek
4. Gunakan js dalam bentuk sebaris Kod js yang dibenamkan dalam fail HTML tidak boleh disertakan dalam alat ujian unit luaran.
5. Menyalahgunakan document.write. Jika document.write dilaksanakan selepas halaman dimuatkan, ia akan menulis semula halaman yang kami ada. Jika anda boleh menggunakan document.creatElement, cuba jangan gunakan document.write.

Kategori corak reka bentuk

Corak Rekaan Kreatif

Corak reka bentuk kreatif memberi tumpuan kepada pengendalian mekanisme penciptaan objek untuk mencipta objek dengan cara yang sesuai untuk situasi tertentu. Hartanah yang termasuk dalam kategori ini termasuk:

Pembina, Kilang, Abstrak, Prototaip, Singleton dan Pembina

Corak Reka Bentuk Struktur

Corak struktur adalah mengenai komposisi objek dan selalunya boleh digunakan untuk mencari cara mudah untuk mewujudkan hubungan antara objek yang berbeza.
Corak yang termasuk dalam kategori ini termasuk:

Penghias, Penampilan fasad, Flyweight, Penyesuai penyesuai dan ejen Proksi

Corak Reka Bentuk Tingkah Laku

Corak tingkah laku memfokuskan pada menambah baik atau memudahkan komunikasi antara objek berbeza dalam sistem.

Corak tingkah laku termasuk:

Iterator, Pengantara, Pemerhati dan Pelawat

Mod kilang

Untuk menyelesaikan masalah pengisytiharan berbilang objek yang serupa, kita boleh menggunakan kaedah yang dipanggil corak kilang Kaedah ini adalah untuk menyelesaikan masalah penduaan yang banyak apabila membuat seketika objek.

Salin kod Kod adalah seperti berikut:

Klasifikasi Corak Kilang

Mod kilang dibahagikan kepada kilang mudah, kilang abstrak dan kilang pintar tidak memerlukan penggunaan pembina secara eksplisit.

Corak Kilang Mudah: Gunakan kelas (biasanya singleton) untuk menjana kejadian.

Corak kilang yang kompleks: Gunakan subkelas untuk menentukan contoh kelas tertentu pembolehubah ahli.

Faedah Model Kilang

Faedah utama ialah anda boleh menghapuskan gandingan antara objek dengan menggunakan kaedah kejuruteraan dan bukannya kata kunci baharu. Cegah pertindihan kod dengan memusatkan semua kod instantiasi dalam satu lokasi.


Kelemahan model kilang

Untuk kebanyakan kelas, sebaiknya gunakan kata kunci dan pembina baharu, yang boleh menjadikan kod lebih ringkas dan mudah dibaca. Daripada perlu melihat kaedah kilang untuk mengetahui. 

Corak kilang menyelesaikan masalah instantiasi berulang, tetapi terdapat masalah lain, iaitu masalah pengenalan, kerana adalah mustahil untuk mengetahui objek mana yang menjadi contoh.

Salin kod Kod adalah seperti berikut:
makluman(jenis ujian1); //Objek
alert(test1 instanceof Object); //true

Bila menggunakan corak kilang?

Mod kilang digunakan terutamanya dalam senario berikut:

1. Apabila objek atau komponen melibatkan kerumitan tinggi
2. Apabila anda perlu menjana contoh objek yang berbeza dengan mudah mengikut persekitaran yang berbeza
3. Apabila berurusan dengan banyak objek kecil atau komponen yang berkongsi sifat yang sama

Corak pembina

Pembina (kaedah pembina) boleh digunakan dalam ECMAScript untuk mencipta objek tertentu. Mod ini hanya boleh menyelesaikan masalah bahawa mod kilang di atas tidak dapat mengenal pasti kejadian objek.

Salin kod Kod adalah seperti berikut:

Menggunakan kaedah pembina bukan sahaja menyelesaikan masalah instantiasi berulang, tetapi juga menyelesaikan masalah pengecaman objek Perbezaan antara mod ini dan mod kilang ialah:

1. Kaedah pembina tidak mencipta objek secara eksplisit (Objek baharu()); 2. Tetapkan sifat dan kaedah secara langsung kepada objek ini;
3. Tiada penyata pulangan.

Terdapat beberapa spesifikasi untuk kaedah pembina:

1. Nama fungsi dan nama pembina instantiasi adalah sama dan huruf besar (PS: Ia tidak wajib, tetapi menulis dengan cara ini membantu membezakan pembina daripada fungsi biasa); 2. Untuk mencipta objek melalui pembina, anda mesti menggunakan operator baharu.

Memandangkan objek boleh dibuat melalui pembina, dari manakah objek ini datang, dan di manakah Object() baharu dilaksanakan? Proses pelaksanaan adalah seperti berikut:

1. Apabila pembina digunakan dan pembina baru () digunakan, Objek baru () dilaksanakan di latar belakang; 2. Berikan skop pembina kepada objek baru (iaitu, objek yang dicipta oleh Objek baru ()), dan ini dalam badan fungsi mewakili objek yang dicipta oleh Objek baru ().

3. Jalankan kod dalam pembina; 4. Kembalikan objek baru (kembali terus di latar belakang).



Pembina dengan prototaip

Terdapat atribut yang dipanggil prototaip dalam js. Selepas memanggil pembina js untuk mencipta objek, objek baharu akan mempunyai semua sifat prototaip pembina. Dengan cara ini, berbilang objek Kereta boleh dibuat dan mempunyai akses kepada prototaip yang sama.


Salin kod

Kod adalah seperti berikut:         fungsi Kereta(model, tahun, batu) {
This.model = model;
This.year = tahun;
This.miles = batu;
}
Car.prototype.run = fungsi () {
                kembalikan this.model " telah melakukan " this.miles " miles ";

};
        var Benz = Kereta baharu('S350',2010,20000);
      var Ford = Kereta baharu('Ford',2012,12000);

console.log(Benz.run());//"S350 telah melakukan 20000 batu "
console.log(Ford.run());


Kini satu contoh run() boleh dikongsi antara semua objek Kereta.

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