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

? 函數(shù)中的緩存

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

/*** 函數(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

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

函數(shù)鏈式調(diào)用

鏈式調(diào)用其實也很常用，如果你曾經(jīng)已經(jīng)把jQuery完爛，你對它的鏈式調(diào)用是否好奇。其實鏈式調(diào)用也是很簡單的。咱們看一個例子

/*** 函數(shù)鏈式調(diào)用* @elm 單個DOM節(jié)點* */ 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òu)造函數(shù)GetElm，然后在其原型擴展setWidth與setHeight方法。當我們實例一個GetElm以后。我們就可以使用setWidth與setHeight方法，大家已經(jīng)發(fā)現(xiàn)setHeight與setWidth方法返回了this.這才是咱們實現(xiàn)鏈式調(diào)用的關(guān)鍵所在。

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

函數(shù)節(jié)流對于我們來說太實用啦，因為我們開發(fā)頁面的時候經(jīng)常會用到onresize，onscroll，onmousemove，如果這些事件中加雜大量的dom操作，瀏覽器肯定會卡頓。

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

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

另一種簡單的延遲執(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); }

這個函數(shù)是用于搶購時候的，假設(shè)你一直點擊請求數(shù)據(jù)，就會造成瀏覽器卡頓。

/*** 節(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ù)功能猶如它的名字，它很懶，懶得以至于不想運行。哈哈，，，來看一下代碼吧！這段代碼之前你肯定經(jīng)常用到，這是解決瀏覽器的兼容性而寫的。

/*** 惰性加載函數(shù)（一）* 缺點：無論使用或者不使用，都要執(zhí)行一次。* @el 單個DOM節(jié)點* @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 單個DOM節(jié)點* @type {String} 事件名稱* @handler {Function} 函數(shù)* 缺點：重新改寫原函數(shù)* 優(yōu)點：只有執(zhí)行時才會改寫。* */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ù)（一）比較勤快，所有呢！為了保證你的代碼能夠運行，你把這段代碼放在最上邊。這個函數(shù)其實也很簡單，瀏覽器加載則執(zhí)行它，然后根據(jù)addEventListener與attachEvent的支持情況返回一個匿名函數(shù)給addEvent。你呢！只負責調(diào)用就行啦！它的缺點是最少執(zhí)行一次。

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

總結(jié)

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

?

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

總結(jié)

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

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