Одне, що я хочу абсолютно чітко пояснити в цій серії, - це те, що ніхто з нас не повинен бути анти-ванільним 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! Пол Ірланд має кілька хороших відео про те, чого він навчився, дивлячись на його джерело.