Anfänger, die JS lernen, haben eine Analyse ihres Verständnisses der objektorientierten Natur von JavaScript. Freunde, die lernen müssen, können sich darauf beziehen. Kopieren Sie den Codecode wie folgt:
var obj = document.getElementById(name);
Funktion clickMe() {
alarm(this.value);
this.value += !!!!;
alarm(this.value);
}
var ActionBinder = function() {//Definieren Sie eine Klasse
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//Doms registrieren
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;//Aktion registrieren
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//DOMS-Aktion registrieren
var binder = new ActionBinder();//Erstellen Sie eine neue Klasse gemäß der ActionBinder-Methode
binder.registerDOM(obj);
binder.registerAction(clickMe);
binder.bind();
Beginnen wir mit einem in js geschriebenen objektorientierten Code. Erstellen Sie zunächst eine ActionBinder-Klasse. Die Schreibmethode ähnelt der von Java, da js auf dem dom-Objekt von HTML basiert und eine Methode definiert registerDOM, um den Dom in der Klasse zu registrieren, verwenden Sie pr ototype stellt die Methode zum einfachen Aufrufen bereit; außerdem wird eine Methode zum Registrieren von Ereignissen, registerAction, hinzugefügt, die ebenfalls mit der Prototyp-Methode prototypisiert wird. Schließlich wird eine prototypische Aktionsbindung verwendet, um die registrierten Dom- und registrierten Ereignisse miteinander zu verbinden ausführen.
Hier ist das ursprüngliche js-Code-Snippet:
Code
Kopieren Sie den Codecode wie folgt:
<Körper>
<Skript>
document.onload= function(){
var obj = document.getElementById(name);
obj.onclick = function(){alert(this.value);}
}
</script>
<Eingabetyp=Text-ID=Name />
</body>
Bei einigen einfachen Anwendungen kann der oben genannte Effekt ebenfalls erzielt werden, bei einigen komplexeren Programmen ist die Anwendung jedoch umständlicher und das Schreiben des Codes ist umständlicher
Code
Kopieren Sie den Codecode wie folgt:
<Körper>
<Skript>
document.onload= function(){
obj1 = document.getElementById(name1);
obj2 = document.getElementById(name2);
obj3 = document.getElementById(name3);
obj1.onclick = function(){alert(this.value);}
obj2.onclick = function(){alert(this.value);}
obj3.onclick = function(){alert(this.value);}
}
</script>
<Eingabetyp=Text-ID=Name1-Wert=111 />
<Eingabetyp=Text-ID=Name2-Wert=222 />
<Eingabetyp=Text-ID=Name3-Wert=333 />
</body>
oder
Code
Kopieren Sie den Codecode wie folgt:
<Körper>
<Skript>
Funktion clickMe(){alert(this.value);}
</script>
<input type=text id=name1 value=111 onclick=return clickMe() />
<input type=text id=name2 value=222 onclick=return clickMe() />
<input type=text id=name3 value=333 onclick=return clickMe() />
</body>
Natürlich gibt es andere einfachere Möglichkeiten, die beiden oben genannten Codeteile zu schreiben, aber insgesamt gibt es immer noch viel redundanten Code.
Es ist flexibler, in objektorientierten Methoden zu schreiben, z
Code
Kopieren Sie den Codecode wie folgt:
<Körper>
<Skript>
window.onload = function() {
var objs = document.getElementsByTagName(input);
Funktion clickMe() {
alarm(this.value);
}
var ActionBinder = function() {//Definieren Sie eine Klasse
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//Doms registrieren
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;//Aktion registrieren
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//DOMS-Aktion registrieren
for (var i=0;i<objs.length;i++){
var binder = new ActionBinder();//Erstellen Sie eine neue Klasse gemäß der ActionBinder-Methode
binder.registerDOM(objs[i]);
binder.registerAction(clickMe);
binder.bind();
};
}
</script>
<input type=text id=name value=111/>
<Eingabetyp=Text-ID=Name1-Wert=222/>
<Eingabetyp=Text-ID=Name2-Wert=333/>
</body>
Auf diese Weise gibt es keinen redundanten Code und die js-Logik ist relativ klar. Die Bindung mehrerer Ereignisse muss untersucht werden.