5个实用的js技巧

1.函数重复运行

1. 应用案例:比如你想一个函数循环执行10次,怎么办?以前通常是先setInterval,然后clearInterval,技巧一就是克服这个问题

(function () {    var i = 0;    function job() {        console.log(i++);        if (i < 10) {            setTimeout(job, 1000);        }    }    job();})();

上面这个job函数就只会乖乖的执行10次.然后自动停止

2.技巧二之高效的for循环

应用案例:抛弃传统的循环方式

(function () {   var arr=[];   for(var i=arr.length;i--;){      doStuff();   }})();

这个方式为什么高效?

一:少了一个参数l=arr.length;

二:for语句中间那个玩意少进行了一次计算,以前的话是for(i=0;i

3.技巧三之高效赋值

应用案例:抛弃传统的if判断赋值

 var i=1,ret;  ret=i!==1||true;  console.log(ret);

以上代码会很神奇的告诉你ret会是true.高效吧不用if(i!==1)了在赋值了

4. 技巧四之强悍的简短的attr

应用案例:setAttribute,getAttribute.这个方法不仅可以设置标准的属性,还可以设置任意属性,兼容好

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不合法的属性设置不了,通过这里可以设置                ret = document.createAttribute(name);                elem.setAttributeNode(ret);            }            ret.nodeValue = value + "";        } else {            elem.setAttribute(name, value);        }        return elem;    } else {  //ie6 7有的属性获取不了        ret = elem.getAttribute(name);        fixIe = elem.getAttributeNode(name).nodeValue;        ret = ret ? ret : fixIe ? fixIe : undefined;        return ret;    }}

以上方法如何测试呢?

attr(document.getElementById(“test”), “classxx”, “xx”)
alert(attr(document.getElementById(“test”),”classxx”));

5.技巧五之getElementsByClassName.

应用案例 :以前js没什么框架的时候,大家都再模仿这个方法,看看今天我是怎么高效的模仿出它来.这也不愧是js初学者的经典代码

(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 = root.getElementsByTagName(tagName || "*");        for(i=elems.length;i--;){            if(rcls.test(elem[i].className)){              ret.push(elems[i]);            }        }        return ret;   }})();