JavaScript Tasarım Kalıpları Nasıl Kullanılır?

JavaScript tasarım kalıpları, yazılım geliştirmedeki yaygın sorunlara kanıtlanmış çözümler sunar. Bu kalıpları anlamak ve uygulamak, daha iyi, daha verimli JavaScript kodu yazmanıza olanak tanır.

JavaScript Tasarım Modellerine Giriş

JavaScript tasarım modellerinde yer alan kavramlar, bir JavaScript geliştiricisi olarak karşılaşacağınız yaygın sorunları nasıl yeneceğiniz konusunda size rehberlik eder.

Kalıpların altında yatan soyutlamaları anlamalısınız, böylece onları özel probleminize uygulayabilirsiniz. Ayrıca, söz konusu kalıplardan herhangi birinin kodunuz için ne zaman yararlı olabileceğini de belirleyebilmelisiniz.

Modül Kalıbı

Kapsülleme sağlayan Modül modeli, JavaScript'in modül sistemi. Genel bir API'yi açığa çıkarırken bir modül içindeki özel verileri ve davranışı güvence altına almanın bir yolunu sağlar. Özel ve genel erişim seviyelerine sahip bağımsız modül nesneleri oluşturmanıza olanak tanır.

Bu biraz nasıl yapabileceğin gibi Java gibi bir dilde bir sınıfta erişim değiştiricileri kullanın veya C++.

JavaScript'te, Modül modelini kapanışları kullanarak uygulayabilirsiniz.

Özel üyeleri (işlevler, değişkenler, veriler) çevrelemek için bir kapatma kullanarak, bu üyelerin erişilebilir olduğu ancak dış dünyaya doğrudan maruz kalmadığı bir kapsam yaratırsınız. Bu, dahili ayrıntıları harici koddan gizleyerek kapsülleme elde etmeye yardımcı olur.

Ek olarak, kapanıştan genel bir API döndürmek, modülün arayüzünün bir parçası olarak göstermek istediğiniz belirli işlevlere veya özelliklere özel erişim sağlar.

Bu, modülün hangi bölümlerinin kod tabanının diğer bölümleri tarafından erişilebilir olduğunu kontrol etmenizi sağlar. Bu, genel ve özel işlevsellik arasında net bir sınır sağlar.

İşte bir örnek:

sabit ShoppingCartModule = (işlev () {
// Özel veri
izin vermek cartItems = [];
// Özel yöntem
işlevhesaplaToplamÖğeler() {
geri dönmek cartItems.reduce((toplam, öğe) => toplam + adet.miktar, 0);
 }
// Genel API
geri dönmek {
 öğe ekle (öğe) {
 cartItems.push (öğe);
 },
 getTotalItems() {
geri dönmek hesaplaTotalItems();
 },
 temizleSepet() {
 cartItems = [];
 }
 };
})();
// Kullanım örneği
ShoppingCartModule.addItem({ isim: "Ürün 1", miktar: 2 });
ShoppingCartModule.addItem({ isim: "Ürün 2", miktar: 1 });
konsol.log (ShoppingCartModule.getTotalItems()); // Çıktı: 3
ShoppingCartModule.clearCart();
konsol.log (ShoppingCartModule.getTotalItems()); // Çıkış: 0

Bu örnekte, Alışveriş Sepeti Modülü modül modeli kullanılarak oluşturulan bir modülü temsil eder. Kod yürütme şöyle gider:

1. bu IIFE tüm kod bloğunu sarar ve bildirim üzerine hemen yürütülen bir işlev oluşturur. Bu, modülün üyeleri için özel bir kapsam oluşturur.
2. alışveriş sepeti öğeleri özel bir dizidir. Modülün dışından doğrudan erişilemez.
3. hesaplaTotalItems() sepetteki toplam ürün sayısını hesaplayan özel bir yöntemdir. Bu kullanır azaltmak() üzerinde yineleme yöntemi alışveriş sepeti öğeleri sıralayın ve tüm öğelerin miktarlarını toplayın.
4. Modül, genel API'sini bir nesne hazır bilgisi olarak döndürür ve üç genel yöntemi gösterir: öğe eklemek(), getTotalItems(), Ve clearCart().
5. Modülün dışında, alışveriş sepeti işleviyle etkileşim kurmak için modülün genel yöntemlerine erişebilirsiniz.

Bu örnek, modül deseninin özel verileri kapsüllemenize nasıl izin verdiğini gösterir (alışveriş sepeti öğeleri) ve davranış (hesaplaToplamÖğeler) modül içinde genel bir arayüz sağlarken (öğe eklemek, getTotalItems, Ve açık Sepet) modülle etkileşime geçmek için.

Gözlemci Modeli

Observer modeli, nesneler arasında bire çok bağımlılık kurar. Bir nesnenin durumu değiştiğinde, tüm bağımlılarını bilgilendirir ve bunlar otomatik olarak güncellenir. Bu model, olaya dayalı etkileşimleri yönetmek veya bir sistemdeki bileşenleri ayırmak için özellikle kullanışlıdır.

JavaScript'te Observer modelini uygulayabilirsiniz. yerleşik addEventListener kullanarak, gönderim etkinliği yöntemler veya herhangi bir olay işleme mekanizmaları. Gözlemcileri olaylara veya konulara abone olarak, belirli olaylar meydana geldiğinde onları bilgilendirebilir ve güncelleyebilirsiniz.

Örneğin, basit bir bildirim sistemi uygulamak için Observer modelini kullanabilirsiniz:

// Gözlemci modeli uygulaması
işlevBildirim Sistemi() {
// Abone listesi
Bu.aboneler = [];
// Bildirimlere abone olma yöntemi
Bu.abone ol = işlev (abone) {
Bu.subscribers.push (abone);
 };
// Bildirim aboneliğinden çıkma yöntemi
Bu.aboneliği iptal et = işlev (abone) {
sabit dizin = Bu.subscribers.indexOf (abone);
eğer (dizin !== -1) {
Bu.subscribers.splice (dizin, 1);
 }
 };
// Aboneleri bilgilendirme yöntemi
Bu.bildir = işlev (İleti) {
Bu.aboneler.her biri için(işlev (abone) {
 abone.alma Bildirimi (mesaj);
 });
 };
}
// Abone nesnesi
işlevAbone(isim) {
// Bildirimleri alma ve işleme yöntemi
Bu.receiveBildirim = işlev (İleti) {
konsol.log (isim + ' alınan bildirim:' + mesaj);
 };
}
// Kullanım örneği
sabit bildirimSistem = yeni Bildirim Sistemi();
// Abone oluştur
sabit abone1 = yeni Abone("Abone 1");
sabit abone2 = yeni Abone("Abone 2");
// Aboneleri bildirim sistemine abone ol
bildirimSystem.subscribe (abone1);
bildirimSystem.subscribe (abone2);
// Aboneleri bilgilendir
bildirimSystem.notify("Yeni bildirim!");

Buradaki amaç, belirli bir olay meydana geldiğinde birden fazla abonenin bildirim almasına izin vermektir.

bu Bildirim Sistemi işlevi, bildirim gönderen sistemi temsil eder ve Abone işlevi, bildirimlerin alıcılarını temsil eder.

NotificationSystem adlı bir diziye sahiptir. aboneler bildirim almak isteyen aboneleri saklamak için. bu abone yöntemi, abonelerin kendilerini aboneler dizisine ekleyerek kayıt olmalarını sağlar. bu aboneliği iptal et yöntem, diziden aboneleri kaldırır.

bu bildirmek NotificationSystem'daki yöntem abone dizisini yineler ve şunu çağırır: Bildirim almak her abonede, bildirimleri işlemelerine olanak tanıyan bir yöntem.

Abone işlevinin örnekleri aboneleri temsil eder. Her abonenin, alınan bildirimleri nasıl ele aldıklarını belirleyen bir ReceiveNotification yöntemi vardır. Bu örnekte, yöntem alınan mesajı konsola kaydeder.

Gözlemci modelini kullanmak için bir NotificationSystem örneği oluşturun. Daha sonra Abone örneklerini oluşturabilir ve bunları abone olma yöntemini kullanarak bildirim sistemine ekleyebilirsiniz.

Bir bildirim göndermek, her abone için acceptNotification yöntemini tetikler ve her abone için mesajı günlüğe kaydeder.

Observer modeli, bildirim sistemi ile aboneler arasında gevşek bağlantı sağlayarak esneklik sağlar. Model, olay güdümlü sistemlerde bakımı kolaylaştıracak endişelerin ayrılmasını destekler.

Gelişmiş JavaScript Kalıplarını Kullanma

Gelişmiş JavaScript kalıplarını etkili bir şekilde kullanmak için bazı genel ipuçları:

• Performans sonuçlarını göz önünde bulundurun: Gelişmiş modeller, performansı etkileyebilecek ek karmaşıklık getirebilir. Performans etkilerine dikkat edin ve gerektiğinde optimize edin.
• Anti-kalıplardan kaçının: Kalıpları iyice anlayın ve anti-kalıplara düşmekten veya onları kötüye kullanmaktan kaçının. Mantıklı oldukları ve uygulamanızın gereksinimleriyle uyumlu oldukları yerlerde kalıpları kullanın.
• Kodlama kurallarını takip edin: Kod tabanınız genelinde okunabilirliği ve tutarlılığı korumak için kodlama kurallarını tutarlı bir şekilde izleyin. Anlamlı değişken ve işlev adları kullanın ve kalıplarınız için net belgeler sağlayın.

Bu Kalıpları Uygularken Dikkatli Olun

Modül modeli, kapsüllemeye izin verir ve veri gizliliğini, kod organizasyonunu ve bağımsız modüllerin oluşturulmasını destekler.

Öte yandan, Gözlemci modeli, bir özne-abone ilişkisi kurarak bileşenler arasındaki iletişimi kolaylaştırır.

Gelişmiş JavaScript kalıplarını uygularken olası tuzakların ve yaygın hataların farkında olmalısınız. Daha basit çözümlerin olduğu yerlerde kalıpları aşırı kullanmaktan veya aşırı karmaşık kod oluşturmaktan kaçının. Bakım yapılabilir durumda kalmasını sağlamak için kodunuzu düzenli olarak gözden geçirin ve yeniden düzenleyin.