Javascript Advanced Skills

I sorted out the Ajax part last time. I have finished reading the Advanced Skills part this week.

1. Type Detection
Use Object. prototype. toString. call (obj.
Because neither typeof nor instanceof can accurately determine the variable type.

2. Safe Constructor
When we define the constructor
Copy codeThe Code is as follows:
Function Person (name ){
This. name = name;
}

However, if you do not go to var person = new Person ("cnblogs ").
Instead, var person = Person ("cnblogs "). This will point elsewhere, causing contamination of other objects.
The solution is to determine when setting this. property.
This instanceof Person
If not, new Person (x, x, x );
Copy codeThe Code is as follows:
Function Person (name ){
If (this instanceof Person ){
This. name = name;
} Else {
Return new Person (name );
}
}

Note that if other constructors attempt to implement inheritance using the Person. call (this, x) method.
Note that the prototype of the function is directed to Person before instantiation.

3. inert Loading Function
When calling a function, it is often the case that the function needs to judge the browser function.
For example
Copy codeThe Code is as follows:
Function createSomething (){
If (supportH5 ){
// Do something
} Else {
// Do otherthing
}
}

However, if a browser supports a function, it must always be supported. Therefore, it is not necessary to judge each code execution, because it is enough to judge once.
So it can be rewritten
Copy codeThe Code is as follows:
Function createSomething (){
If (supportH5 ){
CreateSomething = function () {// rewrite the createSomething function
// Do something
}
} Else {
// Same as above
}
}

In this way, the first call will make a judgment, and then rewrite this function, it will naturally not be judged.

 
4. Function binding
In js, the most confusing question is who this points.
In fact, I found a conclusion after studying js for so long.
In a function, this points to the object that finally calls this function. In other words, if an object calls this function, this points to that object.
After figuring out this, function binding is not a problem.
The methods that this points to in the change function are call and apply, but both methods will execute the function.
If you do not want to execute a function, but pass the function as a parameter and want to change this, use the latest bind.

 
5. Timer
Although setTimeou, setInterval, or Ajax are asynchronous, like multithreading, js is single-threaded.
In fact, these methods do not add a thread.
SetTimeout (fn, 300) indicates that fn is put into the execution queue of js after 300 milliseconds.
If there is no transaction to be executed in the queue (that is, the js interpreter is idle), it will be executed immediately. Otherwise, the function will be executed after the transaction in the queue is processed.
Therefore, neither setTimeout nor setInterval can accurately control the time.
Note that using setTimeout to simulate setInterval can accurately control the minimum execution interval.

 
6. Run the timer at a fixed time.
If a method needs to be executed for a long time and the browser may not respond in a short time, you can use a timer to fix the part of the method to be executed at each time. In this way, JavaScript will not remain busy (no response from the browser), and there will be free time to process other transactions. For example, if there is a 1000-length array loop, it can be 100 executed each time, and the interval is set to idle js for other operations.

 
7. Function throttling.
Function Throttling is a good way to improve performance, which can be improved several times in some cases.
For example, when performing a drag operation or some operations that occur in the onresize event.
Each time you perform this operation, you actually perform it many times. For example:
Copy codeThe Code is as follows:
Var I = 0;
Window. onresize = function (){
Console. log (I ++ );
}

Try to stretch the browser, and you will find that the console instantly shows I more than 100.
Change the writing method, for example:
Copy codeThe Code is as follows:
Var I = 0, j = 1;
Window. onresize = function (){
If (j % 2 = 0 ){
Console. log (I ++ );
}
J ++;
}

Create a variable j so that j can be executed only when the number of even values is reached, that is, the number of executions is halved.
In this way, the execution times can be reduced by 50%, but the user does not feel the difference.

There is also a function throttling implemented using a timer.
The core code is as follows:
Copy codeThe Code is as follows:
Function throttle (method, context ){
ClearTimeout (method. tId );
Method. tId = setTimeout (function (){
Method. call (context );
},100 );
}

Here, the execution environment of the execution function and function is passed in (that is, the object pointing to this in the execution function), then the action queue is cleared, and then the action is executed.
This form can better control the action frequency.
Suppose it is a browser stretching action, so as long as you stretch fast enough, each triggering interval is within ms, then only the last result will be executed.

 
8. Custom events
Essentially, it is the observer model. The basic mode requires three functions,
A function is a binding event, a function is a triggering event, and a function is a binding removal event.
This mode can greatly reduce code coupling.