Jedna věc, kterou chci v této sérii zcela jasně říci, je, že nikdo z nás by neměl být anti vanilkový JavaScript. „Vanilka“ znamená „surový“ nebo „nativní“ JavaScript. JavaScript, který běží v prohlížeči bez jakýchkoli rámců nebo knihoven nebo čehokoli jiného. Ve skutečnosti, pokud to není zřejmé, je samotný jQuery napsán ve vanilkovém JavaScriptu. Musí to být, pracovat. Jsem si jistý, že interně to volá vlastní metody a tak někdy, ale v jádru „je to jen JavaScript“.
Zpravidla platí, že pokud pracuji na webu, kde k provádění několika drobných úkolů používá hrst JavaScriptu (např. Skrýt / ukázat pár věcí), naučil bych se nepoužívat knihovnu jako jQuery. Cokoli nad rámec toho a knihovna bude mít svou váhu. Ve skutečnosti jsem nikdy nepracoval na žádném netriviálním webu, který by nepoužíval jQuery.
Bez ohledu na to, zda pracujete na webu, který jej má nebo nemá, je dobré se naučit alespoň základy ve vanilkovém JavaScriptu. Moc se mi líbí tento článek NetTuts +, který ukazuje ekvivalenty (a další dobrý). Pravidelně odkazuji na tento:
$('a').on('click', function() ( ));je v podstatě toto:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Počínaje videem jsme měli toto tlačítko:
ButtonA jak jsme to udělali znovu a znovu, dostali jsme na to odkaz takto:
$("#press");Abychom dostali tento prvek do vanilkového JavaScriptu, mohli bychom:
document.getElementById("press");Tyto věci nejsou zcela ekvivalentní, protože verze jQuery je ve skutečnosti objektem jQuery, což znamená, že dokáže všechny ty speciální věci jQuery (např. Každou metodu jQuery). Ale je to přesně to samé jako:
$("#press")(0);Je důležité vědět, že když máme odkaz na takový prvek, máme o něm všechny užitečné informace. Odpusťte obrovskému bloku, ale stojí to za to řídit se domů. Zde je jen několik z toho, z čeho odkazujeme na toto tlačítko (převzato z 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__: HTMLButtonElementVe videu se dotkneme použití tagName, což může být užitečné při rozhodování, zda se díváte na ten správný prvek v události (někdy se události mohou spustit na vnořených prvcích a musíte se ujistit).
Podíváme se také na nějaké vazby na události „staré školy“ s věcmi, jako je nastavení onclickvlastnosti. Je to problematické kvůli tomu, jak snadné je přepsat. O těchto věcech s jQuery ani nemusíme (moc) přemýšlet, protože metody vazby událostí nepřepisují ostatní. Dobrý design API.
Pokud jde o hledání prvků, existuje také getElementsByClassName, querySelector a querySelectorAll (které dokonce existují kvůli knihovnám jako jQuery), o kterých stojí za to vědět.
O vanilkovém JavaScriptu se můžete dozvědět ze samotného jQuery! Paul Irish má několik dobrých videí o věcech, které se naučil při pohledu na zdroj.