五段实用的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 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
初识Javascript小结
Jul 16 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
JS实现滑动插件
Jan 15 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懒人函数 自动添加数据
2011/06/28 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
JSONP基础知识详解
2017/03/19 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
Python中的各种装饰器详解
2015/04/11 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
使用python实现个性化词云的方法
2017/06/16 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
python 魔法函数实例及解析
2019/09/25 Python
django 实现简单的插入视频
2020/04/07 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Python实现爬取并分析电商评论
2020/06/19 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
应届生服务员求职信
2013/10/31 职场文书
公司营业员的自我评价
2014/03/04 职场文书
财务工作失职检讨书
2014/11/21 职场文书
义卖募捐活动总结
2015/05/09 职场文书
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL
OpenFeign实现远程调用
2022/08/14 Java/Android