Javscript

Birden Fazla Kavramı Yıkacak 10 JavaScript ve NodeJS İpucu – JSManifest

Geçen gün JavaScript’te bazı nesnelere bakarken şunu fark ettim: ne öğrenmek, öğrenme sürecinde büyük adımlar atmanın etkili bir yoludur. Günümüz dünyasında, para için bir şeyler yapacaksanız, akıllıca çalışmak en iyi yoldur. Bunun nedeni, değerin para yapıcı olmasıdır. Bir şey biri için ne kadar değerliyse, o kişinin bunun için ödeme yapma şansı önemli ölçüde artar.

Başlangıç ​​aşamalarıma dönüp baktığımda, öğrendiğim için minnettardım. forEach, map, filter ve reduce çok erken kariyerimde, çünkü ben her yerde onları görmeye başladı. O zaman bilmiyordum ama önce bunları öğrenmek yapılacak akıllıca şeydi. Ve sadece bunların nasıl kullanılacağına dair bazı belgelere bakmaktan bahsetmiyorum. Bu konuların derinliklerine inen kitaplar okudum.

gibi bir şey öğrenmek arasında bir fark var reduce gibi bir şeye karşı map. Hangisini önce öğrenmek istediğimi, hangisini sonraya erteleyeceğimi sorsaydım. seçmek isterdim reduce devam etmek için çünkü mastering reduce şimdiden aşina olmama yardımcı olacak filter ve map aynı zamanda ikisini de aynı fonksiyon bloğunda yapabildiğinden:

function filterInStrings(fn, arr) {
  return arr.filter((item) => {
    return typeof item === 'string'
  })
}

function mapToUppercase(fn, arr) {
  return arr.map((item) => item.toUpperCase())
}


function reduce(reducer, arr) {
  return arr.reduce((acc, item) => {
    if (typeof item === 'string') {
      return acc.concat(item.toUpperCase())
    }
    return acc
  })
}

Bu gönderi, Her Birinde Bir Taşla Birden Fazla Kavramı Yenecek 10 JavaScript ve NodeJS İpuçlarını ele alacaktır.

İstek nesnesi (ipucu: window.fetch)

Hiç kullandı pencere.getir web uygulamaları geliştirirken JavaScript’te api? Bu popüler işlevin öğrenmenizi önerdiğim iki altın nesnesi var. en kısa sürede.

Şu anda gördüğüm sorun, makalelerin getirme api’sinden bahsederken bu nesneleri gerçekten gözden kaçırmaması. Elbette bazıları, yanıt verilerini şu adrese erişerek oku diyecektir: body başlıklar kadar özellik, ancak farklı bilmek bile veri tipleri yanıt verilerinin uzun bir yol kat edebilir. bu Rica etmek ve Tepki nesne her isteğe sarılmış yaparsın.

öğrendiğinde Rica etmek arayüz aslında bir taşla çok sayıda kuş vurursunuz çünkü dışarı çıkıp JavaScript topluluğuna sunulan üçüncü taraf araçlarla ellerinizi kirlettiğinizde, bu arayüzün basitleştirmenin bir yolu olarak bilerek taklit edildiğini fark edeceksiniz (ve birleştirme) http istek/yanıt boru hattı ile çalışan tüm uygulama geliştirme.

Örneğin, Gatsby İşlevlerini kullanıyorum ve her işleve ilettikleri argümanlar şunları içeriyor: rica etmek olan nesne nodejs’deki http modülündeki nesneyle aynı.

Başka bir örnek Web Çalışanları JavaScript’te. İşçiler, aynı zamanda aşağıdakileri de kullanan modern web uygulamalarında sıcak bir özelliktir. fetch api, nerede Request nesne yeniden belirir.

Yanıt nesnesi (ipucu: window.fetch)

tıpkı Rica etmek nesne, Tepki nesne, nesnenin nesnesi kadar (eğer o zaman daha fazla değilse) önemlidir. Rica etmek nesne, çünkü bu, uygulamanızın en hassas bölümünü içerir – yanıt veri.

