1. About javascript's apply and call functions
A large number of apply and call functions are used, and inadvertent attention will cause comprehension deviation.
Official explanation: Apply one method of a certain object and replace the current object with another object.
The difference between apply and call is that the second parameter is different. apply is an array or arguments object. And call is any type separated by commas.
The most confusing thing about apply and call is also the feature of apply and call. But it is best not to abuse it.
Can change the object that calls the function. As shown in the following example, the keyword this is used in the function. At this time, this represents the first parameter of the apply and call function.
<script src="prototype1.3."></script>
<input type="text" value="input text">
<script>
function Obj(){
="Object!";
}
var value="global variable";
function Fun1(){
alert();
}
window.Fun1();
(window);
($('myText'));
(new Obj());
</script>
2. About closure
closure features of JavaScript are used in bind, etc. But overall, not much is used for powerful closure features. You can refer to the article I translated to learn about closures.
3. Two ways to make me disgusted
（1）
var Class = {
create: function() {
return function() {
(this, arguments);
}
}
}
I hate writing JavaScript in other language styles. Using this method to construct a custom class, I don’t think it is very convenient. Reducing the number of lines of code will only make it difficult to understand. Define an additional initialize method.
Actually, it’s a bit far-fetched to hate this, but it’s a bit too much to modify the prototype object of the Object.
（2）
But you can only give the name extend a confusion that will cause people familiar with Java. It's unreasonable to modify the prototype of the Object. I don't know how the author considered it. When you have the for in loop object, trouble comes. Someone may ask you what you do for in? I used both DWR and javascript objects returned by dwr have an extra exetend attribute, and it also needs to be handled specially.
In the past, I compared the implementation of dojo and inheritance, but now I understand something. For JavaScript, which does not have static type checking and syntax-free language, if you choose a certain js class library, you must also adapt to the author's style of writing JavaScript. The author of the author's use of extend is perfect. If we don't think it is just a function of attribute copying, it is good to read more codes.
4. About function binding
The class library provides two methods. First, we explain one of these two methods conceptually.
Any function can call these two methods; the parameters are javascript objects or element objects on web pages; the return type is a function object.
Originally, I was just a function, but Is it a function? What is the difference between these two functions? Looking at the implementation code, the key is the code of the apply\call function. In fact, this is just a conversion of the method call object.
<script src="prototype1.3."></script>
<input type=checkbox id=myChk name="asf" value=1> Test
<script>
var CheckboxWatcher = ();
= {
initialize: function(chkBox, message) {
= $(chkBox);
= message;
= (this);
},
showMessage: function(evt) {
alert( + ' (' + + ')');
}
};
new CheckboxWatcher('myChk','message!!!!');
//$('myChk').onclick=function(){};
</script>
This is the example given by /. I personally feel that it is not interesting, but it makes me a little disgusted with bind, bindAsEventListener. (Javascript is like this. Everyone knows the syntax, but the code written is really different)
Look at the following code:
<script src="prototype1.3."></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
function Class(){
="class";
}
=function(){
alert();
}
var obj=new Class();
//$('myChk').onclick=;
$('myChk').onclick=(obj);
//$('myChk').onclick=($('myChk'));
</script>
From the above code, we can see that bind/bindAsEventListener just wraps the apply/call method and changes the method's call object. As an example, you can convert a method into any object call and make the form element trigger. (The only difference between bind and bindAsEventListener is the return parameter of the function)
These two methods can also be reused between objects to implement the concept of inheritance methods. Looking at the following code, it is actually quite boring.
<script src="prototype1.3."></script>
<script>
function Class1(name){
=name;
}
=function(){
alert();
}
function Class2(name){
=name;
=(this);
}
var obj1=new Class2("yql");
();
var obj2=new Object();
="zkj";
=(obj2);
();
</script>
I have never read the code for extension project and don't know the best practices of bind..., let's dig together. But you must not understand bind/bindAsEventListener from the meaning of the binding, as it may make you more confused. Understand the essence from apply/call. Apply one method of an object and replace the current object with another object.
5. Registration of events
<script src="prototype1.3."></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
(myChk, 'click', showMessage, false);
//$('myChk').onclick=showMessage;
//$('myChk').onclick=();
$('myChk').onclick=($('myChk'));
function showMessage() {
alert();
}
</script>
Execute the above code and you can understand the difference between it and bind/bindAsEventListener:
(1) Obviously there are restrictions, and you can only handle simple functions, and there cannot be anything like this in the function.
(2) Use addEventListener/attachEvent internally. Can add multiple functions to a trigger event(). bind is covered.
6. Best practices about event monitoring
Obviously, the event registration method provided is not very complete. Let’s take a look at the time registration of dojo (Chinese version). It’s more complicated. I guess many people, like me, are temporarily waiting and watching dojo.
If you have read the previous article about closures, you may have seen the following code.
Before reading the following code, I want to express a point of view. The browser will create an object for you in any element in a web page (see). (I think) The difference between these objects and you create javascript objects is that they have event listening and will respond to events on the mouse and keyboard. If you use the following code, then convert the event listening code into your javascript code very well.
function associateObjWithEvent(obj, methodName){
return (function(e){
e = e||;
return obj[methodName](e, this);
});
}
function DhtmlObject(elementId){
var el = getElementWithId(elementId);
if(el){
= associateObjWithEvent(this, "doOnClick");
= associateObjWithEvent(this, "doMouseOver");
= associateObjWithEvent(this, "doMouseOut");
}
}
= function(event, element){
... // doOnClick method body.
}
= function(event, element){
... // doMouseOver method body.
}
= function(event, element){
... // doMouseOut method body.
}
If I have time, I want to use the above idea to implement the code to drag a web page floating box (actually there are already a lot), to be continued...
A large number of apply and call functions are used, and inadvertent attention will cause comprehension deviation.
Official explanation: Apply one method of a certain object and replace the current object with another object.
The difference between apply and call is that the second parameter is different. apply is an array or arguments object. And call is any type separated by commas.
The most confusing thing about apply and call is also the feature of apply and call. But it is best not to abuse it.
Can change the object that calls the function. As shown in the following example, the keyword this is used in the function. At this time, this represents the first parameter of the apply and call function.
<script src="prototype1.3."></script>
<input type="text" value="input text">
<script>
function Obj(){
="Object!";
}
var value="global variable";
function Fun1(){
alert();
}
window.Fun1();
(window);
($('myText'));
(new Obj());
</script>
2. About closure
closure features of JavaScript are used in bind, etc. But overall, not much is used for powerful closure features. You can refer to the article I translated to learn about closures.
3. Two ways to make me disgusted
（1）
var Class = {
create: function() {
return function() {
(this, arguments);
}
}
}
I hate writing JavaScript in other language styles. Using this method to construct a custom class, I don’t think it is very convenient. Reducing the number of lines of code will only make it difficult to understand. Define an additional initialize method.
Actually, it’s a bit far-fetched to hate this, but it’s a bit too much to modify the prototype object of the Object.
（2）
But you can only give the name extend a confusion that will cause people familiar with Java. It's unreasonable to modify the prototype of the Object. I don't know how the author considered it. When you have the for in loop object, trouble comes. Someone may ask you what you do for in? I used both DWR and javascript objects returned by dwr have an extra exetend attribute, and it also needs to be handled specially.
In the past, I compared the implementation of dojo and inheritance, but now I understand something. For JavaScript, which does not have static type checking and syntax-free language, if you choose a certain js class library, you must also adapt to the author's style of writing JavaScript. The author of the author's use of extend is perfect. If we don't think it is just a function of attribute copying, it is good to read more codes.
4. About function binding
The class library provides two methods. First, we explain one of these two methods conceptually.
Any function can call these two methods; the parameters are javascript objects or element objects on web pages; the return type is a function object.
Originally, I was just a function, but Is it a function? What is the difference between these two functions? Looking at the implementation code, the key is the code of the apply\call function. In fact, this is just a conversion of the method call object.
<script src="prototype1.3."></script>
<input type=checkbox id=myChk name="asf" value=1> Test
<script>
var CheckboxWatcher = ();
= {
initialize: function(chkBox, message) {
= $(chkBox);
= message;
= (this);
},
showMessage: function(evt) {
alert( + ' (' + + ')');
}
};
new CheckboxWatcher('myChk','message!!!!');
//$('myChk').onclick=function(){};
</script>
This is the example given by /. I personally feel that it is not interesting, but it makes me a little disgusted with bind, bindAsEventListener. (Javascript is like this. Everyone knows the syntax, but the code written is really different)
Look at the following code:
<script src="prototype1.3."></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
function Class(){
="class";
}
=function(){
alert();
}
var obj=new Class();
//$('myChk').onclick=;
$('myChk').onclick=(obj);
//$('myChk').onclick=($('myChk'));
</script>
From the above code, we can see that bind/bindAsEventListener just wraps the apply/call method and changes the method's call object. As an example, you can convert a method into any object call and make the form element trigger. (The only difference between bind and bindAsEventListener is the return parameter of the function)
These two methods can also be reused between objects to implement the concept of inheritance methods. Looking at the following code, it is actually quite boring.
<script src="prototype1.3."></script>
<script>
function Class1(name){
=name;
}
=function(){
alert();
}
function Class2(name){
=name;
=(this);
}
var obj1=new Class2("yql");
();
var obj2=new Object();
="zkj";
=(obj2);
();
</script>
I have never read the code for extension project and don't know the best practices of bind..., let's dig together. But you must not understand bind/bindAsEventListener from the meaning of the binding, as it may make you more confused. Understand the essence from apply/call. Apply one method of an object and replace the current object with another object.
5. Registration of events
<script src="prototype1.3."></script>
<input type=checkbox id=myChk name="chk" value=1> Test
<script>
(myChk, 'click', showMessage, false);
//$('myChk').onclick=showMessage;
//$('myChk').onclick=();
$('myChk').onclick=($('myChk'));
function showMessage() {
alert();
}
</script>
Execute the above code and you can understand the difference between it and bind/bindAsEventListener:
(1) Obviously there are restrictions, and you can only handle simple functions, and there cannot be anything like this in the function.
(2) Use addEventListener/attachEvent internally. Can add multiple functions to a trigger event(). bind is covered.
6. Best practices about event monitoring
Obviously, the event registration method provided is not very complete. Let’s take a look at the time registration of dojo (Chinese version). It’s more complicated. I guess many people, like me, are temporarily waiting and watching dojo.
If you have read the previous article about closures, you may have seen the following code.
Before reading the following code, I want to express a point of view. The browser will create an object for you in any element in a web page (see). (I think) The difference between these objects and you create javascript objects is that they have event listening and will respond to events on the mouse and keyboard. If you use the following code, then convert the event listening code into your javascript code very well.
function associateObjWithEvent(obj, methodName){
return (function(e){
e = e||;
return obj[methodName](e, this);
});
}
function DhtmlObject(elementId){
var el = getElementWithId(elementId);
if(el){
= associateObjWithEvent(this, "doOnClick");
= associateObjWithEvent(this, "doMouseOver");
= associateObjWithEvent(this, "doMouseOut");
}
}
= function(event, element){
... // doOnClick method body.
}
= function(event, element){
... // doMouseOver method body.
}
= function(event, element){
... // doMouseOut method body.
}
If I have time, I want to use the above idea to implement the code to drag a web page floating box (actually there are already a lot), to be continued...