javascript最基本的函數(shù)匯總
我記得早期的 JavaScript ,要完成任何事情幾乎都繞不開(kāi)一些簡(jiǎn)單的函數(shù),因?yàn)闉g覽器提供商實(shí)現(xiàn)功能有所差異,而且不只是邊緣功能,基礎(chǔ)功能也一樣,如 addEventListener 和 attachEvent。雖然時(shí)代變了,但仍有一些函數(shù)是每個(gè)開(kāi)發(fā)者都應(yīng)該掌握的,以便于完成某些功能和提高性能。
debounce
對(duì)于高耗能事件,debounce 函數(shù)是一種不錯(cuò)解決方案。如果你不對(duì) scroll、resize、和 key* 事件使用 debounce 函數(shù),那么你幾乎等同于犯了錯(cuò)誤。下面的 debounce 函數(shù)能讓你的代碼保持高效:
// 返回一個(gè)函數(shù),如果它被不間斷地調(diào)用,它將不會(huì)得到執(zhí)行。該函數(shù)在停止調(diào)用 N 毫秒后,再次調(diào)用它才會(huì)得到執(zhí)行。如果有傳遞 ‘immediate' 參數(shù),會(huì)馬上將函數(shù)安排到執(zhí)行隊(duì)列中,而不會(huì)延遲。
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
// 用法
var myEfficientFn = debounce(function() {
// 所有繁重的操作
}, 250);
window.addEventListener('resize', myEfficientFn);
debounce 函數(shù)不允許回調(diào)函數(shù)在指定時(shí)間內(nèi)執(zhí)行多于一次。當(dāng)為一個(gè)會(huì)頻繁觸發(fā)的事件分配一個(gè)回調(diào)函數(shù)時(shí),該函數(shù)顯得尤為重要。
poll
盡管上面我提及了 debounce 函數(shù),但如果事件不存在時(shí),你就不能插入一個(gè)事件以判斷所需的狀態(tài),那么就需要每隔一段時(shí)間去檢查狀態(tài)是否達(dá)到你的要求。
function poll(fn, callback, errback, timeout, interval) {
var endTime = Number(new Date()) + (timeout || 2000);
interval = interval || 100;
(function p() {
// 如果條件滿足,則執(zhí)行!
if(fn()) {
callback();
}
// 如果條件不滿足,但并未超時(shí),再來(lái)一次
else if (Number(new Date()) < endTime) {
setTimeout(p, interval);
}
// 不匹配且時(shí)間消耗過(guò)長(zhǎng),則拒絕!
else {
errback(new Error('timed out for ' + fn + ': ' + arguments));
}
})();
}
// 用法:確保元素可見(jiàn)
poll(
function() {
return document.getElementById('lightbox').offsetWidth > 0;
},
function() {
// 執(zhí)行,成功的回調(diào)函數(shù)
},
function() {
// 錯(cuò)誤,失敗的回調(diào)函數(shù)
}
);
Polling 在 web 中已被應(yīng)用很長(zhǎng)時(shí)間了,并在將來(lái)仍會(huì)被使用。
once
有時(shí)候,你想讓一個(gè)給定的功能只發(fā)生一次,類似于 onload 事件。下面的代碼提供了你所說(shuō)的功能:
function once(fn, context) {
var result;
return function() {
if(fn) {
result = fn.apply(context || this, arguments);
fn = null;
}
return result;
};
}
// 用法
var canOnlyFireOnce = once(function() {
console.log('Fired!');
});
canOnlyFireOnce();
// "Fired!"
canOnlyFireOnce();
// nada
// 沒(méi)有執(zhí)行指定函數(shù)
once 函數(shù)確保給定函數(shù)只能被調(diào)用一次,從而防止重復(fù)初始化!
getAbsoluteUrl
從一個(gè)字符串變量得到一個(gè)絕對(duì) URL,并不是你想象中這么簡(jiǎn)單。對(duì)于某些 URL 構(gòu)造器,如果你不提供必要的參數(shù)就會(huì)出問(wèn)題(而有時(shí)候你真的不知道提供什么參數(shù))。下面有一個(gè)優(yōu)雅的技巧,只需要你傳遞一個(gè)字符串就能得到相應(yīng)的絕對(duì) URL。
var getAbsoluteUrl = (function() {
var a;
return function(url) {
if(!a) a = document.createElement('a');
a.href = url;
return a.href;
};
})();
// 用法
getAbsoluteUrl('/something');
// http://davidwalsh.name/something
a 元素的 href 處理和 url 處理看似無(wú)意義,而 return 語(yǔ)句返回了一個(gè)可靠的絕對(duì) URL。
isNative
如果你想知道一個(gè)指定函數(shù)是否是原生的,或者能不能通過(guò)聲明來(lái)覆蓋它。下面這段便于使用的代碼能給你答案:
;(function() {
// 用于處理傳入?yún)?shù) value 的內(nèi)部 `[[Class]]`
var toString = Object.prototype.toString;
// 用于解析函數(shù)的反編譯代碼
var fnToString = Function.prototype.toString;
// 用于檢測(cè)宿主構(gòu)造器 (Safari > 4 ;真的輸出特定的數(shù)組)
var reHostCtor = /^[object .+?Constructor]$/;
// 用一個(gè)標(biāo)準(zhǔn)的原生方法作為模板,編譯一個(gè)正則表達(dá)式。
// 我們選擇 'Object#toString' 因?yàn)樗话悴粫?huì)被污染。
var reNative = RegExp('^' +
// 將 'Object#toString' 強(qiáng)制轉(zhuǎn)為字符串
String(toString)
// 轉(zhuǎn)義所有指定的正則表達(dá)式字符
.replace(/[.*+?^${}()|[]/]/g, '$&')
// 用 '.*?' 替換提及的 'toString' ,以保持模板的通用性。
// 將 'for ...' 之類的字符替換掉,以兼容 Rhino 等環(huán)境,因?yàn)檫@些環(huán)境添加了額外的信息,如方法參數(shù)數(shù)量。
.replace(/toString|(function).*?(?=()| for .+?(?=])/g, '$1.*?') + '$'
);
function isNative(value) {
var type = typeof value;
return type == 'function'
// 用 'Function#toString' (fnToString)繞過(guò)了值(value)本身的 'toString' 方法,以免被偽造所欺騙。
? reNative.test(fnToString.call(value))
// 回退到宿主對(duì)象的檢查,因?yàn)槟承┉h(huán)境(瀏覽器)將類型數(shù)組(typed arrays)之類的東西當(dāng)作 DOM 方法,此時(shí)可能不遵循標(biāo)準(zhǔn)的原生正則表達(dá)式。
: (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
}
// 導(dǎo)出函數(shù)
module.exports = isNative;
}());
// 用法
isNative(alert);
// true
isNative(myCustomFunction);
// false
這個(gè)函數(shù)雖不完美,但它能完成任務(wù)!
insertRule
我們都知道能通過(guò)選擇器(通過(guò) document.querySelectorAll )獲取一個(gè) NodeList ,并可為每個(gè)元素設(shè)置樣式,但有什么更高效的方法為選擇器設(shè)置樣式呢(例如你可以在樣式表里完成):
var sheet = (function() {
// 創(chuàng)建 <style> 標(biāo)簽
var style = document.createElement('style');
// 如果你需要指定媒介類型,則可以在此添加一個(gè) media (和/或 media query)
// style.setAttribute('media', 'screen')
// style.setAttribute('media', 'only screen and (max-width : 1024px)')
// WebKit hack :(
style.appendChild(document.createTextNode(''));
// 將 <style> 元素添加到頁(yè)面
document.head.appendChild(style);
return style.sheet;
})();
// 用法
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
這對(duì)于一個(gè)動(dòng)態(tài)且重度依賴 AJAX 的網(wǎng)站來(lái)說(shuō)是特別有用的。如果你為一個(gè)選擇器設(shè)置樣式,那么你就不需要為每個(gè)匹配到的元素都設(shè)置樣式(現(xiàn)在或?qū)?lái))。
matchesSelector
我們經(jīng)常會(huì)在進(jìn)行下一步操作前進(jìn)行輸入校驗(yàn),以確保是一個(gè)可靠值,或確保表單數(shù)據(jù)是有效的,等等。但我們平時(shí)是怎么確保一個(gè)元素是否有資格進(jìn)行進(jìn)一步操作呢?如果一個(gè)元素有給定匹配的選擇器,那么你可以使用 matchesSelector 函數(shù)來(lái)校驗(yàn):
function matchesSelector(el, selector) {
var p = Element.prototype;
var f = p.matches || p.webkitMatchesSelector || p.mozMatchesSelector || p.msMatchesSelector || function(s) {
return [].indexOf.call(document.querySelectorAll(s), this) !== -1;
};
return f.call(el, selector);
}
// 用法
matchesSelector(document.getElementById('myDiv'), 'div.someSelector[some-attribute=true]')
就這樣啦,上述 7 個(gè) JavaScript 函數(shù)是每個(gè)開(kāi)發(fā)者都應(yīng)該時(shí)刻記著的。有哪個(gè)函數(shù)我錯(cuò)過(guò)了呢?請(qǐng)把它分享出來(lái)!
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
uni-app小程序沉浸式導(dǎo)航實(shí)現(xiàn)的全過(guò)程
在跨端項(xiàng)目開(kāi)發(fā)中,uniapp是個(gè)不錯(cuò)的框架,下面這篇文章主要給大家介紹了關(guān)于uni-app小程序沉浸式導(dǎo)航實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
javascript面向?qū)ο笾畬?duì)象的深入理解
這篇文章主要介紹了javascript面向?qū)ο笾畬?duì)象的深入理解,將javascript面向?qū)ο蟪绦蛟O(shè)計(jì)中一切都視為對(duì)象,并以實(shí)例形式進(jìn)一步分析了面向?qū)ο蟮奶匦?需要的朋友可以參考下2015-01-01
JS導(dǎo)出PDF插件的方法(支持中文、圖片使用路徑)
下面小編就為大家?guī)?lái)一篇JS導(dǎo)出PDF插件的方法(支持中文、圖片使用路徑)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
真正好用的js驗(yàn)證上傳文件大小的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇真正好用的js驗(yàn)證上傳文件大小的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
bootstrap日期插件daterangepicker使用詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap日期插件daterangepicker的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
js實(shí)現(xiàn)時(shí)間日期校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)時(shí)間日期校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05
Bootstrap顯示與隱藏簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了bootstrap顯示與隱藏的簡(jiǎn)單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表
如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表?下面小編就為大家?guī)?lái)一篇JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表的方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2016-05-05

