Dalam bahasa tradisional yang berorientasi objek, menambahkan fungsi ke objek sering menggunakan warisan, tetapi metode warisan dapat membawa masalah: ketika kelas induk berubah, semua subclass akan berubah sesuai.
Ketika skrip JavaScript sedang berjalan, menambahkan perilaku dalam suatu objek (atau pada prototipe) mempengaruhi semua contoh objek itu.
Dekorator adalah alternatif untuk menerapkan warisan, yang menambahkan fitur baru melalui bentuk metode yang kelebihan beban. Pola ini dapat menambah perilaku sendiri sebelum atau setelah dekorator untuk mencapai tujuan tertentu.
Pola dekorator adalah cara untuk secara dinamis menambahkan lebih banyak fungsi ke fungsi yang ada. Setiap fungsi yang akan didekorasi ditempatkan dalam fungsi terpisah, dan kemudian gunakan fungsi ini untuk membungkus objek fungsi yang ada untuk didekorasi. Oleh karena itu, ketika perilaku khusus perlu dilakukan, kode panggilan dapat secara selektif dan berurutan menggunakan fungsi dekorasi untuk membungkus objek sesuai kebutuhan. Keuntungannya adalah membedakan tanggung jawab inti kelas (fungsi) dari fungsi dekoratif.
Kami dapat mendefinisikan fungsi alat sebagai berikut:
Function.prototype.before = function (beforefn) {var self = this; // Simpan referensi fungsi pengembalian fungsi asli () {// kembalikan fungsi proxy yang berisi fungsi baru dan fungsi asli beforefn.Apply (ini, argumen); // Jalankan fungsi baru dan pastikan bahwa ini tidak dibajak kembali kembali. Apply (ini, argumen); // Jalankan fungsi asli dan kembalikan hasil eksekusi dari fungsi asli dan pastikan bahwa ini tidak dibajak}}; Function.prototype.after = function (afterfn) {var self = this; return function () {var ret = self.Apply (ini, argumen); afterfn.Apply (ini, argumen); kembali kembali; }};Parameter befefn dan afterfn di sini adalah fungsi baru (tambahkan dekorasi) untuk memperluas fungsi baru untuk fungsi asli. Satu -satunya perbedaan di antara mereka adalah urutan eksekusi yang berbeda. Jika Anda tidak ingin mencemari prototipe fungsi, Anda dapat menggunakan metode berikut:
var sebelum = fungsi (fn, beforefn) {return function () {beforefn.Apply (ini, argumen); return fn.Apply (ini, argumen); }}; var setelah = fungsi (fn, afterfn) {return function () {var ret = fn.Apply (ini, argumen); afterfn.Apply (ini, argumen); Return Ret; }};Contoh: Masukkan parameter dalam permintaan HTTP untuk mencegah serangan CSRF
var ajax = fungsi (type, url, param) {console.log (param); // Kirim kode permintaan AJAX sedikit ...}; var beforefn = function (type, url, param) {param.token = 'token';}; ajax = ajax.before (befteFn); ajax ('get', 'http: //...com/userinfo', {name: ' 'Token'}Dengan mendekorasi secara dinamis parameter token ke fungsi AJAX, alih -alih secara langsung memodifikasi parameter pada fungsi asli, fungsi AJAX masih merupakan fungsi murni, meningkatkan penggunaan kembali, dan dapat secara langsung digunakan dalam proyek lain tanpa modifikasi apa pun.
Contoh: Formulir Verifikasi (Pisahkan input verifikasi dari kode yang dikirimkan formulir, dan kemudian secara dinamis menghiasi fungsi input verifikasi sebelum formulir yang dikirimkan. Dengan cara ini, kita dapat menulis bagian input verifikasi ke dalam formulir plug-in untuk digunakan dalam proyek yang berbeda)
// Verifikasi fungsi input var validata = function () {if (username.value === '') {alert ('username tidak dapat kosong'); mengembalikan false; } if (kata sandi mengembalikan false; }}; // form Fungsi pengiriman var formsubmit = function () {var param = {username: username.value, kata sandi: kata sandi.value}; AJAX ('http://xxx.com/login',param);}; formsubmit = formsubmit.before (validata); submitbtn.onClick = function () {formsubmit ();};Referensi: "pola javascript" "pola desain javascript dan praktik pengembangan"
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.