İnsan Tarafından Okunabilir Kullanıcı Arayüzü için 6 Saf Açısal Boru

Kullanıcı arayüzünü iyileştiren, “DRY” ilkelerini destekleyen ve günlük görevlerin üstesinden gelen Özel Açılı Borular.

Performans ve Kullanıcı Arayüzü İçin Açısal Borular

Açısal Borular, kullanıcı arayüzüne küçük dönüşümler uygulamanın etkili bir yoludur. Borular kullanmak, uygulamanızı daha KURU hale getirir (Kendinizi Tekrarlamayın).

Endişeleri ayırmanıza ve kullanıcı arayüzü dönüştürme mantığını bileşen mantığından uzaklaştırmanıza olanak tanır.

Saf Açılı Borular, Angular uygulamasında kullanabileceğiniz birçok performans optimizasyon stratejisinden biridir. Borular varsayılan olarak saftır.

Açısal Boru bir girişi alır ve bu girişi bir dönüştürme işlevi aracılığıyla istenen çıktıya dönüştürür. Pipe sınıfı, PipeTransform arayüzünü uygular ve saf veya saf olabilir.

Saf

Boru safsa, hesaplanan sonuç önbelleğe alınır ve dönüştürme işlevi yalnızca giriş değiştiğinde çalıştırılır. Pure Pipes, hatırlamaya benzer şekilde davranır.

Saf olmayan

Öte yandan, Boru saf değilse bu, boru dönüştürme işlevinin her değişiklik algılama döngüsü sırasında çalıştırıldığı anlamına gelir. Borunuzun, dönüşümün sonucunu etkileyen dahili bir durumu varsa bu yararlıdır.

pure: false içeren bir Borunun, giriş değerleri değişmemiş olsa bile bile değişiklik algılama döngülerinde çalışacağına dikkat etmek önemlidir. Bu davranış nedeniyle performans darboğazlarının farkında olmak önemlidir.

Başlayalım…

1) URL Dostu Dizeler – Bir dizeyi bilgi koduna dönüştürün

ToSlugPipe

Kullanıcı girdisi, kategoriler ve diğer insanlar tarafından okunabilir veriler nedeniyle oluşturulan dinamik URL’leri uygularken, dizeleri genellikle URL güvenli bir sürüm üretecek bir işlev aracılığıyla işlemek isteyeceksiniz.

URL’ler, kelimeleri ayırmak için alt çizgi, boşluk veya başka herhangi bir karakter kullanmamalıdır.

Bu yöntemin KURU olması en iyisidir, böylece URL’ler aynı kuralı izler. Bu, Açısal Boru için mükemmel bir kullanım örneğidir.

toSlugPipe Boru, bir URL’yi bilgi bilgisine dönüştürür. URL yolu / segmenti olarak kullanıldığında sorunlara neden olabilecek dizeler dahil, URL’lerde izin verilmeyen veya alakasız tüm karakterleri çıkarır. toSlug , URL uyumlu olmayan karakterleri çıkarmak için bir normal ifade (Regex) kullanır.

Özetle ne <toSlug kısaca ne yapar:

Bonus - URL'lerinizi benzersiz yapın

İsteğe bağlı id parametresi, bilgi bilgisinin sonuna iletilen id değerinin yarısını ekler .

Bu, benzer veya yinelenen sümüklü böcek yaratma olasılığınız varsa bu dönüşüm yoluyla yararlıdır. Sümüklü böceklerin benzersiz olmasını sağlayarak uygulama URL'nizin benzersiz olmasını sağlar.

Anlaşılır bir şekilde, bu, keşfedilebilirlik ve alaka düzeyinin iyileştirilmesi yoluyla SEO üzerinde büyük bir etkiye sahiptir.

Bir Orta URL'de örnek bir çıktı görülebilir: https://itnext.io/smoother-ux-on-page-load-with-angular-resolvers-e063ef035124

2) Değeri (numarası) ile ilişkili Enum anahtarını (dizesini) görüntüleyin

Kullanıcı arayüzünde görüntülenmek üzere kategori adlarını almak için kullanışlıdır.

CategoryAsStringPipe

