Introduce some important javascript programming skills

Introduce some important javascript programming skills

 Introduce some important javascript programming skills

 1. Clever judgment:

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

The Code is as follows:

If (! Obj ){}

Indicates what an object does when it is false, because if obj is any of the above, it is false ,! False is true, so if (obj = null | obj = NaN...) is not required ....).

　2. Clever Use of operators:

There is a classic technique to get a timestamp.

The Code is as follows:

Var dataspan = new Date () * 1;

We know that js is a weak type language, and Date () returns a string that represents time. Using this string for arithmetic operations will get the conversion, that is, the result timestamp.

　3. Use Regular Expressions:

The Code is as follows:

/. A/ig.exe c ('xsas ')

// It is equivalent to creating a reg object, calling the exec method, and also calling other methods, such as test () and match.

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

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 pass a Values to determine the maximum value.

5. Memory Optimization:

The Code is as follows:

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

P1.xx

P1.xx

.......

P1 = null; // after the operation is completed, the reference to p1 is manually removed.

　6. The most popular Object creation method (prototype ):

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 constructor mode is the sharing of reference types. Therefore, the reference type is defined in the constructor, while the general method is defined in the prototype and this is used for reference.

7. Block-level scope and private variables

In javascript, there is no block-level scope or private variable. However, using some features, these effects can be imitated.

7.1 block-level scope:

The Code is as follows:

(Function (){

// Block-level scope

}

)();

An anonymous function is enclosed by a bracket, which is called "function standardization". That is to say, it can be called as a standard function, for example:

The Code is as follows:

Var name = function (){};

(Name) (); // this is generally not the case;

The advantage of doing so is that variables in the function cannot be accessed outside (), and it becomes block-level scope. This method is generally used to compile the plug-in and will not be global) add additional variables, and after the function is executed, the internal Defined variables will be destroyed, so there will be no problems with the closure feature.

　　7.2 private variables:

The Code is as follows:

Function private ()

{

Var name = 'moersing ';

This. getName = function (){

Return this. name;

}

}

Private variables actually use the function scope as a limitation (external access is not allowed), and then define a method. This method returns the corresponding variables.

8. DOM NodeList:

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

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 create an infinite loop. a div is created in the loop and then added to the body by the appendChild method. Then, all the alldivs will be updated immediately.

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 );

}

We recommend that you do not perform the NodeList operation frequently, because each operation will execute a DOM tree query.

In addition to the methods described above, the newly added API (selector API Level1) of HTML5 can also solve this problem. It is similar to the C # linq for timely query, and as for what is a real-time query of linq, I will update the blog in the future. Stay tuned to the following:

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 a parameter, a CSS selector, similar to $ () in jquery. The NodeList returned by querySelectorAll is a timely, non-dynamic DOM set.

There is also a querySelector that returns the First Matching Element. For details about the HTML5 API, see

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

Or

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

In addition, I am also preparing a blog dedicated to HTML5 APIs. Please stay tuned.

9. DOM performance:

Don't do this silly thing (I did ...)

Copy the Code as follows:

For (var I = 0; I <10; I ++)

{

Document. querySelector ('ul '). innerHTML ="

• "+ I +"

";

 

}

Assign a value to the innerHTML of the object and call the built-in C ++ parser to parse the string. Although the speed is very fast, it is recommended that you do not perform this operation, resulting in performance loss.

It is best to do this:

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 later.