五段实用的js高级技巧


Posted in Javascript onDecember 20, 2011

技巧一之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 相关文章推荐
JS的数组迭代方法
Feb 05 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
vue中使用微信公众号js-sdk踩坑记录
Mar 29 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
更换select下拉菜单背景样式的实现代码
Dec 20 #Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 #Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 #Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 #Javascript
javascript面向对象编程代码
Dec 19 #Javascript
用jQuery模拟页面加载进度条的实现代码
Dec 19 #Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 #Javascript
You might like
PHP简洁函数小结
2011/08/12 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
JS求解三元一次方程组值的方法
2017/01/03 Javascript
Js apply方法详解
2017/02/16 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
python 实现端口扫描工具
2020/12/18 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
局域网定义和特性
2016/01/23 面试题
《中华少年》教学反思
2014/02/15 职场文书
写给老婆的检讨书
2014/02/21 职场文书
揭牌仪式主持词
2014/03/19 职场文书
对祖国的寄语大全
2014/04/11 职场文书
教代会闭幕词
2015/01/28 职场文书
朋友聚会开场白
2015/06/01 职场文书
2016年五一促销广告语
2016/01/28 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书