Share 9 javascript programming skills that I personally think are important

Share 9 javascript programming skills that I personally think are important_javascript skills

WBOY

Release： 2016-05-16 16:02:02

Original

1205 people have browsed it

1. Use judgment skillfully:

In js, NaN, undefined, Null, 0, "" is false when converted to bool, so it can be written like this.

Copy code The code is as follows:

if(!obj) {}

represents what an object does if it is false, because if obj is any of the above, then it is false, !false is true, so there is no need for if(obj==null || obj == NaN....).

2. Use operators skillfully:

There is a very classic trick to get the timestamp.

Copy code The code is as follows:

var dataspan = new Date()*1;

We know that js is a weakly typed language. Date() will return a string representing time. Using this string to perform arithmetic operations will result in conversion, which is the timestamp of the result.

3. Use regular expressions skillfully:

Copy code The code is as follows:

/.a/ig.exec('xsas')

//Equivalent to creating a reg object and calling the exec method. Of course, other methods can also be called, such as test(), match(), etc. 

4. Get the maximum and minimum value of the array:

Copy code The code is as follows:

var values ​​= [1,2,3,40,23]; 

var max = Math.Max.apply(Math,values);

Call Max.apply, set the object to Math, and then pass a Values to determine the maximum value.

5. Memory optimization:

Copy code The code is as follows:

function p(){this.p='moersing'}; var p1 = new p(); 

p1.xx 

p1.xx

…..

p1=null; //After performing the operation, finally manually release the reference to p1.

6. The most popular way to create objects (prototype mode):

Copy code The code is as follows:

function c(){

This.name ='moersing';

This.age=18;

This.books=['javascript develop','C# develop'];

}

c.prototype={ 

displayBookName:function (){ 

foreach(var t in this.books) 

            {

              document.write(this.books[t]);

}

}

}

The biggest disadvantage of the prototype construction pattern is the sharing of reference types. Therefore, define the reference type in the constructor, and define the general method in the prototype, using this reference.

7. Block-level scope and private variables

In JavaScript, there is no such thing as block-level scope and private variables, but by using some features, you can simulate these effects.

7.1 Block-level scope:

Copy code The code is as follows:

(function(){ 

//Block-level scope

}

)();

Add a bracket around the anonymous function. I call it "function standardization", that is to say, it can be called like a standard function, such as:

Copy code The code is as follows:

var name =function(){};

(name)();//This is not usually written like this;

The advantage of this is that the variables in the function cannot be accessed outside (), and it becomes a block-level scope. This method is generally used when writing plug-ins, and does not add additional variables to the global. variables, and after the function is executed, its internally defined variables are destroyed, so there is no problem with the closure feature.

7.2 Private variables:

Copy code The code is as follows:

function private()

{ 

var name = 'moersing';

This.getName = function(){

Return this.name;

}

}

Private variables actually use the scope of the function as a restriction (not accessible from the outside), and then define a method that returns the corresponding variable, and that's it.

8.DOM NodeList:

nodeList is a dynamic element, which means that if you add any element to the document, nodeList will be updated in real time, such as:

Copy code The code is as follows:

var alldiv = document.getElementsByTagName('div');

for(var i=0;i
{

      var div = document.createElement('div');

        div.innerHTML= i.toString();

           document.body.appendChild(div);

}

This code will cause an infinite loop. A div is created in the loop, and then the appendChild method adds it to the body. Then, all alldivs will be updated immediately, so i

Copy code The code is as follows:

var alldiv = document.getElementsByTagName('div');

var len,i;

for(i=0,len=alldiv.length;i
{

      var div = document.createElement('div');

        div.innerHTML= i.toString();

           document.body.appendChild(div);

}

Here is a suggestion: It is best not to operate NodeList frequently, because each operation will execute a query of the DOM tree.

In addition to the methods introduced above, the newly added API (selector API Level1) of HTML5 can also solve this problem. It is similar to C#'s linq real-time query. As for what linq real-time query is, I will update the blog in the future, so stay tuned. :

Copy code The code is as follows:

var allDiv= document.querySelectorAll('div');

for(var i=0;i
{

      var div = document.createElement('div');

        div.innerHTML= i.toString();

           document.body.appendChild(div);

}

querySelectorAll requires one parameter, a CSS selector, similar to $() in jquery. The NodeList it returns is a timely, non-dynamic DOM collection.

There is also a querySelector, which returns the first matched element. For details on the HTML5 API, see

http://www.w3.org/standards/techs/dom#w3c_all

https://developer.mozilla.org/zh-CN/docs/Web/API

In addition, I am also preparing a blog specifically about HTML5 API, so stay tuned.

9.DOM performance:

Don’t do such stupid things (I have done it...)

Copy code The code is as follows:

for(var i=0;i<10;i )

{ 

document.querySelector('ul').innerHTML="" i "
";

}

Assigning a value to the innerHTML of the object will call the built-in C parser to parse the string. Although it is very fast, it is best not to do this as it will cause a certain performance loss.

Better do this:

Copy code The code is as follows:

var ih=null;

for(var i=0;i<10;i )
{
ih ="

" i "

";
}
document.querySelector('ul').innerHTML=ih;

Some other performance optimization topics will be updated when there is time.

The above is the entire content of this article, I hope you all like it.