7 En İyi Uygulama – JSManifest

7 En İyi Uygulama – JSManifest

1. Fabrika işlevlerini kullanın

Bir fabrika işlevinin ne olduğunu bilmiyorsanız, bu yalnızca bir nesne döndüren bir işlevdir (bu bir sınıf veya yapıcı değildir). Bu basit konsept, güçlü ve sağlam uygulamalar oluşturmak için JavaScript’ten ve özelliklerinden yararlanmamızı sağlar.

ile çağrıldıklarında artık fabrika işlevi olmadığını bilmek önemlidir. new anahtar kelime.

Neden fabrika fonksiyonları?

Fabrika işlevleri, sınıflarla veya new anahtar sözcüğüyle hiçbir ilgisi olmadan nesnelerin örneklerini kolayca üretmek için kullanılabilir.

Bunun esas olarak anlamı, nihayetinde yalnızca işlevler olarak ele alınmalarıdır; bu, nesneleri, işlevleri ve hatta vaatleri oluşturmak için kullanılabilecekleri anlamına gelir. Bu, gelişmiş bir fabrika işlevi oluşturmak için fabrika işlevlerini karıştırıp eşleştirebileceğiniz, ardından daha da gelişmiş işlevler oluşturmak için diğer işlevler veya nesnelerle oluşturmaya devam edebileceğiniz anlamına gelir. İmkanlar sonsuzdur.

Bunu dikkate alıp iyi kod uygulamalarıyla birleştirdiğimizde gerçekten parlamaya başlıyor.

İşte bir fabrika fonksiyonunun basit bir örneği:

function createFrog(name) {
  const children = []

  return {
    addChild(frog) {
      children.push(frog)
    },
  }
}

const mikeTheFrog = createFrog('mike')

Fabrika işlevlerini yeterince kullandığınızda, sınıf oluşturucu muadili ile karşılaştırıldığında, daha güçlü yeniden kullanılabilirliği desteklediğini fark etmeye başlarsınız. Bu, daha az kod, fabrika işlevleri nihayetinde rastgele nesneler döndürdüğü için daha kolay yeniden düzenleme zamanı ve bir kodu diğerine yönetmeyi daha kolay hale getirir.

2. Yapıcılar yazarken .prototype üzerine yöntemler ekleyin

JavaScript’te yeniyseniz, JavaScript deneyimimin ilk iki yılında benim için olduğu gibi bu bölüm sizin için biraz yeni olabilir.

(Bunun sınıflar için geçerli olmadığını unutmayın, çünkü sınıflar zaten prototiplerine yöntemler ekler.)

İşte bir kurucu örneği:

function Frog(name, gender) {
  this.name = name
  this.gender = gender
}

Frog.prototype.leap = function(feet) {
  console.log(`Leaping ${feet}ft into the air`)
}

Aşağıdaki örnekte olduğu gibi, sıçrama yöntemini doğrudan eklemek yerine neden bunu yapıyorsunuz?

function Frog(name, gender) {
  this.name = name
  this.gender = gender

  this.leap = function(feet) {
    console.log(`Leaping ${feet}ft into the air`)
  }
}

Yöntemleri doğrudan prototipe eklediğimizde, bunlar yapıcı tarafından oluşturulan tüm örnekler arasında paylaşılır.

Diğer bir deyişle, son örneği kullanarak, eğer üç ayrı Kurbağa yaratırsak ( this.leap = function() {...}), sonra üç ayrı kopya oluşturuyoruz. Bu bir sorundur çünkü sıçrama yöntemi her zaman aynı kalır ve örneğine kendi kopyasına sahip olması gerekmez.

Sonuç olarak, bu, önlenebilecekken daha düşük performansla sonuçlanır. this.name ve this.gender özelliklerinin örnekte tanımlanması gerekir, çünkü gerçek hayatta kurbağaların muhtemelen kendi adları ve cinsiyetleri vardır, bu nedenle onları örnek düzeyinde oluşturmak mantıklıdır.

İşte bir örnek halk tarafından kullanılan bu yaklaşımın rica etmek paket.

3. Farklılaştırma yaparken geleneksel .type özelliğini kullanın

Bu uygulama o kadar iyi çalışıyor ki bugün yaygın olarak kullanılıyor. Bir React geliştiricisiyseniz, muhtemelen bunu zaten her gün, özellikle de birlikte çalışırken görüyordunuz. redux.

Benzer yaklaşımları kullanmak, kendini son derece iyi belgelediğinden, geliştirme akışınızda sizin için son derece kolay hale getirir:

function createSpecies(type, name, gender) {
  if (type === 'frog') {
    return createFrog(name, gender)
  } else if (type === 'human') {
    return createHuman(name, gender)
  } else if (type == undefined) {
    throw new Error('Cannot create a species with an unknown type')
  }
}

