Jedna vec, ktorú chcem v tejto sérii úplne objasniť, je, že nikto z nás by nemal byť anti vanilkový JavaScript. „Vanilka“ znamená „surový“ alebo „natívny“ JavaScript. JavaScript, ktorý sa spúšťa v prehliadači bez akýchkoľvek rámcov alebo knižníc alebo čohokoľvek iného. Ak to nie je zrejmé, samotný jQuery je napísaný vo vanilkovom JavaScripte. Musí to byť, pracovať. Som si istý, že vnútorne to niekedy volá jeho vlastné metódy a podobné, ale v jadre „je to iba JavaScript“.
Ako pravidlo platí, že ak pracujem na webe, ktorý na vykonanie niektorých malých úloh (napríklad skryť / ukázať niekoľko vecí) používa hŕstku kódu JavaScript, naučil by som sa nepoužívať knižnicu ako jQuery. Čokoľvek okrem toho a knižnica bude stáť za to. V skutočnosti som nikdy nepracoval na žiadnom netriviálnom webe, ktorý by nepoužíval jQuery.
Bez ohľadu na to, či pracujete na webe, ktorý ho má alebo nemá, je dobré sa naučiť aspoň základné informácie vo vanilkovom JavaScripte. Celkom sa mi páči tento článok o NetTuts +, ktorý zobrazuje ekvivalenty (a ďalší dobrý). Na tento pravidelne odkazujem:
$('a').on('click', function() ( ));je v podstate toto:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Počnúc videom sme mali toto tlačidlo:
ButtonA ako sme to robili stále znova, dostali sme o tom odkaz takto:
$("#press");Aby sme dostali tento prvok do vanilkového JavaScriptu, mohli by sme:
document.getElementById("press");Tieto veci nie sú celkom ekvivalentné, pretože verzia jQuery je v skutočnosti objektom jQuery, čo znamená, že dokáže robiť všetky špeciálne jQuery (napr. Každú jednu metódu jQuery). Ale je to presne to isté ako:
$("#press")(0);Je dôležité vedieť, keď máme odkaz na takýto prvok, máme o ňom všetky užitočné informácie. Odpusťte obrovský blok, ale stojí to za to, jazdiť po tomto dome. Tu uvádzame iba niektoré z toho, z čoho vychádzame z tohto odkazu na tlačidlo (prevzatý z nástroja 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__: HTMLButtonElementVo videu sa dotkneme použitia tagName, čo môže byť užitočné pri určovaní toho, či sa v udalosti pozeráte na správny prvok (niekedy sa udalosti môžu spustiť na vnorených prvkoch a musíte sa uistiť).
Pozeráme sa tiež na nejaké väzby udalostí zo „starej školy“ a napríklad na nastavenie onclickvlastnosti. Je to problematické kvôli tomu, aké ľahké je prepísať. O týchto veciach s jQuery ani nemusíme (veľa) premýšľať, pretože metódy viazania udalostí neprepisujú ostatných. Dobrý dizajn API.
Pokiaľ ide o hľadanie prvkov, existujú aj getElementsByClassName, querySelector a querySelectorAll (ktoré dokonca existujú kvôli knižniciam ako jQuery), o ktorých stojí za to vedieť.
O vanilkovom JavaScripte sa môžete dozvedieť zo samotného jQuery! Paul Irish má niekoľko dobrých videí o veciach, ktoré sa naučil pri pohľade na zdroj.