Pada edisi terakhir, kita membahas desain komponen manajemen antrian dan memberinya nama yang keras dan unik: Smart Queue. Kali ini, kita akan mempraktikkan hasil desain sebelumnya dan mengimplementasikannya dengan kode.
Pertama, kita perlu mempertimbangkan tata letak file sumbernya, yaitu memutuskan cara membagi kode menjadi file independen. Mengapa melakukan ini? Ingat di akhir edisi terakhir saya menyebutkan bahwa komponen ini akan menggunakan "kode eksternal"? Untuk membedakan tujuan kode, diputuskan untuk membagi kode menjadi setidaknya dua bagian: file kode eksternal dan file Smart Queue.
Membedakan tujuan hanya satu, dan kedua, menyebarkannya ke dalam file independen bermanfaat untuk pemeliharaan kode. Bayangkan suatu hari di masa depan Anda memutuskan untuk menambahkan beberapa fungsi baru yang diperluas ke fungsi dasar manajemen antrian yang ada, atau mengemasnya ke dalam komponen yang mengimplementasikan tugas tertentu, namun Anda ingin mempertahankan fungsi yang ada (Implementasi internal) dan pemanggilan metode (antarmuka eksternal) tetap tidak berubah, maka menulis kode baru ke dalam file terpisah adalah pilihan terbaik.
Nah, lain kali kita akan fokus pada topik tata letak file, sekarang langsung ke intinya. Langkah pertama, tentu saja, adalah membuat namespace sendiri untuk komponen tersebut. Semua kode komponen akan dibatasi pada namespace tingkat atas ini:
var SmartQueue = jendela.SmartQueue ||
SmartQueue.version = '0,1';
Selama inisialisasi, jika Anda mengalami konflik namespace, tarik dan gunakan. Biasanya konflik ini disebabkan oleh referensi berulang ke kode komponen, jadi "menepi" akan menulis ulang objek dengan implementasi yang sama dalam kasus terburuk, jika ada objek lain di halaman yang juga disebut SmartQueue, itu memalukan, saya akan melakukannya. timpa implementasi Anda - jika tidak ada konflik penamaan lebih lanjut, pada dasarnya kedua komponen dapat berjalan tanpa insiden. Berikan juga nomor versinya.
Selanjutnya, buat tiga antrian untuk SmartQueue berdasarkan tiga prioritas:
var Q = SmartQueue.Queue = [[], [], []];
Masing-masing merupakan array kosong karena belum ada tugas yang ditambahkan. Dan omong-omong, buatlah "jalan pintas" untuk itu. Jika Anda ingin mengakses array nanti, tulis saja Q[n].
Selanjutnya, Task protagonis kita tampil secara megah - cara membuat Task baru dijelaskan di sini:
Saya tidak akan membahas detail spesifik di dalamnya. Dengan komentar yang diperlukan, umumnya kode kita dapat mendeskripsikan dirinya sendiri, dan hal yang sama berlaku untuk kode berikutnya. Di sini kami memberi tahu pelanggan (pengguna): Jika Anda ingin membuat instance SmartQueue.Task baru, Anda harus meneruskan setidaknya satu parameter ke konstruktor ini (tiga parameter terakhir dapat dihilangkan untuk pemrosesan default), jika tidak, pengecualian akan diberikan.
Namun hal ini tidak cukup. Terkadang, pelanggan ingin mengkloning instance baru dari Task yang sudah ada, atau memperbaiki "body yang sehat" (contoh objek Task yang sebenarnya) dari "body yang dinonaktifkan" (objek dengan beberapa atribut Task), dengan cara. Metode konstruksi di atas agak tidak nyaman - pelanggan harus menulis seperti ini:
var tugas1 = SmartQueue.Task baru(obj.fn, 1, '', obj.dependencies);
Sumber: Alipay UED
var T = SmartQueue.Task = function(fn, level, nama, dependensi) {
if(typeof fn !== FUNGSI) {
throw new Error('Jenis argumen tidak valid: fn.');
}
ini.fn = fn;
ini.tingkat = _validateLevel(tingkat) ?tingkat : LEVEL_NORMAL;
// mendeteksi jenis nama
this.name = typeof name === STRING && name ?
// dependensi dapat diambil sebagai 'Objek', jadi gunakan instanceof sebagai gantinya.
this.dependencies = dependensi instanceof Array ? dependensi : [];
};