Một điều tôi muốn làm rõ trong loạt bài này là không ai trong chúng ta nên phản đối JavaScript. “Vanilla” có nghĩa là JavaScript “thô” hoặc “gốc”. JavaScript chạy trong trình duyệt mà không có bất kỳ khuôn khổ hoặc thư viện nào hoặc bất kỳ thứ gì khác. Trên thực tế, nếu điều này không rõ ràng, thì bản thân jQuery được viết bằng JavaScript vani. Nó phải được, để làm việc. Tôi chắc chắn rằng nội bộ nó gọi đó là các phương thức riêng và đôi khi như vậy, nhưng cốt lõi là “nó chỉ là JavaScript”.
Theo nguyên tắc chung, nếu tôi đang làm việc trên một trang web sử dụng một số ít JavaScript để thực hiện một số tác vụ nhỏ (ví dụ: ẩn / hiển thị một vài thứ), tôi sẽ học cách không sử dụng thư viện như jQuery. Bất cứ điều gì ở trên và hơn thế nữa và thư viện sẽ có giá trị. Trên thực tế, tôi chưa từng làm việc trên bất kỳ trang web tầm thường nào không sử dụng jQuery.
Bất kể bạn đang làm việc trên một trang web có hay không, bạn nên tìm hiểu ít nhất những điều cơ bản trong JavaScript vani. Tôi khá thích bài viết này của NetTuts + cho thấy các điểm tương đương (và một bài viết tốt khác). Tôi tham khảo cái này thường xuyên:
$('a').on('click', function() ( ));về cơ bản là thế này:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Bắt đầu từ video, chúng tôi có một nút như sau:
ButtonVà như chúng tôi đã làm đi làm lại, chúng tôi có tham chiếu đến nó như sau:
$("#press");Để có được phần tử đó trong vanilla JavaScript, chúng ta có thể:
document.getElementById("press");Những thứ đó không hoàn toàn tương đương vì phiên bản jQuery thực sự là một đối tượng jQuery, nghĩa là nó có thể thực hiện tất cả những thứ jQuery đặc biệt đó (ví dụ: mọi phương thức jQuery đơn lẻ). Nhưng nó giống hệt như:
$("#press")(0);Điều quan trọng là phải biết khi chúng ta tham chiếu đến một phần tử như vậy, chúng ta có tất cả các loại thông tin hữu ích về nó. Hãy tha thứ cho khối khổng lồ, nhưng nó đáng để lái nó về nhà. Đây chỉ là một số thông tin chúng tôi lấy ra từ tham chiếu nút đó (được lấy từ 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__: HTMLButtonElementTrong video mà chúng tôi đề cập khi sử dụng tagName, video này có thể hữu ích khi bạn xác định xem mình có đang xem đúng phần tử trong một sự kiện hay không (đôi khi các sự kiện có thể kích hoạt trên các phần tử lồng nhau và bạn cần đảm bảo).
Chúng tôi cũng xem xét một số sự kiện “old school” ràng buộc với những thứ như thiết lập thuộc onclicktính. Đó là vấn đề vì quá dễ dàng ghi đè. Chúng tôi thậm chí không phải suy nghĩ (nhiều) về những thứ đó với jQuery vì đó là các phương thức ràng buộc sự kiện không ghi đè lên các phương thức khác. Yay thiết kế API tốt.
Về việc tìm kiếm các phần tử, cũng có getElementsByClassName, querySelector và querySelectorAll (thậm chí tồn tại nhờ các thư viện như jQuery), tất cả đều đáng biết.
Bạn có thể tìm hiểu về JavaScript vani từ chính jQuery! Paul Irish có một số video hay về những điều anh ấy học được khi xem nguồn của nó.