Les débutants qui apprennent JS ont une analyse de leur compréhension de la nature orientée objet de JavaScript. Les amis qui ont besoin d'apprendre peuvent s'y référer. Copiez le code comme suit :
var obj = document.getElementById(nom);
fonction clicMe() {
alert(this.value);
this.value += !;
alert(this.value);
}
var ActionBinder = function() {//Définir une classe
}
ActionBinder.prototype.registerDOM = fonction (doms) {
this.doms = doms;//Enregistrer les doms
}
ActionBinder.prototype.registerAction = fonction (gestionnaires) {
this.handlers = handlers;//Enregistrer une action
}
ActionBinder.prototype.bind = fonction() {
this.doms.onclick = this.handlers
}//Enregistrer l'action doms
var binder = new ActionBinder();//Créer une nouvelle classe selon la méthode ActionBinder
classeur.registerDOM(obj);
binder.registerAction(clickMe);
classeur.bind();
Commençons par un morceau de code orienté objet écrit en js. Tout d'abord, créez une classe ActionBinder. La méthode d'écriture est également similaire à Java car js est basé sur l'objet dom du HTML pour exploiter le contenu du HTML, définir une méthode. registerDOM pour enregistrer le dom dans la classe, utilisez pr. ototype prototype la méthode pour un appel facile ; de plus, une méthode d'enregistrement des événements, registerAction, est ajoutée, qui est également prototypée à l'aide de la méthode prototype ; enfin, une liaison d'action prototypée est utilisée pour lier le dom enregistré et les événements enregistrés ensemble ; exécuter.
Voici l'extrait de code js original :
Code
Copiez le code comme suit :
<corps>
<script>
document.onload= fonction(){
var obj = document.getElementById(nom);
obj.onclick = function(){alert(this.value);}
}
</script>
<input type=text id=nom />
</corps>
Le code produit également l'effet souhaité. Pour certaines applications simples, l'effet ci-dessus peut être satisfait, mais pour certains programmes plus complexes, il est plus difficile à appliquer et le code est plus lourd à écrire, comme les extraits de code ;
Code
Copiez le code comme suit :
<corps>
<script>
document.onload= fonction(){
obj1 = document.getElementById(nom1);
obj2 = document.getElementById(nom2);
obj3 = document.getElementById(name3);
obj1.onclick = function(){alert(this.value);}
obj2.onclick = function(){alert(this.value);}
obj3.onclick = function(){alert(this.value);}
}
</script>
<input type=text id=name1 value=111 />
<input type=text id=name2 value=222 />
<input type=text id=name3 value=333 />
</corps>
ou
Code
Copiez le code comme suit :
<corps>
<script>
fonction 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() />
</corps>
Bien sûr, il existe d’autres façons plus simples d’écrire les deux morceaux de code ci-dessus, mais dans l’ensemble, il reste encore beaucoup de code redondant.
Il est plus flexible d'écrire dans une méthode orientée objet, telle que
Code
Copiez le code comme suit :
<corps>
<script>
window.onload = fonction() {
var objs = document.getElementsByTagName(input);
fonction clicMe() {
alert(this.value);
}
var ActionBinder = function() {//Définir une classe
}
ActionBinder.prototype.registerDOM = fonction (doms) {
this.doms = doms;//Enregistrer les doms
}
ActionBinder.prototype.registerAction = fonction (gestionnaires) {
this.handlers = handlers;//Enregistrer une action
}
ActionBinder.prototype.bind = fonction() {
this.doms.onclick = this.handlers
}//Enregistrer l'action doms
pour (var i=0;i<objs.length;i++){
var binder = new ActionBinder();//Créer une nouvelle classe selon la méthode ActionBinder
binder.registerDOM(objs[i]);
binder.registerAction(clickMe);
classeur.bind();
} ;
}
</script>
<input type=text id=name value=111/>
<input type=text id=name1 value=222/>
<input type=text id=name2 value=333/>
</corps>
De cette façon, il n'y aura pas de code redondant et la logique js sera relativement claire. La liaison de plusieurs événements doit être étudiée.