Corak strategi corak reka bentuk JavaScript contoh_kemahiran javascript-tutorial js-php.cn

Corak strategi corak reka bentuk JavaScript contoh_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 16:34:23

asal

1309 orang telah melayarinya

Maksud corak strategi ialah untuk mentakrifkan satu siri algoritma, merangkumnya satu demi satu dan menjadikannya boleh ditukar ganti.
Contoh kecil boleh menjelaskan kepada kita.

Imbas kembali kaedah bernyawa dalam jquery.

Salin kod Kod adalah seperti berikut:

$( div ).animate( {“kiri: 200px”}, 1000, ‘linear’ ); // Gerakan seragam 

$( div ).animate( {“kiri: 200px”}, 1000, ‘kubik’ ); // Cubic easing

Kedua-dua baris kod ini menjadikan div bergerak 200 piksel ke kanan dalam 1000ms Linear (kelajuan seragam) dan padu (cubic easing) ialah enkapsulasi corak strategi.

Mari kita ambil contoh lain Dalam dev.qplus.com yang saya tulis pada separuh pertama tahun ini, banyak halaman akan mempunyai borang pengesahan segera. Setiap ahli borang akan mempunyai beberapa peraturan pengesahan yang berbeza.

Contohnya, dalam kotak nama, ia perlu disahkan bahawa ia bukan perkataan kosong, sensitif dan aksaranya terlalu panjang. Sudah tentu, anda boleh menulis tiga jika elses untuk menyelesaikan masalah, tetapi kebolehskalaan dan kebolehselenggaraan menulis kod dengan cara ini boleh dibayangkan. Sekiranya terdapat lebih banyak elemen dalam bentuk dan lebih banyak situasi perlu disahkan, tidak mustahil untuk menulis ratusan if elses secara keseluruhan.

Jadi pendekatan yang lebih baik ialah merangkum setiap peraturan pengesahan secara berasingan menggunakan corak strategi. Apabila anda memerlukan jenis pengesahan, anda hanya perlu memberikan nama dasar. Seperti ini:

Salin kod Kod adalah seperti berikut:

nameInput.addValidata({

notNull: benar,

dirtyWords: benar,

Panjang maksimum: 30

})

Kaedah notNull, maxLength dan lain-lain hanya perlu mengembalikan benar atau palsu secara seragam untuk menunjukkan sama ada pengesahan telah lulus.

Salin kod Kod adalah seperti berikut:

validataList = {

notNull: fungsi( nilai ){

nilai pulangan !== ”;

},

maxLength: fungsi( nilai, maxLen ){

pulangkan nilai.length() > maxLen;

}

}

Seperti yang anda lihat, pelbagai peraturan pengesahan boleh diubah suai dengan mudah dan diganti antara satu sama lain. Jika suatu hari pengurus produk mencadangkan agar had aksara ditukar kepada 60 aksara. Ia hanya mengambil masa 0.5 saat untuk menyiapkan kerja.