五段实用的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 EXCEL 操作类代码
Jul 30 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
js时间戳和c#时间戳互转方法(推荐)
Feb 15 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
vue3使用vue-count-to组件的实现
Dec 25 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
php在字符串中查找另一个字符串
2008/11/19 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
python搭建虚拟环境的步骤详解
2016/09/27 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
主题团日活动总结
2014/06/25 职场文书
同事打架检讨书
2015/05/06 职场文书
安全教育观后感
2015/06/17 职场文书
基层工作经历证明
2015/06/19 职场文书
写给同事的离职感言
2015/08/04 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
MySQL限制查询和数据排序介绍
2022/03/25 MySQL