Corak reka bentuk JavaScript corak tunggal contoh_kemahiran javascript

Peter Seibel, pengarang "Practical Common Lisp" pernah berkata, jika anda memerlukan corak, ada yang tidak kena. Masalah yang dia rujuk ialah kerana kelemahan bahasa yang wujud, dia perlu mencari dan merumuskan penyelesaian umum.

Sama ada ia ditaip lemah atau ditaip kuat, bahasa statik atau dinamik, bahasa imperatif atau deklaratif, setiap bahasa mempunyai kelebihan dan kelemahan tersendiri. Seorang atlet Jamaica mempunyai beberapa kelebihan dalam lari pecut dan juga tinju, tetapi kurang dalam berlatih yoga.

Warlock dan Shadow Priest dengan mudah boleh menjadi sokongan yang sangat baik, tetapi Mage musuh yang terbang mengelilingi peta dengan Macon di belakangnya akan menjadi sedikit janggal. Beralih kepada program, mungkin memerlukan banyak usaha untuk melaksanakan penghias dalam bahasa statik, tetapi memandangkan js boleh membuang kaedah pada objek pada bila-bila masa, corak penghias menjadi tidak berguna dalam js.

Ada sedikit buku yang bercakap tentang corak reka bentuk JavaScript "Corak Reka Bentuk Pro javaScript" adalah buku klasik, tetapi contoh di dalamnya agak bertele-tele, jadi saya menggabungkannya dengan kod yang saya tulis di tempat kerja meringkaskan. Sekiranya terdapat sebarang penyelewengan dalam pemahaman saya, sila berasa bebas untuk membetulkan saya.

1. Mod Singleton

Takrifan corak tunggal adalah untuk menghasilkan contoh kelas yang unik, tetapi js sendiri ialah bahasa "tanpa kelas". Banyak artikel yang bercakap tentang corak reka bentuk js menggunakan {} sebagai singleton, yang hampir tidak masuk akal. Oleh kerana terdapat banyak cara untuk menjana objek dalam js, mari kita lihat satu lagi singleton yang lebih bermakna.

Terdapat keperluan biasa apabila butang diklik, lapisan topeng perlu muncul pada halaman. Contohnya, apabila anda mengklik untuk log masuk di web.qq.com.

Kod ini untuk menjana lapisan topeng latar belakang kelabu adalah sangat mudah untuk ditulis.

Salin kod Kod adalah seperti berikut:

var createMask = function(){
kembalikan dokumen,body.appendChild( document.createElement(div) );
}
$( ‘butang’ ).klik( function(){
Var mask = createMask();
mask.show();
})

Masalahnya ialah lapisan topeng ini unik secara global, jadi setiap kali createMask dipanggil, div baharu akan dibuat Walaupun anda boleh mengeluarkannya apabila menyembunyikan lapisan topeng, ini jelas sekali tidak munasabah

Mari lihat pilihan kedua Cipta div ini pada permulaan halaman Kemudian gunakan pembolehubah untuk merujuknya.

Salin kod Kod adalah seperti berikut:

var mask = document.body.appendChild( document.createElement( ”div' ) );
$( ”butang' ).klik( function(){
mask.show();
} )

Dengan cara ini, hanya satu div lapisan topeng akan dibuat pada halaman, tetapi masalah lain akan menyusul Mungkin kita tidak akan memerlukan lapisan topeng ini, yang akan membazirkan div lain, dan sebarang operasi pada nod DOM akan sangat kedekut.

Bagaimana jika anda boleh menggunakan pembolehubah untuk menentukan sama ada div telah dibuat?

Salin kod Kod adalah seperti berikut:

topeng var;
var createMask = function(){
jika (topeng) kembalikan topeng;
lain{
mask = document,body.appendChild( document.createElement(div) );
kembalikan topeng;
}
}

Nampaknya bagus, di sini kita memang telah melengkapkan fungsi yang menjana objek lajur tunggal. Mari kita lihat dengan lebih dekat apa yang salah dengan kod ini.

Pertama sekali, fungsi ini mempunyai kesan sampingan tertentu Rujukan kepada topeng pembolehubah luaran diubah dalam badan fungsi Dalam projek kerjasama berbilang orang, createMask ialah fungsi yang tidak selamat topeng tidak diperlukan sepenuhnya.

Salin kod Kod adalah seperti berikut:

var createMask = function(){
topeng var;
kembalikan fungsi(){
kembalikan topeng ||. ( topeng = document.body.appendChild( document.createElement('div') ) )
}
}()

Penutupan mudah digunakan untuk membalut topeng boleh ubah, sekurang-kurangnya untuk fungsi createMask, ia ditutup.

Anda mungkin melihat ini dan merasakan corak singleton terlalu ringkas Sesungguhnya, sesetengah corak reka bentuk adalah sangat mudah Walaupun anda tidak pernah memberi perhatian kepada konsep corak reka bentuk, anda masih menggunakan sebahagian daripadanya secara tidak sedar dalam harian anda. Corak reka bentuk Sama seperti beberapa tahun yang lalu apabila saya memahami apa itu kereta dorong lelaki tua itu, saya juga memikirkannya

23 corak reka bentuk dalam GOF juga merupakan corak yang telah lama wujud dan digunakan berulang kali dalam pembangunan perisian Jika pengaturcara tidak menyedari dengan jelas bahawa dia telah menggunakan corak tertentu, maka dia mungkin terlepas reka bentuk yang lebih sesuai pada masa akan datang (Ini. petikan berasal dari "Dunia Pengaturcaraan Yukihiro Matsumoto").

Berbalik kepada topik, singleton sebelumnya masih mempunyai kekurangan. Ia hanya boleh digunakan untuk membuat lapisan topeng Bagaimana jika saya perlu menulis fungsi untuk mencipta objek xhr yang unik.

Fungsi dalam js adalah daripada jenis pertama, yang bermaksud bahawa fungsi juga boleh dihantar sebagai parameter. Lihat kod akhir.

Salin kod Kod adalah seperti berikut:

var singleton = function( fn ){
hasil var;
kembalikan fungsi(){
pulangkan hasil ||. ( hasil = fn .apply( ini, hujah ) );
}
}
var createMask = singleton( function(){
kembalikan document.body.appendChild( document.createElement('div') );
})

Gunakan pembolehubah untuk menyimpan nilai pulangan pertama Jika ia telah ditetapkan, pembolehubah akan dikembalikan dahulu dalam panggilan berikutnya Kod yang sebenarnya mencipta lapisan topeng dihantar ke tunggal melalui fungsi panggil balik wrapper. Kaedah ini sebenarnya dipanggil mod jambatan, saya akan bercakap mengenainya sedikit kemudian

Walau bagaimanapun, fungsi tunggal tidak sempurna Ia masih memerlukan hasil pembolehubah untuk menyimpan rujukan div Malangnya, ciri fungsi js tidak mencukupi untuk menghapuskan pengisytiharan dan pernyataan sepenuhnya.