? ? 函數(shù)是Js中一等公民，其重要性不言而喻，現(xiàn)在我就把常用方法總結(jié)一下，希望大家能夠用到

? 函數(shù)中的緩存

函數(shù)中的緩存起到很重要的作用，不僅僅提升性能，還能夠提升速度。對(duì)于一個(gè)函數(shù)來(lái)說(shuō)特別重要，之前我做的一個(gè)項(xiàng)目，由于渲染的數(shù)據(jù)較多，當(dāng)渲染數(shù)據(jù)達(dá)到200條的時(shí)候?yàn)g覽器已經(jīng)很卡頓了。我打開控制臺(tái)追溯源碼，發(fā)現(xiàn)發(fā)送請(qǐng)求兩次，new 每一個(gè)實(shí)例。第一步是把多余的請(qǐng)求注釋，第二步，把每一次實(shí)例分解，大致分三種數(shù)據(jù)，我就定義三個(gè)變量來(lái)存儲(chǔ)這三種類型數(shù)據(jù)。更改完代碼之后，直接渲染1000條數(shù)據(jù)不卡頓。瞬間覺(jué)得函數(shù)中的緩存還是相當(dāng)重要 的。看一些這個(gè)代碼你就知道了

/*** 函數(shù)緩存* @fn {Function} 回掉函數(shù)** */ 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();//第一次調(diào)用返回新創(chuàng)建的div div();//第二次調(diào)用返回緩存中的div

這個(gè)緩存方式是利用到閉包的特性，返回一個(gè)新的函數(shù)，這個(gè)函數(shù)中帶有g(shù)etSingle函數(shù)中局部的變量?result引用。所有result會(huì)一直存在內(nèi)存中。當(dāng)我們第一次調(diào)用div()函數(shù)result值被賦值。第二次調(diào)用直接從內(nèi)存中讀取result

函數(shù)鏈?zhǔn)秸{(diào)用

鏈?zhǔn)秸{(diào)用其實(shí)也很常用，如果你曾經(jīng)已經(jīng)把jQuery完?duì)€，你對(duì)它的鏈?zhǔn)秸{(diào)用是否好奇。其實(shí)鏈?zhǔn)秸{(diào)用也是很簡(jiǎn)單的。咱們看一個(gè)例子

/*** 函數(shù)鏈?zhǔn)秸{(diào)用* @elm 單個(gè)DOM節(jié)點(diǎn)* */ 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);

首先定義了一個(gè)簡(jiǎn)單的構(gòu)造函數(shù)GetElm，然后在其原型擴(kuò)展setWidth與setHeight方法。當(dāng)我們實(shí)例一個(gè)GetElm以后。我們就可以使用setWidth與setHeight方法，大家已經(jīng)發(fā)現(xiàn)setHeight與setWidth方法返回了this.這才是咱們實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的關(guān)鍵所在。

函數(shù)節(jié)流

函數(shù)節(jié)流對(duì)于我們來(lái)說(shuō)太實(shí)用啦，因?yàn)槲覀冮_發(fā)頁(yè)面的時(shí)候經(jīng)常會(huì)用到onresize，onscroll，onmousemove，如果這些事件中加雜大量的dom操作，瀏覽器肯定會(huì)卡頓。

//函數(shù)節(jié)流 /*** 函數(shù)節(jié)流* @fn {Function} 延遲執(zhí)行函數(shù)* @interval {Number} 延遲多久執(zhí)行,默認(rèn)值500毫秒* * */ var throttle=function(fn,interval){var _fn=fn || function(){},//保存需要延遲執(zhí)行函數(shù)的引用timer,//定時(shí)器firstTime=true;//是否是第一次調(diào)用return function(){var args=arguments,that=this;if(firstTime){//如果第一次執(zhí)行不需要延遲 _fn.apply(that,args);return firstTime=false;}if(timer){//如果定時(shí)器還在說(shuō)明上一次執(zhí)行還沒(méi)結(jié)束return false;}timer=setTimeout(function(){//延遲一段時(shí)間執(zhí)行 clearTimeout(timer);timer=null;_fn.apply(that,args);},interval || 500);} }window.onresize=throttle(function(){console.log("200"); },200)

