五段实用的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最常用与实用的创建类的代码
Aug 12 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
更换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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
一个基于PDO的数据库操作类
2011/03/24 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
javascript 动态添加表格行
2006/06/22 Javascript
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
详解Python字符串对象的实现
2015/12/24 Python
通过Pandas读取大文件的实例
2018/06/07 Python
python 对key为时间的dict排序方法
2018/10/17 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Numpy数组的广播机制的实现
2020/11/03 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
教师求职信范文分享
2013/12/27 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
行政二审代理词
2015/05/25 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS