Едно нещо, което искам да изясня напълно в тази поредица, е, че никой от нас не трябва да е анти-ванилов 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! Пол Ирланд има няколко добри видеоклипа за нещата, които е научил, гледайки източника му.