五段实用的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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
用 JavaScript 迁移目录
Dec 18 Javascript
js压缩利器
Feb 20 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
Angularjs 基础入门
Dec 26 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
分享jQuery网页元素拖拽插件
Dec 01 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
Vue实现根据hash高亮选项卡
May 27 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
合作指挥官:孟斯克
2020/03/16 星际争霸
PR值查询 | PageRank 查询
2006/12/20 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
php日期操作技巧小结
2016/06/25 PHP
js停止输出代码
2008/07/20 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
python 错误处理 assert详解
2020/04/20 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
自主招生自荐书
2013/11/29 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
工商局个人工作总结
2015/03/03 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers