Skip to content

Tembel mod ​

EffCSS, varsayılan olarak CSS'i hemen (eagerly) oluşturur: Bir yardımcı işlevi (utility) çağırdığınız anda, ilgili stil sayfası kuralları CSSOM'a yazılır. Tembel modda (lazy mode) ise asıl oluşturma işlemi ertelenir; CSS, yalnızca üretilen resolver (çözücü) fiilen kullanıldığında (çağrıldığında veya bir string'e dönüştürüldüğünde) stil sayfasına aktarılır.

Tembel mod iki farklı biçimde sunulur; böylece ihtiyaç duyduğunuz kontrol düzeyini seçebilirsiniz:

NitelikTetikleyiciKapsam
Kontrollüisteğe bağlı (opt-in) lazy* yardımcılarıyardımcı başına, her zaman tembel (lazy)
Kütüphane düzeyiconfigure({ lazy: true })bir resolver döndüren her oluşturucu yardımcı işlev

Bağımsız olarak çalışırlar ve birleştirilebilirler.

1. Kontrollü — lazy* yardımcıları ​

Bu yardımcı araçlar, herhangi bir genel yapılandırmadan bağımsız olarak her zaman "lazy" (tembel/gecikmeli) çalışır. Her çağrı bir işlev çözümleyici (function-resolver) döndürür. Siz şunları yapana kadar hiçbir şey üretilmez:

  • çözümleyiciyi çağırmak — fn() (veya fn(...args)),
  • onu bir dizgiye (string) dönüştürmek — `${fn}` veya String(fn).

Kural içeriği, bir nesne olarak veya söz konusu nesneyi döndüren bir işlev olarak geçirilebilir. İşlev, "lazy" bir şekilde, yani ilk hazırlık (warm-up) aşamasında değerlendirilir.

FonksiyonDöndürürOluşturur
lazyClassName(rule) (veya className.lazy(rule))() => string (sınıf adı)bir anonim sınıf kuralı
lazyAttribute(rule) (veya attribute.lazy(rule))() => object ({ 'data-…': '' })tek bir anonim nitelik kuralı
lazyClassNames(gen) (veya classNames.lazy(gen))CSS seçici oluşturucu fonksiyonubir sınıf seçicili stil sayfası
lazyAttributes(gen) (veya attributes.lazy(gen))CSS seçici oluşturma fonksiyonuöznitelik seçicili stil sayfası
lazyCustomStyles(gen) (veya customStyles.lazy(gen))CSS seçici oluşturma fonksiyonuözel bir stil sayfası

Değişikliklerden önce - derhal ​

Her çağrı, sonuç sayfada hiç kullanılmasa bile, anında bir kural oluşturur.

Değişikliklerden sonra — kontrollü tembel ​

lazyClassName (className.lazy) ve lazyAttribute (attribute.lazy) dahil olmak üzere tüm "lazy" (tembel/gecikmeli) işleyicilerin fonksiyon döndürdüğüne dikkat edin. Bireysel kural "lazy" çözümleyicileri (resolvers) için bu durum ek bir avantaj sağlar: böyle bir çözümleyiciyi bir string'e (metin dizisine) dönüştürdüğünüzde, diğer stillerde kullanılabilen doğru seçici (selector) elde edilir:

Üstelik bu fonksiyonlar, yalnızca bir nesneyi değil, aynı zamanda bir üreteci de kabul edebilir:

Önemli: className / attribute, fonksiyon olmayan bir değer (string / nesne) döndürür; bunlar "lazy" (tembel değerlendirmeli) değildir ve bu bağlamda işin içine dahil olmazlar.

2. Kütüphane düzeyi — configure({ lazy: true }) ​

configure({ lazy: true }), bir fonksiyon-çözücü (function-resolver) döndüren tüm üretim yardımcılarını anında "lazy" (tembel/gecikmeli) sürümlerine geçirir:

variable, variables, animation, animations, layer, layers, font, fonts, classNames, attributes, customStyles.

Aynı API'yi yazmaya devam ediyorsunuz; lazy* isimlerine başvurmanıza gerek yok. Bu yardımcı araçların her biri artık, sonucu kullanılana kadar üretim işlemini erteliyor.

className ve attribute bundan etkilenmiyor: Bunlar çözümleyici (resolver) yerine doğrudan değerler (string / nesne) döndürdükleri için, üretim işlemini anında gerçekleştirmeye devam ediyorlar.

Öncesi — varsayılan (hevesli/anında yükleme) ​

Sonrasında — configure({ lazy: true }) ​

Çoğul yapıdaki yardımcı öğeler (variables, animations, layers, fonts vb.) için tüm grup birlikte hazırlanır: herhangi bir çözümleyiciye (resolver) dokunulması tüm setin oluşturulmasını sağlar; böylece SSR hydration süreci için sıralamanın deterministik kalması güvence altına alınır.

Davranış notları ​

  • Isınma tetikleyicileri — bir çözümleyici çağırılarak veya dize zorlamasıyla ısıtılır. Yalnızca onu tutmak (veya değişkenler için .get() / .set()'i çağırmak) herhangi bir CSS oluşturmaz.
  • variable().get() / .set() — ısınmadan önce, get(), ``'değerini döndürür veset()`, işlem dışıdır; ancak çözümleyici ısındıktan sonra aktif hale gelirler.
  • update() — tembel modda henüz oluşturulmamış değişkenleri değiştirmez.
  • SSR hidrasyonu — oluşturma sırası deterministiktir (paylaşılan dahili sayaçlar), dolayısıyla sunucu ve istemci, çözümleyicileri aynı sırada ısıttıkları sürece aynı seçicileri üretir.
  • abone olma olayları — `EffCSSEvent'ler, yardımcı program ilk kez çağrıldığında değil, gerçek oluşturma (çözümleyici ısınması) anında yayılır.

İkisi arasında seçim yaparken ​

  • Yalnızca belirli kurallar için "tembellik" (lazy loading) isteyip geri kalanını "hevesli" (eager/anında yüklenen) tutmak istediğinizde veya uygulama genelindeki ayarlardan bağımsız olarak tembelliği garanti altına almak istediğinizde kontrollü lazy* yardımcılarını kullanın.
  • Kodunuzu değiştirmeden tüm kütüphane genelinde kapsamlı bir yalnızca kullanılanı yükleme davranışı istediğinizde (örneğin, yalnızca gerçekten oluşturulan/render edilen CSS'i sunmak için vite-plugin-effcss ile birlikte) configure({ lazy: true }) kullanın.

Apache Lisansı 2.0 altında yayınlanmıştır