Funcions bàsiques alternatives per transitar des jQuery a Vanilla JavaScript

Suposo que no sóc l’únic que va començar a fer servir JavaScript per mitjà de jQuery. La llibreria jQuery ha estat crucial per al desenvolupament a Front, ens ha permès als desenvolupadors fer gairebé tot el que volíem d’una manera ràpida, senzilla i sense preocupar-se pels navegadors. L’únic inconvenient que tenia era que havíem de carregar la llibreria, que no era especialment lleugera, i que alentia la càrrega i ús de la web en qüestió.

Gràcies a el desenvolupament de l’habilitat “a pèl” (anomenat Vanilla JS, o Plain JS) ara ja podem prescindir de jQuery i seguir gaudint de la facilitat d’ús, però tot i així al meu m’està costant fer el salt de jQuery a VanillaJS, i és que són ja molts anys travant de la manera jQuery.

Per intentar alleujar aquest canvi, he recopilat una seria de funcions que ja feia servir de manera recursiva en jQuery, que fan que el meu codi JS sigui més net i assemblar una mica més al meu volia librearía.

He ajuntat totes elles (i altres que vindran) en un fitxer que enllaço en els meus projectes, i així puc fer referència a aquestes funcions al llarg de tot el projecte.

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

Selecciona elements d’DOM

Aquesta és una de les tasques que més veu ces hem de fer, i amb jQuery era tan senzill com utilitzar la funció $. Ara amb Javascript podem fer ús de tota aquesta potència per mitjà de document.querySelector i document.querySelectorAll, però hem d’escriure molts caràcters cada vegada que volem usar-lo. Per això podem crear una funció $ i $ 1 (o com tu vulguis cridar-la) que et faci ser més eficient.

// Seleccionar una lista de elementos por medio de un selector CSS. El contexto es opcionalfunction $(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);}

Exemples:

// Seleccionar todos los elementos '.bar' dentro de contenedores '.foo'var elems = $('.foo .bar');// ejemplo con contextovar container = $1('.foo');// seleccionar elementos '.bar' dentro del contenedorvar elems = $('.bar', container);

font.

Afegir, eliminar i comprovar classes

function hasClass(el, className) { return el.classList ? el.classList.contains(className) : new RegExp('\\b'+ className+'\\b').test(el.className);}function addClasses(el, classesArray) { if ( classesArray instanceof Array ) { for ( var i = 0; i < classesArray.length; i++ ) { addClass(el, classesArray); } } else { addClass(el, classesArray); } } function addClass(el, className) { if ( el ) { if ( el.tagName ) { doAddClass(el, className); } else if ( el.length >= 1 ) { for ( var i = 0; i < el.length; i++ ) { doAddClass(el, className); } } }}function removeClasses(el, classesArray) { if ( classesArray instanceof Array ) { for ( var i = 0; i < classesArray.length; i++ ) { removeClass(el, classesArray); } } else { removeClass(el, classesArray); } } function removeClass(el, className) { if ( el ) { if ( el.tagName ) { doRemoveClass(el, className); } else if ( el.length >= 1 ) { for ( var i = 0; i < el.length; i++ ) { doRemoveClass(el, className); } } }}function doAddClass(el, className) { if (el.classList) { el.classList.add(className); } else if (!hasClass(el, className)) { el.className += ' ' + className; }}function doRemoveClass(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); return false; } else { addClass(el, className); return true; }}

Exemples:

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

font.

Manipular el DOM

function appendTo(wrap, newElem) { wrap.insertAdjacentHTML( 'beforeend', newElem);}function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);}// document.getElementById("my-element").remove();Element.prototype.remove = function() { this.parentElement.removeChild(this);};// document.getElementsByClassName("my-elements").remove();NodeList.prototype.remove = HTMLCollection.prototype.remove = function() { for(var i = this.length - 1; i >= 0; i--) { if(this && this.parentElement) { this.parentElement.removeChild(this); } }};// know if parents has a selector// var parents = getParents(elem, '.some-class');// var allParents = getParents(elem.parentNode);var getParents = function ( elem, selector ) {// Element.matches() polyfillif (!Element.prototype.matches) {Element.prototype.matches =Element.prototype.matchesSelector ||Element.prototype.mozMatchesSelector ||Element.prototype.msMatchesSelector ||Element.prototype.oMatchesSelector ||Element.prototype.webkitMatchesSelector ||function(s) {var matches = (this.document || this.ownerDocument).querySelectorAll(s),i = matches.length;while (--i >= 0 && matches.item(i) !== this) {}return i > -1;};}// Setup parents arrayvar parents = ;// Get matching parent elementsfor ( ; elem && elem !== document; elem = elem.parentNode ) {// Add matching parents to arrayif ( selector ) {if ( elem.matches( selector ) ) {parents.push( elem );}} else {parents.push( elem );}}return parents;};

Obtenir posició

function offset(el, parentElem) { var rect = el.getBoundingClientRect(), scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, scrollTop = window.pageYOffset || document.getElementById(parentElem).scrollTop || document.documentElement.scrollTop; return { top: rect.top + scrollTop, left: rect.left + scrollLeft }}

Amaga o mostrar elements

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

Exemples:

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

font.

Posar estils CSS a un element

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

Exemples:

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

font.

Animar una propietat de l’element

// fade an element from the current state to full opacity in "duration" msfunction 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); } })();}

Exemples:

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

font.

Peticions 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;}function getCORS(url, success) { var xhr = new XMLHttpRequest(); if (!('withCredentials' in xhr)) xhr = new XDomainRequest(); // fix IE8/9 xhr.open('GET', url); xhr.onload = success; xhr.send(); return xhr;}function postAjax(url, data, success) { // 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); }); var params = typeof data == 'string' ? data : Object.keys(data).map( function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data) } ).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.send(params); return xhr;}

Exemples:

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

font.

Mergear dos objectes

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

Crear, obtenir i esborrar Galetes

function getCookie(name) { var v = document.cookie.match('(^|;) ?' + name + '=(*)(;|$)'); return v ? v : 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); }