五段实用的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 相关文章推荐
jQuery timers计时器简单应用说明
Oct 28 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
容易造成JavaScript内存泄露几个方面
Sep 04 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JavaScript数组常用方法
Mar 02 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
JavaScript将数组转换为链表的方法
Feb 16 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
php header功能的使用
2013/10/28 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
php抽象方法和普通方法的区别点总结
2019/10/13 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python多重继承实例
2014/10/11 Python
Python实现分段线性插值
2018/12/17 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python和c语言的主要区别总结
2019/07/07 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
大学生自荐信
2013/12/11 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL