Pure Js – Vanilla JavaScript

İki dizinin eşit olup olmadığını kontrol etmek – Pure JS

Bu durumdan daha önce bahsetmiştik, ama genede bir köşeye ekleyelim:
– Pure JS,
– Vanilla JS,
– Plain JS
üçlemelerinin anlamları aynı kapıya dayanır. Her üçü de saf javaScript kullanarak bir takım kod blokları elde etme yöntemidir. Kısacası seçicileri içeren ek kütüphaneler bulunmaz. Buna bağlı olarak sadece kullandığınız yardımcı fonksiyonları kullanabilirsiniz.

Adım 1

Eşitliği kontrol etmek için önce dizilerin aynı uzunlukta olduğundan emin olmamız gerekir. Olmazsa, eşit değiller ve return false yapabiliriz (döndürebiliriz).

var arraysMatch = function (arr1, arr2) {

	// İlk önce dizilerin öge sayıları eşit mi onu kontrol et
	if (arr1.length !== arr2.length) return false;

};

Adım 2 [#1,#2]

İki dizinin tümü aynı ögelere sahipse bile, ancak farklı bir düzende dizilmişler ise kesinlikle eşit değillerdir.

#Adım 2:1

İlk dizideki her öge arasında döngü kuracağız ve dizinin (ideğişkeni sayesinde) ikinci dizideki aynı ögenin diziniyle aynı olup olmadığını kontrol edeceğiz. Değilse (ya da öge hiç mevcut değilse), geri göndereceğimiz değer: return false.

var arraysMatch = function (arr1, arr2) {

	// İlk önce dizilerin öge sayıları eşit mi onu kontrol et
	if (arr1.length !== arr2.length) return false;

	// Tüm ögelerin aynı olup olmadığını kontrol et
	for (var i = 0; arr1.length < i; i++) {
		if (arr1[i] !== arr2[i]) return false;
	}

};

#Adım 2:2

Her şey kontrol edildiğinde, eşitlik devam ediyorsa geri göndereceğimiz değer: return true.

Not: Burada dikkat edilmesi gereken durum EĞER(IF) koşulu gerçekleşirse fonksiyondan dışarı FALSE değeri ile döndüğünden ötürü, bunların hiç biri gerçekleşmezse (Koşulsuz + şartsız) direkt olarak TRUE değeri döndüre bilmemizdir.

Getting Full Function Helper

var arraysMatch = function (arr1, arr2) {

	// İlk önce dizilerin öge sayıları eşit mi onu kontrol et
	if (arr1.length !== arr2.length) return false;

	// Tüm ögelerin aynı olup olmadığını kontrol et
	for (var i = 0; i < arr1.length; i++) {
		if (arr1[i] !== arr2[i]) return false;
	}

	// True döndür
	return true;
};

Ayrıca Bkz.

Bir ögenin içeriğini boşaltmak

Bir ögenin tüm alt düğümlerini DOM’dan kaldırmak için (Temizlemek) aşağıdaki kodu kullanın.

var el = document.querySelector('div');
el.innerHTML = '';

Vanilla JS ile Animasyon Fonksiyonu Kullanımı

Hızlı bir özet

Buradaki yaklaşım, karmaşık JS kodlarına güvenmek yerine, öge’deki CSS animasyonlarını tetikleyen bir sınıf eklemeyi/çıkarmayı içerir. Ki bundan daha önce bahsetmiştik.

<h1 id="elem">Animate</h1>

<button class="show">Show</button>
<button class="hide">Hide</button>

var elem = document.querySelector('#elem');
document.addEventListener('click', function (event) {

	if (event.target.matches('.show')) {
		elem.removeAttribute('hidden');
		elem.classList.add('fadeInDown');
	}

	if (event.target.matches('.hide')) {
		elem.setAttribute('hidden', 'true');
		elem.classList.remove('fadeInDown');
	}

}, false);

Getting Full Setup

 * Apply a CSS animation to an element
 * @param  {Node}    elem      The element to animate
 * @param  {String}  animation The type of animation to apply
 * @param  {Boolean} hide      If true, apply the [hidden] attribute after the animation is done
 */
var animate = function (elem, animation, hide) {

	// If there's no element or animation, do nothing
	if (!elem || !animation) return;

	// Remove the [hidden] attribute
	elem.removeAttribute('hidden');

	// Apply the animation
	elem.classList.add(animation);

	// Detect when the animation ends
	elem.addEventListener('animationend', function endAnimation (event) {

		// Remove the animation class
		elem.classList.remove(animation);

		// If the element should be hidden, hide it
		if (hide) {
			elem.setAttribute('hidden', 'true');
		}

		// Remove this event listener
		elem.removeEventListener('animationend', endAnimation, false);

	}, false);

};

Vanilya (Vanilla) JS nedir?

Aslına bakarsanız Vanilla JS, Pure JS ve Plain JS terimlerinin hepsi aynı şeyi ifade eder. Bu ifade “vanilla.js” isimli bir kütüphaneden gelmektedir ki onun da temelinde bir espri yatar.

Bu terimleri daha fazla açmak gerekirse, jQuery gibi bir takım seçici motorlar (Selector Engine) bizlere JavaScript yazmakta çok büyük kolaylıklar sağlar. Ancak bu gibi motorlar çok büyük kitlelere hitap ettiklerinden gittikçe büyüdüler. Böylelikle kütüphane havuzunda barındırdıkları yardımcı kodlar gittikçe arttı. Neticede toplam kod satırları ve dolayısıyla kapladıkları dosya boyutları da aynı oranda artış sergiledi ki, bu durum performansı da bir o kadar etkiledi.

JQuery gibi motorları kullandığımızda bir işlev yazmak için harcadığımız emek/iş gücü düşerken jQuery’in tüm kütüphanelerini çağırmak zorunda kaldığımızdan dolayı yazdığımız kod’un internet tarayıcıları, dolayısıyla insanlar üzerindeki performansı da oldukça düşük olmaya başladı.

Bu durumu şöyle ifade edebiliriz; bir pankek yapmak için koca bir fırın inşa ediyor ve o fırının içinde sadece kek üretimi yapıyoruz. Oldukça saçma değil mi? İşte kullanmadığımız bir yığın işlevleri içeren o motorları kullanmak da oldukça saçma.

İşte size jQuery vs. (saf) JavaScript performans diyagramı:

Bu arada eminim Opera’nın JavaScript performansının Google Chrome’e dan daha iyi olduğu sizin de gözünüzden kaçmamıştır 😉

Nedir bu vanilla.js ?

Yazımızda daha önce de bahsettiğimiz üzere vanilla.js tamamen bir espriden ibaret. Asıl internet sitesi: http://vanilla-js.com/ olan ve her ne kadar şakacıktan da olsa bir framework’dur kendisi.

Yani: vanilla.js = Vanilla JS = Pure JS = Plain JS = (Saf) JavaScript

Zaten vanilla.js dosyasını indirmek isterseniz içinin boş olduğunu göreceksiniz. Seçici kütüphanelerinden hangisini tıklarsanız tıklayın Script’in dosya boyutunda bir değişiklik olmadığını ve 0KB olduğunu göreceksiniz.

Bu bir sitem midir? Yoksa espri mi? Bilinmez! Fakat bir amaca hizmet ettiği pekala ortada.

Ne yapmalı?

Artık bir seçici motor’u ve/veya framework kullanır mısınız? Yoksa projelerinizi biraz daha emek harcayıp saf JS ile mi kodlarsınız orası size kalmış. İşte pırasa, işte sapı!