?

我記得數年前，只要我們編寫JavaScript，都必須用到幾個常用的函數，比如，addEventListener?和?attachEvent，并不是為了很超前的技術和功能，只是一些基本的任務，原因是各種瀏覽器之間的差異造成的。時間過去了這么久，技術在不斷的進步，仍然有一些JavaScript函數是幾乎所有Web程序員必備的，或為了性能，或為了功能。

防止高頻調用的debounce函數

這個?debounce?函數對于那些執行事件驅動的任務來說是必不可少的提高性能的函數。如果你在使用scroll,?resize,?key*等事件觸發執行任務時不使用降頻函數，也行你就犯了重大的錯誤。下面這個降頻函數?debounce?能讓你的代碼變的高效：

// 返回一個函數，that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. 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);}; };// Usage var myEfficientFn = debounce(function() {// All the taxing stuff you do }, 250); window.addEventListener('resize', myEfficientFn);

這個?debounce?函數在給定的時間間隔內只允許你提供的回調函數執行一次，以此降低它的執行頻率。當遇到高頻觸發的事件時，這樣的限制顯得尤為重要。

設定時間/頻率循環檢測函數

上面提到的?debounce?函數是借助于某個事件的觸發。但有時候并沒有這樣的事件可用，那我們只能自己寫一個函數來每隔一段時間檢查一次。

function poll (fn, callback, err, timeout, interval) {var startTime = (new Date()).getTime();var pi = window.setInterval(function(){if (Math.floor(((new Date).getTime() - startTime) / 1000) <= timeout) {if (fn()) {callback();}} else {window.clearInterval(pi);err();}}, interval) }

禁止重復調用、只允許執行一次的once?函數

很多時候，我們只希望某種動作只能執行一次，就像是我們使用?onload來限定只在加載完成時執行一次。下面這個函數就能讓你的操作執行一次后就不會再重復執行。

function once(fn, context) { var result;return function() { if(fn) {result = fn.apply(context || this, arguments);fn = null;}return result;}; }// Usage var canOnlyFireOnce = once(function() {console.log('Fired!'); });canOnlyFireOnce(); // "Fired!" canOnlyFireOnce(); // nada

這個?once?函數能夠保證你提供的函數只執行唯一的一次，防止重復執行。

獲取一個鏈接的絕對地址?getAbsoluteUrl

獲取鏈接的絕對地址并不像你想象的那么簡單。下面就是一個非常實用的函數，能根據你輸入的相對地址，獲取絕對地址：

var getAbsoluteUrl = (function() {var a;return function(url) {if(!a) a = document.createElement('a');a.href = url;return a.href;}; })();// Usage getAbsoluteUrl('/something'); // http://www.webhek.com/something

這里使用了?a?標簽?href?來生成完整的絕對URL，十分的可靠。

判斷一個JavaScript函數是否是系統原生函數?isNative

很多第三方js腳本都會在全局變量里引入新的函數，有些甚至會覆蓋掉系統的原生函數，下面這個方法就是來檢查是不是原生函數的：

;(function() {// Used to resolve the internal `[[Class]]` of valuesvar toString = Object.prototype.toString;// Used to resolve the decompiled source of functionsvar fnToString = Function.prototype.toString;// Used to detect host constructors (Safari > 4; really typed array specific)var reHostCtor = /^\[object .+?Constructor\]$/;// Compile a regexp using a common native method as a template.// We chose `Object#toString` because there's a good chance it is not being mucked with.var reNative = RegExp('^' +// Coerce `Object#toString` to a stringString(toString)// Escape any special regexp characters.replace(/[.*+?^${}()|[\]\/\\]/g, '\\$&')// Replace mentions of `toString` with `.*?` to keep the template generic.// Replace thing like `for ...` to support environments like Rhino which add extra info// such as method arity..replace(/toString|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$');function isNative(value) {var type = typeof value;return type == 'function'// Use `Function#toString` to bypass the value's own `toString` method// and avoid being faked out.? reNative.test(fnToString.call(value))// Fallback to a host object check because some environments will represent// things like typed arrays as DOM methods which may not conform to the// normal native pattern.: (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;}// export however you wantmodule.exports = isNative; }());// Usage isNative(alert); // true isNative(myCustomFunction); // false

這個方法雖然不是那么的簡潔，但還是可以完成任務的！

用JavaScript創建新的CSS規則?insertRule

有時候我們會使用一個CSS選擇器(比如?document.querySelectorAll)來獲取一個 NodeList ，然后給它們每個依次修改樣式。其實這并不是一種高效的做法，高效的做法是用JavaScript新建一段CSS樣式規則：

// Build a better Sheet object Sheet = (function() {// Build stylevar style = document.createElement('style');style.setAttribute('media', 'screen');style.appendChild(document.createTextNode(''));document.head.appendChild(style);// Build and return a single functionreturn function(rule){ style.sheet.insertRule( rule, style.sheet.cssRules.length ); } ; })();// Then call as a function Sheet(".stats { position: relative ; top: 0px }") ;

這些做法的效率非常高，在一些場景中，比如使用ajax新加載一段html時，使用上面這個方法，你不需要操作新加載的html內容。

判斷網頁元素是否具有某種屬性和樣式?matchesSelector

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); }// Usage matchesSelector(document.getElementById('myDiv'), 'div.someSelector[some-attribute=true]')

就是這7個JavaScript函數，每個Web程序員都應該知道怎么用它們。你可以在評論里寫出其它你認為必備的函數，分享出來，謝謝。

?

原文鏈接：http://www.webhek.com/7-essential-javascript-functions

轉載于:https://www.cnblogs.com/jasonHome/p/5811558.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的[转]WEB开发者必备的7个JavaScript函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。