Vanilla JavaScript'in Neden Web'in Geleceği Olduğunu Keşfedin

Daha önce jQuery veya Underscore.js gibi kitaplıklar kullandıysanız elinizi kaldırın. Utanma, burası güvenli bir yer mi?… Ayrıca, onları kullandığını biliyorum. Neden olmasın? İçerdikleri tüm yardımcı programlar hayatımızı kolaylaştırıyor ve zaten WordPress Core'a dahil edilmişler, değil mi? Ancak şu soruyu düşünün: sırf yapabiliyor diye bir kütüphaneyi kullanmak mantıklı mı? Ne kullandığınıza ve neden kullandığınıza daha fazla dikkat etmeniz gerekmez mi?

Bugün kısaca bu kütüphanelerden ve çözmeye çalıştıkları problemlerden bahsetmek istiyorum. Ardından, daha hızlı ve hafif bir alternatif olan Vanilla JavaScript kullanarak bu sorunların çoğunun nasıl kolayca çözülebileceğini tartışacağız.

JavaScript Kitaplıkları

Bir kitaplığın amacı , az çok karmaşık bir dizi işlemi soyutlamak ve kullanışlı, kullanımı kolay işlevlerle bir API oluşturmaktır. Örneğin, jQuery ile DOM'yi manipüle etme, olayları yönetme, animasyon oluşturma vb. işlemleri gerçekleştirebilirsiniz. Bunu yapmak için jQuery, tüm büyük tarayıcılarla uyumlu, net ve özlü bir API sunar.

Kitaplıklar geliştiriciler için araç setleridir; daha verimli olmamıza yardımcı olurlar. Aslında, jQuery'nin logosunda bir kitaplığın ne olduğunun mükemmel bir özetini bulacaksınız: “daha ​​az yaz, daha fazlasını yap”. Amaç bu: tanımı gereği olmayanı kolaylaştırmak.

jQuery

jQuery ilk olarak 2006'da, sürpriz yapmak üzere tasarlanmış bir çapraz platform JavaScript kitaplığı olarak piyasaya sürüldü! — HTML'nin istemci tarafı komut dosyasını basitleştirin . Sözdizimi, bir belgede gezinmeyi, DOM öğelerini seçmeyi, animasyonlar oluşturmayı, olayları işlemeyi ve Ajax uygulamaları geliştirmeyi kolaylaştırmak için tasarlanmıştır. Ayrıca, eklentiler kullanılarak kütüphane kolayca genişletilebilir. En iyi bilinen uzantılarından biri, "bir dizi kullanıcı arayüzü etkileşimleri, efektler, widget'lar ve temalar" olan jQuery UI'dir.

Bu kitaplığı henüz bilmiyorsanız (gerçekten?), Wikipedia'nın makalesi, özellikleri ve geçmişi hakkında oldukça iyi bir genel bakışa sahiptir. Ardından, temel bilgileri öğrenmek ve bundan en iyi şekilde yararlanmak için resmi belgelere veya herhangi bir çevrimiçi eğitime geçebilirsiniz.

alt çizgi.js

Diğer bir yaygın kitaplık (ancak jQuery kadar ünlü değil), çeşitli yardımcı işlevler içeren Underscore.js'dir. Bazı yaygın örnekler, işlev map (her öğeyi farklı bir şeye eşleyerek bir diziyi diğerine dönüştürmek için), filter (belirli bir koşulu karşılayan öğeleri filtrelemek için) veya pluck (bir nesne dizisini bir değerler dizisine dönüştürmek için) söz konusu nesnelerin bir özelliğinden çıkarılmıştır), diğerleri arasında.

Underscore.js'nin "bu kadar" popüler olmasının nedenlerinden biri, MVC çerçevesi Backbone ile olan ilişkisidir. Omurga, veri modelleri ve görünümleri oluşturmak için gerekli tüm araçları sunar ve her şeyi kendi olay sistemi ile bağlar. Bu çerçeveyi bilmiyorsanız, belki hepsi Omurga alternatifleri olan React, Angular veya Vue'yi duymuşsunuzdur. Bizim açımızdan temel fark, Backbone ve Underscore.js'nin WordPress Core'a dahil edilmesidir.

Dezavantajı

Peki, eğer kütüphaneler bu kadar harikaysa, işimizi bu kadar kolaylaştırıyorsa… Neden onları kullanmayalım? Pekala, jQuery, Underscore.js veya Backbone gibi kitaplıkların temel sorunu ağırlıklarıdır. Örneğin, jQuery yaklaşık 250 kb'dir (küçültülmüşse 90 kb). O kadar da kötü değil, ha? Ancak, aylık 50.000 ziyaretçiniz varsa, jQuery 4Gb tüketecektir! Bence kendinize şu soruyu sormalısınız: Bu kütüphaneye gerçekten ihtiyacım var mı? Yoksa teknolojiyi zaten bildiğim için mi kullanıyorum?

Her yerde jQuery kullanırdım. Çözmeye çalıştığım problemin ne kadar kolay veya karmaşık olduğu önemli değildi – jQuery kullanmak sadece… uygundu. Örneğin, sayfamdaki bir metni değiştirmek isteseydim, öğeyi almak ve kolayca düzenlemek için jQuery yüklerdim ( $('.element').text('text') ). Tabii ki, bu yanlış bir karardı.

Tüm Sorunlarınızın Çözümü—Vanilla JavaScript

Eh, muhtemelen tüm sorunlarınız değil – ama birçoğu! JavaScript son birkaç yılda çok değişti ve gelişti ve bugün bu JS kitaplıklarının yapmamıza yardımcı olduğu şeylerin çoğunu bu kitaplıkları hiç yüklemeden yapabiliriz! Lafı fazla uzatmadan, vanilya JavaScript ile yapabileceğiniz her şeyin 6 örneğine bir göz atalım.

