Apa itu Knockout.js?
Knockout adalah perpustakaan JavaScript yang sangat baik yang membantu Anda membuat teks kaya antarmuka pengguna dengan tampilan yang bagus dan fungsi pengeditan menggunakan hanya model data yang bersih dan rapi. Kapan saja konten UI lokal Anda perlu diperbarui secara otomatis (misalnya, tergantung pada perubahan perilaku pengguna atau perubahan dalam sumber data eksternal), KO dapat dengan mudah diimplementasikan untuk Anda dan sangat mudah dipertahankan.
1. Diagram Hubungan Kategori Utama
Ii. Tanggung jawab kelas
2.1. Dapat diamati (kelas objek pemantauan normal)
Implementasi internal yang dapat diamati (lainnya adalah fungsi):
1. Pertama -tama nyatakan FN bernama Observable (ini bisa dikatakan sebagai kelas)
2. Tambahkan properti Value Terbaru KO yang unik untuk menyimpan nilai yang dilewati oleh parameter
3. Jika atribut __proto__ asli didukung, gunakan HasownProperty untuk menentukan apakah atribut ada untuk diwariskan, dan menilai kode __proTo__ (di kelas utils)
var canSetPrototype = ({__proto__: []} instance dari array);
4. Metode Init atribut FN dari KO.Subscribble yang dapat diinisialisasi (terutama menambahkan langganan dan menerbitkan atribut terkait)
5. Diobservasi kemudian mewarisi atribut dan metode yang terkait dengan yang dapat diamati (ObservableFN berisi strategi eksekusi sebelum nilai berubah dan setelah nilai berubah)
// Tentukan prototipe untuk ObservableSvar ObservableFn = {'EqualityComparer': ValuesArePrimitiveAndequal, Peek: function () {return ini [ObservableAtestValue]; }, valueHasmutated: function () {this ['notifySubscribers'] (ini [ini obligasi yang berada di); }, valueWillMutate: function () {this ['notifysubscribers'] (ini [ini obligasi yang berada di atas], 'beforechange'); }};6. Kembalikan implementasi metode yang dapat diamati (jika parameter yang masuk ditetapkan, dan jika tidak ada parameter, ia diperoleh)
7. Kelas ini juga menyediakan hasprototype (untuk menentukan apakah instance yang ditentukan memiliki properti ini), isObservable (untuk menentukan apakah instance yang ditentukan adalah objek pemantauan), tidak dapat dilayani (untuk menentukan apakah itu adalah objek pemantauan yang dapat ditulis).
2.2. ObservableArray (kelas objek pemantauan array)
1. Pertama -tama jalankan metode KO.observable untuk menjadikan objeknya kelas yang dapat dipantau (bernama Hasil);
2. Kemudian perluas objek FN di Ko.observableArray (Ko.observableArray's FN menulis ulang metode operasi terkait array, seperti Hapus, Push, dll.)
3. Perluas metode melalui Extends (TrackArrayChanages, lihat 2.5 untuk detailnya)
4. Mengembalikan objek hasil yang diperluas.
ko.observableArray = function (initialValues) {initialValues = initialValues || [];if (typeof initialValues != 'object' || !('length' in initialValues))throw new Error("The argument passed when initializing an observable array must be an array, or null, or undefined.");var result = ko.observable(initialValues);ko.utils.setPrototypeOfOrExtend(result, ko.observableArray ['fn']); return result.extend ({'trackarraychanges': true});};2.3. Berlangganan (Berlangganan Kelas Objek)
1. Modul fungsional untuk berlangganan dan penerbitan adalah kelas dasar yang penting untuk Observable dan ObservableArray.
2. Ada metode subscrible di sini, yang digunakan untuk berlangganan perubahan objek pemantauan. Untuk pengembangan, Anda dapat menggunakan titik warisan ini untuk masuk.
Berlangganan: fungsi (callback, callbackTarget, event) {var self = this; event = event || DefaultEvent; var boundcallback = callbackTarget? callback.bind (callbackTarget): callback; var berlangganan = ko.subscription baru (self, boundcallback, function () {ko.utils.arrayremoveItem (self._subscriptions [event], berlangganan); if (portersubsubscriptionRemove) self.aftersubscriptionripriptionRover (event. (self.beforesubscriptionadd) self.beforesubscriptionAdd (event); if (! self._subscriptions [event]) self._subscriptions [event] = []; self._subscriptions [event] .push (berlangganan); berlangganan kembali;}3.Extend: Metode ini digunakan untuk menambahkan kelas ekstensi yang ditambahkan dengan metode Extends (seperti kelas ekstensi ObservableArray.Changetracking)
4. Metode perpanjangan ekstensi akan dieksekusi segera setelah objek pemantauan terdaftar. Parameter yang dilewati adalah target (objek saat ini) dan opsi (parameter yang dilewati ketika ekstensi dipanggil)
5. Extend adalah metode untuk menginstal ekstensi, dan itu akan segera menjalankan kode dalam ekstensi.
2.4. Extends (Kelas Objek Pemantauan Diperpanjang)
1. Koleksi Ekstensi Default KO
2. Menyediakan metode ApplyExtenders untuk menginstal ekstensi
function applyExtenders(requestedExtenders) {var target = this;if (requestedExtenders) {ko.utils.objectForEach(requestedExtenders, function(key, value) {var extenderHandler = ko.extenders[key];if (typeof extenderHandler == 'function') {target = extenderHandler(target, value) || target;}});}return target;}2.5. ObservableArray.Changetracking (implementasi spesifik dari objek pemantauan yang diperluas)
1. Ekstensi ini terutama mengimplementasikan pemantauan perubahan array, kemudian menghitung perbedaan dalam array, dan memicu peristiwa berlangganan terkait
2.CachedifForkNOwnOperation: Operasi cache pada array untuk perbandingan perbedaan
3. BefteSubscriptionAdd dan aftersubscriptionremove terkait langganan (belum sepenuhnya dipahami).
Di atas adalah analisis mendalam dari analisis kode sumber sistem gugur yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!