Una cosa che voglio chiarire in modo assolutamente chiaro in questa serie è che nessuno di noi dovrebbe essere anti-vanilla JavaScript. "Vanilla" significa JavaScript "grezzo" o "nativo". JavaScript che viene eseguito nel browser senza alcun framework o libreria o altro. In effetti, se questo non è ovvio, jQuery stesso è scritto in JavaScript vanilla. Deve essere, per funzionare. Sono sicuro che internamente chiama i suoi metodi e cose del genere a volte, ma in fondo "è solo JavaScript".
Come regola generale, se sto lavorando su un sito in cui utilizza una manciata di JavaScript per eseguire alcune piccole attività (ad esempio nascondere / mostrare alcune cose), imparerei a non usare una libreria come jQuery. Qualunque cosa al di là di questo e la biblioteca varrà il suo peso. In effetti, non ho mai lavorato su un sito Web non banale che non usasse jQuery.
Indipendentemente dal fatto che tu stia lavorando su un sito che lo ha o no, è una buona cosa imparare almeno le basi di JavaScript vanilla. Mi piace abbastanza questo articolo di NetTuts + che mostra gli equivalenti (e un altro buono). Mi riferisco regolarmente a questo:
$('a').on('click', function() ( ));è essenzialmente questo:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));A partire dal video, avevamo un pulsante come questo:
ButtonE come abbiamo fatto più e più volte ora, abbiamo un riferimento ad esso in questo modo:
$("#press");Per ottenere quell'elemento in JavaScript vanilla potremmo:
document.getElementById("press");Queste cose non sono del tutto equivalenti perché la versione jQuery è in realtà un oggetto jQuery, il che significa che può fare tutte quelle cose speciali di jQuery (ad esempio ogni singolo metodo jQuery). Ma è esattamente la stessa cosa di:
$("#press")(0);È importante sapere quando abbiamo un riferimento a un elemento del genere, abbiamo tutti i tipi di informazioni utili su di esso. Perdona l'enorme blocco, ma ne vale la pena guidare questa casa. Ecco solo alcune delle cose che otteniamo da quel riferimento al pulsante (come preso da Google Chrome DevTools):
accessKey: "" attributes: NamedNodeMap autofocus: false baseURI: "http://s.codepen.io/pen/secure_iframe?turn_off_js=&mobile=false" childElementCount: 0 childNodes: NodeList(1) children: HTMLCollection(0) classList: DOMTokenList className: "" clientHeight: 23 clientLeft: 2 clientTop: 0 clientWidth: 58 contentEditable: "inherit" dataset: DOMStringMap dir: "" disabled: false draggable: false firstChild: text firstElementChild: null form: null formAction: "" formEnctype: "" formMethod: "" formNoValidate: false formTarget: "" hidden: false id: "press" innerHTML: "Button" innerText: "Button" isContentEditable: false labels: NodeList(0) lang: "" lastChild: text lastElementChild: null localName: "button" name: "" namespaceURI: "http://www.w3.org/1999/xhtml" nextElementSibling: script nextSibling: text nodeName: "BUTTON" nodeType: 1 nodeValue: null offsetHeight: 23 offsetLeft: 0 offsetParent: body offsetTop: 0 offsetWidth: 62 onabort: null onbeforecopy: null onbeforecut: null onbeforepaste: null onblur: null onchange: null onclick: null oncontextmenu: null oncopy: null oncut: null ondblclick: null ondrag: null ondragend: null ondragenter: null ondragleave: null ondragover: null ondragstart: null ondrop: null onerror: null onfocus: null oninput: null oninvalid: null onkeydown: null onkeypress: null onkeyup: null onload: null onmousedown: null onmouseenter: null onmouseleave: null onmousemove: null onmouseout: null onmouseover: null onmouseup: null onmousewheel: null onpaste: null onreset: null onscroll: null onsearch: null onselect: null onselectstart: null onsubmit: null onwebkitfullscreenchange: null onwebkitfullscreenerror: null outerHTML: "Button" outerText: "Button" ownerDocument: document parentElement: body parentNode: body prefix: null previousElementSibling: null previousSibling: text pseudo: "" scrollHeight: 23 scrollLeft: 0 scrollTop: 0 scrollWidth: 58 shadowRoot: null spellcheck: true style: CSSStyleDeclaration tabIndex: 0 tagName: "BUTTON" textContent: "Button" title: "" translate: true type: "submit" validationMessage: "" validity: ValidityState value: "" webkitPseudo: "" webkitRegionOverset: "undefined" webkitShadowRoot: null webkitdropzone: "" willValidate: true __proto__: HTMLButtonElementNel video che tocchiamo sull'utilizzo tagName, che può essere utile quando stai determinando se stai guardando l'elemento giusto in un evento (a volte gli eventi possono attivarsi su elementi annidati e devi assicurarti).
Guardiamo anche ad alcuni eventi legati alla "vecchia scuola" con cose come l'impostazione della onclickproprietà. È problematico a causa di quanto sia facile sovrascrivere. Non dobbiamo nemmeno pensare (molto) a queste cose con jQuery perché i suoi metodi di associazione degli eventi non sovrascrivono gli altri. Sì, buon design API.
Per quanto riguarda la ricerca di elementi, ci sono anche getElementsByClassName, querySelector e querySelectorAll (che esiste anche a causa di librerie come jQuery) che vale la pena conoscere.
Puoi conoscere JavaScript vanilla da jQuery stesso! Paul Irish ha dei bei video su cose che ha imparato guardando la sua fonte.