Jedna stvar koju želim potpuno razjasniti u ovoj seriji je da nitko od nas ne bi trebao biti JavaScript protiv JavaScript. "Vanilija" što znači "sirovi" ili "izvorni" JavaScript. JavaScript koji se pokreće u pregledniku bez ikakvih okvira ili knjižnica ili bilo čega drugog. Zapravo, ako to nije očito, sam jQuery napisan je na JavaScript-u vanilije. To mora biti, raditi. Siguran sam da interno ponekad naziva vlastite metode i slično, ali u osnovi je "to samo JavaScript".
U pravilu, ako radim na web mjestu na kojem koristi pregršt JavaScripta za izvršavanje nekih malih zadataka (npr. Sakriti / pokazati nekoliko stvari), naučio bih ne koristiti knjižnicu poput jQuery. Sve iznad i izvan toga i knjižnica bit će vrijedno svoje težine. Zapravo, nikada nisam radio na bilo kojoj netrivijalnoj web stranici koja nije koristila jQuery.
Bez obzira radite li na web mjestu koje ga ima ili nema, dobra je stvar naučiti barem osnove vanilla JavaScript-a. Sviđa mi se ovaj NetTuts + članak koji pokazuje ekvivalente (i još jedan dobar). Redovito se pozivam na ovaj:
$('a').on('click', function() ( ));je u osnovi ovo:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Počevši od videa, imali smo ovakav gumb:
ButtonI kao što smo činili iznova i iznova, dobili smo referencu na nju ovako:
$("#press");Da bismo dobili taj element u JavaScript-u vanilije, mogli bismo:
document.getElementById("press");Te stvari nisu sasvim ekvivalentne, jer je jQuery verzija zapravo jQuery objekt, što znači da može raditi sve te posebne jQuery stvari (npr. Svaku pojedinu jQuery metodu). Ali to je potpuno ista stvar kao:
$("#press")(0);Važno je znati kada imamo referencu na takav element, imamo sve vrste korisnih informacija o njemu. Oprostite na velikom bloku, ali isplati se voziti ovaj dom. Evo samo nekih podataka koje dobivamo iz te reference gumba (preuzeto s 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__: HTMLButtonElementU videozapisu se dotičemo upotrebe tagName, što može biti korisno kada utvrđujete gledate li pravi element u događaju (ponekad događaji mogu pokrenuti ugniježđene elemente i to morate osigurati).
Također gledamo neke "stare škole" obvezujuće događaje sa stvarima poput postavljanja onclickimovine. Problematično je zbog toga što je lako prebrisati. Čak ne moramo (puno) razmišljati o tim stvarima s jQueryjem jer to metode vezanja događaja ne prepisuju druge. Dobar dizajn API-ja.
Što se tiče pronalaženja elemenata, tu su i getElementsByClassName, querySelector i querySelectorAll (koji čak postoje i zbog biblioteka poput jQuery) o kojima vrijedi znati.
O vanili JavaScript-u možete saznati od samog jQueryja! Paul Irish ima nekoliko dobrih videozapisa o stvarima koje je naučio gledajući njegov izvor.