五段实用的js高级技巧_Javascript教程-查字典教程网
五段实用的js高级技巧
五段实用的js高级技巧
发布时间:2016-12-30 来源:查字典编辑
摘要:技巧一之setTimeout.应用案例:比如你想一个函数循环执行10次,怎么办?以前通常是先setInterval,然后clearInter...

技巧一之setTimeout.

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

复制代码 代码如下:

(function () {

var i = 0;

function job() {

console.log(i++);

if (i < 10) {

setTimeout(job, 1000);

}

}

job();

})();

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

技巧二之高效的for循环

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

复制代码 代码如下:

(function () {

var arr=[];

for(var i=arr.length;i--;){

doStuff();

}

})();

这个方式为什么高效?

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

二:for语句中间那个玩意少进行了一次计算,以前的话是for(i=0;i<l;i++)这样的话中间的语句会先比较i<l 然后比较出来的结果在

跟true 或者false比较,自然多了次计算

技巧三之高效赋值

应用案例:抛弃传统的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;

}

})();

以上几个js淫荡技巧还是蛮实用的,前提是你没用使用别人的js框架,用原生创造效率为前提的代码.

还是那句话js代码爱好者nothing原创,谢谢大家支持,觉得写得好可以顶下,或者把链接发给朋友

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类