Een ding dat ik in deze serie absoluut duidelijk wil maken, is dat niemand van ons anti-vanille JavaScript zou moeten zijn. "Vanilla" betekent "rauw" of "native" JavaScript. JavaScript dat in de browser wordt uitgevoerd zonder frameworks of bibliotheken of iets anders. Als dit niet voor de hand ligt, is jQuery zelf in vanille JavaScript geschreven. Het moet werken. Ik ben er zeker van dat het intern zijn eigen methoden en dergelijke noemt, maar in de kern "is het gewoon JavaScript".
Als vuistregel zou ik leren om geen bibliotheek zoals jQuery te gebruiken als ik aan een site werk waarin een handvol JavaScript wordt gebruikt om enkele kleine taken uit te voeren (bijvoorbeeld een paar dingen verbergen / weergeven). Alles wat verder gaat en de bibliotheek zal zijn gewicht waard zijn. Sterker nog, ik heb nog nooit aan een niet-triviale website gewerkt die geen gebruik maakte van jQuery.
Ongeacht of u op een site werkt die het heeft of niet, het is een goede zaak om op zijn minst de basisprincipes van vanille JavaScript te leren. Ik vind dit NetTuts + -artikel best leuk dat equivalenten laat zien (en nog een goede). Ik verwijs hier regelmatig naar:
$('a').on('click', function() ( ));is in wezen dit:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Beginnend in de video, hadden we een knop zoals deze:
ButtonEn zoals we nu keer op keer hebben gedaan, hebben we er als volgt een verwijzing naar:
$("#press");Om dat element in vanille JavaScript te krijgen, kunnen we:
document.getElementById("press");Die dingen zijn niet helemaal gelijk, omdat de jQuery-versie eigenlijk een jQuery-object is, wat betekent dat het al die speciale jQuery-dingen kan doen (bijvoorbeeld elke jQuery-methode). Maar het is precies hetzelfde als:
$("#press")(0);Het is belangrijk om te weten dat als we een verwijzing naar een dergelijk element hebben, we er allerlei nuttige informatie over hebben. Vergeef het enorme blok, maar het is de moeite waard om hier naar huis te rijden. Hier zijn slechts enkele van wat we krijgen van die knopreferentie (zoals overgenomen uit 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__: HTMLButtonElementIn de video die we bespreken over het gebruik tagName, wat handig kan zijn om te bepalen of je naar het juiste element in een gebeurtenis kijkt (soms kunnen gebeurtenissen worden geactiveerd op geneste elementen en moet je dit zeker weten).
We kijken ook naar een aantal "old school" -evenementen met zaken als het instellen van het onclickpand. Het is problematisch vanwege hoe gemakkelijk het is om te overschrijven. We hoeven met jQuery niet eens (veel) over dat spul na te denken, omdat de methoden voor het binden van gebeurtenissen anderen niet overschrijven. Ja, goed API-ontwerp.
Wat het vinden van elementen betreft, zijn er ook getElementsByClassName, querySelector en querySelectorAll (die zelfs bestaan vanwege bibliotheken zoals jQuery) die allemaal de moeite waard zijn om te weten.
U kunt vanille JavaScript leren van jQuery zelf! Paul Irish heeft een aantal goede video's over dingen die hij heeft geleerd door naar de bron te kijken.