Bu seride kesinlikle açıklığa kavuşturmak istediğim bir şey, hiçbirimizin anti vanilya JavaScript olmaması gerektiğidir. "Vanilya", "ham" veya "yerel" JavaScript anlamına gelir. Herhangi bir çerçeve veya kitaplık veya başka bir şey olmadan tarayıcıda çalışan JavaScript. Aslında, bu açık değilse, jQuery'nin kendisi vanilya JavaScript ile yazılmıştır. Çalışmak için olmalı. Eminim dahili olarak kendi yöntemlerini çağırır ve bu tür bazen, ama özünde "sadece JavaScript".
Genel bir kural olarak, bazı küçük görevleri gerçekleştirmek için bir avuç JavaScript kullanan bir sitede çalışıyorsam (örneğin, birkaç şeyi gizleme / gösterme), jQuery gibi bir kitaplık kullanmamayı öğrenirim. Bunun ötesinde ve ötesinde her şey ve kütüphane ağırlığına değer olacaktır. Aslında, jQuery kullanmayan, önemsiz olmayan hiçbir web sitesinde hiç çalışmadım.
Buna sahip olan veya olmayan bir sitede çalışıyor olsanız da, en azından vanilya JavaScript ile ilgili temel bilgileri öğrenmek iyi bir şeydir. Eşdeğerleri (ve başka bir iyi olanı) gösteren bu NetTuts + makalesini oldukça beğendim. Buna düzenli olarak atıfta bulunuyorum:
$('a').on('click', function() ( ));aslında şudur:
().forEach.call( document.querySelectorAll('a'), function(el) ( el.addEventListener('click', function() ( ), false); ));Videodan başlayarak, şöyle bir düğmemiz vardı:
ButtonVe şimdi defalarca yaptığımız gibi, buna şöyle bir referansımız var:
$("#press");Bu öğeyi vanilya JavaScript'te almak için şunları yapabiliriz:
document.getElementById("press");Bu şeyler tamamen eşdeğer değildir çünkü jQuery sürümü aslında bir jQuery nesnesidir, yani tüm o özel jQuery şeylerini yapabilir (örneğin her bir jQuery yöntemi). Ama şununla tamamen aynı şey:
$("#press")(0);Böyle bir unsura atıfta bulunduğumuzda, onun hakkında her türlü yararlı bilgiye sahip olduğumuzu bilmek önemlidir. Büyük bloğu affedin, ama bu eve gitmeye değer. İşte bu düğme referansından aldığımız şeylerden bazıları (Google Chrome DevTools'tan alınmıştır):
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__: HTMLButtonElementKullanmaya değindiğimiz videoda tagName, bir olayda doğru öğeye bakıp bakmadığınızı belirlerken faydalı olabilir (bazen olaylar iç içe geçmiş öğelerde tetiklenebilir ve emin olmanız gerekir).
Ayrıca, onclickmülkü ayarlamak gibi şeylerle bazı "eski okul" etkinliklerine de bakıyoruz . Üzerine yazmak ne kadar kolay olduğu için sorunludur. JQuery ile bu şeyler hakkında (fazla) düşünmemize bile gerek yok çünkü olay bağlama yöntemleri başkalarının üzerine yazmıyor. Yay iyi API tasarımı.
Elemanları bulmaya gelince, hepsi bilinmeye değer olan getElementsByClassName, querySelector ve querySelectorAll (jQuery gibi kütüphaneler nedeniyle bile var olan) vardır.
JQuery'nin kendisinden vanilya JavaScript hakkında bilgi edinebilirsiniz! Paul Irish, kaynağına bakarak öğrendiği şeylerle ilgili güzel videolara sahip.