Beginners who are learning JS have an analysis of their understanding of the object-oriented nature of JavaScript. Friends who need to learn can refer to it. Copy the code code as follows:
var obj = document.getElementById(name);
function clickMe() {
alert(this.value);
this.value += !!!!;
alert(this.value);
}
var ActionBinder = function() {//Define a class
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//Register doms
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;//Register an action
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//Register doms action
var binder = new ActionBinder();//Create a new class according to the ActionBinder method
binder.registerDOM(obj);
binder.registerAction(clickMe);
binder.bind();
Let’s start with a piece of object-oriented code written in js. First, create an ActionBinder class. The writing method is also similar to java; because js is based on the dom object of html to operate the content of html, define a method registerDOM to register the dom in the class. , use pr ototype prototypes the method for easy calling; in addition, a method for registering events, registerAction, is added, which is also prototyped using the prototype method; finally, a prototyped action bind is used to bind the registered dom and registered events. together and execute.
Here is the original js code snippet:
Code
Copy the code code as follows:
<body>
<script>
document.onload= function(){
var obj = document.getElementById(name);
obj.onclick = function(){alert(this.value);}
}
</script>
<input type=text id=name />
</body>
The code also achieves the desired effect. For some simple applications, the above effect can be satisfied, but for some more complex programs, it is more troublesome to apply and the code is more cumbersome to write; such as code snippets
Code
Copy the code code as follows:
<body>
<script>
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>
<input type=text id=name1 value=111 />
<input type=text id=name2 value=222 />
<input type=text id=name3 value=333 />
</body>
or
Code
Copy the code code as follows:
<body>
<script>
function 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>
Of course, there are other simpler ways to write the above two pieces of code, but overall there is still a lot of redundant code.
It is more flexible to write in object-oriented method, such as
Code
Copy the code code as follows:
<body>
<script>
window.onload = function() {
var objs = document.getElementsByTagName(input);
function clickMe() {
alert(this.value);
}
var ActionBinder = function() {//Define a class
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//Register doms
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;//Register an action
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//Register doms action
for (var i=0;i<objs.length;i++){
var binder = new ActionBinder();//Create a new class according to the ActionBinder method
binder.registerDOM(objs[i]);
binder.registerAction(clickMe);
binder.bind();
};
}
</script>
<input type=text id=name value=111/>
<input type=text id=name1 value=222/>
<input type=text id=name2 value=333/>
</body>
In this way, there will be no redundant code, and the js logic will be relatively clear. The binding of multiple events needs to be studied.