五段实用的js高级技巧

技巧一之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原创,谢谢大家支持,觉得写得好可以顶下,或者把链接发给朋友

赞 (0)

相关推荐

  • js实现在页面上弹出蒙板技巧简单实用

    蒙板是两个div,其中popWindow样式的div用于遮住整个页面,并半透明.maskLayer 在popWindow上面,用于显示蒙板的信息,比如"载入中--" 复制代码 代码如下: <html> <head> <style type="text/css"> .popWindow { background-color:#9D9D9D; width: 100%; height: 100%; left: 0; top: 0; fi

  • 个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节

    变量转换 var myVar = "3.14159", str = ""+ myVar,// to string int = ~~myVar, // to integer float = 1*myVar, // to float bool = !!myVar, /* to boolean - any string with length and any number except 0 are true */ array = [myVar]; // to array

  • 20个实用的JavaScript技巧分享

    众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现,比如NodeJS.Wakanda以及其它实现.此外,许多开发者都会把JavaScript选为入门语言,使用它来做一些弹出窗口等小东西. 在这篇文章中,作者将会向大家分享JavaScript开发的小技巧.最佳实践等非常实用的内容,不管你是前端开发者还是服务端开发者,都应该来看看这些小技巧,它们绝对会

  • Javascript 实用小技巧

    //自定义的apply,call Function.prototype.apply = function (obj, argu) {  if (obj) obj.constructor.prototype._caller = this;   var argus = new Array();  for (var i=0;i<argu.length;i++)   argus[i] = "argu[" + i + "]";  var r;  eval("r

  • JavaScript 七大技巧（一）

    JavaScript是一门非常流行的编程语言,许多开发者都会把JavaScript选为入门语言,本文向大家分享JavaScript七大实用技巧.最佳实践等非常实用的内容.在过去,如果你想创建一个对象,你需要这样: var car = new Object(); car.colour = 'red'; car.wheels = ; car.hubcaps = 'spinning'; car.age = ; 下面的写法能够达到同样的效果: var car = { colour:'red', whee

  • javascript 数组操作实用技巧

    1.concat方法 [作用] 将多个数组联合起来,这个方法不会改变现存的数组,它只返回了所结合数组的一份拷贝. [语法] arrayObj.concat(array1,array2,...) [实例] var array1 = new Array("1","2"); var array2 = new Array("3","4"); var array3 = array1.concat(array2); document.wr

  • JavaScript使用技巧精萃[代码非常实用]

    (一).确认删除用法: 1. BtnDel.Attributes.Add("onclick","return confirm('"+"确认删除?"+"')"); 2. linktempDelete.Attributes["onclick"]="javascript:return confirm('"+"确认删除?"+"');"; 3. privat

  • javascript一些实用技巧小结

    JS对象之Table表格对象(摘抄) Table对象集合 Table对象:表示HTML文档中的表,对于文档中每个<table>标记,浏览器都创建一个Table对象. 集合 描述 cells[] 获取包含表格中所有单元格的数组js 取行中列 复制代码 代码如下: var tbodyObj = document.getElementById(tbodyID); tbodyObj.rows[rowID].cells[colID].innerText = "abcd"; tbody

  • 五段实用的js高级技巧

    技巧一之setTimeout. 应用案例:比如你想一个函数循环执行10次,怎么办?以前通常是先setInterval,然后clearInterval,技巧一就是克服这个问题 复制代码 代码如下: (function () { var i = 0; function job() { console.log(i++); if (i < 10) { setTimeout(job, 1000); } } job(); })(); 上面这个job函数就只会乖乖的执行10次.然后自动停止 技巧二之高效的fo

  • 非常实用的js验证框架实现源码 附原理方法

    本文为大家分享一个很实用的js验证框架实现源码,供大家参考,具体内容如下 关键方法和原理: function check(thisInput) 方法中的 if (!eval(scriptCode)) { return false; } 调用示例: 复制代码 代码如下: <input type="text" class="text_field percentCheck" name="progress_payment_two" id="

  • 最实用的JS数组函数整理

    我们以前就给大家整理过关于JS数组相关的内容,这次我们给大家整理的是非常实用的JS数组操作技巧和写法,学习下吧. instanceof 检测一个对象是否是数组;(用来对付复杂数据类型;) // 简单数据类型 typeof ; A instanceof B // A是不是B造出来的; 例: var arr = [1,2,3]; console.log(arr instanceof Array); //arr属不属于Array类型; Array.isArray( ) Array.isArray(参数

  • 分享一些不常见却很实用的JS技巧

    分享一些不常见却很实用的JS技巧

    前言 编程语言通常暗藏着各种技巧,熟练使用这些技巧可以提高开发效率.JavaScript 就是一门技巧性很强的语言,掌握常见的语法技巧不但可以加深对语言特性的理解,还可以简化代码,提高编码效率. 下面是列出一些 JavaScript 有用的技巧,相信总有一天会对你有所帮助. 1.数组去重 const numbers = [1, 2, 3, 4, 4, 1] console.log([...new Set(numbers)]) // [1, 2, 3, 4] 2.从数组中过滤所有虚值 const 

  • 实用的js 焦点图切换效果 结构行为相分离

    焦点图切换效果,对前端来说,恐怕再熟悉不过了,实现它的方法应该有多种,工作当中常用的一种,叙述如下: 如何让当前的数字导航与图片的显示同步? 这里有两个区域,图片切换区和数字导航区:分别对应着两个循环函数:plays(value)和setBg(value): 当图片循环切换到第2张时,此时数字导航的当前状态也变换到第2的位置,以此达到一种同步的效果,这里的关键就是给他们传递相同的参数value:而这个任务就交给了函数Mea(value): 图片应该是自动切换的,当循环显示到最后一种图片后,返回到

  • JavaScript高级程序设计 学习笔记 js高级技巧

    第十八章 高级技巧 1.高级函数 1.1 作用域安全的构造函数 ①直接调用构造函数而不适用new操作符时,由于this对象的晚绑定,它将映射在全局对象window上,导致对象属性错误增加到window. 复制代码 代码如下: function Person(name,age,job){ this.name = name; this.age = age; this.job = job; } Var person = Person("Jay",29,"singer");

  • 简单实用的js调试logger组件实现代码

    但这两种方式都有它的局限性,alert会有中断,有些时候alert出来的值并不可靠,闭包的时候用alert可能会得到不正确的值.debugger使用起来其实也挺纠结的,只有ie支持.所以最合理的方式是js把运行过程需要调试的值输出到页面,或者写到cookie也可以,这种方式不会有alert中断带来值不正确的问题,也不会受浏览器类型的限制,唯一纠结的是操作起来很麻烦. 于是,有了下面说的这个js组件.这个组件的实现参考了log4net组件的记录方式,我们利用这个js的logger组件,就可以用lo

  • 很实用的js选项卡切换效果

    很实用的js选项卡切换效果

    本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px; p

  • 实用的JS表单验证提示效果

    errMsg 是一个错误消息的数组,这样方便自定义,errName是对应错误信息元件名数组,这样可以非富自定义显示方式,FormValid.allName记录了所有有验证规则的字段名数级,在自定义中可以使用到. 表单验证提示效果 body{ color:#666666; font-size:12px} h1{ font-size:20px;} input{ border:#999999 1px solid; background-color:#FFFFEE} .button2{ backgrou

  • JS高级技巧(简洁版)

    安全的类型检测 JS内置的类型检测机制并不是完全可靠的 typeof 操作符返回一个字符串,表示未经计算的操作数的类型,在大多数情况下很靠谱,但是当然还有例外 正则表达式 typeof /s/ === 'function'; // Chrome 1-12 , 不符合 ECMAScript 5.1 typeof /s/ === 'object'; // Firefox 5+ , 符合 ECMAScript 5.1 NULL typeof null === 'object'; // 从一开始出现Ja

随机推荐