五段实用的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 相关文章推荐
easyui Droppable组件实现放置特效
Aug 19 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
JS基于面向对象实现的多个倒计时器功能示例
Feb 28 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
JavaScript十大取整方法实例教程
Dec 03 Javascript
JS ES6异步解决方案
Apr 29 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
Chrome Web App开发小结
2014/09/04 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
深入理解node.js http模块
2018/01/24 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
[48:24]完美世界DOTA2联赛循环赛LBZS vs Forest 第一场 10月30日
2020/10/31 DOTA
Python 第一步 hello world
2009/09/25 Python
Python实现单词拼写检查
2015/04/25 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
python中str内置函数用法总结
2020/12/27 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
主题酒店策划书
2014/01/28 职场文书
公司管理建议书范文
2014/03/12 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