ES6 modülleri için pratik bir rehber

ES6 modülleri

Bir web uygulaması oluştururken karşılaşılan en büyük zorluklardan biri, pazarın ihtiyaçlarına ne kadar hızlı ölçekleyebileceğiniz ve yanıt verebileceğinizdir. Talep (gereksinimler) arttığında, yetenekler (özellikler) de artar. Bu nedenle uygulamanın organik olarak büyümesi için sağlam bir mimari yapıya sahip olmak önemlidir. Uygulamanın ölçeklenemediği durumlarda sonuç almak istemeyiz, çünkü uygulamadaki her şey derin bir şekilde karışmıştır.

Silmek kolay, genişletmek kolay değil kodunu yazın.
- Tef, Programlama Korkunç

Bu makalede, ES6 modüllerini kullanarak basit bir gösterge tablosu oluşturacağız ve daha sonra klasör yapısını iyileştirmek ve daha az kod yazmak için optimizasyon teknikleri sunacağız. ES6 modüllerinin neden önemli olduğu ve nasıl etkili bir şekilde uygulanacağı konusunda dalış görelim.

JavaScript uzun süredir modüllere sahiptir. Ancak, dilin içine yerleştirilmemiş kütüphaneler aracılığıyla uygulandılar. ES6, JavaScript'in yerleşik modüllere (kaynak) sahip olduğu ilk defa.

TL; DR - Mimari tasarım düzeninden ES6 modüllerini kullanarak gösterge tablosu oluşturduğumuz pratik bir örnek görmek istiyorsanız, 4. bölüme atlayın.

İşte biz neleri ele alacağız

  1. ES6 modülleri neden gerekli?
  2. Komut dosyalarının manuel olarak yüklendiği günlere
  3. ES6 modülleri nasıl çalışır (ithalat vs ihracat)
  4. Modül içeren bir gösterge paneli oluşturalım
  5. Pano örneği için optimizasyon teknikleri
Daha iyi bir web geliştiricisi olmak, kendi işinizi kurmak, başkalarına öğretmek veya geliştirme becerilerinizi geliştirmek istiyorsanız, en son web dillerinde haftalık ipuçları ve püf noktaları gönderiyorum.

1. ES6 modüllerine neden ihtiyaç duyulur?

Modüllerin neden alakalı olduğuna dair birkaç senaryo görüntüleyelim.

Senaryo 1 - Tekerleği yeniden icat etmeyin

Geliştiriciler olarak, zaten farkında olmadan yaratılmış olan şeyleri yeniden yaratırız veya zamanı azaltmak için şeyleri kopyalayıp yapıştırabiliriz. Sonunda, ekler ve biz uygulama boyunca dağılmış x adet özdeş kopya ile bırakıldı. Her seferinde bir şeyi değiştirmemiz gerekir, sahip olduğumuz kopya sayısına bağlı olarak x kez yapmalıyız.

Örnek
Örneğin, yeni bir araba ürettiği her seferinde motoru yeniden icat etmeye çalışan bir otomobil fabrikası veya her çizimden sonra sıfırdan başlayarak bir mimar düşünün. Bunu yapmak imkansız değildir, fakat edindiğiniz deneyimi tekrar kullanamazsanız, bilgi noktası nedir.

Senaryo 2 - Bilgi engeli

Sistem derinden dolaşmışsa ve dokümantasyon eksikliği varsa, eski / yeni geliştiriciler için uygulamanın nasıl çalıştığını ve işlerin nasıl bağlandığını öğrenmek zor.

Örnek
Örneğin, bir geliştirici, bir değişimin sonucunun tahmin etmeden ne olduğunu görebilmelidir, aksi takdirde nereden başlayacağımızı bilmeden çok fazla hatayla sonuçlanırız. Çözüm, kapsülleme davranışı için modüller kullanmaktır, hata ayıklama işlemini kolayca daraltabilir ve sorunun kökünü hızlıca tanımlayabiliriz.

Kısa bir süre önce, sürekli yeni şeyler öğrenmek isteyen geliştiriciler hakkında bir yazı yazdım, bilginin nasıl geliştirileceğine dair ipuçları verdim.

Senaryo 3 - Beklenmeyen davranış

Endişelerin ayrılmasından kaçınılarak (tasarım prensibi), beklenmeyen davranışlara yol açabilir.

Örnek
Örneğin, birisinin arabadaki sesi artırdığını ve ön cam sileceklerini başladığını varsayalım. Bu beklenmedik bir davranış örneğidir ve uygulamamızda istediğimiz bir şey değildir.

Kısacası, iç davranışları dış davranışlardan etkin bir şekilde yeniden kullanmak, sürdürmek, ayırmak ve enkapsüle etmek için ES6 modüllerine ihtiyacımız var. Bu, sistemi karmaşık hale getirmekle ilgili değil, sistemi bozmadan işleri kolayca ölçekleme ve silme yeteneğine sahip olmakla ilgilidir.

2. Kodların manuel olarak yüklendiği günlerde

Birkaç yıl boyunca web geliştirme yaptıysanız, doğru sırada yüklenmeyen komut dosyaları veya DOM ağacının öğelerine JS tarafından erişilememesi gibi kesinlikle bağımlılık çakışmalarıyla karşılaştınız.

Bunun nedeni, bir sayfadaki HTML’nin göründüğü sırada yüklenmesidir; bu, öğesinin içindeki içerik yüklenmeden önce komut dosyalarını yükleyemeyeceğimiz anlamına gelir.

Örneğin, etiketi içindeki bir öğeye document.getElementById ("id-name") kullanarak erişmeye çalışırsanız ve öğe henüz yüklenmediyse, tanımlanmamış bir hata alırsınız. Komut dosyalarının doğru yüklendiğinden emin olmak için erteleme ve zaman uyumsuz kullanma özelliğini kullanabiliriz. İlki, her komut dosyasının göründüğü sırayla yüklenmesini sağlarken, ikincisi komut dosyası kullanılabilir duruma geldiğinde yüklenir.

Bu tür bir sorunu çözmenin eski moda yolu, komut dosyalarını öğesinden hemen önce yüklemekti.

Ancak uzun vadede, komut dosyası sayısı artmaktadır ve sürüm ve bağımlılık çakışmalarını korumaya çalışırken 10'dan fazla komut dosyası ile son bulabiliriz.

Ayrılık-of-the endişeleri

Genel olarak, yukarıda gösterildiği gibi komut dosyalarının yüklenmesi performans, bağımlılıklar ve bakım kolaylığı açısından iyi bir fikir değildir. İndex.html dosyasının tüm komut dosyalarını yükleme sorumluluğunu taşımasını istemiyoruz - bir tür yapıya ve mantığın ayrılmasına ihtiyacımız var.

Çözüm, ES6’nın sözdizimini, ithalat ve ihracat ifadelerini kullanmak, işleri birbirinden ayırmamızı sağlayan ve yalnızca ihtiyaç duyduğumuzda kullanılabilir olan zarif ve korunabilir bir yaklaşım kullanmaktır.

İthalat ve ihracat beyanları

Export anahtar sözcüğü, bir yerde kullanılabilir bir şey yapmak istediğimizde kullanılır ve import, dışa aktarmanın sağladığı şeylere erişmek için kullanılır.

Temel kural, bir şeyi içe aktarmak için önce dışa aktarmanız gerekir.

Ve aslında ne ihraç edebiliriz?

  • Bir değişken
  • Bir nesne değişmezi
  • Bir sınıf
  • Bir işlev
  • ++

Yukarıda gösterildiği gibi örneği basitleştirmek için, tüm komut dosyalarını bir dosyaya sarabiliriz.

Ve daha sonra index.html dosyasına app.js betiğini yükleyin. Fakat önce, çalışmasını sağlamak için, içe aktarma ve dışa aktarma modüllerini çalışmak için kullanabilmemiz için type = "module" (source) kullanmamız gerekir.

Gördüğünüz gibi, index.html artık tek bir komut dosyasından sorumludur; bu da bakımını ve ölçeklendirilmesini kolaylaştırır. Kısacası, app.js betiği, uygulamamızı başlatmak için kullanabileceğimiz giriş noktamız olur.

Not: Tüm komut dosyalarının, app.js gibi tek bir dosyada yüklü olmasını, onu gerektirenlerin dışında olmasını önermem.

Artık içe aktarma ve dışa aktarma ifadelerini nasıl kullanabileceğimizi gördük, uygulamada modüllerle çalışırken nasıl çalıştığını görelim.

