Egy dolgot szeretnék teljesen egyértelművé tenni ebben a sorozatban, hogy egyikünknek sem szabad anti-vanilla JavaScript-nek lennie. A „vanília” jelentése „nyers” vagy „natív” JavaScript. A böngészőben keretrendszerek, könyvtárak vagy bármi más nélkül futó JavaScript. Valójában, ha ez nem nyilvánvaló, maga a jQuery vanília JavaScript-ben van megírva. Kell, működnie. Biztos vagyok benne, hogy belsőleg saját módszereknek és ilyeneknek hívja néha, de a lényegében "csak a JavaScript".
Alapvető szabály, hogy ha olyan webhelyen dolgozom, ahol egy maroknyi JavaScript használatával néhány apró feladat elvégezhető (pl. Néhány dolog elrejtése / megjelenítése), megtanulnám, hogy ne használjak olyan könyvtárat, mint a jQuery. Minden ezen felül és túl, valamint a könyvtár meg fogja érni a súlyát. Valójában soha nem dolgoztam olyan nem triviális weboldalakon, amelyek soha nem használták volna a jQuery-t.
Függetlenül attól, hogy olyan webhelyen dolgozik, ahol van vagy nincs, jó dolog megtanulni legalább a vanília JavaScript alapjait. Nagyon tetszik ez a NetTuts + cikk, amely ekvivalenseket mutat (és még egy jót). Rendszeresen hivatkozom erre:
$('a').on('click', function() ( ));lényegében ez:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));A videóból kiindulva volt egy ilyen gombunk:
ButtonÉs ahogy most és újra és újra megtettük, így kaptunk erre utalást:
$("#press");Hogy megszerezzük ezt az elemet a vanília JavaScript-be, a következőket tehetjük:
document.getElementById("press");Ezek a dolgok nem egészen egyenértékűek, mert a jQuery verzió valójában egy jQuery objektum, vagyis minden különleges jQuery dolgot meg tud csinálni (pl. Minden egyes jQuery módszer). De pontosan ugyanaz, mint:
$("#press")(0);Fontos tudni, hogy mikor van utalásunk egy ilyen elemre, mindenféle hasznos információval rendelkezünk róla. Bocsásson meg a hatalmas blokkot, de érdemes hazavezetni ezt. Íme csak néhány, amit levonunk erről a gombreferenciáról (a Google Chrome DevTools-ból vettük):
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__: HTMLButtonElementA videóban érintjük a felhasználást tagName, amely hasznos lehet, ha meghatározzuk, hogy egy esemény megfelelő elemét nézzük-e (néha az események beindulhatnak a beágyazott elemeknél, és meg kell győződnie róla).
Megnézünk néhány „old school” rendezvénykötést is, például az onclickingatlan beállításával . Problémás, mert mennyire könnyű felülírni. A jQuery-vel nem is kell sokat gondolkodnunk ezeken a dolgokon, mert az eseménykötési módszerek nem írják felül a többieket. Igen jó API-tervezés.
Ami az elemek megtalálását illeti, van még a getElementsByClassName, a querySelector és a querySelectorAll (ami még olyan könyvtárak miatt is létezik, mint a jQuery), amelyekről érdemes tudni.
A vanília JavaScriptről magáról a jQuery-ről tanulhat! Paul Irishnek van néhány jó videója azokról a dolgokról, amelyeket megtanult a forrása alapján.