javascript五个实用小技巧

2016年11月16日作者：井井客整理来源:互联网

网上转的五个实用小技巧，感觉自己的原生javascript还是比较弱弱的。先保存下来~

技巧一：setTimeout

以之前如果我们想同一个函数循环执行10次，我们会使用setInterval，然后再clearInterval。而现在有技巧的运用setTimeout也能达到这两个函数的效果。

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

执行job函数之后，控制台就会每隔1秒输出一次，共输出十字啦。

技巧二：高效的for循环

抛弃传统的for循环方式，即不使用for( i=0 ; i<l ; i++ )，看代码：

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

发现区别了吗？是的，少了类似”i<l“的参数，就相当于每执行一次同时也会少一次计算。

技巧三：高效赋值

抛弃传统的if判断赋值

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

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

技巧四：强悍且简短的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")); 来进行测试

技巧五：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; 
    } 
})(); 

到这里就差不多了。有兴趣的童鞋可以试验试验~

文章TAG：

本文标题：javascript五个实用小技巧
本文链接：http://www.jingjingke.com/c/16192.html

上一篇：纯CSS制作叮当猫
下一篇：label点击事件执行两次的问题