g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

JavaScript kodlama yeteneğinizi kademeli olarak nasıl geliştireceğinizi öğretmek mi?

Tam metin 5024 Kelimeler, tahmini öğrenme süresi 15 dakika

Kaynak: Pexels

Bugün Xiaoxin, JavaScript kodlama yeteneğini geliştirmek için bazı uygulama yöntemlerini sizinle paylaşacak. Bunları pratikte öğrenir ve uygularsanız, siz de bir kodlama ustası olabilirsiniz ~

editör

Şu anda pek çok türden editör var ve insanlar iş verimliliğini artırmak için hangi editörü seçeceklerini bilmiyorlar.

Benim için, Xcode kullanarak Android Studio veya iOS kullanmak için gereken Android kodu dışında çoğunlukla yalnızca Visual Studio Code kullanıyorum.

Bu, Microsoft tarafından geliştirilmiş bir düzenleyicidir. Bu Microsoft tarafından geliştirildi ve kulağa harika geliyor! ! ! Hemen hemen tüm diller desteklenir, sayısız ek eklenti, AI kod önerileri, güzel arayüz ve açık renkler (Sublime Text değil, ama ... hala açık renkler)

Geçmişte, yalnızca Sublime Text kullanıyordum (VSCode o zamanlar popüler değildi). Hataların otomatik olarak algılanması ve onarımı, format kodları, git lens, terminal vb. Gibi çok sayıda eklenti (aşağıda tartışılmıştır) bana çok zaman kazandırdı, çünkü artık kodlamadaki yaygın küçük hataları çözmeye gerek yok.

PHP yazarsanız, PHPStorm'u seveceksiniz. Python yazarsanız, PyCharm'ı seveceksiniz. Söylemeye gerek yok, bu editörler güçlüdür, ancak yalnızca bir dili destekliyorlar. JavaScript, HTML, PHP, NodeJS ve React Docker tecrübesi olan tam yığın geliştiriciyim ... VSCode kullanıyorum çünkü çok güçlü ve birçok eklentiyi destekliyor, özellikle de otomatik tamamlama işlevi çok iyi.

ESLint ile ilk görüşte aşk

Zamanımın çoğunu dilbilgisi hataları üzerinde harcadım ve ayrıca bildirilmemiş değişkenler / işlevler, boş işaretçiler, eksik aksanlar vb. On dosya, gözleri yormak kolaydır, zihni karıştırır ve eller her kod satırını titreyerek yazmaya başlar, bu da dikkatsiz olmayı ve hata yapmayı kolaylaştırır.

ESLint kullanırken, bu eklenti hataları bulmaya, dilbilgisini ve biçimlendirme kodunu kontrol etmeye yardımcı olabilir, böylece kodlama boşluklarını azaltabilir ve kodun mevcut standartlara göre biçimlendirildiğinde daha iyi görünmesini sağlayabilir. ESLint ayrıca diğer birçok büyük kardeşi de destekler: JavaScript, React, Vue, vb.

Özellikle ESLint ve VSCode ile birleştirildiğinde bu eşleşme mükemmeldir. Hata veya sözdizimi sorunları olup olmadığını görmek için hemen kod yazmayı kontrol edebilir ve en iyi sonuçları elde etmek için işlevlerin ve değişkenlerin nasıl kullanılacağına dair önerilerde bulunabilirsiniz. Otomatik olarak biçimlendirilmiş kodlar da var, bayılacaksınız.

ESLint'e ek olarak, kodu biçimlendirmek için Prettier'ı da kullanabilirsiniz, ancak hata algılamayı desteklediği ve en iyi kod önerilerini sağladığı için ESLint'i tercih ediyorum.

Optimal dizin yapısı

Geçenlerde "kabul etmeye" başladım ve kendime bir şey söyledim:

Proje yapısını baştan optimize etmeye çalışmayın

