V tej seriji želim popolnoma pojasniti, da nihče od nas ne sme biti anti-vanilla JavaScript. "Vanilija" pomeni "surovi" ali "izvorni" JavaScript. JavaScript, ki deluje v brskalniku brez ogrodja ali knjižnic ali česar koli drugega. Pravzaprav, če to ni očitno, je sam jQuery napisan v vanilijevem JavaScript. Mora biti, delati. Prepričan sem, da interno kliče lastne metode in podobne, v bistvu pa je "samo JavaScript".
Če delam na spletnem mestu, ki uporablja peščico JavaScript za izvajanje nekaterih majhnih nalog (npr. Skrivanje / prikaz nekaj stvari), bi se naučil, da ne uporabljam knjižnice, kot je jQuery. Vse, kar je poleg in nad knjižnico, bo vredno svoje teže. Pravzaprav še nikoli nisem delal na nobenem nepomembnem spletnem mestu, ki ni uporabljalo jQuery.
Ne glede na to, ali delate na spletnem mestu, ki ga ima ali ne, je dobro, če se naučite vsaj osnov vanilijevega JavaScripta. Zelo mi je všeč ta članek NetTuts +, ki prikazuje ustreznike (in še en dober). Redno se sklicujem na to:
$('a').on('click', function() ( ));je v bistvu to:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Od videoposnetka smo imeli takšen gumb:
ButtonIn kot smo vedno znova ponovili, smo se na to sklicevali takole:
$("#press");Da bi dobili ta element v vanili JavaScript, bi lahko:
document.getElementById("press");Te stvari niso povsem enakovredne, ker je različica jQuery dejansko objekt jQuery, kar pomeni, da lahko naredi vse tiste posebne stvari jQuery (npr. Vsako posamezno metodo jQuery). Ampak to je popolnoma enako kot:
$("#press")(0);Pomembno je vedeti, kdaj se sklicujemo na tak element, imamo o njem vse vrste koristnih informacij. Oprostite velikemu bloku, vendar se splača odpeljati ta dom. Tukaj je le nekaj, kar dobimo pri sklicu na gumb (kot je povzeto iz 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__: HTMLButtonElementV videoposnetku se dotaknemo uporabe tagName, kar je lahko koristno, ko določite, ali iščete pravi element v dogodku (včasih lahko dogodki sprožijo ugnezdene elemente in morate to zagotoviti).
Ogledamo si tudi nekaj "old school" priredb, ki vključujejo stvari, kot je nastavitev onclicknepremičnine. Problematično je, kako enostavno je prepisati. O teh stvareh nam sploh ni treba (veliko) razmišljati z jQueryjem, saj metode vezave dogodkov ne prepišejo drugih. Zelo dobro oblikovanje API-ja.
Glede iskanja elementov obstajajo tudi getElementsByClassName, querySelector in querySelectorAll (ki celo obstajajo zaradi knjižnic, kot je jQuery), o katerih je vredno vedeti.
O vanilijevem JavaScriptu lahko izveste pri samem jQueryju! Paul Irish ima nekaj dobrih videoposnetkov o stvareh, ki se jih je naučil ob pogledu na njegov vir.