Share 9 points of personal thought more important JavaScript programming skills _javascript Skills

1. Use judgment skillfully:

In JS, nan,undefined,null,0, "" when converted to bool, is false, so you can write this.

Copy Code code as follows:

if (!obj) {}

Represents what is done when an object is false, because if obj is any of the above, then False,!false is true, so that it does not require if (Obj==null | | | obj = NaN ...).

2. Skillfully Use operators:

There is a very classic technique to get a timestamp.

Copy Code code as follows:

var dataspan = new Date () *1;

As we know, JS is a weakly typed language, and Date () returns a string representing the time, which is used to perform arithmetic operations and will be converted, that is, the timestamp of the result.

3. Use regular Expressions skillfully:

Copy Code code as follows:

/.a/ig.exec (' Xsas ')
The equivalent of creating a Reg object, calling the Exec method, and of course invoking other methods, such as test (), match (), and so on.

4. Take the maximum and minimum values of the array:

Copy Code code as follows:

var values = [1,2,3,40,23];
var max = Math.Max.apply (math,values);

The maximum value can be determined by calling Max.apply, setting the object to math, and then passing a values.

5. Memory Optimization:

Copy Code code as follows:

function P () {this.p= ' moersing '}; var p1 = new P ();
p1.xx
p1.xx
.......
P1=null; After the operation is done, the last reference to P1 is manually lifted.

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

Copy Code code 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 a prototype construction pattern is the sharing of reference types, so the reference type is defined in the constructor, and the generic method is defined in the prototype, using the this reference.

7. Block-level scopes and private variables

In JavaScript, there is no block-level scope and private variables, but, with some features, these effects can be imitated.

7.1 Block-level scopes:

Copy Code code as follows:

(function () {
Block-level scopes
}
)();

The anonymous function is added with a bracket, which I call "function normalization", that is, it can be invoked like a standard function, such as:

Copy Code code as follows:

var name =function () {};
(name) ();//generally do not write like this;

The advantage of doing this is that the variables in the function cannot be accessed outside the (). is also a block-level scope, which is typically used when writing plug-ins without adding additional variables to the global, and after the function has been executed, its internally defined variables are destroyed, so There is no problem with closure characteristics.

7.2 Private variables:

Copy Code code as follows:

function Private ()
{
var name = ' moersing ';
This.getname = function () {
return this.name;
}
}

The private variable is actually using the scope of the function as a limitation (outside inaccessible), and then defining a method that returns the corresponding variable, that's all.

8.DOM of NodeList:

NodeList is a dynamic element, which means that when any element is added to the document, NodeList is updated in real time, such as:

Copy Code code as follows:

var alldiv = document.getelementsbytagname (' div ');
for (Var i=0;i<alldiv.length;i++)
{
var div = document.createelement (' div ');
Div.innerhtml= i.tostring ();
Document.body.appendChild (DIV);
}

This code creates an infinite loop in which a div is created in the loop, and then the AppendChild method adds it to the body, so all alldiv are updated immediately, so,i< Alldiv.length can never be set up, to solve this problem, you could use the following methods:

Copy Code code as follows:

var alldiv = document.getelementsbytagname (' div ');
var len,i;
for (i=0,len=alldiv.length;i<len;i++)
{
var div = document.createelement (' div ');
Div.innerhtml= i.tostring ();
Document.body.appendChild (DIV);
}

It is recommended here that it is best not to nodelist frequently, because every operation executes a query of the DOM tree.

In addition to the methods described above, HTML5 new API (Selector API Level1) can also solve this problem, it is similar to C # LINQ timely Query, as for what is LINQ timely query, I will update the blog, please pay attention to:

Copy Code code as follows:

var alldiv= document.queryselectorall (' div ');
for (Var i=0;i<alldiv.length;i++)
{
var div = document.createelement (' div ');
Div.innerhtml= i.tostring ();
Document.body.appendChild (DIV);
}

Queryselectorall needs a parameter, a CSS selector, similar to the $ () in jquery, which returns the NodeList is a timely, not dynamic DOM collection.

There is also a queryselector that returns the first element of the match, as described in the HTML5 API

Http://www.w3.org/standards/techs/dom

Or

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

In addition, I also brewing a blog, specifically speaking HTML5 API, please pay attention to.

9.DOM Performance:

Don't do such stupid things (I did ...). )

Copy Code code as follows:

for (Var i=0;i<10;i++)
{
Document.queryselector (' ul '). Innerhtml= "<li>" +i+ "</li>";
}

To assign a value to the object's innerHTML, the built-in C + + parser is invoked to parse the string, although it is very fast, but it is best not to do so, there will be a certain loss of performance.

It's best to do this:

Copy Code code as follows:

var ih=null;

for (Var i=0;i<10;i++)
{
ih+= "<li>" +i+ "</li>";
}
Document.queryselector (' ul '). Innerhtml=ih;

Some other performance optimization topics, such as time to update.

The above mentioned is the entire content of this article, I hope you can enjoy.