Introduce 9 JavaScript programming tips that individuals think are more important

Source: Internet
Author: User
Tags tostring

introduce 9 JavaScript programming tips that individuals think are more important

1. Use judgment skillfully:

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

The code is 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.

The code is 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:

The code is 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:

The code is 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:

The code is 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):

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 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:

The code is 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:

The code is 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:

The code is 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:

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 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 the Alldiv are immediately updated, so I

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

}

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:

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 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#w3c_all

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= "

    • "+i+"

";

}

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:

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, such as time to update.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.