Funzioni alternative di base per viaggiare da JQuery a Vanilla JavaScript

Immagino che non sia l’unico che ha iniziato a usare JavaScript attraverso JQuery. La biblioteca jquery è stata fondamentale per lo sviluppo di fronte, ha permesso agli sviluppatori di fare quasi tutto ciò che volevamo in modo rapido, semplice e senza preoccuparti dei browser. L’unico inconveniente che avevo è stato che dovremmo caricare la biblioteca, che non era particolarmente leggero, e che ha rallentato il peso e l’uso del Web in questione.

Grazie allo sviluppo di JavaScript “A Caph” ( Chiamato Vanilla JS, o semplici JS) Ora possiamo dispensare con JQuery e continuare a godere della facilità d’uso, ma ancora a me, mi sta costando di prendere jQuery a Vanillajs, ed è già molti anni bloccando la modalità jquery.

Per cercare di alleviare questa modifica, ho raccolto una delle funzioni che già utilizzate ricorsivamente su jQuery, che fanno questo Codice JS è più pulito e simile a un po ‘di più Volevo congelare.

Ne ho messo tutti (e altri che verranno) in un file che collega i miei progetti, e quindi posso fare riferimento a Queste funzioni in tutto il progetto.

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

Seleziona DOM Elements

Questa è una delle attività che vedono il massimo Ces dobbiamo fare, e con jquery era semplice come usare la funzione $. Ora con JavaScript possiamo utilizzare tutto questo potenza tramite document.QuerySelector e Document.QuerySelector, ma dobbiamo scrivere molti personaggi ogni volta che vogliamo usarlo. Ecco perché possiamo creare una funzione $ e $ 1 (o come vuoi chiamarlo) che ti rende più efficiente.

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

Esempi:

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

Sorgente.

Aggiungi, Elimina e controllare le classi

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

Esempi:

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

sorgente.

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

Ottieni posizione

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

Nascondi o visualizza gli elementi

Esempi:

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

sorgente.

inserire gli stili CSS in un

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

Esempi:

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

sorgente.

incoraggia una proprietà 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); } })();}

Esempi:

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

Sorgente.

Ajax Richieste

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

Esempi:

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

Sorgente.

Mergear due oggetti

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

Crea, Ottieni ed elimina i cookie

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