В этой серии статей я хочу абсолютно четко заявить, что никто из нас не должен придерживаться антивирусного JavaScript. «Ваниль» означает «сырой» или «собственный» JavaScript. JavaScript, который работает в браузере без каких-либо фреймворков, библиотек или чего-либо еще. Фактически, если это не очевидно, сам jQuery написан на обычном JavaScript. Так должно быть, чтобы работать. Я уверен, что внутри он вызывает собственные методы и тому подобное, но по сути «это просто JavaScript».
Как правило, если я работаю над сайтом, на котором используется небольшое количество JavaScript для выполнения некоторых небольших задач (например, скрыть / показать некоторые вещи), я бы научился не использовать такую библиотеку, как jQuery. Все, что сверх этого, и библиотека будет стоить своего веса. Фактически, я никогда не работал над нетривиальным веб-сайтом, который бы не использовал jQuery.
Независимо от того, работаете ли вы над сайтом, на котором он есть или нет, полезно изучить хотя бы основы ванильного JavaScript. Мне очень нравится эта статья NetTuts +, в которой показаны эквиваленты (и еще один хороший). Я регулярно ссылаюсь на это:
$('a').on('click', function() ( ));по сути это:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Начиная с видео, у нас была такая кнопка:
ButtonИ поскольку мы делали это снова и снова, у нас есть ссылка на это так:
$("#press");Чтобы получить этот элемент в ванильном JavaScript, мы могли бы:
document.getElementById("press");Эти вещи не совсем эквивалентны, потому что версия jQuery на самом деле является объектом jQuery, что означает, что она может выполнять все эти специальные функции jQuery (например, каждый отдельный метод jQuery). Но это то же самое, что:
$("#press")(0);Важно знать, что когда у нас есть ссылка на такой элемент, у нас есть все виды полезной информации о нем. Простите за огромный блок, но это того стоит, чтобы пригнать этот дом. Вот лишь некоторые из того, что мы получаем из этой ссылки на кнопку (взято из 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__: HTMLButtonElementВ видео мы касаемся использования tagName, которое может быть полезно, когда вы определяете, смотрите ли вы на нужный элемент в событии (иногда события могут запускаться на вложенных элементах, и вы должны убедиться).
Мы также рассмотрим некоторую «олдскульную» привязку событий с такими вещами, как установка onclickсвойства. Это проблематично из-за того, насколько легко перезаписать. Нам даже не нужно (много) думать об этом с jQuery, потому что его методы привязки событий не перезаписывают другие. Ура, хороший дизайн API.
Что касается поиска элементов, есть также getElementsByClassName, querySelector и querySelectorAll (которые даже существуют из-за таких библиотек, как jQuery), о которых стоит знать.
Вы можете узнать о ванильном JavaScript из самого jQuery! У Пола Айриша есть несколько хороших видео о том, что он узнал, глядя на его источник.