Geçmişte, bir projeye başlarken, ne kadar büyük ya da küçük olursa olsun, her zaman en iyi proje yapısını seçmek için çok zaman harcadım. Google'da çeşitli "NodeJS Klasör Yapısı için En İyi Uygulamalar" ve "ReactJS Kod Yapısı ..." okudum, ancak yine de bu yapının en iyisi olup olmadığını öğrenmek istiyorum. Bu kodlama çerçevesini seçmeli miyim? Bu çok zaman alıcıdır.

Ayrıca ilk başta iyi bir yapı kullanmaya çalışsam da birkaç gün sonra kodun karmakarışık hale geldiğini fark ettim. Sistem düşüncem iyi olmadığı için, kodun ilk başta ne kadar güzel olduğu önemli değil, ama sonunda bir şeyler ters gitti.

Hangi mimariyi seçeceğiniz ve onu en başından nasıl organize edeceğiniz konusunda fazla düşünmeyin. Bir yön veya kitaplık, çerçeve seçin ve daha iyi ve daha pratik olması için iyileştirmeler yaparken araştırmaya başlayın.

İyi yapılandırılmış bir projeyle ilgileniyorsanız, NestJS adlı bir NodeJS çerçevesini paylaşacağım. İlgili birçok belgeyi okudum ve mimarilerinin çok iyi olduğunu gördüm (Angular'ı pek sevmeme rağmen AngularJS'e çok benzer)

Kodun "bozuk" olduğunu düşündüğünüzde, Console.log'u kullanın.

JavaScript yazarken en çok kullandığım konsol.log olduğundan oldukça eminim. Bunun temel amacı, ilgili verilerin doğru olup olmadığını görmektir.

Kaynak: Pexels

Kişisel olarak, hangi dili kullanırsanız kullanın, programlamanın verilerden ayrılamayacağını düşünüyorum, bu nedenle rahatsız edici bir kod görürseniz, kod yanlış olabilir, onaylamak için console.log kullanmalısınız.

Hata ayıklayıcının daha profesyonel görünmesi gerektiğini düşünen birçok kişi de var. Google ayrıca daha iyi anlaşılması için kod satırına Hata Ayıklama koymayı da destekler. Aslında bu benim için kişisel olarak gerekli değil. Console.log ayrıca kodun hangi satırını da fark edecek. Console.log'u ne kadar hızlı kullanırsanız, o kadar kullanışlı olacaktır. Ayrıca Facebook'ta dünyaca ünlü kodlama uzmanları buldum, hala console .log kullanıyorlar.

Ayrıca console.log tamamlandıktan sonra, lütfen silmeden önce her şeyi kontrol edin ve git'e koymayın. Ona baktığımda sinir bozucu ve canımı yakıyor (benim gibi)

Yorumlar

Kodlama sürecinde genellikle uzun ve karmaşık kodlar gereklidir. İnsanlar, kodu uzun süre tekrar okuduktan sonra, kodun ne yaptığını bilmeyebileceğinizden endişelenirler. Ya da insani bir kalple, umarım gelecekte bu kodu okuyan insanlar kodun rolünü anlayabilirler.

Şahsen, özellikle projeye birçok kişi dahil olduğunda, inceleme yazmayı gerçekten yararlı buluyorum. Dahası, her anlamadığımızda bu kodu yazan bir arkadaşa sormak istemiyoruz ve bu arkadaş da testçilerin yaptığı çok sayıda hatayı düzeltmekle meşgul. Ve eğer kodun kendisi açıklanabiliyorsa, o zaman kodu gören insanlar hemen anlayabilir ve zaman kazanabilir.

Ancak yorumların da makul ve rahat görünmesi gerekir. Her şey hakkında yorum yapmaya gerek yok. Bu bazen kodun okunmasını zorlaştırır ve gözleri rahatsız eder.

Kod yazarken, kolay anlaşılması için değişkenin / işlevin adını seçeceğim ve uzun sınıfın / işlevin çok fazla içeriği işlemesine izin vermeyeceğim. Bunun yerine, daha küçük sınıflara / işlevlere ayrılacağım (ama çok fazla bölmeyin, bölünme makul olmalı, insanları tekrar gözlere baktırmamak için). Gerektiğinde yorum bırakın ve "kendi kendine açıklama" için kod yazma pratiği yapın. Sadece okuyun ve ne işe yaradığını bilin.

