五段实用的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 28 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
更换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读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
javascript第一课
2007/02/27 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
对TensorFlow的assign赋值用法详解
2018/07/30 Python
python实现任意位置文件分割的实例
2018/12/14 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
网络工程专业自荐信范文
2014/03/16 职场文书
社区义诊活动总结
2014/04/30 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2014小学语文教师个人工作总结
2014/12/03 职场文书
介绍信范文
2015/01/31 职场文书
夫妻吵架保证书
2015/05/08 职场文书
联谊会开场白
2015/06/01 职场文书
百年校庆感言
2015/08/01 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android