Üks asi, mida ma tahan selles seerias täiesti selgeks teha, on see, et keegi meist ei tohiks olla vanillivastane JavaScript. “Vanill”, mis tähendab “toores” või “kohalik” JavaScripti. JavaScripti, mis töötab brauseris ilma raamistike, teekide või millegi muuna. Tegelikult, kui see pole ilmne, on jQuery ise kirjutatud vanilje JavaScripti abil. Peab olema, töötama. Olen kindel, et sisemiselt nimetab see mõnikord oma meetodeid ja selliseid, kuid põhiolemuses on see "lihtsalt JavaScript".
Rusikareeglina, kui töötan saidil, kus mõnede väikeste ülesannete täitmiseks (nt mõne asja peitmine / kuvamine) kasutatakse käputäit JavaScripti, õpiksin ma sellist teeki nagu jQuery mitte kasutama. Kõik muu kui raamatukogu on kaalu väärt. Tegelikult pole ma kunagi töötanud ühelgi mitte-triviaalsel veebisaidil, kus pole jQueryd kasutatud.
Sõltumata sellest, kas te töötate saidil, millel see on või pole, on hea õppida vähemalt vanilja JavaScripti põhitõdesid. Mulle meeldib see NetTuts + artikkel, mis näitab ekvivalente (ja veel üht head). Viitan sellele korrapäraselt:
$('a').on('click', function() ( ));on sisuliselt see:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Alates videost oli meil selline nupp:
ButtonJa nagu oleme ikka ja jälle teinud, saime sellele viite järgmiselt:
$("#press");Selle elemendi saamiseks vanilje JavaScripti võiksime:
document.getElementById("press");Need asjad ei ole päris samaväärsed, kuna jQuery versioon on tegelikult jQuery objekt, mis tähendab, et see suudab teha kõike seda erilist jQuery värki (nt iga üksik jQuery meetod). Kuid see on täpselt sama asi nagu:
$("#press")(0);Oluline on teada, kui meil on viide sellisele elemendile, meil on selle kohta igasugust kasulikku teavet. Andestage tohutu plokk, kuid see on seda koju sõitmist väärt. Siin on vaid mõned näpunäited selle nupuvõimaluse kohta (võetud Google Chrome DevToolsist):
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__: HTMLButtonElementVideol, mida puudutame, kasutame seda tagName, mis võib olla kasulik, kui otsustate, kas vaatate sündmuse õiget elementi (mõnikord võivad sündmused käivitada pesastatud elemendid ja peate selles veenduma).
Vaatame ka mõnda vana kooli ürituse köitmist, näiteks onclickkinnisvara seadistamist . See on problemaatiline, kuna seda on lihtne üle kirjutada. Me ei pea isegi sellele jQuery'le mõtlema (palju), sest sündmuste sidumismeetodid ei kirjuta teisi üle. Jah, hea API disain.
Elementide leidmise osas on olemas ka getElementsByClassName, querySelector ja querySelectorAll (mis eksisteerivad isegi selliste raamatukogude nagu jQuery tõttu), millest tasub teada.
Vanilli JavaScripti kohta saate teavet jQuery enda käest! Paul Irishil on häid videoid selle kohta, mida ta on selle allikast vaadates õppinud.