Satu perkara yang ingin saya jelaskan dalam siri ini adalah bahawa tidak seorang pun dari kita harus anti JavaScript vanilla. "Vanilla" yang bermaksud "mentah" atau "asli" JavaScript. JavaScript yang berjalan di penyemak imbas tanpa kerangka kerja atau perpustakaan atau perkara lain. Sebenarnya, jika ini tidak jelas, jQuery itu sendiri ditulis dalam JavaScript vanilla. Ia mesti, untuk berfungsi. Saya yakin secara dalaman menyebut kaedah itu sendiri dan kadang-kadang seperti itu, tetapi intinya "itu hanya JavaScript".
Sebagai peraturan, jika saya mengusahakan laman web yang menggunakan sebilangan kecil JavaScript untuk menyelesaikan beberapa tugas kecil (mis. Menyembunyikan / menunjukkan beberapa perkara), saya akan belajar untuk tidak menggunakan perpustakaan seperti jQuery. Apa sahaja di atas dan di luarnya dan perpustakaan akan bernilai. Sebenarnya, saya tidak pernah menggunakan laman web tidak remeh yang tidak menggunakan jQuery.
Tidak kira sama ada anda mengusahakan laman web yang memilikinya atau tidak, ada baiknya anda mempelajari sekurang-kurangnya asas dalam JavaScript vanila. Saya cukup menyukai artikel NetTuts + ini yang menunjukkan setara (dan yang lain bagus). Saya merujuknya dengan kerap:
$('a').on('click', function() ( ));pada asasnya ini:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Bermula dalam video, kami mempunyai butang seperti ini:
ButtonDan seperti yang telah kita lakukan berulang kali, kita mendapat rujukan seperti ini:
$("#press");Untuk mendapatkan elemen itu dalam JavaScript vanilla kita dapat:
document.getElementById("press");Perkara-perkara itu tidak setara kerana versi jQuery sebenarnya adalah objek jQuery yang bermaksud ia boleh melakukan semua perkara khas jQuery (contohnya setiap kaedah jQuery). Tetapi ia adalah perkara yang sama seperti:
$("#press")(0);Penting untuk mengetahui bila kita mempunyai rujukan pada elemen seperti itu, kita mempunyai semua jenis maklumat berguna mengenainya. Maafkan blok besar, tetapi ada baiknya memandu rumah ini. Inilah beberapa perkara yang kami perolehi dari rujukan butang itu (seperti yang diambil dari 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__: HTMLButtonElementDalam video yang kita sentuh gunakan tagName, yang dapat berguna ketika anda menentukan apakah anda melihat elemen yang tepat dalam suatu peristiwa (kadang-kadang peristiwa dapat mencetuskan elemen bersarang dan anda perlu memastikannya).
Kami juga melihat beberapa acara "sekolah lama" yang mengikat dengan perkara seperti mengatur onclickharta tanah. Ia bermasalah kerana betapa mudahnya menimpa. Kita juga tidak perlu memikirkan banyak perkara dengan jQuery kerana kaedah mengikat acara tidak menimpa yang lain. Yay reka bentuk API yang bagus.
Mengenai mencari elemen, terdapat juga getElementsByClassName, querySelector, dan querySelectorAll (yang bahkan wujud kerana perpustakaan seperti jQuery) yang semuanya perlu diketahui.
Anda boleh belajar mengenai JavaScript vanilla dari jQuery itu sendiri! Paul Irish mempunyai beberapa video bagus mengenai perkara yang dipelajarinya daripada melihat sumbernya.