En ting, jeg vil gøre det helt klart i denne serie, er at ingen af os skal være anti-vanille JavaScript. "Vanille" betyder "rå" eller "indfødt" JavaScript. JavaScript, der kører i browseren uden rammer eller biblioteker eller andet. Faktisk, hvis dette ikke er indlysende, er jQuery selv skrevet i vanille JavaScript. Det skal være, at arbejde. Jeg er sikker på, at det internt kalder det egne metoder og sådan nogle gange, men kernen “det er bare JavaScript”.
Som en tommelfingerregel, hvis jeg arbejder på et sted, hvor jeg bruger en håndfuld JavaScript til at udføre nogle små opgaver (f.eks. Skjule / vise et par ting), ville jeg lære at bruge et bibliotek som jQuery. Alt ud over det og biblioteket vil være dets vægt værd. Faktisk har jeg aldrig arbejdet på et ikke-trivielt websted nogensinde, der ikke brugte jQuery.
Uanset om du arbejder på et websted, der har det eller ikke, er det en god ting at lære i det mindste det grundlæggende i vanille JavaScript. Jeg kan godt lide denne NetTuts + -artikel, der viser ækvivalenter (og en anden god). Jeg refererer regelmæssigt til denne:
$('a').on('click', function() ( ));er i det væsentlige dette:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Fra og med videoen havde vi en knap som denne:
ButtonOg som vi har gjort igen og igen nu, fik vi en henvisning til det sådan:
$("#press");For at få dette element i vanilje JavaScript kunne vi:
document.getElementById("press");Disse ting er ikke helt ækvivalente, fordi jQuery-versionen faktisk er et jQuery-objekt, hvilket betyder, at det kan gøre alle de specielle jQuery-ting (f.eks. Hver eneste jQuery-metode). Men det er nøjagtigt det samme som:
$("#press")(0);Det er vigtigt at vide, når vi har en henvisning til et sådant element, vi har alle mulige nyttige oplysninger om det. Tilgiv den enorme blok, men det er det værd at køre dette hjem. Her er bare nogle af, hvad vi får ud af denne knapreference (som taget fra 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__: HTMLButtonElementI videoen berører vi brug af tagName, hvilket kan være nyttigt, når du bestemmer, om du ser på det rigtige element i en begivenhed (nogle gange kan begivenheder udløse på indlejrede elementer, og du skal sørge for det).
Vi ser også på nogle "old school" begivenheder, der er bindende med ting som at indstille onclickejendommen. Det er problematisk på grund af hvor let det er at overskrive. Vi behøver ikke engang at tænke (meget) over de ting med jQuery, fordi det er bindende begivenhedsmetoder, der ikke overskriver andre. Yay godt API design.
Med hensyn til at finde elementer er der også getElementsByClassName, querySelector og querySelectorAll (som endda findes på grund af biblioteker som jQuery), som alle er værd at vide om.
Du kan lære om vanille JavaScript fra jQuery selv! Paul Irish har nogle gode videoer om ting, han har lært af at se på kilden.