Jedną z rzeczy, które chcę w tej serii całkowicie wyjaśnić, jest to, że nikt z nas nie powinien być anty-waniliowym JavaScriptem. „Wanilia” oznacza „surowy” lub „natywny” JavaScript. JavaScript, który działa w przeglądarce bez żadnych struktur, bibliotek ani niczego innego. W rzeczywistości, jeśli nie jest to oczywiste, samo jQuery jest napisane w waniliowym JavaScript. Musi być, żeby zadziałało. Jestem pewien, że wewnętrznie wywołuje czasem własne metody i takie, ale w gruncie rzeczy „to tylko JavaScript”.
Z reguły, jeśli pracuję na stronie, w której używa się kilku skryptów JavaScript do wykonania pewnych małych zadań (np. Ukrywania / pokazywania kilku rzeczy), nauczyłbym się nie używać biblioteki takiej jak jQuery. Wszystko poza tym i biblioteka będzie na wagę złota. Właściwie nigdy nie pracowałem nad żadną nietrywialną witryną, która nigdy nie korzystała z jQuery.
Niezależnie od tego, czy pracujesz w witrynie, która ją ma, czy nie, dobrze jest nauczyć się przynajmniej podstaw waniliowego JavaScript. Bardzo podoba mi się ten artykuł o NetTuts +, który pokazuje odpowiedniki (i kolejny dobry). Regularnie odwołuję się do tego:
$('a').on('click', function() ( ));jest zasadniczo taki:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Zaczynając od filmu mieliśmy taki przycisk:
ButtonI tak jak robiliśmy to w kółko, mamy do tego odniesienie w następujący sposób:
$("#press");Aby uzyskać ten element w waniliowym JavaScript, możemy:
document.getElementById("press");Te rzeczy nie są do końca równoważne, ponieważ wersja jQuery jest w rzeczywistości obiektem jQuery, co oznacza, że może robić wszystkie te specjalne rzeczy jQuery (np. Każdą metodę jQuery). Ale to dokładnie to samo, co:
$("#press")(0);Ważne jest, aby wiedzieć, że kiedy mamy odniesienie do takiego elementu, mamy na jego temat wszelkiego rodzaju przydatne informacje. Wybaczcie ogromny blok, ale warto pojechać tym domem. Oto tylko niektóre z tego, co otrzymujemy z tego odniesienia do przycisku (wzięte 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__: HTMLButtonElementW filmie, którego używamy, poruszamy się tagName, co może być przydatne podczas określania, czy patrzysz na właściwy element w zdarzeniu (czasami zdarzenia mogą wywoływać elementy zagnieżdżone i musisz się upewnić).
Przyglądamy się także niektórym „oldschoolowym” wydarzeniom związanym z takimi rzeczami, jak ustawienie onclicknieruchomości. Jest to problematyczne ze względu na to, jak łatwo jest nadpisać. Nie musimy nawet myśleć (dużo) o tym w jQuery, ponieważ jego metody wiązania zdarzeń nie zastępują innych. Bardzo dobry projekt API.
Jeśli chodzi o znajdowanie elementów, istnieje również getElementsByClassName, querySelector i querySelectorAll (które istnieją nawet dzięki bibliotekom takim jak jQuery), o których warto wiedzieć.
Możesz dowiedzieć się o waniliowym JavaScript z samego jQuery! Paul Irish ma kilka dobrych filmów o rzeczach, których nauczył się patrząc na ich źródło.