İstek ve Yanıt arayüzüne aşina olduğunuzda, üçüncü taraf araçlara yönelik belgeleri anlamak için daha kolay bir zamanınız olacak.

Örneğin, GatsbyJS (yine) gibi modern çerçeveler, Gatsby Functions’ta bu yapıyı taklit eder. ExpressJS, tüm bunlarla çalışmakla ilgilidir. Rica etmek ve Tepki Yahoo, Amazon, LinkedIn, The New York Times, The Home Depot, AT&T, Meetup, The Wall Street Journal, Docker ve daha pek çok ünlü şirket tarafından kullanılan nesneler (Kaynak: yığın payı).

AWS Lambda işlevlerini şu şekilde kullanıyorum: @aws-sdk/istemci-lambda SDK ve aynı olan benzer İstek/Yanıt nesnelerini görün body, headers, statusCode ayarlarken özellikler InvocationType ile "RequestResponse"

Ayrıca Netlify Functions kullanıyorum ve her bir işleyiciden döndürmeniz gereken nesne, bir Response tüketicinin buna göre işlemesini sağlamak için bilmeniz gereken bir statusCode ile.

Köri fonksiyonları

JavaScript’teki köri işlevleri, aynı anda bir veya daha fazla bağımsız değişken alan ve sonraki (veya kalan) bağımsız değişkenleri bekleyen yeni bir işlev döndüren işlevlerdir. Tüm bağımsız değişkenler tamamlanana (beklenen) kadar yeni işlevler döndüren bir işlev dönüşümüdür.

Programlamaya yeni başlıyorsanız, bu çok garip gelebilir. Büyük olasılıkla kendinize neden birinin işlev vererek işlevleri döndüreceğini soruyordunuz. Bu gerçek dünyada farklı bir kavramdır. Elma istiyorsak, elmaları geri almak için vermek zorunda kalmayız. Neden sadece işlevi verip ihtiyacımız olanı hemen almıyorsunuz?

Körlemenin sağladığı faydalar, kütüphaneleri sevdiren şeydir. lodash çok güçlü. Önceden tanımlanmış bazı davranışları olan bir işlev oluşturabilir, ardından onu yaklaşan değerler için bir dönüşüm olarak yeniden kullanabilirsiniz (ipucu: hatta fonksiyonlar vardır değerler olarak kabul edilir JavaScript’te). lodash-fp tüm kodlarında bu kalıbı kullanır ve yepyeni bir programlama paradigması ile çalışmanıza yardımcı olur.

Körlemeyi anlamak anlamaktır fonksiyon bileşimi. İşlevleri birlikte oluşturmanın zarif yollarını bulmak için çok zaman harcadığınızda, sözcük kapsamı, kapanışlar, daha yüksek dereceli işlevler (sonraki bölüm), yürütme bağlamları, geçiş gibi tek seferde gelişmiş kavramlarla çalışıyorsunuz demektir. this doğru (bağımlıysa), referansları korumak vb.

İşte demek istediğim:

function curry(f) {
  const z = {}
  return function one(x, ...args) {
    return function two(y) {
      return f.call(one, x, y, z, ...args)
    }
  }
}

Körleme işleminin sonucu olarak bu kod parçacığında gerçekleşen her şey:

  1. Daha yüksek dereceli fonksiyon
  2. sözlüksel kapsam
  3. Kapanışlar
  4. Referansların bakımı
  5. Kısmi uygulama
  6. bakım this (eğer niyetin varsa)
  7. Uygulama ayrıntılarını gizleme
  8. Aynı nesneyi, birlikte çalışmak üzere gelecekteki tüm işlevlerle paylaşın

Bu tekniği büyük ölçüde kullanan iyi bir örnek, oluşturMağaza işlevinden redux kütüphane. (İpucu: Bu pasajda, işlev körelirken bazı düzgün davranışları tanımlayan yorumlar var)

Daha yüksek dereceli fonksiyonlar

Daha önce köri fonksiyonlarının faydalarından bahsetmiştik. Biz de zar zor bahsettik daha yüksek dereceli fonksiyonlar.

Körlemeyi öğrenerek, JavaScript’te öğrenme sürecinize büyük bir sıçrama yapmak için başka bir büyük kavram olan daha yüksek dereceli işlevlerle uygulamalı çalışmayı da öğrenirsiniz.

Daha yüksek dereceli işlevleri öğrendiğinizde, şunları da öğreniyorsunuz:

  1. Nasıl çalışılır ve nasıl yapılır görselleştirmek kapanışlar
  2. Kısmi uygulama işlevleri nasıl oluşturulur
  3. Değişkenler nasıl ezberlenir (bu, not almayı anlamanıza yardımcı olabilir)

Hemen hemen her JavaScript kitaplığı, daha yüksek dereceli işlevlerle çalışır. Yapabileceğin şey bu yapmak en önemli olan daha yüksek dereceli işlevlerle. Daha yüksek dereceli işlevleri anlayabilirseniz, aşağıdaki gibi gelişmiş tekniklerin nasıl yapıldığını anlamak için zaten iyi bir başlangıç ​​yapıyorsunuz demektir. dönüştürücüler JavaScript’te.

Stdout/Stdio/Stderr

Öğrenmek/birlikte çalışmak stdout, stderr ve stdio NodeJS’de (ve hatta web uygulamaları için) uygulama geliştirmeyi seviyorsanız, muhtemelen bir zorunluluktur. Bu, geliştirme kariyerimde daha sonraya kadar pek dikkat etmediğim bir şeydi.

ile çalıştığımı çok az biliyor muydum? stdout içinde neredeyse her dosya.

anlamak stdout, stderr ve stdio ve uygulamalarda nasıl kullanıldığı, bir süre önce ilk kez buna odaklanmaya başladığımda, sihirli çerçevelerdeki birçok kavramı kafamda “tık” yaptı.

Bir süre önce ben de yerlinin nasıl olduğunu öğrenmeyi planlıyordum. child_process NodeJS’deki modül çalışıyor, ancak onu bir kenara itmeye devam ettim. Sonunda ellerimi onunla kirletmeye karar verdiğimde anladım ki stdout modülle sahip olduğum gizemli şeyi çoktan ortadan kaldırdı. O zaman aşağıdaki gibi araçlara girmek benim için kolaydı. Mürekkep.

Sözler (geri arama konseptiyle bağlantılı olarak)

Sözlere ve geri aramalara hakim olmak, eşzamansız kodla çalışma yeteneğinizi geliştirecektir. Geri aramalar ve vaatler ayrıca her yerde.

Yeni başlayan biriyseniz, ustalaşmanız gereken ilk şeylerden biri bu olmalıdır. Hata ayıklama yeteneğiniz, mülakatlarda yaygın olarak sunulan bu can sıkıcı zor kod parçası gibi, karmaşık kodlarla uğraşırken de gelişir:

const arr = [10, 12, 15, 21]
for (var i = 0; i < arr.length; i++) {
  setTimeout(function () {
    console.log('The index of this number is: ' + i)
  }, 3000)
}

sanal düşünmek

Hiç şüphe yok ki: sanal veri yapılarında düşünmek, modern uygulama geliştirmenin yolu. Bu, popüler hale gelen bir kavramdır. Tepki gibi kütüphanelere ilham veren sanal-dom web uygulamaları için performans kodu yazmanın daha fazla yolunu sağlamak için.

Avantajları ve doğrudan DOM ile çalışmak yerine sanal veri yapılarıyla çalışmanın nasıl tercih edildiğini anlamaya başladığınızda, günümüzün web uygulamalarının çoğuna güç veren modern teknikleri anlamanın yarısına gelmiş olursunuz. Bu tür tekniklerin bazı örnekleri rehidrasyon ve sunucu bileşenleri.

