5 funciones esenciales de Javascript

Recuerdo los primeros días de JavaScript en el que se necesitaba una simple función para casi todo, debido a que los principales navegadores implementaban funciones de manera distinta, y no sólo funciones complejas, funciones básicas, como addEventListener y attachEvent. Los tiempos han cambiado, pero todavía hay un par de funciones que todo desarrollador debe tener en su arsenal, para un mejor rendimiento de sus proyectos.

debounce

La función debounce puede ser un cambiador de juego cuando se trata del rendimiento de eventos. Si no estás utilizando una función debounce para el scroll, resize, key*, probablemente lo estés haciendo mal. Aquí te mostramos una función debounce para hacer tu código más eficiente:

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);
	};
};

// Uso
var myEfficientFn = debounce(function() {
	// Lo que tengas que hacer
}, 250);
window.addEventListener('resize', myEfficientFn);

La función debounce no permitirá una devolución de llamada para ser usada más de una vez por período de tiempo dado. Esto es especialmente importante cuando se asigna una función de devolución de llamada para eventos con frecuencia de disparo.

poll

Como he mencionado con la función debounce, algunas veces no necesitas conectar un evento para un estado deseado. Si el evento no existe, es necesario comprobar el estado deseado en intervalos:

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())  0;
    },
    function() {
        // Hecho
    },
    function() {
        // Error
    }
);

Hacer polling ha sido útil en la web y lo seguirá siendo en el futuro!

once

Hay momentos en que prefieres que una funcionalidad determinada ocurra solo una vez, de manera similar cuando utilizas un evento onload. Este código establece la funcionalidad que acabo de describir:

function once(fn, context) { 
	var result;

	return function() { 
		if(fn) {
			result = fn.apply(context || this, arguments);
			fn = null;
		}

		return result;
	};
}

// Uso
var canOnlyFireOnce = once(function() {
	console.log('Hecho!');
});

canOnlyFireOnce(); // "Hecho!"
canOnlyFireOnce(); // nada

La función once te asegura que una función dada sólo pueda ser llamado una vez, por lo tanto es buena para prevenir inicializaciones duplicadas.

getAbsoluteUrl

Conseguir una URL absoluta de una variable string no es tan fácil como piensas. He aquí un sencillo truco para obtener una URL absoluta a partir de una cadena:

var getAbsoluteUrl = (function() {
	var a;

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

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

// Uso
getAbsoluteUrl('/algo'); // http://programacion.net/algo

Esta función te proporcionará una URL absoluta fiable a cambio.

isNative

Saber si una función determinada es nativa o no puede determinar el anularla o no anularla. Este código práctico puede darte la respuesta:

;(function() {

  var toString = Object.prototype.toString;
  
  var fnToString = Function.prototype.toString;
  
  var reHostCtor = /^[object .+?Constructor]$/;

being mucked with.
  var reNative = RegExp('^' +
    String(toString)
    .replace(/[.*+?^${}()|[]/]/g, '$&')
    .replace(/toString|(function).*?(?=()| for .+?(?=])/g, '$1.*?') + '$'
  );
  
  function isNative(value) {
    var type = typeof value;
    return type == 'function'
      ? reNative.test(fnToString.call(value))represent
      : (value && type == 'object' && reHostCtor.test(toString.call(value))) || false;
  }
  
  module.exports = isNative;
}());

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

No es muy bonita, pero proporciona una usabilidad impresionante.

Y hasta aquí las 5 funciones esenciales de Javascript. Espero que os hayan parecido de utilidad y las sepáis utilizar en vuestros futuros proyectos. ¿Tenéis alguna función que consideréis fundamental a la hora de implementar vuestros proyectos en Javascript? Indícanoslo en los comentarios...