Viena lieta, ko es vēlos pilnīgi skaidri pateikt šajā sērijā, ir tā, ka nevienam no mums nevajadzētu būt pret vaniļas JavaScript. “Vanilla” nozīmē “neapstrādāts” vai “vietējs” JavaScript. JavaScript, kas darbojas pārlūkprogrammā bez jebkādiem ietvariem, bibliotēkām vai jebko citu. Patiesībā, ja tas nav acīmredzams, pats jQuery ir rakstīts vaniļas JavaScript valodā. Jābūt, jāstrādā. Esmu pārliecināts, ka iekšēji tas dažkārt dēvē par savām metodēm un tādām, bet būtībā “tas ir tikai JavaScript”.
Parasti, ja es strādāju vietnē, kurā dažu nelielu uzdevumu veikšanai (piemēram, slēpt / parādīt dažas lietas) tiek izmantots nedaudz JavaScript, es iemācītos neizmantot tādu bibliotēku kā jQuery. Viss, kas atrodas ārpus tā un bibliotēka, būs tā svara vērts. Patiesībā es nekad neesmu strādājis nevienā netīkamā vietnē, kurā nekad nebūtu izmantots jQuery.
Neatkarīgi no tā, vai strādājat vietnē, kurā tā atrodas vai nav, ir labi iemācīties vismaz vaniļas JavaScript pamatus. Man ļoti patīk šis NetTuts + raksts, kurā parādīti ekvivalenti (un vēl viens labs). Es regulāri atsaucos uz šo:
$('a').on('click', function() ( ));būtībā ir šāds:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Sākot ar videoklipu, mums bija šāda poga:
ButtonUn, kā mēs to darījām atkal un atkal, mēs saņēmām atsauci uz to šādi:
$("#press");Lai iegūtu šo elementu vaniļas JavaScript, mēs varētu:
document.getElementById("press");Šīs lietas nav gluži līdzvērtīgas, jo jQuery versija faktiski ir jQuery objekts, kas nozīmē, ka tā var paveikt visu īpašo jQuery lietu (piemēram, katru atsevišķo jQuery metodi). Bet tas ir tieši tas pats, kas:
$("#press")(0);Ir svarīgi zināt, kad mums ir atsauce uz šādu elementu, mums ir visa veida noderīga informācija par to. Piedodiet milzīgo bloku, taču ir vērts to vadīt mājās. Šeit ir tikai daži no tā, ko mēs iegūstam no šīs pogas atsauces (kā ņemts no 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__: HTMLButtonElementVideoklipā, kuru mēs pieskaramies lietošanai tagName, tas var būt noderīgi, nosakot, vai pasākumā skatāties pareizo elementu (dažreiz notikumi var aktivizēt ligzdotos elementus, un jums tas ir jāpārliecinās).
Mēs aplūkojam arī dažus “vecās skolas” pasākumu iesiešanas darbus, piemēram, onclickīpašuma iestatīšanu . Tas ir problemātiski, jo to ir viegli pārrakstīt. Mums pat nav (daudz) jādomā par šo lietu ar jQuery, jo tā ir notikumu saistīšanas metode, kas nepārraksta citus. Jā, labs API dizains.
Attiecībā uz elementu atrašanu ir arī getElementsByClassName, querySelector un querySelectorAll (kas pastāv pat tādu bibliotēku dēļ kā jQuery), par kurām ir vērts zināt.
Jūs varat uzzināt par vaniļas JavaScript no paša jQuery! Polam Īram ir daži labi video par lietām, kuras viņš iemācījies, aplūkojot avotu.