Yararlı Javascript kalıpları: Modül Modelini Gösterme

0
22

Bu sefer JavaScript geliştiricileri tarafından sıklıkla kullanılan bir Açığa Çıkarma Modülü Modeli’ne göz atacağız.

Kod tabanımızı temiz tutan ve tarayıcı konsolundan kötü amaçlı JavaScript manipülasyonunu önleyen çok kullanışlı bir modeldir. Hem genç hem de kıdemli JavaScript geliştiricileri genellikle bu modelin farkında değildir ve hem performans hem de güvenlik için gerçekten yararlı olabilir.

Bu kalıbı çok seviyorum ve React dışı projeler üzerinde çalışırken her zaman kullanıyorum.

Pencere nesnesi hakkında

JavaScript’in pencere nesnesi, tarayıcı penceresini temsil eder. Yeterince basit geliyor. Herhangi bir nesne gibi, özellikler (değişkenler) ve yöntemler (işlevler) içerir.

Örneğin, pencere özelliklerinden bazıları şunlardır:

window.innerHeight – tarayıcı penceresi penceresinin iç yüksekliği.innerWidth – tarayıcı penceresinin iç genişliği

Pencere yöntemlerinden bazıları şunlardır: window.alert () – bir mesaj penceresi içeren bir açılır pencere açar. Open () – yeni bir pencere penceresi açar. Close () – geçerli pencereyi kapatır

Pencere nesnesinin özelliği, çoğu durumda küresel olarak erişilebilir olmasıdır. Nesnelerin özelliklerine ve yöntemlerine, istemci tarafı JavaScript’i destekleyen herhangi bir dosyadan erişilebilir … ve bunlara, geliştirici araçlarıyla normal tarayıcınızdan bile erişilebilir.

Alternatif Metin

Bu komutlardan bazılarını çalıştırmayı deneyin

Pencere nesnesiyle ilgili olası sorunlar

Kötü amaçlı kod manipülasyonu

Yalnızca aşağıdaki satırı içeren bir JavaScript dosyası tanımlamayı deneyin:

let skor = 0; const updateScore = (newScore) => score = newScore;

Normal bir JavaScript gibi görünüyor, değil mi? Hiçbir belirgin sorun görülemez.

Bu web sitesini tarayıcınızda açarsanız, pencere nesnesinde bulunan puan değişkenini görebilirsiniz. Bu, değişkeni doğrudan tarayıcınızdaki geliştirme araçlarından özgürce değiştirebileceğiniz anlamına gelir! Bu değişken sitenin işlevselliği için çok önemliyse veya hassas bilgiler içeriyorsa, kolayca erişilebilir ve kötüye kullanılabilir.

Alternatif Metin

Uh oh …

Aynı kural yöntemler (işlev) için de geçerlidir. Pencere nesnesinde bulunan herhangi bir işlev, dev araçlarından çağrılabilir.

Performans ve Çöp toplama

Şu satırlardaki tavsiyelere rastlamış olabilirsiniz: Küresel ad alanını kirletmekten kaçının. Bu temelde global değişkenleri ve fonksiyonları bildirmekten kaçınmamız gerektiği anlamına gelir. Bunun nedeni nedir?

Çöp toplama, tarayıcının o anda hangi kaynakların gerekli olduğuna karar vererek belleği otomatik olarak yönetmesi anlamına gelir. Bir işleve veya değişkene artık ihtiyaç duyulmadığında, tarayıcı yer açar. Tüm değişkenlerimiz ve işlevlerimiz genel bir pencere nesnesinin parçasıysa, tarayıcı otomatik olarak pencere (veya bir sekme) açık olduğu sürece bunlara ihtiyaç duyulduğunu varsayar, böylece bunlar asla kaldırılmaz. Bellek, gerçekten kullanılıp kullanılmadığına bakılmaksızın her zaman bu kaynaklar için tahsis edilecektir. Bu yüzden biz buna kod olarak çöp ve kirlilik diyoruz.

Kamu ve özel kapsam

Javascript, normal Nesne yönelimli diller gibi olağan genel veya özel kapsam değiştiricilere sahip değildir. JavaScript’in normal işlev düzeyi kapsamını kullanarak bunu gerçekten zarif ve basit bir şekilde çözebiliriz.

Modül kalıbını ortaya çıkarma

İşte burada Revealing modül kalıbı Javascript devreye giriyor. Aşağıdaki örneğe bir göz atalım.

const game = (() => {let skor = 0; const setScore = (newScore) => score = newScore; const incrementScore = () => setScore (score + 1); return {incrementScore}}) ();

Revealing modül modelinin ismine nasıl dayandığını görebiliriz.

const örnek = (() => {dönüş {}}) ();

Döndürülmeyen tüm değişkenler ve işlevler özel olarak kabul edilir ve işlevin kapsamı dışında erişilemez.

