五段实用的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 相关文章推荐
对xmlHttp对象的理解
Jan 17 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 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
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
ionic环境配置及问题详解
2017/06/27 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
解析Python中的二进制位运算符
2015/05/13 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
Python检测网站链接是否已存在
2016/04/07 Python
python和ruby,我选谁?
2017/09/13 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
企业车辆管理制度
2014/01/24 职场文书
档案室主任岗位职责
2014/02/12 职场文书
租赁意向书范本
2014/04/01 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
2014年班务工作总结
2014/12/02 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python