标签：clear htm 实现 名称 说明 cto 请求 idt 哈哈
函数是Js中一等公民，其重要性不言而喻，现在我就把常用方法总结一下，希望大家能够用到
函数中的缓存起到很重要的作用，不仅仅提升性能，还能够提升速度。对于一个函数来说特别重要，之前我做的一个项目，由于渲染的数据较多，当渲染数据达到200条的时候浏览器已经很卡顿了。我打开控制台追溯源码，发现发送请求两次，new 每一个实例。第一步是把多余的请求注释，第二步，把每一次实例分解，大致分三种数据，我就定义三个变量来存储这三种类型数据。更改完代码之后，直接渲染1000条数据不卡顿。瞬间觉得函数中的缓存还是相当重要 的。看一些这个代码你就知道了
/** * 函数缓存 * @fn {Function} 回掉函数 * * */ var getSingle=function(fn){ var result; return function(){ return result || (result=fn.apply(this,arguments)); } } var div=getSingle(function(){ var dom_div=document.createElement("div"); dom_div.innerHTML="我是弹出层"; document.body.appendChild(dom_div); return dom_div; }); div();//第一次调用返回新创建的div div();//第二次调用返回缓存中的div
这个缓存方式是利用到闭包的特性，返回一个新的函数，这个函数中带有getSingle函数中局部的变量 result引用。所有result会一直存在内存中。当我们第一次调用div()函数result值被赋值。第二次调用直接从内存中读取result
链式调用其实也很常用，如果你曾经已经把jQuery完烂，你对它的链式调用是否好奇。其实链式调用也是很简单的。咱们看一个例子
/** * 函数链式调用 * @elm 单个DOM节点 * */ var GetElm=function(elm){ this.elm=elm || document.querySelector("body"); } GetElm.prototype.setWidth=function(width){ this.elm.style.width=width+"px"; return this; } GetElm.prototype.setHeight=function(height){ this.elm.style.height=height+"px"; return this; } var dom= new GetElm(document.querySelector(".imag")); dom.setHeight(400).setWidth(200);
首先定义了一个简单的构造函数GetElm，然后在其原型扩展setWidth与setHeight方法。当我们实例一个GetElm以后。我们就可以使用setWidth与setHeight方法，大家已经发现setHeight与setWidth方法返回了this.这才是咱们实现链式调用的关键所在。
函数节流对于我们来说太实用啦，因为我们开发页面的时候经常会用到onresize，onscroll，onmousemove，如果这些事件中加杂大量的dom操作，浏览器肯定会卡顿。
//函数节流 /** * 函数节流 * @fn {Function} 延迟执行函数 * @interval {Number} 延迟多久执行,默认值500毫秒 * * */ var throttle=function(fn,interval){ var _fn=fn || function(){},//保存需要延迟执行函数的引用 timer,//定时器 firstTime=true;//是否是第一次调用 return function(){ var args=arguments, that=this; if(firstTime){//如果第一次执行不需要延迟 _fn.apply(that,args); return firstTime=false; } if(timer){//如果定时器还在说明上一次执行还没结束 return false; } timer=setTimeout(function(){//延迟一段时间执行 clearTimeout(timer); timer=null; _fn.apply(that,args); },interval || 500); } } window.onresize=throttle(function(){ console.log("200"); },200)
有了函数throttle节流方法妈妈再也不用担心我的浏览器会卡顿啦！这个节流函数也是用闭包实现的哦！！！小伙伴们，下一篇内容咱就给你单独讲讲闭包。
惰性加载函数功能犹如它的名字，它很懒，懒得以至于不想运行。哈哈，，，来看一下代码吧！这段代码之前你肯定经常用到，这是解决浏览器的兼容性而写的。
/** * 惰性加载函数（一） * 缺点：无论使用或者不使用，都要执行一次。 * @el 单个DOM节点 * @type {String} 事件名称 * @handler {Function} 函数 * * */ var addEvent=(function(win){ if(win.addEventListener){ return function(el,type,handler){ el.addEventListener(type,handler,false); } } if(win.attachEvent){ return function(el,type,handler){ el.attachEvent("on"+type,handler); } } })(window) /** * 惰性加载函数（二） * @el 单个DOM节点 * @type {String} 事件名称 * @handler {Function} 函数 * 缺点：重新改写原函数 * 优点：只有执行时才会改写。 * */ var addEvent=function(el,type,handler){ if(win.addEventListener){ addEvent= function(el,type,handler){ el.addEventListener(type,handler,false); } }else if(win.attachEvent){ addEvent= function(el,type,handler){ el.attachEvent("on"+type,handler); } } addEvent(el,type,handler); }
惰性加载函数（一）比较勤快，所有呢！为了保证你的代码能够运行，你把这段代码放在最上边。这个函数其实也很简单，浏览器加载则执行它，然后根据addEventListener与attachEvent的支持情况返回一个匿名函数给addEvent。你呢！只负责调用就行啦！它的缺点是最少执行一次。
惰性加载函数（二）跟它名字一样，“不要跟我比懒，我懒得跟你比”。只有在你调用它的时候它会根据addEventListener与attachEvent的支持情况从写addEvent函数。
函数真的很重要，在你学习js的时候，你一定要深入去学习函数。没有了函数可以说js跟废物一样。就拿上边来看，它就帮我们解决了好多平时都经常遇到的问题。
标签：clear htm 实现 名称 说明 cto 请求 idt 哈哈
原文地址：http://www.cnblogs.com/xiaoxiaokun/p/7224870.html
