JavaScript IIFE'yi kullanmayı bırakmanın zamanı geldi!
Tam metin 1.325 kelimedir ve beklenen öğrenme süresi 6 dakikadır.
Kaynak: unsplash
JavaScript dilinde, IIFE, tanımdan hemen sonra çalıştırılan bir işlev olan acil çağrı işlevi ifadesini ifade eder.
Neden kodda IIFE yazmayı bırak diyorum? Bu makale size cevabı verecektir.
Blok Kapsamlı değişkenler JavaScript'te tanımlanabilir
ES6'da standart olarak yayınlanmıştır, blok düzeyinde kapsamda değişkenleri ve sabitleri bildirmek için let ve const kullanabilirsiniz. Ayrıca, değişkenleri ve sabitleri harici olarak kullanılamayan kendi bloklarına ayırabilen bağımsız bloklar sunar.
Örneğin şunları yazabilirsiniz:
{x = 1 olsun}O zaman x harici olarak kullanılamaz.
Bu, aşağıdaki koddan çok daha nettir:
(() = > { let x = 1; }) ();Günümüzde, neredeyse tüm tarayıcılar ES6'yı desteklemektedir ve IIFE'yi kullanmayı bırakmak, değişkenleri dışarıdan ayırabilir.
Değişkenleri izole etmenin başka bir yolu da geniş çapta desteklenen modülleri kullanmaktır. Dışa aktarılmadığı sürece diğer modüller kullanılamaz.
Kapatmaya gerek yok
Kapanış, başka bir işlevi döndüren bir işlevdir. Döndürülen işlev, dışındaki kodda çalışabilir, ancak içindeki kod kapatma işlevi tarafından çalıştırılır.
Örneğin şunları üretebilir:
const id = (() = > { let say = 0; dönüş () = > { ++ sayım; return `id _ $ {count}`; }; }) ();Verileri izole etmek için bloklar ve modüller ile, yukarıdaki işlevler daha karmaşık ve gereksiz hale gelir.
Tüm işlevleri kendi modülüne yerleştirebilirsiniz, böylece verileri açığa çıkarma konusunda endişelenmenize gerek kalmaz, ancak bunun da yan etkileri olacaktır. Saf bir fonksiyon olmadığı için test etmek zordur.
İç içe yerleştirmeden kaçınılabildiğinde, işlevleri döndüren işlevler yuvalama da ortaya çıkarır, bu nedenle işlev döndürmeyen işlevlerden daha kafa karıştırıcıdır. Bunun yerine modülleri kullanmak en iyi yoldur. Modülleri kullanarak yazabilirsiniz:
let say = 0; dışa aktarma sabit kimliği = () = > { ++ this.count; "id _ $ {count}" döndür }Yukarıdaki kodda, aynı sayım bildirimi vardır ve id işlevi diğer modüller tarafından kullanılmak üzere dışa aktarılır. Bu, IIFE gibi sayımı gizler ve istediğimiz işlevi ortaya çıkarır, ancak daha az iç içe geçme ile onu çalıştırmak için başka bir işlev tanımlamaya gerek yoktur.
Takma ad değişkeni
Benzer şekilde şunları yazın:
pencere. $ = function foo () { // ... }; (işlev ($) { // ... }) (jQuery);Modüller kullanılarak yazılabilir, neden sadece değişkenler için takma adlar oluşturmak için IIFE yazılsın? Modülleri kullanarak farklı adlara sahip içeriği içe aktarabilirsiniz.
Aşağıdaki gibi değişkenler için takma adlar oluşturabilirsiniz:
{$ jQuery olarak} "jquery" den içe aktar; const $ = () = > {};Ek olarak, pencere nesnesine genel kapsamı etkileyecek yeni özellikler eklemeyin.
Kaynak: unsplash
Global nesneleri yakala
GlobalThis ile, farklı kapsamlardaki global nesnelerin isimleri hakkında endişelenmenize gerek yok, bir standart haline geliyor. Global nesneleri yakalamak için IIFE kullanmaya gerek yoktur. Aşağıdakileri alanın en üst seviyesine yazabilirsiniz:
(işlev (genel) { // ... })(bu);"GlobalThis" ten önce bile, global nesneyi ayarlamak için aşağıdakileri yazmak çok zor değildir:
const globalObj = self || pencere || global;Veya daha kesin olmak istiyorsanız, yazabilirsiniz:
const getGlobal = () = > { eğer (typeof self! == 'undefined') {return self;} eğer (typeof window! == 'undefined') {dönüş penceresi;} eğer (typeof global! == 'undefined') {global dönüş;} yeni Hata at ('yerel nesne bulunamıyor'); };Ek işlev çağrıları eklemeye ve IIFE aracılığıyla yuva oluşturmaya gerek yoktur.
Kaynak: unsplash
Optimize edilmiş sıkıştırma
JavaScript modülünü uygulamak, kodu IIFE ile izole etme ihtiyacını ortadan kaldırır, bu da dosyaları uygun şekilde sıkıştırabilir.
Ağ paketleri, göz atma, paketler, özetler vb. (Webpack, Browserify, Parcel, Toplama, vb.) Tüm modülleri doğru şekilde işleyebilir. Neden bu programları daha net kod oluşturmak için kullanmıyorsunuz?
IIFE'yi koda yazmak modası geçmiş, ayrıca ek işlev tanımları ve iç içe geçme de ekliyor. 2020'de lütfen kodları ayırmak için modülleri ve blokları kullanmayı seçin!
Yorum Beğen Takip Et
Yapay zeka öğrenme ve geliştirmenin kuru mallarını paylaşalım
Yeniden yazdırıyorsanız, lütfen arka planda bir mesaj bırakın ve yeniden yazdırma şartnamelerine uyun