const myNewFrog = createSpecies('frog', 'sally', 'female')

4. TypeScript kullanın

TypeScript tür güvenliği için güçlü bir savunma sağlama yeteneğinin yanı sıra hataları oluşmadan önce yakalamamıza yardımcı olma yeteneği nedeniyle JavaScript topluluğunda yaygın olarak benimsenmiştir.

TypeScript kullanmak, derleyicinizin koddaki olası hatalarla ilgili uyarıları daha kod çalıştırılmadan önce algılamasını ve göstermesini sağlar.

Ancak bu, TypeScript’i benimsemenin herhangi bir durum için neden iyi olduğunun tam bir listesinin yakınında bile değil. TypeScript ile ilgili en iyi şeylerden biri, JavaScript’teki yeni özellikleri büyük tarayıcılar tarafından desteklenmeden önce kullanmanıza izin vermesidir, çünkü bunlar JavaScript’in önceki sürümlerine derlenirler ve sonuçta eski tarayıcılarda çalıştırılabilirler.

5. Testler yazın

Bir proje üzerinde çalışıyorsanız ve onunla ciddileşmeyi planlıyorsanız, uygulamanızın daha öngörülebilir, daha az hataya açık ve gelecekteki değişikliklere karşı dayanıklı olması için testler uygulamak neredeyse bir zorunluluktur. Başka bir deyişle, projenizi geleceğe hazır hale getirmeyi planlıyorsanız, kodunuz boyunca testler oluşturmaktan daha iyi bir yol yoktur. Kodunuza ne kadar çok test koyarsanız, üretimde gerçek dünyaya dağıtıldığında o kadar çok güven duyacaksınız.

Testlerin en iyi yanı? Sadece, hataların ortaya çıkma şansını yakalamadan önce hataları yakalamanıza yardımcı olabilecekleri gerçeği – kimse bu yeteneği istemez miydi? Ben eminim! Bu yüzden projelerimde birim testleri yazıyorum.

Testle ilgili bu gönderiyi okuyarak bugün kullanılan araç türleriyle başlayabilirsiniz. çerçeveler ve araçlar başlaman için.

6. İşlevleri olabildiğince basit tutun

Hepimizin bildiği gibi, JavaScript’te birden fazla şey yapan devasa fonksiyonlara sahip olmak açıkça mümkündür.

Programlamada yeniyseniz, bu iyi bir şey gibi gelmiş olabilir – İşe yarayan büyük kod parçaları yazdığımda kendim hakkında son derece iyi hissettiğimi biliyorum. Temelde benim için en önemli şeydi ve yazdığım devasa kod blokları bir yana, kodumun herhangi birinin sorunsuz çalıştığını görmek için bana çok güven verdi. Oğlan oh oğlum, o zamanlar son derece saf mıydım!

Daha sürdürülebilir, basit ve daha az hataya açık bir kod yazmak istiyorsanız, kodu olabildiğince basit ve küçük tutmaya çalışmak en iyisidir. Ne kadar basit olursa, bireysel olarak test etmek o kadar kolay olur.

Bu, özellikle işlevsel programlama paradigmasını daha çok seviyorsanız geçerlidir. İşlevlerin bir şeyi yapması gerektiği ve bunu iyi yapması gerektiği yaygın bir bilgidir.

7. Her zaman kullanmayı düşünün try/catch kullanırken JSON.parse veya JSON.stringify

JavaScript’te, JSON’u girdi olarak ilettiğimizde JSON.parse yöntemi, ilk argüman olarak düzgün biçimlendirilmiş bir JSON bekler. Yanlış biçimlendirilirse, bir JSON ayrıştırma hatası verir.

JSON ayrıştırma hatalarından kaynaklanan tehlike, geçersiz JSON almanın uygulamanızı çökertmesidir. Geçenlerde işyerinde, başka bir dahili paketin bir paketi sarmadığı için web projelerimizden birinin başarısız olduğu bir durumla karşılaştım. JSON.parse bir dene/yakala. Bu, bir web sayfasının başarısız olmasına neden oldu ve dahili paket düzeltmedikçe bu hatayı geçmenin bir yolu yoktu. Bu, JavaScript çalışma zamanı bozulduğu için oldu.

SyntaxError: Unexpected token } in JSON at position 107

gibi garip karakterler alabileceğinden, her zaman geçerli JSON girişi beklememelisiniz. > bugün nadir olmayan karakter.

Çözüm

Ve bu, bu parçayı sonuçlandırıyor. Umarım bunu değerli bulmuşsunuzdur. Gelecekte daha fazlasını izleyin!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.