3. ES6 modülleri nasıl çalışır?

Bir modül ve bir bileşen arasındaki fark nedir? Bir modül, uygulamamızda tekrar kullanabileceğimiz küçük bağımsız birimler (bileşenler) topluluğudur.

Amaç nedir?

  • Kapsülleme davranışı
  • Çalışması kolay
  • Bakımı kolay
  • Ölçeklemesi kolay

Evet, gelişimi kolaylaştırıyor!

Peki, gerçekten bir bileşen nedir?

Bir bileşen değişken, fonksiyon, sınıf ve benzeri olabilir. Başka bir deyişle, export ifadesiyle dışa aktarılabilecek her şey bir bileşendir (veya buna blok, birim vb. Diyebilirsiniz).

Bileşen nedir

Peki bir modül gerçekten nedir?

Belirtildiği gibi, bir modül bir bileşen koleksiyonudur. Entegre bir bütün oluşturmak için iletişimde olan veya basit bir şekilde birlikte gösterilmesi gereken birden fazla bileşenimiz varsa, muhtemelen bir modüle ihtiyacınız vardır.

Modül nedir

Her şeyi tekrar kullanılabilir hale getirmek için bir meydan okuma

Elektrik mühendisliği alanında 30 yılı aşkın deneyime sahip ana mühendis, bir keresinde, zaman, maliyet nedeniyle her şeyin yeniden kullanılmasını bekleyemeyiz ve her şeyin tekrar kullanılması gerektiğini söyleyemeyiz. Bir dereceye kadar tekrar kullanmak, işlerin% 100 tekrar kullanılmasını beklemekten daha iyidir.

Genel olarak, bu uygulamada her şeyi tekrar kullanılabilir hale getirmek zorunda kalmayacağımız anlamına gelir. Bazı şeylerin sadece bir kez kullanılması amaçlanmıştır. Temel kural şudur: ikiden fazla bir şeye ihtiyacınız olursa, o zaman belki bir modül veya bileşen oluşturmak iyi bir fikirdir.

İlk başta, yeniden kullanılabilir bir şey yapmak kolay gelebilir, ancak unutma, bileşenin ortamından çıkarılmasını ve başka bir ortamda çalışmasını beklediğini unutmayın. Ancak çoğu zaman, yeniden kullanılabilir hale getirmek için parçalarını değiştirmek zorundayız ve bilmeden önce iki yeni bileşen yarattınız.

Antoine, tekrar kullanılması gereken JS bileşenleri oluşturmanın 3 temel kuralını açıklayan bir makale yazdı. VueJS'i ekibine sunduğunda, deneyimli bir iş arkadaşı şunları söylüyor:

Teoride bu harika, ama benim deneyimlerime göre bu süslü “yeniden kullanılabilir” şeyler asla tekrar kullanılmaz.

Buradaki fikir, düğmeler, giriş alanları ve onay kutuları gibi her şeyin tekrar kullanılmaması gerektiğidir. Yeniden kullanılabilir bir şey yapmanın tüm işi, kaynak ve zaman gerektirir ve çoğu zaman asla gerçekleşmeyecek aşırı düşünme senaryolarıyla sonuçlanır.

Stack Overflow'un CEO'su Joel Spolsky şöyle diyor:

İnsanların sahip olduğu% 50'lik iyi bir çözüm aslında daha fazla sorun çözüyor ve hiç kimsenin sahip olmadığı% 99'dan daha uzun bir süre hayatta kalıyor çünkü laboratuvarınızda, o lanet şeyi hiç durmadan parlatıyorsunuz. Kargo bir özelliktir. Gerçekten önemli bir özellik. Ürününüzde olmalıdır.

4. Modülleri olan bir gösterge paneli oluşturalım

Artık modüllerin nasıl çalıştığını anlayabildiğine göre, JS çerçeveleriyle çalışırken en çok karşılaşacağınız pratik bir örneği görüntüleyelim. Düzenlerden ve bileşenlerden oluşan mimari bir tasarımın ardından basit bir gösterge tablosu oluşturacağız.

Örnek için kod burada bulunabilir.

Adım 1 - İhtiyacınız olanı tasarlayın

Çoğu durumda, geliştiriciler doğrudan koda atlarlar. Ancak, tasarım programlamanın önemli bir parçasıdır ve size zaman ve baş ağrısından tasarruf sağlayabilir. Unutma, tasarım mükemmel olmamalı, ama seni doğru yöne götüren bir şey olmalı.

Demek mimari tasarıma dayanarak ihtiyacımız olan şey bu.

  • Bileşenler: users.js, user-profile.js ve issues.js
  • Düzenler: header.js ve sidebar.js
  • Kontrol Paneli: dashboard.js

Tüm bileşenler ve mizanpajlar dashboard.js dosyasına yüklenecek ve ardından indexboard'da dashboard.js dosyasını önyükleyeceğiz.

Panomuzun mimari tasarımı

Peki neden bir düzen ve bileşenler klasörümüz var?

Bir düzen, örneğin bir statik şablon gibi bir zamana ihtiyacımız olan bir şeydir. Kontrol panelinin içindeki içerik değişebilir, ancak kenar çubuğu ve üstbilgi aynı kalır (ve bunlar paftalar olarak bilinir). Bir düzen, bir hata sayfası, altbilgi, durum sayfası ve benzeri olabilir.

Bileşenler klasörü, genel bileşenler içindir ve büyük olasılıkla birden fazla kez tekrar kullanacağız.

Modüllerle çalışırken sağlam bir zemin yapısına sahip olmak önemlidir. Etkili bir şekilde ölçeklenebilmesi için, klasörlerin öğeleri bulup hata ayıklamayı kolaylaştıran makul adlara sahip olması gerekir.

Daha sonra, ihtiyacımız olan bileşenler ve düzenler için bir klasör alanına sahip olmayı gerektiren dinamik bir arayüz oluşturmayı göstereceğim.

Adım 2 - Kurulum klasörü yapısı

Belirtildiği gibi 3 ana klasörümüz var: gösterge paneli, bileşenler ve düzenler.

- Gösterge Paneli
- bileşenler
- düzenler
index.html
index.js (giriş noktası)

Ve klasörün içindeki her dosyada, bir sınıfı ihraç ediyoruz.

- Gösterge Paneli
    dashboard.js
- bileşenler
    issues.js
    kullanıcı profile.js
    users.js
- düzenler
    header.js
    sidebar.js
index.html
index.js (giriş noktası)

Adım 3 - Uygulama

Klasör yapısının tümü ayarlanmıştır, bu nedenle yapılacak bir sonraki şey her dosyada bileşen (bir sınıf) oluşturmak ve sonra dışa aktarmaktır. Kod kuralları diğer dosyalar için de aynıdır: her bileşen sadece bir sınıftır ve “x bileşeni yüklü” alan bir yöntemdir; burada x, bileşenin yüklendiğini belirtmek için bileşenin adıdır.

Bir kullanıcı sınıfı oluşturalım ve sonra aşağıda gösterildiği şekilde verelim.

Dikkat, ihracat bildirimi ile ilgili olarak çeşitli seçeneklerimiz var. Bu nedenle fikir, bağımsız bileşenleri veya bir bileşen koleksiyonunu dışa aktarabileceğinizdir. Örneğin, sınıfı dışa aktarırsak, sınıfın yeni bir örneğini oluşturarak, içinde bildirilen yöntemlere erişebiliriz.

Tamam, öyleyse, adım 1'deki mimari şemaya bakarsanız, kullanıcı profili bileşeninin başlık düzeninde bulunduğunu fark edersiniz. Bu, başlık düzenini yüklediğimizde, kullanıcı profili bileşenini de yükleyeceği anlamına gelir.

Artık her bir bileşen ve düzen dışa aktarılmış bir sınıfa sahip olduktan sonra, bunu şu şekilde kontrol panel dosyamıza alırız:

Pano dosyasında gerçekte neler olup bittiğini anlamak için, 1. adımdaki çizime tekrar bakmamız gerekiyor. Kısacası, her bileşen bir sınıf olduğu için, yeni bir örnek oluşturmalı ve sonra bir nesneye atamalıyız. Sonra nesneyi loadDashboard () yönteminde gösterildiği gibi yöntemleri yürütmek için kullanırız.

Şu anda, uygulama loadDashboard () metodunu uygulamadığımız için hiçbir şey çıkarmıyor. Çalışması için, gösterge panelini index.js dosyasında şu şekilde içe aktarmamız gerekiyor:

Ve sonra konsol çıktıları:

ES6 yüklü bileşenleri

Gösterildiği gibi, her şey çalışıyor ve bileşenler başarıyla yükleniyor. Ayrıca devam edip iki örnek oluşturabilir ve sonra böyle bir şey yapabiliriz:

Hangi çıktıyı yukarıda gösterildiğinin aynısı, ancak yeni örnekler almamız gerektiğinden, sonuçları iki kez alıyoruz.

Gösterge panelinin iki benzersiz örneği

Genel olarak, bu, modülü diğer modüllere müdahale etmeden gereken dosyalarda kolayca korumamızı ve yeniden kullanmamızı sağlar. Sadece bileşenleri içine alan yeni bir örnek yaratıyoruz.

Bununla birlikte, daha önce de belirtildiği gibi, amaç, ithalat ve ihracat ifadelerini kullanarak modüller ve bileşenlerle nasıl çalışabileceğimizin dinamiğini karşılamaktı.

Çoğu durumda JS çerçeveleriyle çalışırken, genellikle gösterge panosunun içeriğini değiştirebilecek bir rotamız vardır. Şu anda, mizanpajlar gibi her şey, ideal bir yaklaşım olmayan loadDashboard () yöntemini çağırdığımızda her yükleniyor.

5. Pano örneği için optimizasyon teknikleri

Artık modüllerin nasıl çalıştığı hakkında temel bir anlayışa sahip olduğumuz için, birçok bileşenden oluşan büyük uygulamalarla uğraşırken yaklaşım gerçekten ölçeklenebilir veya sezgisel değildir.

Dinamik bir arayüz olarak bilinen bir şeye ihtiyacımız var. İhtiyacımız olan bileşenlerin bir koleksiyonunu oluşturmamızı ve kolayca erişebilmemizi sağlar. Visual Studio Kodunu kullanıyorsanız, IntelliSense size hangi bileşenlerin mevcut olduğunu ve hangilerini daha önce kullandığınızı gösterir. Hangi bileşenlerin dışa aktarıldığını görmek için klasörü / dosyayı el ile açmanız gerekmez.

Dolayısıyla, yirmi bileşene sahip bir modülümüz varsa, her bir bileşeni birbiri ardına almak istemeyiz. Sadece ihtiyacımız olanı elde etmek istiyoruz ve hepsi bu. Ad alanları ile C #, PHP, C ++ veya Java gibi dillerde çalıştıysanız, bu kavramın doğada benzer olduğunu fark edeceksiniz.

İşte ulaşmak istediğimiz şey:

Gösterildiği gibi, daha az kod satırımız var ve bağlamı kaybetmeden bildirimde bulunduk. Hangi değişiklikleri yaptığımızı görelim.

Dinamik bir arayüz oluşturun (varil olarak da bilinir)

Dinamik bir arayüz, ihtiyacımız olan şeylerin bir koleksiyonunu oluşturmamızı sağlar. Favori araçlarımızla bir araç kutusu oluşturmak gibi. Söylemesi gereken en önemli şey, her bir klasöre dinamik bir arabirimin değil, birçok bileşenden oluşan klasörlere eklenmesi gerektiğidir.

İthalatı büyük ölçüde basitleştirir ve daha net görünmelerini sağlar. Yalnızca çok fazla varil dosyasına sahip olmak istemiyoruz çünkü bu, karşı üretken olduğundan ve genellikle bazen çözülmesi zor olan dairesel bağımlılık sorunlarına yol açmaktadır.
- Adrian Fâciu

Dinamik bir arabirim oluşturmak için, ihtiyacımız olan bir altkümeyi veya bileşen alt kümesini yeniden dışa aktarmak için her bir klasörün kökünde bulunan index.js adlı bir dosya oluştururuz. Aynı kavram TypeScript'te çalışır, siz sadece türünü .js'den index.ts gibi .ts'e değiştirirsiniz.

İndex.js, kök klasör alanına girdiğimizde yüklenen ilk dosyadır - HTML içeriğimizi önyükleyen index.html ile aynı konsepttedir. Bu, açıkça './components/index.js' adresinden {component} import alma yazmamız gerekmediği, bunun yerine '.