ES6, 7, 8, 9 standartlarını kullanın

JavaScript hızla gelişen bir dildir ve birçok güçlü işlev / kitaplık eklenmiştir. Bildiğim kadarıyla insanlar her yıl ECMAScript veya ES adında bir JavaScript standardı yayınlıyor. Bu standartların her biri, JavaScript'te yerleşik yeni özellikler içerir.

· 2015 ECMAScript 6 (ES6)

· 2016 ECMAScript 7 (ES7)

· 2015 ECMAScript 8 (ES8)

· 2015 ECMAScript 9 (ES9)

· 2015 ECMAScript 10 (ES10)

·.

Bu nedenle, ECMA'nın gücünden yararlanırsanız, kod geleneksel for and if, while döngülerini kullanmaktan daha iyi, daha optimize edilmiş ve daha soğuk görünecektir (bu makalenin yazarı kadar sevimli)

Kod yazarken en sık kullandığım bazı işlevler / işleçler şunlardır:

Promise / Callback'i atlayın ve Async hakkında bilgi edinin / doğrudan bekleyin

Söz / Geri Arama

Kodlamanın dezavantajı, API'leri yoğun bir şekilde kullanmak zorunda olmamızdır. Veri ve görüntü elde etmek için arka uçtan veya üçüncü bir taraftan API'yi çağırırken, aşağıdaki işlemleri gerçekleştirmeniz gerekir:

Yalnızca kullanıcı listesini başarıyla aldıktan sonra başka bir API çağırmak istiyorsanız, genellikle aşağıdakileri yapmanız gerekir:

Sırayla bir dizi API çağırmak istediğinizde kötü şeyler gelir. Proje ölçeği genişledikçe ve işlenen talepler gittikçe daha karmaşık hale geldikçe, gördüğünüz şey şu:

Async / await kurtarıcıdır

ES6'dan (2015) bu yana, zaman uyumsuz işlemleri işlemek için Promise / geri aramalara alternatif olarak async / await tanıtıldı. Zaman uyumsuz / beklemenin avantajı, eşzamanlı gibi görünen, satır satır çalışan ve çok düzgün görünen eşzamansız kod yazmaya yardımcı olmasıdır.

Yukarıdaki kod, async / await kullanılarak yeniden yazılabilir:

Bazı uyarılar var:

· Await her zaman eşzamansızdan sonra görünür

Eşzamansız işlevlerde hata işleme işlemlerini yakalamak için dene / yakala özelliğini kullanın

· Await'in özü, Promise'ın dönüş değerini beklemektir, bu yüzden çok fazla await kullanmak bazen uygulamayı yavaşlatır.

Normal Promise / Callback yerine async / await kullanmanın bir başka yararı da, try / catch kullanılarak async / await hatalarının bulunabilmesidir. Ayrıca, yalnızca eşzamansız / beklemede değil, try / catchblock'taki diğer tüm hataları da bulun

Kod kalitesini artırmak için Typescript kullanın

Hikaye başlıyor...

Programlamaya ilk başladığımda C dilini ve ardından Java'yı kullandım. Bu diller güçlüdür, son derece katı kodlar gerektirir ve veri türlerinin (dize, boole, ...) veya erişim belirtimlerinin (genel, özel, korumalı ...) açık ve eksiksiz tanımlarını gerektirir. O gün kodu çalıştırmaktan çok yorulmuştum, çünkü bunun herkese açık mı yoksa özel mi olduğunu ve veri türünün ne olduğunu bilmiyordum, bu yüzden bir hata bildirilene kadar çalışmaya devam ettim.

Bundan sonra, veri türünden bağımsız olarak JavaScript (veya PHP, Python) kullanmaya başlayın, büyük ölçüde basitleştirilmiştir. Sadece kullanılacak değişkeni bildiriniz:

X = olsun

1const test = 'Bu bir testtir'

