Un lucru pe care vreau să-l clarific în această serie este că niciunul dintre noi nu ar trebui să fie JavaScript anti vanilie. „Vanilie” înseamnă „raw” sau „nativ” JavaScript. JavaScript care rulează în browser fără cadre sau biblioteci sau altceva. De fapt, dacă acest lucru nu este evident, jQuery în sine este scris în JavaScript vanilat. Trebuie să fie, să funcționeze. Sunt sigur că pe plan intern numește propriile sale metode și altele uneori, dar la bază „este doar JavaScript”.
De regulă, dacă lucrez la un site în care folosește o mână de JavaScript pentru a îndeplini câteva sarcini mici (de exemplu, ascunde / afișează câteva lucruri), aș învăța să nu folosesc o bibliotecă precum jQuery. Orice lucru care depășește și dincolo de asta și biblioteca va merita greutatea sa. De fapt, nu am lucrat niciodată pe niciun site web non-banal care să nu folosească jQuery.
Indiferent dacă lucrați pe un site care îl are sau nu, este un lucru bun să învățați cel puțin elementele de bază în JavaScript vanilat. Îmi place destul acest articol NetTuts + care arată echivalente (și altul bun). Mă refer la acesta în mod regulat:
$('a').on('click', function() ( ));este în esență aceasta:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Începând din videoclip, am avut un buton de genul acesta:
ButtonȘi așa cum am făcut-o de mai multe ori acum, am obținut o referire la aceasta astfel:
$("#press");Pentru a obține acel element în JavaScript vanilat am putea:
document.getElementById("press");Aceste lucruri nu sunt chiar echivalente, deoarece versiunea jQuery este de fapt un obiect jQuery, ceea ce înseamnă că poate face toate lucrurile speciale jQuery (de exemplu, fiecare metodă jQuery). Dar este exact același lucru ca:
$("#press")(0);Este important să știm când avem o referință la un astfel de element, avem tot felul de informații utile despre el. Iartă imensul bloc, dar merită să conduci această casă. Iată doar câteva din ceea ce obținem referința la butonul respectiv (preluat de la 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În videoclipul pe care îl atingem tagName, care poate fi util atunci când stabiliți dacă vă uitați la elementul potrivit într-un eveniment (uneori evenimentele se pot declanșa pe elemente imbricate și trebuie să vă asigurați).
De asemenea, ne uităm la unele legături de evenimente „old school” cu lucruri precum setarea onclickproprietății. Este problematic din cauza cât de ușor este de a suprascrie. Nici nu trebuie să ne gândim (mult) la acele lucruri cu jQuery, deoarece metodele de legare a evenimentelor nu le suprascrie pe altele. Bine, un design API bun.
În ceea ce privește găsirea elementelor, există și getElementsByClassName, querySelector și querySelectorAll (care există chiar din cauza bibliotecilor precum jQuery) despre care merită să știți.
Puteți afla despre JavaScript vanilat de la jQuery însuși! Paul Irish are câteva videoclipuri bune despre lucrurile pe care le-a învățat din analiza sursei.