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点击事件执行两次的问题