Раннее в JavaScript, когда почти для всего нужна была специальная функция, потому что браузеры реализовывали по своему не только новые, но и базовые функции, такие как addEventListener и attachEvent. Времена изменились, но есть несколько функций, которые каждый разработчик должен иметь в своем арсенале, чтобы повысить производительность работы.

debounce

Функция debounce крайне полезна, когда дело доходит до производительности обработчиков событий. Если вы не используете функцию debounce с событиями scroll, resize, key*, вы, вероятно, не правы. Вот функция debounce, которая сделает ваш код более эффективным:

		
	// Returns a function, 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 не позволяет обработчику события выполниться более одного раза в заданный промежуток времени. Это особенно выжно для часто срабатывающих событий.

poll

Иногда у вас не будет возможности отследить событие наступления желаемого состояния — если события не существует, необходимо периодически проверять определенное состояние:

		
	function poll(fn, callback, errback, timeout, interval) {
	    var endTime = Number(new Date()) + (timeout || 2000);
	    interval = interval || 100;

	    (function p() {
	            // If the condition is met, we're done! 
	            if(fn()) {
	                callback();
	            }
	            // If the condition isn't met but the timeout hasn't elapsed, go again
	            else if (Number(new Date()) < endTime) {
	                setTimeout(p, interval);
	            }
	            // Didn't match and too much time, reject!
	            else {
	                errback(new Error('timed out for ' + fn + ': ' + arguments));
	            }
	    })();
	}

	// Usage:  ensure element is visible
	poll(
	    function() {
	        return document.getElementById('lightbox').offsetWidth > 0;
	    },
	    function() {
	        // Done, success callback
	    },
	    function() {
	        // Error, failure callback
	    }
	);
		
	

Такой подход периодического опрашивания уже давно используется в веб и будет использоваться в будущем!

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

Получение абсолютного URL из строки не такая простая задача, какой кажется. Существует конструктор URL, который не работает, если не передать ему требуемые параметры (которые иногда невозможно передать). Вот хороший трюк для получения абсолютного URL из строки:

		
	var getAbsoluteUrl = (function() {
		var a;

		return function(url) {
			if(!a) a = document.createElement('a');
			a.href = url;

			return a.href;
		};
	})();

	// Usage
	getAbsoluteUrl('/something'); // http://proweb63.ru/something
		
	

Обработка атрибута href элемента предоставляет надежный способ получения абсолютного URL.

isNative

Знание того, является ли функция встроенной или нет может быть полезно, если вы собираетесь ее переопределить. Следующий код может вам в этом помочь:

		
	;(function() {

	  // Used to resolve the internal `` 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

Все мы знаем, что можно получить список элементов DOM по селектору (с помощью document.querySelectorAll) и для каждого из них добавить атрибут style, но более эффективным будет задать стиль для селектора (как это делается в CSS):

		
	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

Мы часто валидируем пользовательский ввод, проверяем, что все поля формы заполнены корректно, прежде, чем двигаться дальше. Но как часть мы проверяем элемент? Вы можете использовать функцию ниже для проверки, удовлетворяет ли элемент заданному селектору:

		
	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]')
		
	

Мы привели семь JavaScript-функций, которые каждый разработчик должен иметь в своем арсенале. Есть функции, которые я пропустил? Пожалуйста, поделитесь!

• 3
• 1
• 2
• 3
• 4
• 5