7個重要的javascript函數

原文地址：http://davidwalsh.name/essential-javascript-functions

#7個重要的javascript函數 我記得在早期使用javascript時，由於瀏覽器廠商對javascript的特性，包括基本特性和邊緣特性的實現方式不一樣， 咱們須要不少簡單的function來進行兼容，好比addEventListener和attachEvent。 雖然時代已經改變，爲了提升性能和下降方法複雜度，有幾個方法仍然須要每一個開發人員熟知。 #debounce函數去抖 函數去抖能夠提升事件持續觸發時的性能。若是你在處理scroll,resize,key*等事件時，沒有使用函數去抖可能會存在錯誤。下面提升性能的函數去抖實例：

//返回函數持續被調用時將不會執行
//函數將在中止調用N毫秒後執行
//若是傳入參數immediate=false，回調方法將優先執行而不是wait後執行
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);

去抖函數將使得回調函數在給定的時間頻率內最多隻執行一次，這一點在持續觸發事件的回調中很是有用。

#poll輪詢 正如我提到的函數去抖，有時候你並不須要插入一個事件來表示指望的狀態 -- 若是事件不存在，你須要定時檢查你所指望的狀態：

function poll(fn, callback, errback, timeout, interval) {
    var endTime = Number(new Date()) + (timeout || 2000);
    interval = interval || 100;
    (function p() {
            // 若是條件已經知足，將執行回調
            if(fn()) {
                callback();
            }
            // 條件不知足而且未超時，從新執行
            else if (Number(new Date()) < endTime) {
                setTimeout(p, interval);
            }
            // 條件不知足而且超時，將執行異常回調
            else {
                errback(new Error('timed out for ' + fn + ': ' + arguments));
            }
    })();
}

// 用法：確保元素可見的
poll(
    function() {
        return document.getElementById('lightbox').offsetWidth > 0;
    },
    function() {
        // 正常回調
    },
    function() {
        // 異常回調
    }
);

對於web開發而言，輪詢在如今和未來都是很是有用的。

#once單次執行 有些時候，你只指望特定的功能只發生一次，相似於使用onload事件，這段代碼將實現此功能：

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(); // 沒有任何結果

單次函數保證了指定的函數只執行一次，可避免屢次初始化。

#getAbsoluteUrl獲取絕對路徑 從字符串變量獲得絕對URL並不像想象中那麼簡單。使用URL構造函數若是你不提供所需的參數（有時你不能），它也能夠有效。 這裏就有從字符串獲取絕對的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

The "burn" element href handles and URL nonsense for you, providing a reliable absolute URL in return.

#isNative是否原生 知道一個方法是否原生，能讓你知道可否覆蓋此方法，這段代碼將讓你知道答案：

;(function() {

  // Used to resolve the internal `[[Class]]` of values
  var toString = Object.prototype.toString;
  
  // Used to resolve the decompiled source of functions
  var 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 string
    String(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 want
  module.exports = isNative;
}());

// Usage
isNative(alert); // true
isNative(myCustomFunction); // false

方法雖不優美，卻很實用。

#insertRule插入樣式 咱們知道能經過篩選器得到元素列表（好比document.querySelectorAll）並給每一個元素添加一個樣式，但經過給篩選器設定樣式將更加高效：

var sheet = (function() {
	// Create the <style> tag
	var style = document.createElement('style');

	// Add a media (and/or media query) here if you'd like!
	// style.setAttribute('media', 'screen')
	// style.setAttribute('media', 'only screen and (max-width : 1024px)')

	// WebKit hack :(
	style.appendChild(document.createTextNode(''));

	// Add the <style> element to the page
	document.head.appendChild(style);

	return style.sheet;
})();

// Usage
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

這種方式在動態，異步的客戶端尤爲有用。若是你對篩選器設定樣式樣式，你不須要考慮知足篩選器的每一個元素的樣式（如今或未來）。

#matchesSelector 在執行下一步前，咱們常常須要校驗輸入，保證值真實和表單數據合法等等。但在進行下一步前，咱們是否有保證過元素是否合法？ 你可使用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個函數。還有遺漏的函數嗎？分享給我！