Peter Seibel, penulis Practical Common Lisp, pernah mengatakan bahwa jika Anda membutuhkan pola, ada sesuatu yang salah. Masalah yang dia sebutkan mengacu pada kebutuhan untuk mencari dan merangkum solusi umum karena kelemahan bahasa yang melekat.
Apakah itu tipe yang lemah atau kuat, bahasa statis atau dinamis, bahasa yang imperatif atau deskriptif, setiap bahasa memiliki kelebihan dan kekurangannya sendiri. Seorang atlet Jamaika memiliki beberapa keunggulan dalam berlari dan bahkan tinju, tetapi tidak memiliki beberapa dalam berlatih yoga.
Warlocks dan imam bayangan dapat dengan mudah menjadi pembantu yang sangat baik, sementara sihir musuh terbang dengan Macon di punggungnya akan sedikit canggung. Untuk beralih ke program, mungkin perlu banyak upaya untuk mengimplementasikan dekorator dalam bahasa statis. Karena JS dapat melempar metode pada objek kapan saja, pola dekorator menjadi tidak berguna di JS.
Ada beberapa buku tentang pola desain JavaScript. "Pro JavaScript Design Patterns" adalah buku klasik, tetapi contoh di dalamnya cukup bertele -tele, jadi berdasarkan kode yang saya tulis di tempat kerja, saya akan meringkas pemahaman saya. Jika pemahaman saya bias, pastikan untuk memperbaikinya.
1. Mode Singleton
Definisi pola singleton adalah menghasilkan contoh unik dari suatu kelas, tetapi JS sendiri adalah bahasa "tanpa kelas". Banyak artikel yang berbicara tentang pola desain JS menggunakan {} sebagai singleton dan masuk akal. Karena ada banyak cara untuk menghasilkan objek oleh JS, mari kita lihat singleton lain yang lebih bermakna.
Ada persyaratan umum bahwa saat mengklik tombol, lapisan topeng perlu muncul di halaman. Misalnya, saat Anda mengklik web.qq.com untuk masuk.
Kode ini yang menghasilkan lapisan latar belakang abu -abu mudah ditulis.
Salinan kode adalah sebagai berikut:
var createMask = function () {
return document, body.appendChild (document.createelement (div));
}
$ ('tombol') .click (function () {
Var mask = createMask ();
mask.show ();
})
Masalahnya adalah bahwa lapisan topeng ini unik secara global, jadi setiap kali Anda memanggil createMask, div baru akan dibuat, meskipun dapat dihapus saat menyembunyikan lapisan topeng. Namun, jelas tidak masuk akal untuk melakukan ini.
Mari kita lihat solusi kedua, buat div ini di awal halaman. Kemudian rujuk dengan variabel.
Salinan kode adalah sebagai berikut:
var mask = document.body.appendChild (document.createelement ("div '));
$ ("tombol ') .click (function () {
mask.show ();
})
Ini tidak berarti bahwa hanya Lapisan Topeng yang akan dibuat di halaman, tetapi masalah lain akan mengikuti. Mungkin kita tidak akan pernah membutuhkan lapisan topeng ini, yang akan menyia -nyiakan div dan Anda harus sangat pelit tentang operasi simpul DOM.
Jika Anda dapat menggunakan variabel, tentukan apakah div telah dibuat?
Salinan kode adalah sebagai berikut:
var topeng;
var createMask = function () {
if (topeng) mengembalikan topeng;
kalau tidak{
mask = document, body.appendChild (document.createelement (div));
Return Mask;
}
}
Terlihat bagus, tetapi di sini saya menyelesaikan fungsi yang menghasilkan objek kolom tunggal. Mari kita lihat lebih dekat apa yang salah dengan kode ini.
Pertama -tama, fungsi ini memiliki efek samping tertentu. Fungsi mengubah referensi ke mask variabel eksternal di badan fungsi. Dalam proyek kolaborasi multi-orang, CreateMask adalah fungsi yang tidak aman. Di sisi lain, topeng variabel global tidak perlu. Mari kita tingkatkan.
Salinan kode adalah sebagai berikut:
var createMask = function () {
var topeng;
return function () {
mengembalikan topeng || (mask = document.body.appendchild (document.createelement ('div')))
}
} ()
Penutupan sederhana digunakan untuk membungkus topeng variabel, setidaknya untuk fungsi createMask, ditutup.
Mungkin ketika saya melihat ini, saya pikir pola singleton terlalu sederhana. Memang, beberapa pola desain sangat sederhana. Bahkan jika saya tidak pernah memperhatikan konsep pola desain, saya telah menggunakan beberapa pola desain dalam kode harian saya tanpa menyadarinya. Sama seperti ketika saya mengerti apa gerobak orang tua, saya memikirkannya bertahun -tahun yang lalu, ternyata ini adalah gerobak orang tua.
23 pola desain dalam GOF juga merupakan pola yang telah ada dan digunakan berulang kali dalam pengembangan perangkat lunak. Jika programmer tidak dengan jelas menyadari bahwa ia telah menggunakan pola tertentu, maka ia mungkin kehilangan desain yang lebih cocok di lain waktu (bagian ini berasal dari "dunia pemrograman di Matsumoto".
Mari kita kembali ke topik, singleton sebelumnya masih memiliki kerugiannya. Ini hanya dapat digunakan untuk membuat lapisan topeng. Bagaimana jika saya perlu menulis fungsi untuk membuat objek XHR yang unik? Bisakah saya menemukan pembungkus singleton umum?
Fungsi dalam JS adalah tipe pertama, yang berarti bahwa fungsi juga dapat dilewatkan sebagai parameter. Mari kita lihat kode akhir.
Salinan kode adalah sebagai berikut:
var singleton = function (fn) {
hasil var;
return function () {
Hasil pengembalian || (hasil = fn .Apply (ini, argumen));
}
}
var createMask = singleton (function () {
return document.body.appendChild (document.createelement ('div'));
})
Gunakan variabel untuk menyimpan nilai pengembalian pertama. Jika telah ditetapkan, variabel akan dikembalikan terlebih dahulu dalam panggilan berikutnya. Kode yang benar -benar membuat lapisan topeng diteruskan ke pembungkus singleton melalui fungsi callback. Metode ini sebenarnya disebut mode jembatan. Mengenai mode jembatan, itu diletakkan sedikit kemudian.
Namun, fungsi singleton tidak sempurna, selalu membutuhkan hasil variabel untuk mendaftarkan referensi ke div. Sayangnya, karakteristik fungsional JS tidak cukup untuk sepenuhnya menghilangkan deklarasi dan pernyataan.