Pemula yang sedang belajar JS memiliki analisis pemahaman mereka tentang sifat berorientasi objek JavaScript. Teman yang perlu belajar bisa merujuknya. Copy kode kodenya sebagai berikut:
var obj = document.getElementById(nama);
fungsi klikSaya() {
alert(ini.nilai);
ini.nilai += !!!!;
alert(ini.nilai);
}
var ActionBinder = function() {//Mendefinisikan kelas
}
ActionBinder.prototype.registerDOM = fungsi(doms) {
this.doms = dom;//Daftar dom
}
ActionBinder.prototype.registerAction = function(penanganan) {
this.handlers = handlers;//Daftarkan tindakan
}
ActionBinder.prototipe.bind = fungsi() {
this.doms.onclick = this.handler
}//Daftarkan tindakan dom
var binder = new ActionBinder();//Buat kelas baru sesuai dengan metode ActionBinder
pengikat.registerDOM(obj);
binder.registerAction(klikSaya);
pengikat.mengikat();
Mari kita mulai dengan sepotong kode berorientasi objek yang ditulis dalam js. Pertama, buat kelas ActionBinder. Metode penulisannya juga mirip dengan java karena js didasarkan pada objek dom html untuk mengoperasikan konten html, tentukan suatu metode registerDOM untuk mendaftarkan dom di kelas, gunakan pr ototype prototypes metode untuk pemanggilan yang mudah; selain itu, metode untuk mendaftarkan peristiwa, registerAction, ditambahkan, yang juga dibuat prototipe menggunakan metode prototipe, dan akhirnya, pengikatan tindakan prototipe digunakan untuk mengikat dom yang terdaftar dan peristiwa yang terdaftar bersama-sama; menjalankan.
Berikut cuplikan kode js asli:
Kode
Copy kode kodenya sebagai berikut:
<tubuh>
<skrip>
dokumen.onload= fungsi(){
var obj = document.getElementById(nama);
obj.onclick = function(){alert(ini.nilai);}
}
</skrip>
<tipe masukan=id teks=nama />
</tubuh>
Kode juga mencapai efek yang diinginkan. Untuk beberapa aplikasi sederhana, efek di atas dapat dipenuhi, tetapi untuk beberapa program yang lebih kompleks, penerapannya lebih sulit dan kodenya lebih rumit untuk ditulis;
Kode
Copy kode kodenya sebagai berikut:
<tubuh>
<skrip>
dokumen.onload= fungsi(){
obj1 = dokumen.getElementById(nama1);
obj2 = dokumen.getElementById(nama2);
obj3 = dokumen.getElementById(nama3);
obj1.onclick = function(){alert(ini.nilai);}
obj2.onclick = function(){alert(this.value);}
obj3.onclick = function(){alert(this.value);}
}
</skrip>
<tipe masukan=id teks=nama1 nilai=111 />
<tipe masukan=id teks=nama2 nilai=222 />
<tipe masukan=id teks=nama3 nilai=333 />
</tubuh>
atau
Kode
Copy kode kodenya sebagai berikut:
<tubuh>
<skrip>
fungsi clickMe(){alert(this.value);}
</skrip>
<tipe masukan=id teks=nama1 nilai=111 onclick=kembalikan clickMe() />
<tipe masukan=id teks=nama2 nilai=222 onclick=kembalikan clickMe() />
<tipe masukan=id teks=nama3 nilai=333 onclick=kembalikan clickMe() />
</tubuh>
Tentu saja, ada cara lain yang lebih sederhana untuk menulis dua potongan kode di atas, namun secara keseluruhan masih banyak kode yang mubazir.
Lebih fleksibel untuk menulis dalam metode berorientasi objek, seperti
Kode
Copy kode kodenya sebagai berikut:
<tubuh>
<skrip>
jendela.onload = fungsi() {
var objs = dokumen.getElementsByTagName(input);
fungsi klikSaya() {
alert(ini.nilai);
}
var ActionBinder = function() {//Mendefinisikan kelas
}
ActionBinder.prototype.registerDOM = fungsi(doms) {
this.doms = dom;//Daftar dom
}
ActionBinder.prototype.registerAction = function(penanganan) {
this.handlers = handlers;//Daftarkan tindakan
}
ActionBinder.prototipe.bind = fungsi() {
this.doms.onclick = this.handler
}//Daftarkan tindakan dom
for (var i=0;i<objs.panjang;i++){
var binder = new ActionBinder();//Buat kelas baru sesuai dengan metode ActionBinder
pengikat.registerDOM(objs[i]);
binder.registerAction(klikSaya);
pengikat.mengikat();
};
}
</skrip>
<tipe masukan=id teks=nilai nama=111/>
<tipe masukan=id teks=nama1 nilai=222/>
<tipe masukan=id teks=nama2 nilai=333/>
</tubuh>
Dengan cara ini, tidak akan ada kode yang berlebihan, dan logika js akan relatif jelas. Pengikatan beberapa peristiwa perlu dipelajari.