memperkenalkan
Mode Flyweight (kelas terbang) menjalankan teknologi berbagi untuk secara efektif mendukung sejumlah besar objek berbutir halus, menghindari overhead sejumlah besar kelas kecil dengan konten yang sama (seperti konsumsi memori), dan memungkinkan semua orang untuk berbagi kelas (MetaClass).
Pola ensiklopedia dapat menghindari sejumlah besar overhead kelas yang sangat mirip. Dalam pemrograman, kadang-kadang perlu untuk menghasilkan sejumlah besar instance kelas berbutir halus untuk mewakili data. Jika Anda dapat menemukan bahwa contoh -contoh ini pada dasarnya memiliki overhead yang sama kecuali untuk beberapa parameter, Anda dapat secara signifikan mengurangi jumlah kelas yang perlu dipakai. Jika parameter tersebut dapat dipindahkan di luar contoh kelas dan melewati mereka ketika metode dipanggil, jumlah instance individual dapat sangat dikurangi dengan berbagi.
Jadi bagaimana jika Anda menerapkan mode ensiklopedia di JavaScript? Ada dua cara. Yang pertama adalah menerapkannya pada lapisan data, terutama untuk sejumlah besar objek serupa dalam memori; Yang kedua adalah menerapkannya pada lapisan DOM, yang dapat digunakan pada manajer acara pusat untuk menghindari menambahkan pegangan acara untuk setiap elemen anak dalam wadah induk.
Nikmati lapisan data
Ada dua konsep penting dalam kelas terbang - status internal intrinsik dan eksternal ekstrinsik. Keadaan internal dikelola melalui metode internal dalam objek, dan informasi eksternal dapat dihapus atau disimpan secara eksternal.
Terus terang, ini pertama -tama mencubit model asli, dan kemudian menghasilkan model spesifik dengan karakteristik yang berbeda sesuai dengan berbagai kesempatan dan lingkungan. Jelas, objek baru yang berbeda perlu dihasilkan di sini, jadi mode pabrik sering muncul dalam mode kelas terbang. Keadaan internal kelas terbang digunakan untuk berbagi. Pabrik Flyweight bertanggung jawab untuk memelihara kolam renang kelas terbang (Mode Pool) untuk menyimpan benda dengan keadaan internal.
Gunakan mode kenikmatan
Mari kita tunjukkan bahwa jika sistem menggunakan perpustakaan kelas untuk mengelola semua buku, metadata setiap buku secara tentatif diatur ke konten berikut:
Salinan kode adalah sebagai berikut:
PENGENAL
Judul
Pengarang
Genre
Jumlah halaman
ID Penerbit
ISBN
Kita juga perlu menentukan waktu dan peminjam dari setiap buku, serta tanggal pengembalian dan apakah itu tersedia:
Salinan kode adalah sebagai berikut:
checkOutdate
Pemeriksa
Duereturndate
tersedianya
Karena objek buku diatur ke kode berikut, harap dicatat bahwa kode belum dioptimalkan:
Salinan kode adalah sebagai berikut:
var book = fungsi (id, judul, penulis, genre, pagecount, publisherid, ISBN, checkOutDate, checkOutmember, duereturndate, ketersediaan) {
this.id = id;
this.title = judul;
this.author = penulis;
this.genre = genre;
this.pagecount = pagecount;
this.publisherid = publisherid;
this.isbn = isbn;
this.checkoutDate = checkOutDate;
this.checkoutmember = checkoutmember;
this.duereturnDate = duereturndate;
this.vailability = ketersediaan;
};
Book.prototype = {
getTitle: function () {
kembalikan title ini;
},
getAuthor: function () {
kembalikan ini.
},
getisbn: function () {
kembalikan this.isbn;
},
/*Metode get lainnya tidak akan ditampilkan di sini*/
// perbarui status pinjaman
UpdateCheckOutStatus: Function (BookID, NewStatus, CheckOutDate, CheckOutMember, NewReTurnDate) {
this.id = bookId;
this.availability = newStatus;
this.checkoutDate = checkOutDate;
this.checkoutmember = checkoutmember;
this.duereturnDate = newReturnDate;
},
//memperbarui
ExtentCheckoutPeriod: Function (bookId, newReturnDate) {
this.id = bookId;
this.duereturnDate = newReturnDate;
},
// Apakah kedaluwarsa
ispastdue: function (bookId) {
var currentDate = tanggal baru ();
return currentDate.getTime ()> date.parse (this.duereturnDate);
}
};
Program ini mungkin baik -baik saja di awal, tetapi seiring berjalannya waktu, buku dapat meningkat dalam jumlah besar, dan setiap jenis buku memiliki versi dan jumlah yang berbeda, Anda akan menemukan bahwa sistem semakin lambat dan lebih lambat. Ribuan objek buku dapat dibayangkan dalam memori, dan kita perlu menggunakan mode ensiklopedia untuk mengoptimalkan.
Kami dapat membagi data menjadi dua jenis data internal dan eksternal. Data yang terkait dengan objek buku (judul, penulis, dll.) Dapat dikaitkan dengan properti internal, sementara (CheckOutMember, DuereturnDate, dll.) Dapat dikaitkan dengan properti eksternal. Dengan cara ini, kode berikut dapat berbagi objek yang sama dalam buku yang sama, karena tidak peduli siapa yang meminjam buku, selama buku ini adalah buku yang sama, informasi dasarnya sama:
Salinan kode adalah sebagai berikut:
/*Kode Optimalisasi Mode Xienyuan*//
var book = function (judul, penulis, genre, pagecount, publisherid, isbn) {
this.title = judul;
this.author = penulis;
this.genre = genre;
this.pagecount = pagecount;
this.publisherid = publisherid;
this.isbn = isbn;
};
Mendefinisikan pabrik dasar
Mari kita tentukan pabrik dasar untuk memeriksa apakah objek buku itu dibuat sebelumnya, kembalikan jika ada, dan buat ulang dan simpan sehingga dapat terus mengakses nanti, yang memastikan bahwa kita hanya membuat satu objek untuk setiap buku:
Salinan kode adalah sebagai berikut:
/* Book Factory Singleton*/
var bookfactory = (function () {
var exentedBooks = {};
kembali{
CreateBook: Function (judul, penulis, genre, pagecount, publisherid, isbn) {
/*Cari apakah akan membuat sebelum*/
var yang ada = buku yang sudah ada [ISBN];
if (yang sudah ada) {
mengembalikan buku yang ada;
}kalau tidak{
/ * Jika tidak, buat satu dan simpan */
var book = buku baru (judul, penulis, genre, pagecount, publisherid, ISBN);
Buku yang ada [ISBN] = Buku;
buku kembali;
}
}
}
});
Kelola status eksternal
Keadaan eksternal relatif sederhana. Kecuali untuk buku yang kami selenarkan, yang lainnya perlu dikelola di sini:
Salinan kode adalah sebagai berikut:
/*BookRecordManager Singleton untuk meminjam manajemen*/
var bookRecordManager = (function () {
var bookRecordDatabase = {};
kembali{
/*Tambahkan catatan pinjaman buku*/
AddBookRecord: Fungsi (ID, Judul, Penulis, Genre, Pagecount, Penerbit, ISBN, CheckOutDate, CheckOutMember, DuereturnDate, ketersediaan) {
var book = bookfactory.createbook (judul, penulis, genre, pagecount, publisherid, ISBN);
bookRecordDatabase [id] = {
CheckOutMember: CHECKOUTMEMBER,
CheckOutDate: CheckOutDate,
duereturndate: duereturndate,
Ketersediaan: Ketersediaan,
Buku: Buku;
};
},
UpdateCheckOutStatus: Function (BookID, NewStatus, CheckOutDate, CheckOutMember, NewReTurnDate) {
var record = bookRecordDatabase [bookId];
Record.availability = newStatus;
Record.CheckoutDate = CheckOutDate;
Record.CheckOutMember = CheckOutMember;
Record.duereturnDate = newReturnDate;
},
ExtentCheckoutPeriod: Function (bookId, newReturnDate) {
bookRecordDatabase [bookId] .duereturndate = newReturnDate;
},
ispastdue: function (bookId) {
var currentDate = tanggal baru ();
return currentDate.getTime ()> date.parse (bookRecordDatabase [bookId] .duereturnDate);
}
};
});
Dengan cara ini, kami telah menyimpan informasi yang sama dari buku yang sama dalam objek BookManager dan hanya menyimpan satu salinan; Dibandingkan dengan kode sebelumnya, kita dapat menemukan bahwa itu menghemat banyak memori.
Nikmati mode yuan dan dom
Saya tidak akan banyak bicara tentang insiden DOM di sini. Saya yakin semua orang sudah mengetahuinya. Mari berikan dua contoh.
Contoh 1: Manajemen Acara Terpusat
Misalnya, jika kita perlu memantau acara kliknya untuk banyak elemen atau struktur serupa (seperti menu, atau beberapa LIS di UL), maka kita perlu mengikat acara untuk setiap elemen. Jika ada sangat, sangat banyak elemen, maka kinerjanya dapat dibayangkan. Dikombinasikan dengan pengetahuan gelembung, jika ada elemen anak dipicu, peristiwa akan menggelembung ke elemen sebelumnya setelah pemicu dipicu. Oleh karena itu, menggunakan fitur ini, kita dapat menggunakan mode Encyclopedia, kita dapat memantau acara acara pada elemen induk dari elemen -elemen serupa ini, dan kemudian menilai elemen anak mana yang dipicu oleh peristiwa, dan kemudian melakukan operasi lebih lanjut.
Di sini kami menggabungkan metode jQuery Bind/Unbind untuk memberikan contoh.
Html:
Salinan kode adalah sebagai berikut:
<Div id = "container">
<Div href = "#"> Informasi lebih lanjut (alamat)
<span>
Berikut ini informasi lebih lanjut
</span> </div>
<Div href = "#"> Informasi lebih lanjut (peta)
<span>
<iframe src = "http://www.map-generator.net/extmap.php?name=london&address=london%2c%20England&width=500...gt;" </iframe>
</span>
</div>
</div>
Javascript:
Salinan kode adalah sebagai berikut:
stateManager = {
fly: function () {
var self = ini;
$ ('#container'). unbind (). bind ("klik", function (e) {
var target = $ (e.originaltarget || e.srcelement);
// tentukan elemen anak mana
if (target.is ("div.toggle")) {
self.handleclick (target);
}
});
},
Handleclick: function (elem) {
elem.find ('span'). sakelar ('lambat');
}
});
Contoh 2: Menerapkan mode ensiklopedia untuk meningkatkan kinerja
Contoh lain masih terkait dengan jQuery. Secara umum, kami menggunakan objek elemen dalam fungsi callback event. Kami sering menggunakan bentuk $ (ini). Bahkan, itu berulang kali membuat objek baru karena ini dalam fungsi callback sudah merupakan elemen DOM itu sendiri. Kita harus menggunakan kode berikut:
Salinan kode adalah sebagai berikut:
$ ('Div'). Bind ('Click', function () {
console.log ('Anda mengklik:' + $ (ini) .attr ('id'));
});
// Kode di atas harus dihindari dan menghindari menghasilkan objek jQuery pada elemen DOM lagi, karena Anda dapat langsung menggunakan elemen DOM itu sendiri.
$ ('Div'). Bind ('Click', function () {
console.log ('Anda mengklik:' + this.id);
});
Bahkan, jika kita harus menggunakan bentuk $ (ini), kita juga dapat mengimplementasikan versi kita sendiri dari pola instance tunggal, misalnya, kita dapat menerapkan fungsi seperti jQuery.signle (ini) untuk mengembalikan elemen DOM itu sendiri:
Salinan kode adalah sebagai berikut:
jQuery.single = (function (o) {
var collection = jQuery ([1]);
return function (elemen) {
// Masukkan elemen di koleksi
koleksi [0] = elemen;
// kembali ke koleksi
koleksi kembali;
};
});
Bagaimana menggunakan:
Salinan kode adalah sebagai berikut:
$ ('Div'). Bind ('Click', function () {
var html = jQuery.single (this) .next (). html ();
Console.log (html);
});
Dengan cara ini, elemen DOM itu sendiri dikembalikan sebagaimana adanya, dan objek jQuery tidak dibuat.
Meringkaskan
Mode kelas terbang adalah mode yang meningkatkan efisiensi dan kinerja program, yang akan sangat mempercepat kecepatan program. Ada banyak skenario aplikasi: misalnya, jika Anda ingin membaca serangkaian string dari database, banyak dari string ini diulang, maka kami dapat menyimpan string ini di kolam renang kelas terbang (kolam).
Jika suatu aplikasi menggunakan sejumlah besar objek, dan sejumlah besar objek ini menyebabkan penyimpanan yang hebat, Anda harus mempertimbangkan untuk menggunakan mode ensiklopedia; dan sebagian besar keadaan objek bisa eksternal. Jika keadaan eksternal objek dihapus, banyak kelompok objek dapat diganti dengan objek bersama yang relatif sedikit. Saat ini, Anda dapat mempertimbangkan menggunakan mode Encyclopedia.