İşte dinamik bir arayüzün görünüşü.

Dinamik bir arayüz kullanarak, erişmek için daha az root seviyesi ve daha az kod kullanırız.

Çalışma zamanında yeni bir örnek oluşturun

Dashboard.js'deki dört örneği kaldırdık ve bunun yerine her bileşen dışa aktarıldığında çalışma zamanında bir örnek oluşturduk. Nesnenin adına karar vermek istiyorsanız, varsayılan yeni Dashboard'u () dışa aktarabilir ve ardından kıvrımlı parantez olmadan dashView alabilirsiniz.

Gösterildiği gibi, yeni bir örnek oluşturmaya gerek kalmadan doğrudan yöntemi çağırabilir ve ayrıca daha az kod yazabiliriz. Ancak, bu kişisel bir tercihtir ve uygulamanız ve gereksinimleriniz için pratik bir kullanım durumunun ne olduğuna serbestçe karar verebilirsiniz.

Sonunda, tüm bileşenleri ve mizanpajları tek bir yöntemle yüklüyoruz.

Sonuç

Bir bileşeni nasıl içe ve dışa aktarabileceğinize dair kısa bir örnek göstermek niyetiyle başladım, ancak daha sonra bildiğim her şeyi paylaşma ihtiyacını hissettim (neredeyse). Umarım bu makale size uygulama geliştirirken ES6 modülleriyle nasıl etkili bir şekilde başa çıkılacağına ve endişelerin ayrılması açısından önemli olan şeylere (tasarım ilkesi) ilişkin bazı bilgiler verir.

Paketler:

  • ES6 modülleri ile, bileşenlerin harici davranış tarafından değiştirilmelerini kolayca yeniden kullanabilir, bakımını yapabilir, ayırabilir ve kapsüllenebiliriz
  • Bir modül bir bileşen koleksiyonudur
  • Bir bileşen bireysel bir bloktur
  • Zaman ve kaynak gerektirdiği için her şeyi yeniden kullanılabilir hale getirmeye çalışmayın ve çoğu zaman yeniden kullanmayız.
  • Koda dalmadan önce bir mimari şema oluşturun
  • Bileşenleri diğer dosyalarda da kullanılabilir hale getirmek için önce dışa aktarmalı sonra içe aktarmalıyız.
  • İndex.js kullanarak (TypeScript index.ts için aynı konsept) daha az kod ve daha az hiyerarşik yolla ihtiyacımız olan şeylere hızlı bir şekilde erişmek için dinamik arayüzler (variller) oluşturabiliriz
  • Export let objectName = new ClassName () öğesini kullanarak çalışma zamanında yeni bir örneği verebilirsiniz.

İyi haber şu ki, işler değişti ve bileşen tabanlı ve tekrar kullanılabilir bir paradigmaya doğru ilerliyoruz. Sorun sadece düz JS kodunu değil, aynı zamanda HTML öğelerini pratik ve sezgisel bir şekilde nasıl yeniden kullanabileceğimizdir. Görünüşe göre, web bileşenleri ile birleştirilmiş ES6 modülleri, performans ve ölçeklenebilir uygulamalar geliştirmek için bize gerekenleri verebilir.

İşte kişisel programlama ipuçları ve püf noktaları ile birlikte web ekosistemi hakkında yazdığım birkaç makale.

  • Açısal ve Tepki arasında bir karşılaştırma
  • Kaotik bir zihin kaotik koda yol açar
  • Sürekli yeni şeyler öğrenmek isteyen geliştiriciler
  • Bu temel Web Kavramlarını öğrenin
  • Bu önemli JavaScript yöntemleriyle becerilerinizi geliştirin
  • Özel bash komutları oluşturarak daha hızlı programlayın

Beni haftalık olarak yayınladığım Orta'da bulabilirsin. Veya kişisel gelişim hikayeleri ile ilgili web geliştirme ipuçlarını ve püf noktalarını gönderdiğim Twitter'da beni takip edebilirsiniz.

Bu makaleden hoşlandıysanız ve bunun gibi şeyler istiyorsanız, lütfen alkışlayın (❤) ve arkadaşlarınızla veya iş arkadaşlarınızla paylaşın, bu iyi bir karma.