Iniciantes que estão aprendendo JS têm uma análise de sua compreensão da natureza orientada a objetos do JavaScript. Amigos que precisam aprender podem consultá-la. Copie o código do código da seguinte forma:
var obj = document.getElementById(nome);
function clickMe() {
alerta(este.valor);
este.valor += !!!!;
alerta(este.valor);
}
var ActionBinder = function() {//Definir uma classe
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//Registrar doms
}
ActionBinder.prototype.registerAction = function(manipuladores) {
this.handlers = handlers;//Registrar uma ação
}
ActionBinder.prototype.bind=função(){
this.doms.onclick = this.handlers
}//Registrar ação doms
var binder = new ActionBinder(); //Cria uma nova classe de acordo com o método ActionBinder
fichário.registerDOM(obj);
binder.registerAction(clickMe);
fichário.bind();
Vamos começar com um código orientado a objetos escrito em js. Primeiro, crie uma classe ActionBinder. O método de escrita também é semelhante a java, porque js é baseado no objeto dom de html para operar o conteúdo de html. registerDOM para registrar o dom na classe, use pr. ototype prototipa o método para fácil chamada; além disso, é adicionado um método para registrar eventos, RegisterAction, que também é prototipado usando o método de protótipo; finalmente, uma ligação de ação prototipada é usada para vincular o dom registrado e os eventos registrados; executar.
Aqui está o trecho de código js original:
Código
Copie o código do código da seguinte forma:
<corpo>
<roteiro>
document.onload= função(){
var obj = document.getElementById(nome);
obj.onclick = function(){alert(this.value);}
}
</script>
<tipo de entrada=texto id=nome />
</body>
O código também atinge o efeito desejado. Para alguns aplicativos simples, o efeito acima pode ser satisfeito, mas para alguns programas mais complexos, é mais difícil de aplicar e o código é mais complicado de escrever, como trechos de código;
Código
Copie o código do código da seguinte forma:
<corpo>
<roteiro>
document.onload= função(){
obj1 = document.getElementById(nome1);
obj2 = document.getElementById(nome2);
obj3 = document.getElementById(nome3);
obj1.onclick = function(){alert(este.valor);}
obj2.onclick = function(){alert(este.valor);}
obj3.onclick = function(){alert(este.valor);}
}
</script>
<tipo de entrada=texto id=nome1 valor=111 />
<tipo de entrada=texto id=nome2 valor=222 />
<tipo de entrada=texto id=nome3 valor=333 />
</body>
ou
Código
Copie o código do código da seguinte forma:
<corpo>
<roteiro>
função clickMe(){alert(este.valor);}
</script>
<tipo de entrada=texto id=nome1 valor=111 onclick=return clickMe() />
<tipo de entrada=texto id=nome2 valor=222 onclick=return clickMe() />
<input type=text id=name3 value=333 onclick=return clickMe() />
</body>
Claro, existem outras maneiras mais simples de escrever os dois trechos de código acima, mas no geral ainda há muito código redundante.
É mais flexível escrever em métodos orientados a objetos, como
Código
Copie o código do código da seguinte forma:
<corpo>
<roteiro>
janela.onload=função(){
var objs = document.getElementsByTagName(entrada);
function clickMe() {
alerta(este.valor);
}
var ActionBinder = function() {//Definir uma classe
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//Registrar doms
}
ActionBinder.prototype.registerAction = function(manipuladores) {
this.handlers = handlers;//Registrar uma ação
}
ActionBinder.prototype.bind=função(){
this.doms.onclick = this.handlers
}//Registrar ação doms
for (var i=0;i<objs.length;i++){
var binder = new ActionBinder();//Cria uma nova classe de acordo com o método ActionBinder
binder.registerDOM(objs[i]);
binder.registerAction(clickMe);
fichário.bind();
};
}
</script>
<tipo de entrada=texto id=nome valor=111/>
<tipo de entrada=texto id=nome1 valor=222/>
<tipo de entrada=texto id=nome2 valor=333/>
</body>
Desta forma, não haverá código redundante e a lógica js será relativamente clara. A ligação de vários eventos precisa ser estudada.