Heck, sanal yapılarda düşünmek, hızınıza ve doğrudan çalışma yeteneğinize bile yardımcı olacaktır. AST yapılar. Nihayetinde beyniniz sadece üzerinde çok fazla egzersiz yapıyor sadece düz nesneler.

DOM ile Geçiş/Oynama

DOM’yi doğru bir şekilde geçmek (beklenen sırayla çocukları/ebeveynleri doğru bir şekilde ziyaret etmek açısından) birkaç şeyi anlamanıza yardımcı olacaktır:

  1. AST’lerle nasıl çalışılır (AST’lerle çalışmak konusunda rahat olduğunuzda, kendi babel eklentilerinizi oluşturmakta ve/veya TypeScript gibi araçlarla programlı olarak çalışmakta oldukça rahatsınızdır)

  2. AST’ler nasıl anlaşılır

  3. Ağaç geçişi (Çapraz ağaçları ve sonuçları tahmin edilebilir bir şekilde nasıl toplayacağınızı otomatik olarak anlarsınız). “Derinlik ilk arama” veya “ikili arama” gibi ürkütücü kelimelerden çok korkmayın, sadece bir DOM’nin soyundan veya yükselenlerinden geçerken DOM’da ne yaptığınızı düşünün. Yeni olduğunuzda ve birisi size görüşmeler için ağaç geçişini anlamaya başlamanızı söylediğinde, nereden başlayacağınızı bile bilmediğiniz için bunalmış hissedebilirsiniz. Sadece DOM ile başlayın. Çok fazla düşünme.

  4. Modern araçlar nasıl mdx yüzeyin altında çalışın.

şeyleri yaymak

birkaç tane öğrenebilirsin çok zamanınızın çoğunu şöyle şeyler yaymak için harcadığınızda önemli kavramlar:

function merge(obj1, obj2) {
  return { ...obj, ...obj2 }
}

Deneme yanılma yoluyla, sonunda merak ettiğiniz hatalarla karşılaşacaksınız:

  1. Neden bazı nesneler yayılmıyor ve bunun yerine hatalara neden oluyor (İpucu: { ...options.bar } ya options.bar bir nesne değilse?)
  2. Neden bazı diziler yayılmıyor ve bunun yerine hatalara neden oluyor (İpucu: [...options.bar] ya options.bar bir dizi değilse?)
  3. Neden undefined nesnelere “yayılır” ve null yapmaz
  4. Bir nesne nasıl “yayılabilir” hale getirilir (İpucu: yinelenebilir protokolbaşka bir deyişle, [Symbol.iterator]). Bu, yukarıdaki kavramların tümünü anlamanıza yardımcı olacaktır.

Burada, nesneleri birleştirmenin alternatif yolunun (Object.assign) sessizce yan etkilere neden olur:

const fruits = ['apple', 'banana']

const data = {
  carrots: [],
  get myFruits() {
    fruits.pop()
    return fruits
  },
  onion: 2,
}

const mergedData = Object.assign(data, {
  beverages: ['pepsi'],
})

Sonuç (myFruits değişti):

{ "carrots": [], "myFruits": ["apple"], "onion": 2, "beverages": ["pepsi"] }

damla

Bloblar her yerde. Onlar bulunabilir window.fetchiçin url’lere serileştirildi img ve videodosya yükleme, bazı yanıtlar için veri türü olarak döndürülme vb.

ile çalışmaya aşina olun Blob. Bu, çevrimiçi medya paylaşımı (görüntüler ve videolar gibi), akış, dosyaları ağlar arasında dağıtma, günlük dosyalarını depolama ve güncelleme, dosya kurtarma, veri depolama (örneğin analitik uygulamalar için) ve ayrıca IoT için kullanılan nesnedir. (Nesnelerin İnterneti) uygulamaları.

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım burada değerli bilgiler bulmuşsunuzdur ve gelecekte benden daha fazlasını beklersiniz!

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu