I sorted out the Ajax part last time, and after reading the advanced skills part this week, I will sort it out as well.
1. Type detection
Use Object.prototype.toString.call(obj).
Because neither typeof nor instanceof can accurately judge variable types.
2. Safe constructor
Usually when we define constructors, we will use something like
The code copy is as follows:
function Person(name){
this.name = name;
}
However, if you don't go to var person = new Person("cnblogs").
Instead, var person = Person("cnblogs"). Then this will point elsewhere, causing contamination of the rest of the objects.
The solution is to make a judgment when setting this.property
This instance of Person
If not, new Person(x,x,x);
The code copy is as follows:
function Person(name){
if(this instanceof Person){
this.name = name;
}else{
return new Person(name);
}
}
But one thing to note is that if the other constructors try to implement inheritance through Person.call(this,x) method.
It should be noted that before instantiation, point the prototype of that function to Person.
3. Lazy loading function
When calling a function, there is often a situation where the function needs to judge the browser function.
For example
The code copy is as follows:
function createSomething(){
if(supportH5){
//do something
}else{
//do otherthing
}
}
However, if a browser supports a function, it must always be supported, so it is unnecessary to make judgments every time you execute the code, because once is enough.
So it can be rewritten
The code copy is as follows:
function createSomething(){
if(supportH5){
createSomething = function(){ //Rewrite the createSomething function
//do something
}
}else{
//Same as above
}
}
In this way, you will make a judgment when you call it the first time, and then you will naturally not make a judgment if you rewrite the function.
4. Function binding
In js, the most confusing thing should be the question of who this points to.
In fact, after I have been studying js for so long, I found a conclusion
This in the function will point to the object that finally calls the function. In other words, which object calls this function, this will point to that object.
Once you figure this out, function binding is not a problem.
The methods to change this pointing in the function are call and apply, but the functions will be executed using these two methods.
If you do not want to execute a function, but pass the function as a parameter to a function and want to change this, then use the latest bind.
5. Timer
Although setTimeou, setInterval, or Ajax are asynchronous, like multi-threading, js is single-threaded.
In fact, these methods do not add a thread.
setTimeout(fn,300) means to put fn into the execution queue of js after 300 milliseconds.
If there is no transaction in the queue to be executed (that is, the js interpreter is idle), it will be executed immediately. Otherwise, the function will be executed after the queue transaction is processed.
Therefore, using setTimeout or setInterval is not an accurate control time.
Another thing to note is that using setTimeout to simulate setInterval can accurately control the minimum execution time interval.
6. Use a timer to execute the method in fixed time.
If a method needs to be executed for a long time, which may cause the browser to not respond for a short time, then you can use a timer to execute a part of it every period of time. This will prevent JS from being busy all the time (the browser is unresponsive) and have free time to handle the rest of the transactions. For example, if there is a 1000-length array loop, then you can execute 100 each time, and the interval between js is idle to do other operations.
7. Function throttling.
Function throttling is a great way to improve performance, which can improve efficiency several times in some cases.
For example, when doing dragging or some operations that occur in the onresize event.
Every time you operate it, you actually execute it many times. For example:
The code copy is as follows:
var i = 0;
window.onresize = function(){
console.log(i++);
}
If you try to stretch the browser, you will find that the console instantly shows that the i is more than 100.
Change the writing method, for example:
The code copy is as follows:
var i = 0, j = 1;
window.onresize = function(){
if(j % 2 == 0){
console.log(i++);
}
j++;
}
Create a variable j and let j execute each time only when there is an even number, which means half of the number of executions.
By processing like this, the number of executions can be reduced by 50%, but for users, the difference cannot be felt.
There is also a function throttling implemented using a timer.
The core code is as follows:
The code copy 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 (that is, the pointing object of this in the execution function), then clear the action queue first, and then execute the action.
This form can better control the frequency of the action.
Assuming it is a browser stretching action, as long as you stretch quickly enough and the time interval for each trigger is within 100ms, then the last result will only be executed.
8. Custom events
The essence is the observer pattern. The basic pattern requires 3 functions.
One function is a binding event, one function is a trigger event, and the other is to remove the binding.
This pattern can greatly reduce code coupling.