IIFE’de (daha sonra açıklanacak olan hemen çağrılan işlev ifadesi) bildirilen herhangi bir değişken ve işlevi içerebilen bir nesneyi döndürerek, işlevselliğin hangi bölümlerinin ortaya çıkarılacağını seçiyoruz. Bunlar genel kapsamdan değiştirilemez. En kötü senaryoda, manipülasyon işlevselliğin başarısız olmasına ve site müşterinin tarafında bozulmasına neden olabilir, ancak bu, tarayıcımızın geliştirme araçlarından (HTML, CSS veya JavaScript manipülasyonu).

Örneğimizde, aşağıdaki özel unsurlara sahibiz:

skor – geçerli puan değerini takip eden bir değişken setScore – değerini doğrudan ayarlayarak puan değişkenini doğrudan işleyen bir işlev. Ayarlayıcı işlevi olarak da bilinir.

Örneğimizde bu iki işlev çok önemlidir ve işlevin dışında erişilmemelidir, bu nedenle puan değişkenini dolaylı olarak güncelleyecek bir arayüz oluşturmamız gerekir.

Bu, incrementScore işlevinin devreye girdiği yerdir. Yalnızca özel işlevi çağırır ve puanın nasıl artırılması gerektiğini belirler. Bu nedenle, bu işlevsellik yalnızca web sitesini istemci tarafında kırmanın ötesinde kötü niyetli bir şekilde değiştirilemez veya manipüle edilemez.

Ve son olarak, oyun ifademizi IIFE’ye (hemen çağrılan işlev ifadesi) sararak, işlevin pencere nesnesine dahil edilmesini engelleriz ve birisinin geliştirici araçlardan başka bir oyunu başlatma olasılığını ortadan kaldırırız.

Şimdi Açığa Çıkarma Modül Modelinin nasıl çalıştığını ve nasıl uygulanabileceğini anladığımıza göre, bir örnek üzerinden geçelim.

Misal

Bir oyun üzerinde çalıştığımızı ve görevimizin aşağıdaki işlevselliğe sahip bir puan izleme işlevi oluşturmak olduğunu hayal edelim:

Skor takibini 0 değeriyle başlatın Skoru 1 artırmamıza izin verir (oyun kuralı) Skoru sıfırlar Oyun bittiğinde mevcut skoru gönderir HTML’de skor durumunu gösterir

pencere nesnesi uygulaması

Bunu önce sadece işlevleri daha iyi kavramak ve açıkladığımız olası sorunları vurgulamak için “düzenli bir şekilde” uygulayalım.

Not: Skoru denemek ve değiştirmek için Konsol işlevini kullanmak için bu kodepen bağlantısını bir pencerede açmak isteyebilirsiniz.

CodePen’de Adrian Bece (@AdrianBece) tarafından yazılan Pen JS puan izleyici – pencere nesnesine bakın.

Bakalım, tarayıcının geliştirme araçlarından skoru değiştirebilecek miyiz?

Alternatif Metin

Değişkenlere ve işlevlere tam erişimimiz var

Beklendiği gibi, puan değerine kolayca erişebilir ve bunları değiştirebilir ve istediğimiz herhangi bir işlevi çağırabiliriz.

Modül kalıbı uygulamasını ortaya çıkarma

JavaScript uygulamamızı bir Revealing modül modeline dönüştürelim. Hangi fonksiyonların doğrudan HTML’den çağrıldığına bakarak arayüzün hangi bölümlerinin açığa çıkarılması gerektiğini kolayca belirleyebiliriz.

CodePen’de Adrian Bece’nin (@AdrianBece) hazırladığı Pen JS puan izleyicisine bakın.

Şimdi, tarayıcının geliştirici araçlarından skoru değiştirebilecek miyiz görelim.

Alternatif Metin

Beklendiği gibi, puan değişkeni ve ayarlayıcı işlevi artık genel nesnenin bir parçası değil

İşlevselliğimizi ve değişkenlerimizi pencere nesnesinden başarıyla kaldırdık ve değerleri kötü niyetli bir şekilde değiştirme olasılığını önledik.

Ayrıca, incrementScore işlevinin nasıl daha iyi korunacağına da bir göz atabilirdik, böylece kullanıcı onu geliştirme araçlarından arayamaz, ancak bu, bu örneği olması gerekenden biraz daha karmaşık hale getirir. Ayrıca, bu işlev yalnızca kolaylık sağlamak için bir düğmeye bağlanabilmesi için ortaya çıkar. Bunun, aynı zamanda özel işlevler olarak kalacak olan oyun mekaniğine bağlı olacağını hayal edebiliriz.

Bu makaleler kahve ile besleniyor. Bu yüzden işimden zevk alırsanız ve onu faydalı bulursanız, bana bir kahve almayı düşünün! Gerçekten minnettar olurum.

Bana Bir Kahve Al

Bu yazıyı okumak için zaman ayırdığınız için teşekkür ederiz. Bunu yararlı bulduysanız, lütfen biraz beğenin, paylaşın ve yorum yapın.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz