Funcións alternativas básicas para viaxar de jQuery a vainilla Javascript

Creo que non son o único que comezou a usar Javascript a través de jQuery. A Biblioteca de JQuery foi crucial para o desenvolvemento fronte, permitiu aos desenvolvedores facer case todo o que queriamos de forma rápida e sinxela e sen preocuparse polos navegadores. O único inconveniente que tiña era que debemos cobrar a biblioteca, que non era particularmente lixeiro e que diminuíu a carga e uso da web en cuestión.

Grazas ao desenvolvemento de JavaScript “A Hair” ( chamado Vanilla JS, ou Plain JS) Agora podemos dispensar con jQuery e seguir gozando da facilidade de uso, pero aínda así, custa-me tomar jQuery a Vanillajs e xa hai moitos anos bloqueando o modo jQuery.

Para intentar aliviar este cambio, recollín unha das funcións que xa se usan recursivamente en jQuery, que fan iso O código JS é máis limpo e parecéndolle un pouco máis que quería conxelar.

Puxen todos eles (e outros que virán) nun arquivo que ligan nos meus proxectos, e así podo facer referencia a estas funcións ao longo do proxecto.

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

Seleccionar elementos DOM

Esta é unha das tarefas que máis se ven CES que debemos facer, e con jQuery era tan sinxelo coma usar a función $. Agora, con JavaScript podemos facer uso de todo este poder a través de document.queryselector e document.QuerySelectorall, pero debemos escribir moitos personaxes cada vez que queremos usalo. É por iso que podemos crear unha función de $ 1 1 (ou como queira chamalo) que o fai máis eficiente.

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

Exemplos:

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

fonte.

Engadir, eliminar e verificar clases

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

Exemplos:

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

fonte.

Manexar o 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;};

Obter a posición

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

Ocultar ou mostrar elementos

Exemplos:

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

fonte.

Pon estilos CSS a un

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

Exemplos:

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

fonte.

Fomentar unha propiedade de elemento

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

Exemplos:

fonte.

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

Exemplos:

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

fonte.

Mergear dous obxectos

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

Crear, Obter e eliminar cookies

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