const arr =

Bu aynı zamanda JS'yi en baştan sevmemin nedenlerinden biri çünkü sözdizimi çok "özgür", çok dağınık değil ve kod temiz ve güzel görünüyor. Ama hayat rüya gibi değil. Yavaş yavaş fark ettim ki projede çok sayıda kişi kodu yazarken, kodu yeniden okuyacağım. Gerçekten karışık. Bu değişkenin ne olduğunu bilmediğim için fonksiyon ne tür veriler döndürecektir?

const var1 = db.column1const var2 = db.column2const var3 = db.column3const var4 = db.column4

Şimdi ne olacak? ? Elbette console.log kullanın

const var1 = db.column1console.log (var1) // - > stringconst var2 = db.column2console.log (var2) // - > boolean (doğru / yanlış) const var3 = db.column3console.log (var3) // - > numberconst var4 = db.column4console.log (var4) // - > dizi

Bu sadece zaman kaybedecek, gelecekte kodu tekrar okuyamayacağım ve yeni kod okuyucular bunu anlamayacak. Öyleyse, ben veya diğer okuyucular anlamak için düzinelerce console.log ifadesi yapmalıyım, kod ne için?

Typecript bu sorunu çözer

Bana göre TypeScript, JavaScript'in "yükseltilmiş bir sürümü" dür. Artık JavaScript kodunun iyi tanımlanmış türleri (dizeler, boole'lar, sayılar vb.), Erişilebilir erişim işlevleri (genel, özel) ve daha birçok şey olacaktır. Typescript'te yazılan kod sıradan JavaScript'te derlenecek, böylece özel Typescript komut dosyaları veya başka şeyler olmadan her zamanki gibi çalışabilir. Bazı örneklere bakın:

TypeScript'i iki yıl önce duymuştum ama yine de hoşuma gitmiyor ve kullanmak istemiyorum çünkü sadece JavaScript'in özgürlüğünü seviyorum. Bazen denemek istiyorum ama gözlerim çok hassas, ne zaman dağınık şeyler görsem gözlerim daha hassas oluyor.

Ancak çok geçmeden TypeScript'e geçmeye karar verdim çünkü eski kodu veya başkalarının kodunu okurken bahsettiğim baş ağrısıyla karşılaştım. Dahası, geliştirici topluluğu TypeScript kullanma ve iyi bir inceleme yapma eğilimindedir.

Şu anda TypeScript, JavaScript geliştiricileri arasında popülerlik kazanıyor. Kitaplıklar veya çerçeveler (Angular, React veya Vue) TypeScript desteğine odaklanır. Bilmeyenler için: Vue 3 kesinlikle Typescript'in yeniden yazılmasıdır. Aynı zamanda, Microsoft tarafından geliştirilen TypeScript için kalite ve destek sorunları konusunda endişelenmenize gerek yok.

CI / CD Kodu > Ölçek- > dağıtmak

otomatik test

Lütfen beni dinleyin, üzerinde çalıştığınız proje er ya da geç çökecek. Bununla baş etmenin en iyi yolu, bunu yaparken gelişmek ve her zaman zamanın% 20'sini iyileştirmeye harcamaktır. Ve emin olmanın tek yolu, hatasız (veya en az hata) iyileştirmeler yapmak veya testler yazmaktır.

Biliyorsunuz, kodlamadan önce testler bile yazabilirsiniz (Head First Java bu yaklaşımı önerir)

CI / CD sürekli test ve dağıtım

CI / CD (Sürekli Entegrasyon / Sürekli Entegrasyon), bu mevcut eğilimdir, bu yöntem otomatik olarak ve sürekli olarak kod yazmaya, test etmeye ve dağıtmaya yardımcı olur.

Aslında, neredeyse tüm CI / CD araçları Github, GitLab, BitBucket'e entegre edilmiştir. Bu yüzden endişelenmenize gerek yok, tek yapmanız gereken ayarlamak ve kodu zorlamak. DevOps platformu (Github, gitlab, buck) gerisini halleder.