Baru-baru ini saya membaca artikel "Ide Baru untuk Membangun Komponen UI Front-End" yang ditulis oleh Paman Yu, yang mengingatkan saya pada artikel yang saya bagikan tahun lalu , "Pola Desain JS untuk Pengembangan Kolaboratif dengan Perasaan" , yang sedikit bergema.. .
Dikatakan bahwa dalam proyek kasir Alipay versi baru tahun lalu, saya mencoba model pengkodean komponen ini untuk sementara waktu. Berikut sedikit pengalaman untuk dibagikan kepada Anda:
Melihat kembali kelas abstrak yang disebutkan sebelumnya, siswa yang mengetahui sesuatu tentang pola desain mungkin merasa familiar. Ya, sekilas terlihat seperti pabrik abstrak, tetapi jika digabungkan dengan kelas dasar berikut, Anda akan menemukan bahwa saya tidak menimpanya. getVessel, show, hide dan metode lain di setiap kelas dasar, tetapi secara langsung mewarisi metode ini di kelas abstrak. Pasti akan ada orang yang tidak mengerti kenapa mereka melakukan ini hanya karena JS, bukan JAVA. Tingkat penggandengan tertentu dengan imbalan fleksibilitas yang memadai tidaklah berlebihan menurut saya, belum lagi kelas abstrak ini harus menjamin stabilitas mutlak. Hal ini diperlukan agar tidak boleh dimodifikasi sesuka hati setelah terbentuk.
Melalui kelas abstrak ini, saya mengaitkan objek kontak dengan objek wadah, dan mengimplementasikan interaksi paling sederhana di antara keduanya melalui metode tindakan. "Yang paling sederhana" berarti tidak lebih dari operasi menampilkan atau menyembunyikan, jadi saya mendefinisikan metode tampilkan dan sembunyikan. Jelas sekali, perilaku interaksi "paling sederhana" tidak dapat memenuhi 100% perilaku pengguna, jadi saya harus menyetel metode setInterface dan menambahkan kelas efek ke kelas yang memerlukan efek interaksi khusus. Terakhir, hindari membuat instance kelas abstrak ini secara langsung saat menggunakannya. Ingatkan semua orang dalam metode tindakan bahwa jika Anda ingin membuat instance operasi, silakan buka kelas warisan tertentu untuk mengganti metode tindakan.
Melalui kelas abstrak ini, kita dapat mewarisi komponen paling dasar aPop, dropDown, xbox, xTab dan lainnya... Ini telah disebutkan di artikel p sebelumnya. Saya tidak akan membahas detailnya di sini ketika kelas dasar yang ditulis di sini tidak dapat memenuhi kebutuhan khusus, bagaimana kita dapat dengan cepat mengembangkan komponen yang dipersonalisasi.
Mari kita ambil xTab sebagai contoh. Kita dapat menggunakan komponen ini untuk menyelesaikan efek peralihan dasar antara titik multi-sentuh dan beberapa container. Namun bagaimana jika kita perlu menambahkan beberapa efek animasi di atasnya? Pertama-tama mari kita lihat kode implementasi dari tab kelas yang diwarisi:
Dapat ditemukan bahwa saya menjalankan metode setInterface setelah metode show. Metode dengan nama yang sama di kelas abstrak akan dipanggil secara default. Metode antarmuka ini dirancang untuk menambahkan kelas efek interaktif tambahan untuk jalur interaktif serupa. Misalnya: sekarang kita ingin menangani efek slideTab, maka kita hanya perlu mewarisi kelas aplikasi berdasarkan xTab, mengganti metode setInterface, dan menambahkan kelas animasi untuk mencapai efek slide dan selesai!
AP.widget.animTab = AP.widget.xTab.extend({
setInterface:fungsi(target,kapal){
this.parent(target,kapal);
this.anim(wadah);
},
anim:fungsi(wadah){
...
}
});
Sejujurnya, ini adalah ide desain yang sangat kasar, tetapi memungkinkan kita untuk memikirkan mode pengkodean komponen dari sudut yang berbeda. Di atas hanyalah beberapa upaya aplikasi yang dangkal, dan kegembiraan akan terus berlanjut...menunggu Anda!
Cetak ulang: http://ued.alipay.com/2010/06/propose-front-end-ui-components-and-then-build-a-new-train-of-thinkt/
AP.widget.xTab = AP.widget.basic.extend({
bindEvents:fungsi(target,kapal){
E.on(target,ini.options.eventType,ini.aksi,target,ini);
E.on(jendela,'muat',ini.oXtab,target,ini);
},
tindakan:fungsi(e,target){
this.switchTab(e,target);
},
switchTab:fungsi(e,target){
...
for(i=0,len=tab.panjang;i<len;i++){
var hash = tab[i].href.split("#")[1];
var vessel = D.get(hash + 'Perluas');
jika(kapal){
this.hide(kapal);
}
D.removeClass(tab[i].parentNode,'saat ini');
if(target.href == tab[i].href){
D.addClass(target.parentNode,'saat ini');
jika(kapal){
this.show(kapal);
}
//Mengatur berbagai antarmuka aplikasi
this.setInterface(target,kapal);
}
E.preventDefault(e);
}
},
showTab: fungsi(indeks){
...
},
//Inisialisasi tab pemosisian
oXtab:fungsi(target,e){
...
}
});
AP.widget.basic = AP.Kelas baru({
setOptions:fungsi(pilihan){
//Pengaturan antarmuka
},
inisialisasi:fungsi(target,opsi){
//Metode inisialisasi, tujuannya adalah untuk membangun hubungan antara elemen subset target dan suatu metode
},
getVessel:fungsi(target){
//Dapatkan container yang memenuhi hubungan pemetaan target
},
bindEvents:fungsi(target,kapal){
//Ikat aksi pemicu target di sini
},
tindakan:fungsi(){
//Fungsi eksekusi yang dipicu oleh event yang terikat pada target berisi logika yang ingin Anda jalankan.
},
tampilkan:fungsi(){
//menampilkan wadah
},
sembunyikan:fungsi(){
//sembunyikan wadah
},
setInterface:fungsi(){
//Mengatur antarmuka yang digunakan bersama oleh setiap komponen
}
})