Vienas dalykas, kurį noriu aiškiai parodyti šioje serijoje, yra tas, kad nė vienas iš mūsų neturėtų būti „anti vanilla JavaScript“. „Vanilla“ reiškia „neapdorotas“ arba „gimtoji“ „JavaScript“. „JavaScript“, kuris veikia naršyklėje be jokių rėmų, bibliotekų ar nieko kito. Tiesą sakant, jei tai nėra akivaizdu, pats „jQuery“ yra parašytas vaniliniu „JavaScript“. Tai turi būti, dirbti. Esu tikras, kad viduje jis kartais vadina savo metodais ir tokiais, tačiau iš esmės „tai tik„ JavaScript “.
Kaip nykščio taisyklė, jei dirbu svetainėje, kurioje naudoju saujelę „JavaScript“, kad atlikčiau nedideles užduotis (pvz., Paslėpti / parodyti keletą dalykų), išmokčiau nenaudoti tokios bibliotekos kaip „jQuery“. Viskas, kas aukščiau ir anapus, ir biblioteka bus verta savo svorio. Tiesą sakant, niekada nedirbau nė vienoje nereikšmingoje svetainėje, kurioje nebūtų naudojamas „jQuery“.
Nepriklausomai nuo to, ar dirbate svetainėje, kurioje ji yra, ar ne, naudinga išmokti bent jau vanilės „JavaScript“ pagrindus. Man labai patinka šis „NetTuts +“ straipsnis, kuriame rodomi atitikmenys (ir dar vienas geras). Aš tai reguliariai remiuosi:
$('a').on('click', function() ( ));iš esmės yra tai:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Pradedant vaizdo įrašu, mes turėjome tokį mygtuką:
ButtonIr kaip mes tai darėme vėl ir vėl, mes gavome nuorodą į tai taip:
$("#press");Norėdami gauti šį elementą „vanilla JavaScript“, galime:
document.getElementById("press");Šie dalykai nėra visiškai lygiaverčiai, nes „jQuery“ versija iš tikrųjų yra „jQuery“ objektas, o tai reiškia, kad jis gali atlikti visus tuos specialius „jQuery“ dalykus (pvz., Kiekvieną atskirą „jQuery“ metodą). Bet tai yra tas pats dalykas kaip:
$("#press")(0);Svarbu žinoti, kai turime nuorodą į tokį elementą, turime apie jį įvairios naudingos informacijos. Atleisk už didžiulį bloką, bet verta važiuoti namo. Štai tik keletas dalykų, kuriuos gauname iš mygtuko nuorodos (paimtos iš „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__: HTMLButtonElementVaizdo įraše paliečiame naudojimą tagName, kuris gali būti naudingas nustatant, ar žiūrite į tinkamą įvykio elementą (kartais įvykiai gali suaktyvinti įdėtus elementus ir turite įsitikinti).
Mes taip pat žiūrime į kai kuriuos „senosios mokyklos“ renginius, tokius kaip onclicknuosavybės nustatymas . Tai problemiška dėl to, kaip lengva perrašyti. Mums net nereikia daug galvoti apie tuos dalykus su „jQuery“, nes tai yra renginių įpareigojimo metodai, kurie neperrašo kitų. Taip, geras API dizainas.
Kalbant apie elementų paiešką, taip pat yra getElementsByClassName, querySelector ir querySelectorAll (kurie egzistuoja net dėl tokių bibliotekų kaip „jQuery“), apie kuriuos verta žinoti.
Apie vanilinį „JavaScript“ galite sužinoti iš paties „jQuery“! Paulas Irishas turi keletą gerų vaizdo įrašų apie dalykus, kurių jis išmoko žiūrėdamas į jo šaltinį.