Mode Xiangyuan berbeda dari mode desain umum. Ini terutama digunakan untuk mengoptimalkan kinerja program. Yang terbaik adalah menyelesaikan masalah kinerja yang disebabkan oleh sejumlah besar objek serupa. Pola ensiklopedia mengurangi jumlah objek dan dengan demikian meningkatkan kinerja aplikasi dengan menganalisis objek aplikasi dan menguraikannya ke dalam data intrinsik dan eksternal.
Pengetahuan Dasar
Mode ensiklopedia mengurangi jumlah objek dengan berbagi sejumlah besar objek berbutir halus, sehingga mengurangi memori objek dan meningkatkan kinerja aplikasi. Ide dasarnya adalah untuk menguraikan komposisi objek serupa yang ada dan memperluasnya menjadi data internal bersama dan data eksternal yang tidak dibagikan. Kami menyebut objek data internal objek meta. Biasanya kelas pabrik juga diperlukan untuk menyimpan data intrinsik.
Dalam JS, mode ensiklopedia terutama terdiri dari karakter berikut:
(1) Klien: Kelas yang digunakan untuk memanggil pabrik Xiangyuan untuk mendapatkan data intrinsik, biasanya objek yang diperlukan oleh aplikasi.
(2) Pabrik Xiangyuan: Kelas digunakan untuk mempertahankan data Xiangyuan
(3) Nikmati Kelas Yuan: Kelas yang Menyimpan Data Internal
Implementasi dan Penerapan Mode Xiangyuan
Implementasi Umum
Mari kita berikan contoh untuk diilustrasikan: iPhone Produksi Massal Apple. Sebagian besar data seperti model dan layar adalah sama, dan beberapa bagian data seperti memori dibagi menjadi 16G, 32G, dll. Sebelum menggunakan mode Encyclopedia, kami menulis kode sebagai berikut:
fungsi iPhone (model, layar, memori, Sn) {this. model = model; this.screen = layar; this.memory = memori; this.sn = sn;} var phones = []; untuk (var i = 0; i <1000000; i ++) {var memori = i % 2 == 0? 16: 32; phones.push (iPhone baru ("iPhone6s", 5.0, memori, i));}Dalam kode ini, satu juta iPhone dibuat, dan setiap iPhone berlaku untuk satu memori secara mandiri. Tetapi ketika kita melihat lebih dekat, kita dapat melihat bahwa sebagian besar iPhone serupa, kecuali bahwa memori dan nomor seri berbeda. Jika itu adalah program dengan persyaratan kinerja tinggi, kita harus mempertimbangkan mengoptimalkannya.
Untuk sejumlah besar program dengan objek serupa, kami dapat mempertimbangkan untuk menggunakan mode Xiangyuan untuk mengoptimalkannya. Kami menganalisis bahwa sebagian besar model, layar, dan memori iPhone adalah sama, sehingga bagian data ini dapat digunakan untuk keperluan publik, yang merupakan data internal dalam mode Xiangyuan. Definisi kelas Xiangyuan adalah sebagai berikut:
fungsi iPhoneflyweight (model, layar, memori) {this.model = model; this.screen = layar; this.memory = memori;}Kami mendefinisikan kelas nikmati iPhone, yang berisi tiga data: model, layar dan memori. Kami juga membutuhkan pabrik Xiangyuan untuk menyimpan data ini:
var flyweightfactory = (function () {var iPhones = {}; return {get: function (model, layar, memori) {var key = model + layar + memori; if (! iphones [key]) {iPhones [key] = iPhoneflyweight baru (model, layar, memori);} return iPhones [key];}}};Di pabrik ini, kami mendefinisikan kamus untuk menyelamatkan objek pengorbanan, memberikan metode untuk mendapatkan objek pengorbanan sesuai dengan parameter, dan jika ada pengorbanan, itu akan dikembalikan secara langsung, dan jika tidak ada pengorbanan, itu akan dibuat.
Selanjutnya kami membuat kelas klien, yang dimodifikasi dari kelas iPhone:
fungsi iPhone (model, layar, memori, sn) {this.flyweight = flyweightfactory.get (model, layar, memori); this.sn = sn;}Kemudian kami masih menghasilkan beberapa iPhone seperti di antaranya
var phones = []; untuk (var i = 0; i <1000000; i ++) {var memori = i % 2 == 0? 16: 32; phones.push (iPhone baru ("iPhone6s", 5.0, memori, i));} console.log (ponsel);Kuncinya di sini adalah this.flyweight = flyweightfactory.get (model, layar, memori) di konstruktor iPhone. Kode ini memperoleh data Xiangyuan melalui pabrik Xiangyuan. Di pabrik Xiangyuan, jika suatu objek dengan data yang sama sudah ada, itu akan secara langsung mengembalikan objek. Beberapa objek iPhone berbagi bagian dari data yang sama ini, sehingga data serupa asli telah sangat berkurang, mengurangi penggunaan memori.
Aplikasi Nikmati Mode Yuan di DOM
Aplikasi khas dari mode Xiangyuan adalah operasi acara DOM, dan mekanisme acara DOM dibagi menjadi gelembung acara dan penangkapan acara. Mari kita perkenalkan keduanya secara singkat:
Gelembung Acara: Acara Bound dimulai dari elemen terdalam dan kemudian menggelembung ke lapisan terluar
Acara Pengambilan: Acara terikat dimulai dari elemen terluar dan kemudian melewati ke lapisan terdalam.
Misalkan kita memiliki daftar menu di HTML
<ul> <li> Opsi 1 </li> <li> Opsi 2 </li> <li> Opsi 3 </li> <li> Opsi 4 </li> <li> Opsi 5 </li> <li> Opsi 6 </li> </ul>
Klik item menu untuk melakukan operasi yang sesuai. Kami mengikat acara melalui jQuery, yang biasanya dilakukan:
$ (". item"). on ("click", function () {console.log ($ (this) .text ());})Bind Events untuk setiap item daftar dan klik untuk mengeluarkan teks yang sesuai. Tidak ada masalah saat ini, tetapi jika itu adalah daftar yang sangat panjang, terutama jika itu adalah ponsel dengan daftar yang sangat panjang, akan ada masalah kinerja, karena setiap item terikat pada acara dan mengambil memori. Tetapi penangan acara ini sebenarnya sangat mirip, jadi kita perlu mengoptimalkannya.
$ (". menu"). on ("klik", ".item", function () {console.log ($ (this) .text ());})Dengan cara ini, jumlah penangan acara dapat dikurangi. Metode ini disebut delegasi acara, yang juga menggunakan prinsip model Xiangyuan. Event Handler adalah bagian internal yang umum, dan teks dari setiap item menu adalah bagian eksternal. Mari kita bicara secara singkat tentang prinsip delegasi acara: klik pada item menu, dan acara akan menggelembung dari elemen LI ke elemen UL. Ketika kami mengikat acara ke UL, kami benar -benar mengikat suatu acara, dan kemudian menggunakan target dalam acara parameter acara untuk menentukan elemen mana klik tersebut. Misalnya, elemen LI pertama di level rendah, event.target adalah li. Dengan cara ini, kita bisa mendapatkan elemen klik spesifik dan kita bisa menangani secara berbeda sesuai dengan elemen yang berbeda.
Meringkaskan
Mode ensiklopedia adalah sarana untuk mengoptimalkan kinerja program, dan untuk mengurangi jumlah objek dengan berbagi data publik untuk mencapai program optimasi. Mode ensiklopedia cocok untuk skenario di mana ada sejumlah besar objek dan persyaratan kinerja serupa. Karena mode Xiangyuan perlu memisahkan data internal dan eksternal, ini meningkatkan kompleksitas logis program, disarankan untuk menggunakan mode Xiangyuan hanya ketika ada persyaratan kinerja.
Manfaat Nikmati Model Yuan:
Kepatuhan sumber daya halaman web dapat dikurangi dengan pesanan besarnya. Bahkan jika penerapan mode Xiangyuan tidak dapat mengurangi jumlah instance menjadi satu, Anda masih dapat banyak mendapat manfaat darinya.
Penghematan ini tidak memerlukan banyak modifikasi kode asli. Setelah membuat manajer, pabrik dan Xiangyuan, modifikasi pada kode tidak lebih dari mengubah dari secara langsung instantiasi kelas target menjadi memanggil metode objek manajer.
Kerugian menikmati mode yuan:
Jika digunakan di tempat yang tidak perlu, hasilnya sebenarnya akan merusak efisiensi kode. Pola ini mengoptimalkan kode sambil juga meningkatkan kompleksitasnya, yang dapat menyebabkan kesulitan dalam debugging dan pemeliharaan.
Ini menghambat debugging karena sekarang ada tiga kemungkinan kesalahan: manajer, pabrik dan xiangyuan.
Optimalisasi ini juga dapat membuat pemeliharaan lebih sulit. Sekarang Anda tidak menghadapi arsitektur yang jelas yang terdiri dari objek yang merangkum data, tetapi banyak hal yang berantakan. Data di dalamnya disimpan di setidaknya dua tempat. Yang terbaik adalah mengomentari data internal dan data eksternal.
Optimalisasi ini hanya boleh dilakukan bila perlu. Pertukaran harus dilakukan antara efisiensi operasional dan pemeliharaan. Jika Anda tidak yakin apakah Anda perlu menggunakan mode ensiklopedia, maka kemungkinan besar Anda tidak membutuhkannya. Mode Xiangyuan cocok untuk acara -acara seperti sumber daya sistem telah digunakan hampir dan jelas diperlukan semacam optimasi.
Pola ini sangat berguna untuk pemrogram JavaScript karena dapat digunakan untuk mengurangi jumlah elemen DOM yang akan digunakan pada halaman web, mengetahui bahwa elemen -elemen ini mengkonsumsi banyak memori. Menggunakan pola ini dan jenis organisasi seperti pola kombinasi dapat mengembangkan sistem aplikasi web kompleks yang kaya fitur yang dapat berjalan dengan lancar di lingkungan JavaScript modern apa pun.
Acara yang berlaku untuk mode Xiangyuan:
Sejumlah besar objek intensif sumber daya harus digunakan di halaman web. Jika hanya beberapa objek ini yang digunakan, optimasi semacam ini tidak hemat biaya.
Setidaknya sebagian dari data yang disimpan dalam objek dapat dikonversi menjadi data eksternal. Selain itu, menyimpan data ini di luar objek harus mengambil sumber daya yang relatif sedikit, jika tidak pendekatan ini sebenarnya tidak ada artinya untuk petunjuk kinerja. Jenis objek yang berisi sejumlah besar kode dasar dan konten HTML mungkin lebih cocok untuk optimasi semacam ini.
Setelah memisahkan data eksternal, jumlah objek unik relatif kecil.