CategoryAsString Boru, TypeScript enum Category 'yi alır ve enum değeriyle ilişkili anahtarı alır.

Uygulamanızdaki kategoriler için bir sıralama kullandıysanız bu yararlıdır. Bu kanal, ona enum değerini bir sayı (Kategori türü) olarak iletmenize olanak tanır ve türünde onunla ilişkili etiketi döndürür. dize .

Bu, çok sayıda yinelenen kod kaydeder, çünkü bu boru olmadan, Kategori 'yi HTML şablonunda Kategori adını görüntüleyen her bileşene aktarmanız gerekir

Örneğin, Kategori sıralaması şöyle görünebilir ...

Bu numaralandırmayla, Müzik kategorisini şu şekilde geçtiyseniz…

veya daha gerçekçi olarak gerçek verilerden…

dizeyi Music

döndürür

Bonus - URL'lerde kategori anahtarlarını kullanın

Kategori URL'sini toSlug kanalıyla uyumlu hale getirin.

Burada, categoryAsString Pipe'ı kullanarak sayı türünün kategorisini string anahtarına dönüştürüyoruz, ardından sonucu toSlug .

Bu, Spor ve Fitness yerine spor-fitness üretecektir. Çok daha fazla URL dostu.

3) Taşan metni üç nokta ile kesin

EllipsisPipe

Bazen, taşmasını önlemek için uğraştığınız taşan metinleriniz olur. Belki de bir dizeden görüntülenen karakterlerin sayısı üzerinde sıkı denetim istiyorsunuz. Ya da yalnızca belirli sayıda karakterin ön kayıt olarak işlev görmesini sağlamak istiyorsunuz.

Özel kullanım durumunuz ne olursa olsun, üç nokta Boru, bir dizeyi önceden tanımlanmış maksimum uzunluktan daha uzun olmayan bir dizeyle keser. Maksimum uzunluk, dönüştürme işlevine parametre olarak aktarılır.

Maksimum uzunluktan daha uzun bir dize alınırken, sonuna bir ... ekler. Değilse, değiştirilmemiş dizeyi döndürür.

Bunu kullanmak için, üç nokta borusunun max parametresine bir sayı sağlarsınız . Elde edilen kullanıcı biyografisi bu durumda 50 karakter + ... 'den uzun olmayacaktır.

Değer maksimumdan uzun değilse, hiçbir üç nokta yer almaz.

Bonus - Üç nokta yerine dinamik bir argüman sağlayın

Bu, kesilen dizesini özel, dinamik bir değiştirme ile eklemenize olanak tanır.

Orijinal üç nokta dikey çubuk arasındaki fark, isteğe bağlı < bağımsız değişkenidir. append bağımsız değişkeni, üç nokta gösterimi ... olan varsayılan bir değere sahiptir.

Ona daha uygun bir ad verelim: TruncatePipe

Bunu kullanmak için, eklemek istediğiniz kendi sağlamak yerine << sağdaki ikinci parametre olarak.

Bu, tüm kesme işlemlerini tek bir Boru ile halledilebildiğinden, bu bizim üç noktalı Pipomuzu daha " KURU" (Kendinizi Tekrarlamayın) yapar.

4) Bir sayıyı (1) sıra eşdeğerine (1.) dönüştürün

OrdinalSuffixPipe

Sayısal verilere dayalı dinamik özetler , açıklamalar ve etiketler oluştururken, rakamları insan tarafından okunabilir metne dönüştürmeniz gerekir.

Bu genellikle, istatistikleri daha okunabilir biçimine, daha az robotik ve daha insancıl bir biçime dönüştürmek için karmaşık kod gerektirir.

Kullanıcılara verilere ve rakamlara göre gönderdiğiniz raporları otomatikleştirmek , yaygın bir uygulamadır ve bu tür biçimlendirme gerektirir.

Ayrıca, otomatik işlem e-postası , verilerin insan tarafından okunabilir biçimine dönüştürülmesini gerektirir.

Örneğin:

"32. çalışanınızı işe aldınız"

kulağa hoş geliyor ...

"32 numaralı çalışanı yeni işe aldınız" veya "32 numaralı çalışanı işe aldınız"

ordinalSuffix kullanma…

