五段实用的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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
Javascript 按位取反运算符 (~)
Feb 04 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 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 新手入门
PHP的面向对象编程
2006/10/09 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
xmlHTTP实例
2006/10/24 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
js单例模式的两种方案
2013/10/22 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
详解django中使用定时任务的方法
2018/09/27 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
基于Python的OCR实现示例
2020/04/03 Python
英国最大的在线时尚眼镜店:Eyewearbrands
2019/03/12 全球购物
文明寝室申报材料
2014/05/12 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
特种设备安全管理制度
2015/08/06 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技