五段实用的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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
Validform表单验证总结篇
Oct 31 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
使用Vue实现简单计算器
Feb 25 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 flv视频时间获取函数
2010/06/29 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP序列化操作方法分析
2016/09/28 PHP
浅谈PHP的反射API
2017/02/26 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
JS高级运动实例分析
2016/12/20 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
python获取目录下所有文件的方法
2015/06/01 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
浅谈Django的缓存机制
2018/08/23 Python
python实现爬山算法的思路详解
2019/04/09 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
西班牙著名的珠宝首饰品牌:P D PAOLA
2018/09/15 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
傲盾软件面试题
2015/08/17 面试题
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
考试违纪检讨书
2014/02/02 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
2014年技术部工作总结
2014/12/12 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS