e
sv

React uygulamanızda çoklu dolgular nasıl kullanılır?

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

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:

polifil nedir?

Ç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.

React'te JavaScript polyfill kullanma: Pratik bir örnek

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.

Uygulanacak özellik

“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.”

Tablo biçiminde görüntülenen hafta içi günleri
cumartesiler en iyisidir

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.

Proje kurulumu

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

Eski tarayıcı sürümlerini nasıl simüle ediyoruz?

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:

Simüle edilmiş eski tarayıcılarda görüntülenen hafta içi listemiz
Simüle edilmiş eski tarayıcılarda görüntülenen hafta içi listemiz

Sıfırdan bir polyfill yazmak

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.

Simüle edilmiş eski tarayıcımızda görüntülenen tarayıcı konsolumuzdaki hata
Simüle edilmiş eski tarayıcımızda görüntülenen tarayıcı konsolumuzdaki hata

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:



Çoklu doldurma kitaplığı kullanma

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;

  1. CDN'den yükleme
  2. Bir NPM paketinden yükleme

CDN'den yükleme

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.

Bir npm paketinden yükleme

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.

Çözüm

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ü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

React uygulamanızda çoklu dolgular nasıl kullanılır?