五段实用的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 相关文章推荐
深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
Jan 15 Javascript
js arguments对象应用介绍
Nov 28 Javascript
js操作滚动条事件实例
Jan 29 Javascript
jQuery实现返回顶部功能
Feb 23 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
浅谈JavaScript异步编程
Jan 20 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
更换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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
JS按回车键实现登录的方法
2014/08/25 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python中functools模块函数解析
2017/03/12 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
python实现人脸签到系统
2020/04/13 Python
Python json转字典字符方法实例解析
2020/04/13 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
农田水利实习自我鉴定
2013/09/19 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
学期研究性学习个人的自我评价
2014/01/09 职场文书
农村党员对照检查材料
2014/09/24 职场文书
技术入股合作协议书
2014/10/07 职场文书
上课迟到检讨书
2015/05/06 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
python 镜像环境搭建总结
2022/09/23 Python