1. Vanilla JavaScript ile DOM öğelerini seçme

DOM öğelerini seçerek çoğumuzun bu özellik için jQuery kullandığımızı söyleyebilirim. jQuery'nin bunu yapmak için kısa ve verimli bir sözdizimi vardır, ancak Vanilla JavaScript de oldukça zariftir:

Tabii, biraz daha ayrıntılı… ama 90 kb uzunluğunda değil, değil mi? Ayrıca, yerel işlemleri kullanmak her zaman bir üçüncü taraf kitaplığına güvenmekten daha hızlıdır.

Şimdi, ne düşündüğünüzü biliyorum: Vanilla JavaScript'teki sorun uzunluğu değil, eleman seçimini tamamen değiştirdiğimiz gerçeğidir – jQuery'de CSS kullanabiliriz, oysa Vanilla JS'de öğeleri ID'ye göre seçmek için özel fonksiyonlarımız vardır. , sınıf veya düğüm türü. Haklısın, ancak Vanilla JavaScript'te CSS ifadelerini kullanarak öğeleri de seçebilirsiniz:

2. DOM'u Geçmek

DOM ile çalışırken bir başka yaygın işlem de DOM ağacını geçmektir—bir öğeden diğerine, alt öğeden üst öğeye vb. Tüm bu işlemler Vanilla JavaScript'te bulunur ve jQuery'yi gereksiz kılar:

3. Nitelikleri Ayarlama ve Alma

Bir elementimiz olduğunda, muhtemelen onu bir şekilde değiştirmek veya belirli bir özellik elde etmek isteyeceğiz. Bu hem jQuery hem de Vanilla JavaScript'te oldukça kolaydır:

4. DOM'den Birden Çok Düğümle Çalışma

jQuery'de bulunan harika özelliklerden biri de komut zincirleridir. Örneğin, bir dizi öğe seçebilir ve tüm koleksiyona bir işlem (bir sınıf eklemek gibi) uygulayabilirsiniz:

Ne yazık ki, bunu Vanilla JavaScript kullanarak yapamazsınız. Bir koleksiyona dahil edilen tüm öğelere bir işlem uygulamak istiyorsanız, bir döngü yapısı kullanarak hepsini yinelemeniz gerekir:

Elbette jQuery dahili olarak bunu yapar. Ama yine, sözdizimi o kadar kullanışlı ki işleri daha kolay ve hızlı hale getiriyor. Ancak, tam açıklama, ECMAScript 6'da (JavaScript dilinin yeni sürümü) diziler arasında yineleme yapmak da oldukça kolay ve zariftir. Bir sonraki bölümde size birkaç örnek göstereceğim?

5. Dizilerle Çalışmak

Dizilerle çalışmak için Underscore.js'de bulunan bazı yardımcı programlardan daha önce bahsetmiştik. Eh, neredeyse hepsinin vanilya JavaScript'inde karşılığı var:

Gördüğünüz gibi, sözdizimi ve işlev adları çok benzer, öyleyse neden birini diğerinin üzerinde kullanasınız? JavaScript işlevleri biraz daha hızlıdır (Underscore.js, mevcut olduğunda Vanilla JavaScript işlevlerini kullanır) ve bir standardın parçasıdırlar, oysa üçüncü taraf kitaplıkları birbirinden farklı olabilir (biraz farklı işlev adları veya parametre sırası), bu da onu daha iyi hale getirir. aşina olmadığınız bir kitaplığı kullanan bir kodu anlamanız zor.

Son olarak, önceki bölümde gördüğümüz zincirleme komutu uygulamak için ECMAScript 6 işlevlerini ve sözdizimini nasıl kullanabileceğimizi merak ediyorsanız, işte burada:

Temel olarak, querySelectorAll kullanarak birden çok öğe seçiyoruz ve forEach operatörünü kullanarak sonuçtaki tüm öğelere bir lambda işlevi uyguluyoruz. Gördüğünüz gibi, ECMAScript 6'daki lambda işlevleri, tüm sözdizim şekerinden kurtuldu ve daha özlü ifade edilebilir. Havalı değil mi?

6. Nesnelerle Çalışmak

Son olarak, kendinizi sık sık nesnelerle çalışırken bulacağınızdan eminim – bir nesnenin tüm niteliklerini almak, değerlerini çıkarmak vb. işlemler çok yaygındır. Underscore.js ve vanilya JavaScript bu konularda oldukça iyidir:

Nesne dizileriyle çalışmak için Underscore.js'de bulunan en sevdiğim işlevlerden biri pluck . Bu işlev, dizideki tüm öğelerden belirli bir özelliğin değerini alarak yeni bir dizi oluşturur. Underscore.js işlevini ve onun vanilya JS karşılığını (yine ECMAScript 6 kullanarak) karşılaştırırsanız, her iki alternatifin de tam olarak aynı sayıda karakter aldığını göreceksiniz, bu oldukça güzel:

Toplama

Vanilya JavaScript kullanarak bugün yapabileceğimiz pek çok şey var ve üçüncü taraf kitaplıklarını gereksiz hale getiriyor. Bu kitaplıkları körü körüne kullanmayı bırakın ve projeniz için gerçekten gerekli olup olmadıklarını düşünün. Eğer öyleyse, onları kesinlikle dahil edin. Ama değillerse, Vanilla JS kullanmayı deneyin ve web'in geleceğine alışın!

Unsplash aracılığıyla Ilya Ilyukhin'in Öne Çıkan Resmi.