Ağustos 15, 2022
İçindekiler
JavaScript'in yeni bir sürümünde parlak yeni bir özellik kullanmak isteyip de tarayıcı uyumluluğu nedeniyle yapamadığınız oldu mu? Belki ekibiniz yeni ES2015 özelliklerini denemek istiyor, ancak pek çok tarayıcı henüz desteklemediği için yapamıyor mu?
Yukarıdaki durumlardan herhangi biri size uyuyorsa, muhtemelen kodunuzun çoğu tarayıcı sürümünde çalışan bir sürümünü oluşturmak için bir aktarıcı kullanmışsınızdır. Bu, çok çeşitli tarayıcı sürümlerini desteklemeye devam ederken daha yeni özellikleri kullanmanıza olanak tanır.
Ancak, yalnızca az sayıda özellik kullanmak istiyorsanız, bir aktarıcı aşırı yüklenebilir – bazıları paket boyutunu artıran önemli bir ek yük ekler. Bu gibi durumlarda, bir çoklu dolgu daha iyi sonuç verebilir.
Bu makalede, aşağıdaki konuları kapsayan, React uygulamalarınızda çoklu dolguların nasıl kullanılacağını tartışacağız:
Çoklu dolgu, desteklenen API'leri kullanarak istenen davranışı taklit eden bir geri dönüş ekleyerek bir tarayıcı (veya belirli bir tarayıcı sürümü) tarafından desteklenmeyen özellikleri kullanmanıza olanak tanır. Daha eski tarayıcılar tarafından desteklenmeyen
String.padEnd gibi bir JavaScript özelliğini kullanmak istediğinizde çoklu dolgu kullanabilirsiniz.
Henüz desteklemeyen tarayıcılar için bir geri dönüş ekleyerek, tüm tarayıcılarda çalışması garanti edilen kodu gönderirken bu tür yeni özellikleri geliştirme aşamasında kullanabilirsiniz.
Çoğu büyük tarayıcı, yeni JavaScript ve CSS özellikleri için destek içerecek şekilde düzenli olarak güncellenir, ancak birçok kişi tarayıcılarını neredeyse hiç güncellemez, bu da aktarıcılara ve çoklu dolgulara duyulan ihtiyacın ortaya çıktığı yerdir.
İdeal bir dünyada, herkes yeni özellikleri gönderildikleri anda desteklemek için tarayıcılarını hemen günceller ve bizim kodumuzu aktarmamız gerekmez. Ancak o gün gelene kadar tarayıcıların eski sürümlerini desteklememiz gerekiyor.
Bir React uygulamasında
String.padEnd kullanarak çok basit bir özelliği uygulayalım.
String.padEnd , ECMAScript 2019'da
String.padStart ile birlikte piyasaya sürüldü ve şu anda her büyük tarayıcının en son sürümü tarafından destekleniyor (artık Internet Explorer'dan bahsetmiyoruz).
Ancak, bu eski sürümlerde destek olmadan çalışmasını sağlamak için bir çoklu dolgu ekleyeceğiz. İlk önce polyfill'imizi yazacağız ve sonra bizim için işlemesi için özel bir polyfill kitaplığı kullanmaya bir göz atacağız. Her iki yaklaşımı da uygulayarak, çoklu dolguların nasıl biraz daha iyi çalıştığını anlamalıyız.
“Haftanın her gününü bir emoji ile görebilmek istiyorum” diyen bir kullanıcı düşünelim. Hafta içi günler tablo formatında gösterilmelidir.”
Bu, bir tablo görünümünü simüle etmek için hafta içi gün ve buna karşılık gelen emoji arasında eşit boşluklar oluşturmak için
padEnd işlevini kullandığımız çok basit bir özelliktir. Aptalca bir özellik ama umarım çoklu dolguların nasıl çalıştığını öğrenmek için yeterli olur.
Başlamak için, bir başlangıç React ve Vite şablonu içeren bu depoyu kopyalayın.
Hazır bir şablon almak için terminalinizi açın ve aşağıdaki komutu çalıştırın.
git klon https://github.com/ovieokeh/react-polyfill-tutorial.git
Yeni oluşturulan klasöre gidin.
cd tepki-polyfill-eğiticisi
Gerekli bağımlılıkları kurun ve uygulamayı başlatın.
npm kurulumu npm çalıştırma dev
String.padEnd özelliğine sahip olmadığımı simüle etmek için bir tarayıcının eski sürümlerini indirmek zahmetli olacaktır ve bu nedenle HTML'ye
padEnd
String prototipinden silen bir komut dosyası ekledim. Bu komut dosyasını görüntülemek için
index.html dosyasını açın.
Aşağıdaki tasarımı görmelisiniz:
Artık projemizi çalıştırdığımıza göre tablolu tasarımı uygulayalım.
src/App.jsx dosyasını tercih ettiğiniz düzenleyicide açın ve
day.name özniteliğini 23 boşlukla doldurmak için 29. satırı güncelleyin.
// Uygulama.jsx // ... satır 28 const günAdı = gün.adı.padEnd(23); // ... satır 30
Şimdi, değişikliklerinizi kaydedin ve sonucu tarayıcıda görüntüleyin.
String.padEnd özelliğine sahip olmayan tarayıcıyı simüle ettiğimiz için tarayıcı konsolunuzda bir hata fark edeceksiniz.
Bunu polyfill'imizi yazarak düzeltebiliriz.
App bileşeninin üzerinde bir yorum olduğuna dikkat edin (deponun 13. satırı). Oraya şöyle bir kod ekleyelim:
// ... satır 13 if (!String.prototype.padEnd) { konsol.log("padEnd desteklenmiyor. Polyfill kullanılıyor."); String.prototype.padEnd = function padEnd(targetLength, padString) { hedefUzunluk = typeof targetLength !== "sayı" || hedefUzunluk < 0 ? 0 : hedefUzunluk; padString = String(padString || " "); if (this.length > targetLength) String(this); targetLength = targetLength - this.length; if (targetLength > padString.length) { padString += padString.repeat(targetLength / padString.length); } return String(this) + padString.slice(0, targetLength); }; } // ... satır 32
Çoklu dolgunun içeriği, bir tarayıcıda bulunmayabilecek bir özellik olan
String.padEnd için bir geri dönüş sağladığımız gerçeği kadar önemli değildir. (Tabii ki kesinlikle okumanızı tavsiye ederim.) Geri dönüş ,
String.padEnd için ECMAScript spesifikasyonunu uygular .
Özetle, mevcut tarayıcı çalışma zamanında
padEnd özelliğinin desteklenip desteklenmediğini görmek için bir kontrol ekliyoruz ve desteklenmiyorsa, resmi ECMAScript belirtimlerinde özetlenen davranışı uygulayan bir geri dönüş sağlıyoruz.
Tarayıcıya geri dönerseniz, hatanın ortadan kalktığını ve tasarımın beklediğimiz gibi göründüğünü görmelisiniz.
Bu aşamadaki kodunuz şöyle görünmelidir:
Artık elle bir çoklu dolgu yazdığımıza göre, umarız çoklu dolguların nasıl çalıştığı hakkında daha fazla bilgi sahibi olursunuz. Bununla birlikte, programlamadaki çoğu şeyde olduğu gibi, yalnızca çoklu dolgu sağlamak amacıyla var olan kütüphaneler zaten vardır.
Bir özelliğin varlığını kontrol etmek ve ardından manuel olarak bir çoklu dolgu eklemek yerine, sizin için aynı şeyi yapacak çoklu dolgu koleksiyonuna sahip bir kitaplık kullanabilirsiniz.
Polyfill kitaplığı kullanmanın iki temel yolunu inceleyelim;
Ayrıca bir CDN'den çoklu dolguları yüklemek için birden fazla seçenek mevcuttur. En popüler olanı muhtemelen Polyfill.io'dur , bu yüzden onu örnek olarak kullanacağız. Bununla birlikte, konsept yine de bir CDN URL'si olan diğer herhangi bir çoklu doldurma kitaplığı için geçerli olmalıdır.
index.html dosyasını açın ve dosyanın altına bir
<``script``> etiketi ekleyin.
// ... satır 16 <script erteleme src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.padEnd|always"></script> // ... satır 18
React betiğinin çalışmasını engellemesini önlemek için betik etiketindeki
defer niteliğini kullanırız.
defer özelliği hakkında daha fazla bilgiyi buradan okuyun.
String.prototype.padEnd özelliğinin bir çoklu dolgusunu ekliyoruz ve
|always bayrağını geçiyoruz. Bu, CDN'yi çoklu dolguyu döndürmeye zorlayacaktır, çünkü yalnızca
padEnd özelliğini desteklemeyen tarayıcılar bir JavaScript paketi alacaktır (unutmayın, çoğu büyük tarayıcı
padEnd zaten destekler, bu nedenle
|always işareti olmadan çoklu dolgu döndürülmez).
Şimdi
App.jsx dosyasına dönebilir ve daha önce eklediğimiz manuel polyfill'i silebilirsiniz. Sayfayı yenileyin ve uygulamanın hala iyi çalıştığını onaylayın. Konsolu günlükler açısından incelerseniz, yerel
String.prototype.padEnd işlevini silmeye devam ettiğimizi fark edeceksiniz.
Bu örnek için Polyfill.io kullanmış olsak da, konsept, CDN sürümü mevcut olan herhangi bir polyfill kitaplığı için geçerlidir.
Bu aşamadaki kodunuz şöyle görünmelidir.
Polyfill kitaplığını kullanmanın başka bir yolu da
npm . JavaScript özellikleri için çoklu dolgular sağlamanıza izin verecek
npm yükleyebileceğiniz paketler vardır.
Açık ara en popüler olanı
core-js , bu yüzden bu örnek için bunu kullanacağız, ancak diğer kitaplıkların çoğunun benzer bir kuralı izlemesi gerektiğini düşünüyorum.
Terminalinizi proje kökünde açın ve
core-js paketini şu şekilde kurun:
npm ben çekirdek-js
Paket yüklendiğinde, ihtiyaç duyduğumuz belirli çoklu dolguyu ekleyebiliriz, bu durumda,
String.prototype.padEnd için yerel destek olmadan bir çalışma zamanını simüle ettiğimiz için
padEnd .
App.jsx uygulamasını açın ve dosyanın en üstüne çoklu dolgu için içe aktarmayı ekleyin.
"core-js/actual/string/pad-end" içe aktar; // kodun geri kalanı
Artık CDN içe aktarımını önceki bölümden güvenle kaldırabiliriz.
index.html dosyasını açın ve
polyfill.io içe aktarma için
script etiketini silin.
Bu aşamadaki kodunuz şöyle görünmelidir.
Tarayıcıya gidin ve kodun beklediğimiz gibi çalıştığını doğrulayın.
String.prototype.padEnd özelliğini üç farklı yolla başarıyla çoklu doldurduk. Şimdiye kadar, proje yapınızdan bağımsız olarak çoklu dolguları ve bunlarla nasıl çalışacağınızı iyi anlamış olmalısınız.
Çoklu doldurmalar, aktarma kodunu otomatik olarak işleyen sayısız oluşturma aracı sayesinde, genellikle doğrudan üzerinde çalıştığınız bir şey değildir. Ancak, bu robotların perde arkasında ne yaptığını anlamak her zaman iyidir. Sonuçta, işlerimizi çalmaları an meselesi.
Öğreticiyi sonuna kadar takip ettiyseniz, harikasınız .
React uygulamanızda çoklu dolguların nasıl kullanılacağı yazısı ilk olarak LogRocket Blog'da göründü.
React uygulamanızda çoklu dolgular nasıl kullanılır?