Ένα πράγμα που θέλω να καταστήσω απολύτως σαφές σε αυτήν τη σειρά είναι ότι κανένας από εμάς δεν πρέπει να είναι JavaScript κατά της βανίλιας. "Βανίλια" που σημαίνει "ωμή" ή "εγγενής" JavaScript. JavaScript που εκτελείται στο πρόγραμμα περιήγησης χωρίς πλαίσια ή βιβλιοθήκες ή οτιδήποτε άλλο. Στην πραγματικότητα, εάν αυτό δεν είναι προφανές, το ίδιο το jQuery είναι γραμμένο σε JavaScript βανίλιας. Πρέπει να είναι, για να δουλέψει. Είμαι βέβαιος ότι καλεί εσωτερικά τις δικές του μεθόδους και μερικές φορές, αλλά στον πυρήνα «είναι απλώς JavaScript».
Κατά κανόνα, εάν εργάζομαι σε έναν ιστότοπο στον οποίο χρησιμοποιεί μια χούφτα JavaScript για την εκτέλεση ορισμένων μικρών εργασιών (π.χ. απόκρυψη / εμφάνιση μερικών πραγμάτων), θα έμαθα να μην χρησιμοποιώ βιβλιοθήκη όπως το jQuery. Οτιδήποτε παραπάνω και πέρα από αυτό και η βιβλιοθήκη θα αξίζει το βάρος της. Στην πραγματικότητα, δεν έχω δουλέψει ποτέ σε κανέναν ασήμαντο ιστότοπο που δεν χρησιμοποίησε το jQuery.
Ανεξάρτητα από το αν εργάζεστε σε έναν ιστότοπο που τον έχει ή όχι, είναι καλό να μάθετε τουλάχιστον τα βασικά στο JavaScript βανίλιας. Μου αρέσει πολύ αυτό το άρθρο NetTuts + που δείχνει ισοδύναμα (και ένα άλλο καλό). Αναφέρομαι σε αυτό τακτικά:
$('a').on('click', function() ( ));είναι ουσιαστικά αυτό:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Ξεκινώντας από το βίντεο, είχαμε ένα κουμπί σαν αυτό:
ButtonΚαι καθώς έχουμε κάνει ξανά και ξανά, έχουμε μια αναφορά σε αυτό ως εξής:
$("#press");Για να λάβουμε αυτό το στοιχείο σε JavaScript βανίλιας θα μπορούσαμε:
document.getElementById("press");Αυτά τα πράγματα δεν είναι αρκετά ισοδύναμα επειδή η έκδοση jQuery είναι στην πραγματικότητα ένα αντικείμενο jQuery που σημαίνει ότι μπορεί να κάνει όλα αυτά τα ειδικά πράγματα jQuery (π.χ. κάθε μέθοδο jQuery). Αλλά είναι ακριβώς το ίδιο με:
$("#press")(0);Είναι σημαντικό να γνωρίζουμε πότε έχουμε μια αναφορά σε ένα τέτοιο στοιχείο, έχουμε κάθε είδους χρήσιμες πληροφορίες για αυτό. Συγχωρήστε το τεράστιο μπλοκ, αλλά αξίζει τον κόπο να οδηγήσετε αυτό το σπίτι. Ακολουθούν μόνο μερικά από αυτά που βγάζουμε από αυτήν την αναφορά κουμπιού (όπως λήφθηκε από το 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Στο βίντεο αγγίζουμε τη χρήση tagName, το οποίο μπορεί να είναι χρήσιμο όταν αποφασίζετε εάν κοιτάτε το σωστό στοιχείο σε ένα συμβάν (μερικές φορές τα συμβάντα μπορεί να ενεργοποιήσουν ένθετα στοιχεία και πρέπει να βεβαιωθείτε).
Εξετάζουμε επίσης κάποια δεσμευτική εκδήλωση «παλιού σχολείου» με πράγματα όπως η ρύθμιση του onclickακινήτου. Είναι προβληματικό λόγω του πόσο εύκολο είναι να αντικατασταθεί. Δεν χρειάζεται καν να σκεφτούμε (πολλά) για αυτά τα πράγματα με το jQuery επειδή οι μέθοδοι δεσμεύσεων συμβάντων δεν αντικαθιστούν άλλους. Ναι, καλό σχεδιασμό API.
Όσον αφορά την εύρεση στοιχείων, υπάρχει επίσης το getElementsByClassName, το querySelector και το querySelectorAll (το οποίο υπάρχει ακόμη και λόγω βιβλιοθηκών όπως το jQuery) που αξίζει να γνωρίζετε.
Μπορείτε να μάθετε για τη βανίλια JavaScript από το ίδιο το jQuery! Ο Paul Irish έχει μερικά καλά βίντεο για πράγματα που έχει μάθει από το να βλέπει την πηγή του.