有了函數(shù)throttle節(jié)流方法媽媽再也不用擔(dān)心我的瀏覽器會(huì)卡頓啦！這個(gè)節(jié)流函數(shù)也是用閉包實(shí)現(xiàn)的哦！！！小伙伴們，下一篇內(nèi)容咱就給你單獨(dú)講講閉包。

另一種簡(jiǎn)單的延遲執(zhí)行函數(shù)

/*** 節(jié)流函數(shù)* 只執(zhí)行一次* @fn {Function} 回掉函數(shù)* @time {Number} 毫秒值* @context {Object} 作用域* */ function throttle1(fn, time,context){clearTimeout(fn.timers);fn.timers=setTimeout(function(){fn.call(context);},time || 500); }function createHtml(){var dom=document.createElement('div');dom.innerHTML="小小坤";document.body.appendChild(dom); } window.onresize=function(){throttle1(createHtml); }

這個(gè)函數(shù)是用于搶購(gòu)時(shí)候的，假設(shè)你一直點(diǎn)擊請(qǐng)求數(shù)據(jù)，就會(huì)造成瀏覽器卡頓。

/*** 節(jié)流函數(shù)：每500毫秒可記錄一次* @fn {Function} 回掉函數(shù)* @time {Number} 毫秒值* */ function throttle(fn, time){var timer=null;return function(){var args = [].slice.call(arguments);//獲取所有參數(shù)，轉(zhuǎn)換為數(shù)組。if(timer == null){fn.apply(this, args);timer = setTimeout(function(){timer = null;}, time || 500)}} }

惰性加載函數(shù)

惰性加載函數(shù)功能猶如它的名字，它很懶，懶得以至于不想運(yùn)行。哈哈，，，來(lái)看一下代碼吧！這段代碼之前你肯定經(jīng)常用到，這是解決瀏覽器的兼容性而寫的。

/*** 惰性加載函數(shù)（一）* 缺點(diǎn)：無(wú)論使用或者不使用，都要執(zhí)行一次。* @el 單個(gè)DOM節(jié)點(diǎn)* @type {String} 事件名稱* @handler {Function} 函數(shù)* * */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)/*** 惰性加載函數(shù)（二）* @el 單個(gè)DOM節(jié)點(diǎn)* @type {String} 事件名稱* @handler {Function} 函數(shù)* 缺點(diǎn)：重新改寫原函數(shù)* 優(yōu)點(diǎn)：只有執(zhí)行時(shí)才會(huì)改寫。* */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); }

惰性加載函數(shù)（一）比較勤快，所有呢！為了保證你的代碼能夠運(yùn)行，你把這段代碼放在最上邊。這個(gè)函數(shù)其實(shí)也很簡(jiǎn)單，瀏覽器加載則執(zhí)行它，然后根據(jù)addEventListener與attachEvent的支持情況返回一個(gè)匿名函數(shù)給addEvent。你呢！只負(fù)責(zé)調(diào)用就行啦！它的缺點(diǎn)是最少執(zhí)行一次。

惰性加載函數(shù)（二）跟它名字一樣，“不要跟我比懶，我懶得跟你比”。只有在你調(diào)用它的時(shí)候它會(huì)根據(jù)addEventListener與attachEvent的支持情況從寫addEvent函數(shù)。

總結(jié)

函數(shù)真的很重要，在你學(xué)習(xí)js的時(shí)候，你一定要深入去學(xué)習(xí)函數(shù)。沒(méi)有了函數(shù)可以說(shuō)js跟廢物一樣。就拿上邊來(lái)看，它就幫我們解決了好多平時(shí)都經(jīng)常遇到的問(wèn)題。

?

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoxiaokun/p/7224870.html

總結(jié)

以上是生活随笔為你收集整理的函数用法总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。