Several techniques and performance optimization in JavaScript development

A settimeout of skill.

Application case: For example, do you want a function loop to perform 10 times? It used to be setinterval first, then Clearinterval, the trick is to overcome the problem.

The code is as follows	Copy Code
(function () { var i = 0; function Job () { Console.log (i++); if (I < 10) { settimeout (Job, 1000); } } Job (); })();

This job function is only executed 10 times. And then automatically stop

Tip Two efficient for loop

Application case: Discard the traditional cycle mode

The code is as follows	Copy Code
(function () { var arr=[]; for (Var i=arr.length;i--;) { Dostuff (); } })();

Why is this way efficient?

One: missing a parameter l=arr.length;

Two: For statement in the middle of that thing to do a little calculation, before the word is for (i=0;i<l;i++) such words in the middle of the statement will compare I<l and then compare the results in

Compared to true or false, it's more natural to compute

Efficient assignment of three skills

Application case: Discard the traditional if judgment assignment

The code is as follows	Copy Code
var I=1,ret; ret=i!==1| | True Console.log (ret);

The above code will magically tell you that the RET will be true. Efficient bar without if (i!==1) the value is assigned

Skill four short attr of the intrepid

Application case: Setattribute,getattribute. This method can not only set the standard properties, but also set arbitrary properties, compatible with good

The code is as follows

Copy Code

function attr (elem, name, value) { VAR ret; if (value) { if (/msie [6-7].0/i.test (navigator.useragent)) { ret = Elem.getattributenode (name); if (!ret) {//IE6 7 illegal property set to catch birds, through here you can set ret = Document.createattribute (name); Elem.setattributenode (ret); } Ret.nodevalue = value + ""; } else { Elem.setattribute (name, value); } return elem; } else {//ie6 7 has attributes to get no birds ret = Elem.getattribute (name); Fixie = Elem.getattributenode (name). NodeValue; RET = ret? Ret:fixie? fixie:undefined; return ret; } }

How are these methods tested?

The code is as follows	Copy Code
attr (document.getElementById ("Test"), "classxx", "xx"); Alert (attr (document.getElementById ("Test"), "classxx"));

Skill five of the getelementsbyclassname.

Application case: JS before the framework of the time, we have to imitate this method, to see how effective I am today to imitate it. This is also worthy of the classic JS beginners code

The code is as follows

Copy Code

(function () { var getelementsbyclassname=function (Cls,context) { var root = Context | | Document Return Document.queryselectorall? Root.queryselectorall ("." + CLS): Root.getelementsbyclassname? Root.getelementsbyclassname (CLS): Help ("*", CLS, context); } var help=function (Tagname,cls,context) { var root= context | | Document Ret=[],elems,i, Rcls=new RegExp ("^|\s+" +cls+ "\s+|$"); Elems = C.getelementsbytagname (TagName | | "*"); For (i=elems.length;i--;) { if (Rcls.test (Elem[i].classname)) { Ret.push (Elems[i]); } } return ret; } })();