Angular baik dalam kerangka kerja MVVM, tetapi dengan kerangka kerja yang begitu besar dan komprehensif, tidak rendah untuk dipelajari, dan akan memakan waktu setidaknya satu atau dua minggu untuk memulai. KnockoutJS berfokus pada pengikatan data dan dapat digunakan hanya dalam satu atau dua hari, sehingga biaya belajar tidak terlalu rendah! Di era ketika evolusi front-end sangat cepat, biaya belajar juga merupakan faktor yang harus dipertimbangkan. Sering kali, proyek kami tidak rumit, dan mereka tidak memerlukan kerangka kerja universal. Mereka membutuhkan alat yang sederhana dan mudah.
Sebelum knockoutjs
Misalkan kita sedang membangun sistem pesanan dan perlu menampilkan harga satuan produk, dan kemudian kita dapat menghitung total harga berdasarkan jumlah input dan menampilkannya. Ini juga mudah dicapai dengan kode asli, efeknya adalah:
Kodenya adalah sebagai berikut:
<!-Kode HTML-> Harga: <span id = "harga"> </span> <br /> akun: <input type = "text" id = "akun" value = "" placeholder = "Harap masukkan kuantitas" /> <br /> sum: <span id = "sum"> </span> // js codevar pricenode = document.getelement = documentby = documentby = documentby = document.getelement = documentby = document.getelement. document.geteLementById ('akun'), sumnode = document.geteLementById ('sum'), harga = 100, akun = 11, sum = harga * akun; // inisialisasi. pricenode.innerText = harga; accountnode.value = Account; sumnode.textContent = sum; // monitor input pengguna dari tampilan layer AccountNode.addeventListener ('keydown', function (e) {window.setTimeOut (function () {account = AccountNode.value; sum = harga;Nah, ini cukup sederhana! Oh, omong -omong, kami menampilkan 50 item sekaligus, dan ada 10 jenis tampilan, serta berbagai promosi seperti membeli 5 kotak Okamoto dan mendapatkan tongkat adonan goreng ...
Jadi, Anda tahu masalah implementasi asli:
• Dengan peningkatan interaksi UI dan data, jumlah kode telah berkembang pesat dan sulit dipertahankan
• Nama berdasarkan kueri DOM, ID atau kelas sulit dikelola
• kopling kode tinggi, sulit digunakan kembali
Pengantar Knockoutjs
Knockoutjs (selanjutnya disebut sebagai KO) tampaknya menyelesaikan masalah di atas. Ini adalah perpustakaan MVVM ringan yang berfokus pada penerapan pengikatan data dan tampilan. Itu tidak menyediakan kelas UI dan fungsi perutean, dan sangat cepat untuk memulai. Pada saat yang sama, karena KO telah keluar selama beberapa tahun, itu telah menjadi kerangka kerja yang relatif matang. Saat melakukan beberapa halaman yang ditampilkan lebih dinamis, KO tidak diragukan lagi merupakan pilihan yang lebih baik. Saya tidak akan banyak bicara tentang MVVM, hanya gambar untuk membingungkan:
KO didasarkan pada tiga fitur inti (pengantar situs web resmi):
1. Pelacakan yang dapat diamati dan ketergantungan: Gunakan yang dapat diamati untuk mengatur rantai hubungan implisit antara data model untuk transformasi dan pengikatan data.
2. Binding Deklaratif: Gunakan sintaks yang sederhana dan mudah dibaca untuk dengan mudah mengikat data model ke elemen DOM.
3. Templating: Mesin template bawaan, dengan cepat menulis presentasi UI yang kompleks untuk data model Anda.
Menggunakan KO sangat sederhana. Cukup unduh langsung ke situs web resmi (http://knockoutjs.com/index.html) dan perkenalkan dengan <script>.
Objek yang bisa diamati
Tulis ulang contoh di atas menggunakan KO (harga khusus, yang merupakan salah satu keinginan masa kecil saya):
Kode terlihat seperti ini:
<!--HTML Code--><div id="one">Price: <input type="text" data-bind="value: price" placeholder="Please enter unit price" /><br />Account: <input type="text" data-bind="value: account" placeholder="Please enter number" /><br />sum: <span data-bind="text: sum"></span></div> // js Codevar Viewmodel = fungsi (p, a) {// ditetapkan sebagai objek yang dapat diamati dan menginisialisasi this.price = ko.observable (p); this.account = ko.observable (a); // Saat memanggil fungsi KO, ini akan disahkan. Jika tidak, ketika menjalankan kode internal. this.sum = ko.pureComputed (function () {// Karena objek yang dapat diamati adalah objek fungsi, Anda perlu menggunakan harga () untuk membaca nilai saat ini. // Tetapkan nilai menggunakan harga (newValue), dan mendukung penulisan rantai: ini. 10); // Oleskan ikatan ini, dan pengikatan mulai berlaku ko.Applybindings (VM);1) Mari kita lihat kode HTML terlebih dahulu:
Anda dapat melihat bahwa pasangan nilai kunci seperti data-bind = "xx: oo" ditambahkan ke setiap tag. Ini adalah sintaks pengikat KO. Apa yang diwakili XXOO? (XXOO? Penulis masih anak -anak ...) Dari contoh, kita dapat melihat bahwa atribut XX adalah tag, yang dapat berupa atribut tag seperti teks, nilai, kelas, diperiksa, dll., Dan pada kenyataannya, mereka juga dapat klik, fokus, memuat, dan peristiwa DOM lainnya. OO terlihat seperti variabel, tetapi ini bukan variabel, tetapi objek fungsi. Mengeksekusi fungsi ini (dengan a ()) bisa mendapatkan nilai terikat yang sesuai. Melalui XXOO, atribut atau peristiwa suatu elemen dapat terikat pada objek fungsi di JS (jika xxoo, Anda harus bertanggung jawab satu sama lain), ini adalah ikatan deklaratif KO. Definisi pengikatan sebenarnya adalah mode pengamat, tetapi ini adalah pengikatan dua arah. Penerbit dan pelanggan berlangganan pesan masing -masing. Ini adalah pengikatan dua arah MVVM. Hasil dari ikatan dua arah KO adalah bahwa satu pihak dapat secara otomatis memperbarui pihak lain dengan mengubah, yaitu, data dan lapisan presentasi terikat secara ketat bersama melalui ViewModel. Efek pengikatannya mirip dengan:
2) Mari kita lihat kode JS:
Anda dapat melihat bahwa objek ViewModel didefinisikan dalam JS, dan OO terikat dalam HTML dioperasikan dalam objek. Ada dua operasi utama di sini: ko.observable () dan ko.purecomputed ().
• ko.observable (p): lihat namanya, ini adalah metode pengaturan objek yang dapat diamati. Parameter yang diteruskan p adalah nilai yang diinisialisasi. Parameter di sini dapat berupa tipe data dasar atau objek JSON. Setelah ditetapkan sebagai dapat diamati, itu berarti bahwa sistem akan mengamati nilai ini sepanjang waktu. Apakah P dalam ViewModel atau P dalam perubahan objek terikat akan menyebabkan peristiwa refresh, dan semua tempat yang menggunakan nilai ini akan diperbarui ke negara terbaru. Jelas, objek yang dapat diamati relatif memakan kinerja, jadi untuk nilai-nilai yang tidak memerlukan perubahan dinamis (seperti harga), tidak ditetapkan sebagai objek yang dapat diamati. Tentu saja, masih perlu dimasukkan ke dalam viewmodel untuk inisialisasi terpusat.
• Catatan: Objek yang dapat diamati dikembalikan oleh KO.observable (p) adalah objek fungsi, jadi Anda perlu menggunakan harga () untuk membaca objek yang dapat diamati; Demikian pula, mengatur objek yang dapat diamati membutuhkan harga (newValue) untuk menggunakan harga (newValue). Yang lebih perhatian adalah bahwa ketika pengaturan, itu mendukung penulisan rantai: viewmodel.price (100). ACCOUNT (10).
• ko.purecomputed () adalah apa yang disebut pelacakan ketergantungan. Berikut adalah harga satuan * Kuantitas sama dengan harga total. Perhatikan bahwa Anda tidak dapat secara langsung menggunakan this.sum = this.price () * this.account (); untuk menentukan jumlah. Metode penulisan ini tidak dapat secara dinamis menyegarkan objek yang terikat, tetapi secara dinamis mengubah variabel jumlah, tetapi operasi lain diperlukan untuk menyegarkan objek terikat. Oleh karena itu, nilai pengikatan yang terkait dengan perhitungan harus diatur menggunakan fungsi perhitungan KO. Tentu saja, objek fungsi yang dikembalikan juga merupakan objek fungsi. Selain itu, KO juga memiliki fungsi yang dihitung, yang juga dapat diatur, tetapi disarankan untuk menggunakan murni untuk meningkatkan kinerja.
• Perhatikan metode penulisan di sini: ko.purecomputed (fn, ini), yaitu, mengikat FN ke ruang lingkup viewmodel, yang sebenarnya adalah panggilan/berlaku di JS. Karena ini adalah objek KO ketika menjalankan fungsi internal KO, untuk mendapatkan ruang lingkup objek ViewModel, ini perlu diteruskan ke metode penulisan di atas. Tentu saja, Anda juga dapat menggunakannya untuk menyimpan objek ViewModel di luar fungsi KO, dan kemudian menggunakannya di dalam fungsi KO untuk memanggil objek ViewModel. Seperti ini:
var that = this; this.sum = ko.pureComputed (function () {return that.price () * that.account ();});Setelah mendefinisikan konstruktor ViewModel, objek ViewModel dipakai, dan kemudian metode KO.ApplyBindings () digunakan untuk membuat pengikatan mulai berlaku. Jangan lewatkan langkah ini.
Mode Halaman Sederhana Menggunakan KO:
<!-Kode html-> <span data-bind = "Teks: bindText"> </span> // js codevar viewModel = {bindText: ko.observable ('initvalue')}; ko.applybindings (viewModel);Singkatnya, ini adalah: Gunakan data-bind = "xx: oo" untuk mendeklarasikan ikatan dalam html, buat viewmodel di JS dan atur objek yang dapat diamati, dan akhirnya menerapkan ikatan.
Array objek yang dapat diamati
Mari kita lihat penggunaan array objek yang dapat diamati. Dalam KO, array dan variabel tidak dapat dicampur seperti JS. Untuk objek array, Anda perlu menggunakan ko.observableArray ([..., ...]) dengan cara yang sama. Demikian pula, elemen array dapat berupa tipe dasar atau objek JSON. Array objek yang dapat diamati di KO memiliki serangkaian metode operasi array, seperti slice (), sort (), push (), dll. Efeknya sama dengan metode operasi array JS asli. Satu -satunya perbedaan antara perubahan yang dilakukan melalui metode KO akan diberitahu kepada pelanggan untuk menyegarkan antarmuka, tetapi metode JS tidak akan menyegarkan antarmuka. Berikut adalah contoh sederhana:
<!-Kode html-> <pilih data-bind = "Options: list"> </schect> // js codevar vm = {// daftar: ko.observableArray () Daftar: ko.observableArray (['luffy', 'zoro', 'sanji'])}}}}}}}}}}}}}}}}}}}}}}}}}})};Poin Kunci: KO memantau keadaan array, bukan keadaan elemen itu sendiri. Dengan kata lain, ketika keadaan array berubah (menambahkan elemen), peristiwa KO akan dipicu untuk menyebabkan objek terikat menyegarkan, tetapi perubahan dalam elemen di dalam array (seperti perubahan nilai) tidak akan dipantau dan tidak dapat memicu peristiwa KO. Misalnya:
Menggunakan metode asli untuk secara dinamis mengubah Luffy ke Lucy di konsol tidak akan menyegarkan halaman UI, sambil menggunakan array KO untuk mengubah array akan segera menyegarkan halaman. Perlu dicatat bahwa ketika menyegarkan, perubahan sebelumnya juga akan disegarkan (Luffy> Lucy). Dengan kata lain, variabel dalam memori JS sebenarnya telah berubah, tetapi masih ada kekurangan tindakan untuk menyegarkan DOM. Seperti yang dapat Anda lihat di sini, metode membaca array adalah vm.list () [0], karena daftar juga merupakan objek fungsi, dan mengeksekusi nilai pengembalian adalah konten daftar yang kami inginkan. Demikian pula, Anda dapat mengatur ulang array objek yang dapat diamati melalui vm.list (["Girl", "Girl"]) dan segera menyegarkan UI.
Jika Anda perlu bereaksi secara dinamis perubahan elemen array ke UI, Anda perlu mengatur elemen array ke objek yang dapat diamati, dan kemudian menggunakan metode KO untuk mengubah nilai elemen array. Perhatikan bahwa itu menggunakan daftar metode KO () [0] ("Lucy")!
Ada dua jenis metode untuk mengoperasikan array objek yang dapat diamati. Salah satunya adalah nama yang sama dengan metode array JS asli: Pop, Push, Shift, Unshift, Reverse, Sort, Splice. Bagian ini sama dengan penggunaan dan efek dari metode JS asli, jadi saya tidak akan mengulanginya lagi.
Beberapa metode lain tidak tersedia di JS, terutama sebagai berikut:
• Hapus (SomeItem) - Hapus semua item elemen dengan nilai yang sama untuk beberapa dan mengembalikannya dalam formulir array. Apa artinya di sini adalah bahwa Anda tidak dapat secara langsung menghapus daftar item pertama. Singkatnya, parameter yang diteruskan harus menjadi nilai item elemen. Ini dapat digunakan dalam bentuk daftar () [0], atau Anda dapat langsung memasukkan string nilai (seperti "Luffy").
• hapus (fungsi (item) {return item.age <18;}) - Hapus semua item elemen dengan atribut usia kurang dari 18 dan mengembalikannya sebagai array. Penggunaan ini tidak berbeda dari fungsi orde tinggi array biasa. Item dilewatkan sebagai parameter fungsi tingkat tinggi. Saat iterasi melalui array, item dihapus ketika nilai pengembalian fungsi tingkat tinggi adalah nilai sebenarnya, jika tidak, ia akan masuk ke item berikutnya.
• Lepas (['Chad', 132, tidak ditentukan]) - Hapus semua elemen item dengan nilai yang sama dengan 'chad' atau 123 atau tidak terdefinisi dan mengembalikannya sebagai array.
• RemoveAll () - Menghapus semua item dan kembali sebagai array.
Kiat: Saat berhadapan dengan objek yang dapat diamati, jika ada banyak objek dan interaksi yang sering, segera menyegarkan dengan setiap perubahan akan mengkonsumsi kinerja. Pada saat ini, Anda dapat menggunakan ekstensi MyoBServableArray.Extend ({Ratelimit: 1000}) untuk mengatur refresh tertunda. Misalnya, ketika secara terus -menerus memasukkan elemen ke dalam array yang dapat diamati, Anda dapat mengatur waktu siklus 1000ms untuk memusatkan semua operasi dalam 1000 ms ke dalam penyegaran untuk menghindari penurunan kinerja yang disebabkan oleh operasi DOM yang sering.
Meringkaskan
Artikel ini terutama memperkenalkan konsep paling penting dalam KnockoutJs: Observable Objects (Arrays). Objek yang dapat diamati pada dasarnya adalah objek fungsi. Saat mengoperasikan objek yang dapat diamati melalui metode KO, UI dapat disegarkan secara dinamis. Ini adalah metode yang disarankan. Pada saat yang sama, Anda juga dapat mengoperasikan objek yang dapat diamati melalui metode JS asli, tetapi metode asli tidak akan menyegarkan tampilan UI, dan Anda harus menunggu sampai acara refresh berikutnya untuk disegarkan ke UI.