En ting jeg vil gjøre helt klart i denne serien er at ingen av oss skal være anti-vanilje JavaScript. "Vanilje" som betyr "rå" eller "naturlig" JavaScript. JavaScript som kjører i nettleseren uten rammer eller biblioteker eller noe annet. Faktisk, hvis dette ikke er opplagt, er jQuery skrevet i vanilje JavaScript. Det må være, å jobbe. Jeg er sikker på at det internt kaller det egne metoder og slikt noen ganger, men kjernen er "det er bare JavaScript".
Som en tommelfingerregel, hvis jeg jobber med et nettsted der jeg bruker en håndfull JavaScript for å utføre noen små oppgaver (f.eks. Skjule / vise noen få ting), vil jeg lære å ikke bruke et bibliotek som jQuery. Alt utover det og biblioteket vil være verdt det. Jeg har faktisk aldri jobbet på noe ikke-trivielt nettsted noensinne som ikke brukte jQuery.
Uansett om du jobber på et nettsted som har det eller ikke, er det en god ting å lære i det minste det grunnleggende i vanilje JavaScript. Jeg liker ganske denne NetTuts + -artikkelen som viser ekvivalenter (og en annen god). Jeg refererer til denne regelmessig:
$('a').on('click', function() ( ));er egentlig dette:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Fra og med videoen hadde vi en knapp som denne:
ButtonOg som vi har gjort om og om igjen nå, fikk vi en referanse til det slik:
$("#press");For å få elementet i vanilje JavaScript kan vi:
document.getElementById("press");Disse tingene er ikke helt like fordi jQuery-versjonen faktisk er et jQuery-objekt, noe som betyr at den kan gjøre alle de spesielle jQuery-tingene (f.eks. Hver eneste jQuery-metode). Men det er nøyaktig det samme som:
$("#press")(0);Det er viktig å vite når vi har en referanse til et slikt element, vi har all slags nyttig informasjon om det. Tilgi den enorme blokken, men det er verdt det å kjøre dette hjem. Her er bare noe av det vi får av den referansen til knappen (som hentet 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 bruk tagName, noe som kan være nyttig når du bestemmer om du ser på riktig element i en hendelse (noen ganger kan hendelser utløses på nestede elementer, og du må sørge for det).
Vi ser også på noen "old school" -begivenheter som inneholder ting som å sette onclickeiendommen. Det er problematisk på grunn av hvor enkelt det er å overskrive. Vi trenger ikke engang å tenke (mye) på de tingene med jQuery fordi det er hendelsesbindingsmetoder som ikke overskriver andre. Yay god API-design.
Når det gjelder å finne elementer, er det også getElementsByClassName, querySelector og querySelectorAll (som til og med eksisterer på grunn av biblioteker som jQuery) som alle er verdt å vite om.
Du kan lære om vanilje JavaScript fra jQuery selv! Paul Irish har noen gode videoer om ting han har lært av å se på kilden.