Funciones básicas alternativas para transitar desde jQuery a Vanilla JavaScript

Supongo que no soy el único que empezó a usar JavaScript por medio de jQuery. La librería jQuery ha sido crucial para el desarrollo en Front, nos ha permitido a los desarrolladores hacer casi todo lo que queríamos de una manera rápida, sencilla y sin preocuparse por los navegadores. El único inconveniente que tenía era que debíamos de cargar la librería, que no era especialmente ligera, y que ralentizaba la carga y uso de la web en cuestión.

Gracias al desarrollo del JavaScript “a pelo” (llamado Vanilla JS, o Plain JS) ahora ya podemos prescindir de jQuery y seguir disfrutando de la facilidad de uso, pero aún así a mi me está costando dar el salto de jQuery a VanillaJS, y es que son ya muchos años trabando del modo jQuery.

jquery_to_js

Para intentar aliviar este cambio, he recopilado una sería de funciones que ya usaba de manera recursiva en jQuery, que hacen que mi código JS sea más limpio y asemejarlo un poco más a mi quería librearía.

He juntado todas ellas (y otras que vendrán) en un fichero que enlazo en mis proyectos, y así puedo hacer referencia a estas funciones a lo largo de todo el proyecto.

<script src="/js/plainJS.js" />

Seleccionar elementos del DOM

Esta es una de las tareas que más veces debemos de hacer, y con jQuery era tan sencillo como usar la función $. Ahora con Javascript podemos hacer uso de toda esta potencia por medio de document.querySelector y document.querySelectorAll, pero debemos de escribir muchos caracteres cada vez que queremos usarlo. Por eso podemos crear una función $ y $1 (o como tu quieras llamarla) que te haga ser más eficiente.

// Seleccionar una lista de elementos por medio de un selector CSS. El contexto es opcional
function $(selector, context) {
    return (context || document).querySelectorAll(selector);
}

// Seleccionar el primer elemento que tenga el selector CSS. El contexto es opcional:
function $1(selector, context) {
    return (context || document).querySelector(selector);
}

Ejemplos:

// Seleccionar todos los elementos '.bar' dentro de contenedores '.foo'
var elems = $('.foo .bar');

// ejemplo con contexto
var container = $1('.foo');
// seleccionar elementos '.bar' dentro del contenedor
var elems = $('.bar', container);

fuente.

Añadir, eliminar y comprobar clases

function hasClass(el, className) {
    return el.classList ? el.classList.contains(className) : new RegExp('\\b'+ className+'\\b').test(el.className);
}

function addClass(el, className) {
    if (el.classList) el.classList.add(className);
    else if (!hasClass(el, className)) el.className += ' ' + className;
}

function removeClass(el, className) {
    if (el.classList) el.classList.remove(className);
    else el.className = el.className.replace(new RegExp('\\b'+ className+'\\b', 'g'), '');
}

function toggleClass(el, className) {
    if ( hasClass(el, className) ) {
        removeClass(el, className);
    } else {
        addClass(el, className);
    }
}

Ejemplos:

var el = document.querySelector('div');
if (!hasClass(el, 'foo')){
    addClass(el, 'foo');
}

fuente.

Ocultar o mostrar elementos

function hide(el) {
    el.style.display = 'none';
}

function show(el, value) {
    el.style.display = value;
}

function toggleVisibility(el, value) {
    var display = (window.getComputedStyle ? getComputedStyle(el, null) : el.currentStyle).display;
    if (display == 'none') el.style.display = value;
    else el.style.display = 'none';
}

Ejemplos:

hide( elem );
show( elem, 'block' );
toggleVisibility( elem, 'block' );

fuente.

Poner estilos CSS a un elemento

function css(el, styles) {
    for (var property in styles) {
        el.style[property] = styles[property];
    }
}

Ejemplos:

var el = document.querySelector('div');
css(el, { background: 'green', display: 'none', 'border-radius': '5px' });

fuente.

Animar una propiedad del elemento

// fade an element from the current state to full opacity in "duration" ms
function fadeOut(el, duration) {
    var s = el.style, step = 25/(duration || 300);
    s.opacity = s.opacity || 1;
    (function fade() {
        if ( ( s.opacity -= step) < 0 ) { s.display = "none"; } else { setTimeout(fade, 25); } })(); } // fade out an element from the current state to full transparency in "duration" ms // display is the display style the element is assigned after the animation is done function fadeIn(el, duration, display) { var s = el.style, step = 25/(duration || 300); s.opacity = s.opacity || 0; s.display = display || "block"; (function fade() { if ( ( s.opacity = parseFloat(s.opacity)+step) > 1 ) {
            s.opacity = 1;
        } else {
            setTimeout(fade, 25);
        }
    })();
}

Ejemplos:

fadeOut(elem, 500);
fadeIn(elem, 500);

fuente.

Peticiones Ajax

function getAjax(url, success) {
    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState>3 && xhr.status==200) success(xhr.responseText);
    };
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.send();
    return xhr;
}

// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
function postAjax(url, data, success) {
    var params = typeof data == 'string' ? data : Object.keys(data).map(
            function(k){
                return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
            }
        ).join('&');

    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open('POST', url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState>3 && xhr.status==200) { success(xhr.responseText); }
    };
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    //xhr.setRequestHeader('Content-length', params.length);
    xhr.send(params);
    return xhr;
}

Ejemplos:

getAjax('http://foo.bar/?p1=1&p2=Hello+World', function(respone){
    var jsonData = JSON.parse(respone);
    console.log(respone);
    console.log(jsonData);
});

// example request
postAjax('http://foo.bar/', 'p1=1&p2=Hello+World', function(data){ console.log(data); });

// example request with data object
postAjax('http://foo.bar/', { p1: 1, p2: 'Hello World' }, function(data){ console.log(data); });

fuente.

Mergear dos objetos

function extend(obj, src) {
    Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
    return obj;
}

Crear, obtener y borrar Cookies

function getCookie(name) {
    var v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return v ? v[2] : null;
}

function setCookie(name, value, days) {
    var d = new Date();
    d.setTime(d.getTime() + 24*60*60*1000*days);
    document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
}

function deleteCookie(name) { setCookie(name, '', -1); }

fuente.

Más información

También puedes consultar otras webs que tratan esta transición dulce con más profundidad:

Escribe una comentario