Web uygulamaları için kod yazarken sürekli olarak iyi kararlar vermeye çalışıyoruz. Özellikle kodumuz zamanla büyüdüğünde, bu her zaman kolay bir iş değildir.
Neyse ki karmaşık sorunları çözmek için kodumuza dahil edebileceğimiz bazı teknikler var. Onlar aranmaktadır tasarım desenleri.
Bu gönderi, JavaScript dünyasındaki bazı ilham kaynakları, cevaplar ve hatta bir öğrenme deneyimi olarak bakabileceğiniz birkaç kaynak kodunu gözden geçirecek, böylece kendinizi yalnız hissetmeden gelişmiş kodlama tekniklerini öğrenme hızınızı artırabilirsiniz.
Orada pek çok makalenin kaynak kodlarında kullanılan kalıpları doğrudan ortaya çıkarmadığını ve bu görevi izleyiciye bıraktığını fark ettim. Seni bilmiyorum ama programlamada yeniyken bu çok yardımcı olurdu. Merak etme, seni korudum.
Oluşturucu Tasarım Deseni
Uygulamada oluşturucu modelini gösteren en sevdiğim kitaplıklardan biri spotify-web-api-düğümü.
Oluşturucu tasarım deseni, onsuz karmaşık olan nesnelerin oluşturulmasına yardımcı olan bir davranış kalıbıdır.
Bu kitaplık, uygulamasının büyük bir çoğunluğunu oluşturan bir oluşturucu oluşturur. Örneğin, yöntemlerinin çoğu, tek bir oluşturucu kullanarak istekleri oluşturur. ingilizce gibi okur:
Bunu, oluşturucu bu arabirimi sağlamadan tasavvur edin ve oluşturucunun sizin için sağladığı faydayı göreceksiniz.
Zincirleme / Akıcı arayüzler
Aslında bu tekniği son örnekte daha yeni gördük ama bundan da bahsedebiliriz. jQuery Bu, birlikte çalışması kolay akıcı bir API ile sonuçlanan zincirleme yöntemlerinden yararlanır.
React gibi modern çerçeveler sahneye çıkmadan önce JavaScript topluluğunu kasıp kavuran bir kitaplıktan bahsediyoruz, bu nedenle bu kalıbın programlamada yararlı olduğu kanıtlanmıştır.
jQuery o zamanlar o kadar popülerdi ki, ön uç iş listeleri jQuery’de deneyimli adayları tercih ediyordu. Eskisi kadar popüler olmasa da günümüzde hala birçok firma tarafından kullanılmaktadır.
tezahürat jQuery kitaplığından büyük ölçüde ilham alan ve bugün hala kullandığım ve web kazıma gibi konular gündeme geldiğinde popülerliğini koruyan bir kitaplıktır. BT zincirleme kullanır DOM düğümlerini jQuery’ye benzer şekilde işlemek için.
Hikayenin ahlaki? İşe yarıyor.
Yaşam döngüsü
Daha fazla proje oluşturmaya başladığınızda, işlevlerin doğru zamanda işlendiğinden emin olmak için bir tür yaşam döngüsü boru hattını entegre etmeniz gereken bir an olacaktır.
Bu, tüketildiğinde, DOM düğümlerini manipüle etmek gibi belirli olayların zamanlamasına girmesi gereken dış işlevler için yararlı olabilir. sonrasında stil niteliklerini uygulayarak yapılırlar.
Bu kavramdan öğrenmek için iyi bir havuz snabbdomDOM ile çalışırken performansı artırmak için basitlik, modülerlik ve güçlü özelliklere odaklanan sanal bir DOM kitaplığı.
Geliştiricilerin ana modüle eklemek için kendi modüllerini oluşturmalarına izin veren genişletilebilir bir modül api’si sağlarlar. patch işlev. Her modülün temel uygulaması bu yaşam döngülerine girmek bu kitaplığın web uygulamalarımız için olduğu gibi çalışmasını sağlayan şeydir.
Örneğin, isteğe bağlı bir sağlarlar olay dinleyicileri modülü bu yaşam döngüsüne bağlanır ve olay işleyicilerin her bir yama (başka bir deyişle her “yeniden işleme”) arasında doğru şekilde eklenmesini ve temizlenmesini sağlar.
Komut Tasarım Modeli
JQuery gibi, redux da popülaritesini artırdı, ancak çoğunlukla, temelde her tepki uygulaması olan durumu yönetmesi gereken uygulamalar içinde. Pratikte kullanılan komut kalıbının açık ara en sevdiğim örneğidir.
Desen kavramı ile kolaylaştırılmıştır gönderme eylemleri her eylem nerede en emretmek. Belgeleri durumunu değiştirmenin tek yolunun gönderme eylemleri.
Bu kalıbın sağladığı faydalar, tepki olarak popüler olmasının ana nedenleridir. Redux, eylemleri başlatan nesneleri diğerlerinden ayırarak komut deseninden yararlanır. bilmek ne zaman çağrılırlar. Bu, reaksiyonla birlikte kullanıldığında mükemmel bir kombinasyondur. React, çoğunlukla aptal ve akıllı bileşenler arasındaki endişelerin bileşimi ve ayrılması ile ilgilidir. (Ancak, akıllı ve aptal bileşenler kavramını kullanmayan uygulamalara tepki vermenin farklı yolları hala var).
Modelin zaman yolculuğu yapabilme gibi avantajlarının çoğunu sıkıştırmak için güçlü ara katman yazılımları oluşturuldu. redux geliştirici araçları eklenti.
modülerlik
Gözlerimi ilk gördüğümde lodash deposu işlevlerinin nasıl yapılandırıldığını incelemek için kendi kendime “Bu işlevin burada olmasının ne anlamı var?” diye sorduğum zamanlar oldu. çünkü işlevler gibi akışSağ sadece işlevi çağırmak ve sonucu döndürmek için başka bir işlevi içe aktarın.
Ancak zamanla daha fazla uygulamalı deneyim kazanmaya başladıkça modüllerimizi/yardımcı işlevlerimizi bu şekilde yapılandırmanın güzelliğini fark ettim.
kavramında düşünmenize yardımcı olur. tekrar Kullanılabilirliktek bir sorumlulukla çalışır ve KURU (Kendinizi Tekrar Etmeyin) kod yazarken. Aldığım fayda flowRight bağlı olarak olduğu şekilde yapılandırılmış flow “akış” mantığını yapmak için, yalnızca “onları sağa akmaktan” sorumlu olması gerekir. Ayrıca, uygulamada güncellemeler varsa, bunun farkında olun. flowotomatik olarak yansıtır flowRight yanı sıra içe aktaran diğer tüm işlevler flow.
Soyut Sözdizimi Ağaçları ve Bileşik Tasarım Modeli
Dürüst olacağım, AST’lerle çalışmaya alışma yaklaşımım biraz garip ama işe yaradı benim için. Nedense TypeScript AST ile çalışma düşüncesi bana gerçekten çekici geliyor. Eminim çoğu insan derin dalışa başlamayı tavsiye eder. önce babel’e çalışmaya alışmadan önce TypeScript derleyicili bir AST, ama ben tersinden başladım. adında harika bir kütüphane var ts-morf geliştiricilerin TypeScript derleyicisiyle çalışmasını kolaylaştırmaya odaklanır. ts-morph ile uygulamalı öğrenme süre onların derleyici api’sine alışmak babel yaptı fazla babel’e dokunmadan anlamak daha kolay.
Çalıştığınız birçok nesnenin benzer bir arayüzü paylaştığını da fark edeceksiniz. Bu, kompozit tasarım modelini kullanan tüketicilere açık olan arayüzleridir.
Proxy Tasarım Kalıbı
Proxy modeli, gerçek nesne olarak hareket edecek bir yer tutucu nesne sağlar. Gerçek nesneye erişimi kontrol eder.
daldırmak bu kalıbı kullanır bize bir taslak döndürme verdiğiniz nesneyi temsil eden produce işlev. Bu modelden elde edilen şey değişmezlik tepki veren uygulamalar için harika.
Gözlemci / PubSub Tasarım Kalıbı
Bu kalıbı yoğun olarak kullanan bir kitaplık twilio-video.js. Hemen hemen her nesne nihayetinde EventEmitter doğrudan genişleterek veya miras yoluyla.
Çekirdek nesneleri gibi Katılımcı API tüketicilerinin uygulamalarında olay odaklı görüntülü sohbet deneyimleri oluşturmasını sağlayan bu modeli kapsamlı bir şekilde uygular.
Örneğin, bir kullanıcının (veya katılımcının) medya parçalarının ne zaman hazır olduğunu gözlemlemek için (bunlar DOM’a eklenir ve akışı başlatır), koddaki uzak katılımcı nesnesini şu şekilde gözlemlersiniz: someParticipant.on('trackSubscribed', () => {...}) ve buna göre davranın.
Sorumluluk Zinciri Tasarım Modeli
JavaScript’te sorumluluk zincirini uygulamak, genellikle bir veya daha fazlasının isteği işleyebileceği gevşek bağlı işlevlerden oluşan bir boru hattını içerir.
Bu modeli gösteren en iyi örnek, ekspresjs konsepti ile kütüphane rota işleme.
Örneğin, rota için bir rota işleyicisi oluşturursanız /dogs ve biri için /dogs?id=3 ve bir kullanıcı şuraya gitti: /dogs?id=3nerede çağıran bir işleyiciler zinciri olacak /dogs önce aranacak ve bu isteği yerine getirmeye karar verebilecek veya oradan karar verecek ikinci işleyiciye iletin, vb.
Ziyaretçi Tasarım Deseni
Aletleri daha derinlemesine incelemeye başlayana kadar bu kalıbın pratikte uygulandığını nadiren göreceksiniz. Ziyaretçi kalıbı, her bir AST düğümünü “ziyaret ederek” AST’lerdeki her nesneyle çalışmak istediğiniz durumlarda kullanışlıdır.
Ziyaretçiler, genişletilebilirlik, eklentiler, tüm şemayı yazdırma bir yerde vb.
İşte birinden bir uygulama graphql deposu
Prototip Tasarım Modeli
Prototip modelinin ana endişesi, oluşturulan nesnelerin her seferinde yeni örnekler olmamasını sağlamaktır. Bunun anlamı, eğer bir nesne yaratırsak MathAdd bir yöntemle addsadece yeniden kullanmalıyız add birden çok örneğini oluşturduğumuzda MathAdd çünkü uygulama değişmez. Bu aynı zamanda bir performans avantajıdır.
bu rica etmek kütüphane bu kalıbı neredeyse tüm sınıf nesnelerinde kullanır.
Çözüm
Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!
