Los principiantes que están aprendiendo JS tienen un análisis de su comprensión de la naturaleza orientada a objetos de JavaScript. Los amigos que necesiten aprender pueden consultarlo. Copie el código de código de la siguiente manera:
var obj = document.getElementById(nombre);
función hacer clic en mí() {
alerta(este.valor);
este.valor += !!!!;
alerta(este.valor);
}
var ActionBinder = function() {//Definir una clase
}
ActionBinder.prototype.registerDOM = función(doms) {
this.doms = doms;//Registrar doms
}
ActionBinder.prototype.registerAction = función (controladores) {
this.handlers = handlers;//Registrar una acción
}
ActionBinder.prototype.bind = función() {
this.doms.onclick = this.handlers
}//Registrar acción de doms
var binder = new ActionBinder();//Crea una nueva clase según el método ActionBinder
binder.registerDOM(obj);
binder.registerAction(hacer clic en mí);
carpeta.bind();
Comencemos con un fragmento de código orientado a objetos escrito en js. Primero, creemos una clase ActionBinder. El método de escritura también es similar a java, porque js se basa en el objeto dom de html para operar el contenido de html; RegisterDOM para registrar el dom en la clase, use pr. ototype crea un prototipo del método para facilitar la llamada; además, se agrega un método para registrar eventos, RegisterAction, que también se crea mediante el método prototipo; finalmente, se utiliza un enlace de acción con prototipo para vincular el dom registrado y los eventos registrados; ejecutar.
Aquí está el fragmento de código js original:
Código
Copie el código de código de la siguiente manera:
<cuerpo>
<guión>
documento.onload= función(){
var obj = document.getElementById(nombre);
obj.onclick = función(){alerta(este.valor);}
}
</script>
<tipo de entrada=texto id=nombre />
</cuerpo>
El código también logra el efecto deseado. Para algunas aplicaciones simples, el efecto anterior se puede satisfacer, pero para algunos programas más complejos, es más problemático de aplicar y el código es más engorroso de escribir, como los fragmentos de código;
Código
Copie el código de código de la siguiente manera:
<cuerpo>
<guión>
documento.onload= función(){
obj1 = document.getElementById(nombre1);
obj2 = document.getElementById(nombre2);
obj3 = document.getElementById(nombre3);
obj1.onclick = función(){alerta(este.valor);}
obj2.onclick = función(){alerta(este.valor);}
obj3.onclick = función(){alerta(este.valor);}
}
</script>
<tipo de entrada=id de texto=nombre1 valor=111 />
<tipo de entrada=id de texto=nombre2 valor=222 />
<tipo de entrada=id de texto=nombre3 valor=333 />
</cuerpo>
o
Código
Copie el código de código de la siguiente manera:
<cuerpo>
<guión>
función hacer clic en mí(){alerta(este.valor);}
</script>
<tipo de entrada=id de texto=nombre1 valor=111 onclick=volver clickMe() />
<tipo de entrada=id de texto=nombre2 valor=222 onclick=volver clickMe() />
<tipo de entrada=id de texto=nombre3 valor=333 onclick=volver clickMe() />
</cuerpo>
Por supuesto, existen otras formas más sencillas de escribir los dos fragmentos de código anteriores, pero en general todavía hay mucho código redundante.
Es más flexible escribir en un método orientado a objetos, como
Código
Copie el código de código de la siguiente manera:
<cuerpo>
<guión>
ventana.onload = función() {
var objs = document.getElementsByTagName(entrada);
función hacer clic en mí() {
alerta(este.valor);
}
var ActionBinder = function() {//Definir una clase
}
ActionBinder.prototype.registerDOM = función(doms) {
this.doms = doms;//Registrar doms
}
ActionBinder.prototype.registerAction = función (controladores) {
this.handlers = handlers;//Registrar una acción
}
ActionBinder.prototype.bind = función() {
this.doms.onclick = this.handlers
}//Registrar acción de doms
para (var i=0;i<objs.length;i++){
var binder = new ActionBinder();//Crea una nueva clase según el método ActionBinder
binder.registerDOM(objs[i]);
binder.registerAction(hacer clic en mí);
carpeta.bind();
};
}
</script>
<tipo de entrada=id de texto=valor de nombre=111/>
<tipo de entrada=id de texto=nombre1 valor=222/>
<tipo de entrada=id de texto=nombre2 valor=333/>
</cuerpo>
De esta manera, no habrá código redundante y la lógica js será relativamente clara. Es necesario estudiar la vinculación de múltiples eventos.