Yksi asia, jonka haluan tehdä täysin selväksi tässä sarjassa, on se, että kukaan meistä ei saa olla vaniljan vastaista JavaScriptiä. "Vanilla" tarkoittaa "raaka" tai "natiivi" JavaScript. JavaScript, joka toimii selaimessa ilman kehyksiä, kirjastoja tai mitään muuta. Itse asiassa, jos tämä ei ole ilmeistä, jQuery itse on kirjoitettu vanilja Javascriptillä. Sen täytyy olla, toimimaan. Olen varma sisäisesti, että se kutsuu joskus omia menetelmiä ja sellaisia, mutta ytimessä "se on vain JavaScript".
Nyrkkisääntönä, jos työskentelen sivustolla, joka käyttää kourallista JavaScriptiä pienien tehtävien suorittamiseen (esim. Piilota / näytä muutama asia), oppii olemaan käyttämättä kirjastoa, kuten jQuery. Kaikki sen yläpuolella ja ulkopuolella ja kirjasto ovat painonsa arvoisia. Itse asiassa en ole koskaan työskennellyt millään ei-triviaalilla verkkosivustolla, joka ei koskaan käyttänyt jQueryä.
Riippumatta siitä, työskenteletkö sivustolla, jolla on tai ei, on hyvä oppia ainakin vanilja JavaScriptin perusteet. Pidän melkoisesti tästä NetTuts + -artikkelista, joka näyttää vastaavuudet (ja toisen hyvän). Viittaan tähän säännöllisesti:
$('a').on('click', function() ( ));on pohjimmiltaan tämä:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Videosta lähtien meillä oli tällainen painike:
ButtonJa kuten olemme tehneet yhä uudelleen nyt, saimme viittauksen siihen näin:
$("#press");Saada tämä elementti vanilja JavaScriptiin voisimme:
document.getElementById("press");Nämä asiat eivät ole aivan vastaavia, koska jQuery-versio on itse asiassa jQuery-objekti, mikä tarkoittaa, että se voi tehdä kaiken erityisen jQuery-tavaran (esim. Kaikki yksittäiset jQuery-menetelmät). Mutta se on täsmälleen sama asia kuin:
$("#press")(0);On tärkeää tietää, kun meillä on viittaus tällaiseen elementtiin, meillä on kaikenlaisia hyödyllisiä tietoja siitä. Anteeksi valtava lohko, mutta on sen arvoista ajaa tämä koti. Tässä on vain muutama osa siitä, mitä saamme siitä painikeviitteestä (Google Chrome DevTools -sovelluksesta):
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__: HTMLButtonElementVideossa, jota kosketamme käyttämiseen tagName, mikä voi olla hyödyllistä määritettäessä, katsotko tapahtuman oikeaa elementtiä (joskus tapahtumat voivat laukaista sisäkkäisiä elementtejä ja sinun on varmistettava).
Tarkastelemme myös joitain "old school" -tapahtumia, kuten onclickkiinteistön asettaminen . Se on ongelmallista, koska sen korvaaminen on helppoa. Meidän ei tarvitse edes ajatella (paljon) kyseisiä juttuja jQueryn kanssa, koska tapahtumien sitomismenetelmät eivät korvaa muita. Jee hyvä API-suunnittelu.
Elementtien löytämisen osalta on myös getElementsByClassName, querySelector ja querySelectorAll (joka on olemassa jopa jQueryn kaltaisten kirjastojen takia), joista kaikki on syytä tietää.
Voit oppia vaniljan JavaScriptiä itse jQuerystä! Paul Irishillä on hyviä videoita asioista, jotka hän on oppinut katsomalla sen lähdettä.