Selama proses pengembangan normal kami, kami pasti akan menemukan situasi ini: kami memproses objek sederhana dan objek kompleks yang terdiri dari objek sederhana pada saat yang sama. Objek sederhana dan objek kompleks ini akan digabungkan ke dalam struktur pohon, dan klien harus mempertahankan konsistensi saat memprosesnya. Misalnya, untuk pesanan produk di situs web e-commerce, setiap pesanan produk mungkin memiliki beberapa kombinasi sub-pesanan, seperti folder dalam sistem operasi, setiap folder memiliki beberapa sub-folder atau file. Saat kami menyalin, menghapusnya, dll., Apakah itu folder atau file, itu sama untuk operator AS. Dalam skenario ini, sangat cocok untuk menggunakan mode kombinasi untuk mencapainya.
Pengetahuan Dasar
Mode Kombinasi: Menggabungkan objek ke dalam struktur pohon untuk mewakili hierarki "sebagian total". Mode kombinasi memungkinkan pengguna untuk memiliki konsistensi dalam penggunaan objek individu dan objek gabungan.
Ada tiga karakter utama dalam mode kombinasi:
(1) Komponen abstrak (komponen): Kelas abstrak yang terutama mendefinisikan antarmuka publik dari objek yang berpartisipasi dalam kombinasi
(2) Sub-objek (daun): Objek paling dasar yang membentuk objek gabungan
(3) Komposit: Objek kompleks yang dikombinasikan oleh objek anak
Kunci untuk memahami pola kombinasi adalah memahami konsistensi pola kombinasi untuk objek individu dan objek kombinasi. Mari kita bicara tentang implementasi pola kombinasi untuk memperdalam pemahaman kita.
Mode kombinasi dirancang untuk membuat UI secara dinamis di halaman. Anda hanya dapat menggunakan satu kehidupan = perintah untuk menginisialisasi beberapa operasi kompleks atau rekursif untuk banyak objek. Mode kombinasi menyediakan dua poin:
(1) memungkinkan Anda untuk memperlakukan sekelompok objek sebagai objek tertentu. Objek komposit mengimplementasikan operasi yang sama dengan sub-objek yang membuatnya. Melakukan operasi tertentu pada objek gabungan akan menyebabkan semua sub-objek di bawah objek itu untuk melakukan operasi yang sama. Oleh karena itu, Anda tidak hanya dapat mengganti satu objek dengan mulus ke dalam satu set objek, tetapi juga hal yang sama pada gilirannya. Objek independen ini disebut digabungkan secara longgar.
(2) Pola kombinasi akan menggabungkan himpunan sub-objek ke dalam struktur pohon dan memungkinkan traversal seluruh pohon. Ini akan menyembunyikan implementasi internal dan memungkinkan Anda untuk mengatur sub-objek dengan cara apa pun. Kode apa pun untuk objek ini (objek gabungan) tidak akan bergantung pada implementasi sub-objek internal.
Implementasi Mode Kombinasi
(1) mode kombinasi paling sederhana
Struktur DOM dari dokumen HTML adalah struktur pohon alami. Elemen paling dasar menjadi pohon DOM dan akhirnya membentuk dokumen DOM. Ini sangat cocok untuk mode kombinasi.
Kami sering menggunakan perpustakaan kelas jQuery, di mana pola kombinasi diterapkan lebih sering, misalnya, kode berikut sering diimplementasikan:
$ (". Test"). AddClass ("Notest"). Hapus ("tes");Kode sederhana ini adalah untuk mendapatkan elemen yang berisi tes kelas, dan kemudian memprosesnya dengan AddClass dan Removeclass. Apakah $ (". Test") adalah satu elemen atau beberapa elemen, pada akhirnya dipanggil melalui antarmuka AddClass dan Removeclass yang terpadu.
Mari kita simulasikan secara singkat implementasi AddClass:
var addClass = function (eles, classname) {if (eLes instanceof nodeList) {for (var i = 0, length = eles.length; i <length; i ++) {eles [i] .nodetype === 1 && (eles [i] .classname += ('' +className +')); }} lain if (eLes instanceof node) {eles.nodetype === 1 && (eles.classname + = ('' + className + '')); } else {throw "eles bukan simpul html"; }} addClass (document.getElementById ("div3"), "test"); addClass (document.queryselectorall (". Div"), "test");Kode ini hanya mensimulasikan implementasi AddClass (kompatibilitas dan universalitas tidak dipertimbangkan untuk saat ini), dan mudah untuk menilai tipe simpul terlebih dahulu, dan kemudian menambahkan ClassName sesuai dengan jenis yang berbeda. Untuk nodelist atau node, panggilan klien menggunakan antarmuka AddClass dengan cara yang sama. Ini adalah ide paling mendasar dari mode kombinasi, membuat penggunaan bagian dan keseluruhan konsisten.
(2) Contoh khas
Kami menyebutkan contoh khas: pesanan produk berisi beberapa sub-pesanan produk, dan beberapa sub-order produk membentuk pesanan produk yang kompleks. Karena karakteristik bahasa JavaScript, kami menyederhanakan tiga peran pola kombinasi menjadi 2 peran:
(1) Subobject: Dalam contoh ini, subobject adalah suborder produk
(2) Objek Kombinasi: Ini adalah urutan total produk
Misalkan kami mengembangkan situs web produk pariwisata yang berisi dua sub-produk: tiket dan hotel. Kami mendefinisikan sub-objek sebagai berikut:
Function FlightOrder () {} FlightOrder.PrototyP.Create = function () {Console.log ("Pesanan Penerbangan Dibuat");} Function HotelOrder () {} HotelOrder.Prototype.Create = function () {Console.log ("Hotel Order Dibuat");}Kode di atas mendefinisikan dua kelas: kelas pesanan tiket pesawat dan kelas pesanan hotel. Setiap kelas memiliki metode pembuatan pesanan sendiri.
Selanjutnya kami membuat kelas pesanan total:
function totalorders () {this.orderList = [];} totalorders.prototype.addorder = function (order) {this.orderList.push (order);} totalorders.prototype.create = function (order) {for (var i = 0, length = this.orderlist.length; i <length; }}Objek ini memiliki tiga anggota utama: daftar pesanan, metode untuk menambahkan pesanan, dan metode untuk membuat pesanan.
Saat menggunakan klien, berikut ini adalah sebagai berikut:
var flight = new FlightOrder (); flight.create (); var orders = totalorders baru (); orders.addorder (new flightoDer ()); orders.addorder (new hotelorder ()); orders.create ();
Panggilan klien menunjukkan dua cara, satu adalah untuk membuat pesanan tiket pesawat, dan yang lainnya adalah membuat banyak pesanan, tetapi akhirnya diciptakan melalui metode Create. Ini adalah skenario aplikasi yang sangat khas dari mode kombinasi.
Meringkaskan
Pola kombinasi tidak sulit untuk dipahami. Ini terutama memecahkan masalah konsistensi objek tunggal dan objek gabungan dalam cara mereka digunakan. Ini bagus untuk menggunakan pola kombinatorial jika objek memiliki hierarki yang jelas dan ingin menggunakannya secara seragam. Dalam pengembangan web, hierarki ini sangat umum dan sangat cocok untuk menggunakan pola kombinasi. Khusus untuk JS, Anda tidak harus tetap berpegang pada bentuk bahasa tradisional yang berorientasi objek, dan secara fleksibel menggunakan karakteristik bahasa JS untuk mencapai konsistensi sebagian dan penggunaan secara keseluruhan.
(1) Skenario Menggunakan Mode Kombinasi
Gunakan mode kombinasi saat menghadapi dua situasi berikut
A. Kumpulan objek yang berisi struktur hierarkis tertentu (struktur spesifik tidak dapat ditentukan selama proses pengembangan)
B. ingin melakukan operasi pada objek ini atau beberapa di antaranya
(2) Kerugian dari mode kombinasi
Karena setiap operasi objek gabungan akan memanggil operasi yang sama pada semua sub-objek, akan ada masalah kinerja ketika struktur gabungan besar. Juga, saat menggunakan mode kombinasi untuk merangkum HTML, Anda harus memilih tag yang sesuai. Misalnya, tabel tidak dapat digunakan dalam mode kombinasi, dan node daun tidak jelas.