5) Bir tarihe kadar - (DAYS, MONTHS, HOURS, SECS)

TimeUntilPipe

<Bağımlılıklar:

Bu kanal iki tarihi alır ( biri bugünün tarihi ) ve aralarındaki farkı insan tarafından okunabilir bir biçimde döndürür.

date-fns 'den formatDistanceToNow dosyasını içe aktarmanız gerekecek, bu da biçimlendirme işinin büyük kısmını yapan işlev olacak.

Döndürülen değere saniye eklemek isteyip istemediğinizi belirleyebileceğimiz bir <seçenek argümanı alır.

Mevcut seçenekler includeSeconds , locale ve addSuffix şeklindedir.

Bu Pipoyu kullanmak için yalnızca GELECEK tarihi sağlamanız gerekir… tarih-dns, BAŞLANGIÇ tarihini işler (şu anda tarih saattir)

Bu Boru, görüntülenmesi gereken işlevlere sahipseniz özellikle kullanışlıdır:

Esasen bir geri sayımdır .

Bunu şu şekilde kullanırsınız…

6) Geçen Süre / Fark - İki Tarih Arasındaki Fark

DateDiffPipe

Önceki Pipe timeUntil 'e benzer şekilde, bu Pipe girdi olarak iki tarih alacak ve ikisi arasındaki farkı insan tarafından okunabilir bir biçimde döndürecektir .

Bu Kanal, bir başlangıç ​​ve bitiş tarihi arasında geçen süreyi görüntülemek istiyorsanız kullanışlıdır.

Örnek Çıktı: 23 saat 59 dakika 30 saniye

İki varış noktası arasındaki seyahat süresi veya seyahat süresi gibi işlevsellik.

(DAYS, HOURS, MINS, SECS) içindeki insanlar tarafından okunabilir farkı almak için başka bir tarih-fns işlevi kullanacağız.

Bu Piponun iki bölümü vardır:

Bunu fromDate parametresini ikinci parametre (sağdaki parametreler) olarak geçirmek kadar basit bir şekilde kullanmak.

Bonus - STRICT modunda farkı elde edin

dateDiff ile aynı mantığı kullanarak, transform () işlevimizde date-fns'den formatDistanceStrict () işlevini çağırabilirsiniz. işlev.

Bu, döndürülen fark dizesinde kullanılan dili değiştirir . formatDistance ve formatDistanceStrict işlevi arasındaki fark, ikinci işlevin 'yaklaşık 5 ay' gibi yaklaşık bir dil kullanmamasıdır.

Ayrıca ’saniye’ | gibi bir birimi de zorlayabilirsiniz. "Dakika" | "Saat" | "Gün" | "Ay" | seçenekler parametresinde "yıl" .

Not: Ayrıca, <”formatDistanceToNow işlevinin katı bir sürümü de vardır formatDistanceToNowStrict olarak adlandırılır. Böylece timeUntil borumuzda katı modu uygulayabilirsiniz.

Bunu kullanmak için, katı modu etkinleştirmek üzere katı parametresine bir doğru değeri sağlamanız yeterlidir.

İşte bu kadar… Artık hayatımızı geliştirmemizi biraz daha kolaylaştıran 6 tane daha kullanışlı borumuz var.

Okuduğunuz için teşekkürler!

Sorunuz var mı? yorumlarda bana bildirin.

Düz İngilizce ekibinden bir not

Dört yayınımız olduğunu biliyor muydunuz? Onlara şunu vererek sevginizi gösterin: Düz İngilizce JavaScript , Düz İngilizce AI , Düz İngilizce UX , Python in Sade İngilizce - teşekkür ederim ve öğrenmeye devam edin!

Ayrıca bir YouTube başlattık ve Sade İngilizce kanalımıza abone olarak bizi desteklemenizi çok isteriz

Ve her zaman olduğu gibi, Plain English iyi içeriğin tanıtımına yardımcı olmak istiyor. Yayınlarımızdan herhangi birine göndermek istediğiniz bir makaleniz varsa, [email protected] adresine Medium kullanıcı adınızı ve ilgilendiklerinizi içeren bir e-posta gönderin. hakkında yazıp size geri döneceğiz!