Javscript

JavaScript Geliştirmeyi Büyüleyici Hale Getirecek 5 NodeJS Püf Noktası – JSManifest

NodeJS, G/Ç işlemlerini işlemek için çok hızlı yetenekleri nedeniyle uygulama geliştirmek için en popüler platformlardan biridir. Ancak popülaritesindeki başarısına katkıda bulunan daha birçok iyi neden var.

Bu gönderi, NodeJS’de kullanabileceğiniz bazı faydalı püf noktalarını gözden geçirecek. şu anda Geliştirme deneyiminizi büyüleneceğiniz noktaya kadar geliştirmek için. Bu ipuçlarının çoğu JavaScript dilinin esnek yapısı sayesinde mümkündür.

Lafı fazla uzatmadan başlayalım!

1. Konsolda kodunuzu inceleme, gelişmiş

Sanırım hepimiz oradaydık – aramalarımızı console.log geliştirme sırasında tüm fonksiyonlarımızda. Hata ayıklama kodu oldukça sıkıcı olabilir, çünkü ihtiyacımız olan bilgilerin çoğu varsayılan olarak konsolda gerçekten yazdırılmaz.

Örneğin, bunu hayal edin Page gezindikten sonra önceki sayfa, geçerli sayfa, gidilen sayfaların geçmişi vb. hakkında bazı durumların bulunduğu aşağıdaki sınıf:

class Page {
  #state = {
    previous: '',
    current: '',
    history: [],
  }
  authenticated = false

  get state() {
    return this.#state
  }

  async authenticate() {
    const response = await fetch('https://authenticateme.com/api', {
      method: 'post',
      body: {
        username: 'hello',
        password: 'abc123',
      },
    })
    const data = await response.json()
    this.authenticated = data.role === 'admin'
    return this.authenticated
  }

  async navigate(pathname) {
    if (typeof window !== 'undefined') {
      window.location.href = pathname
    }
    this.#state.history.unshift(pathname)
    this.#state.previous = this.currrent
    this.#state.current = pathname
  }

  snapshot() {
    return {
      ...this.#state,
      historySize: this.#state.history.length,
      authenticated: this.authenticated,
    }
  }
}

günlüğe kaydetmeye çalışırsak Page örneğin navigasyondan sonra ve örneğimizin doğru çalışıp çalışmadığını kontrol etmek istediğimizde, bize şu çıktı verilir:

Page { authenticated: false }

Vay, bu çok faydalı! Değil. Neyse ki NodeJS ekibi, çıktımızı iyileştirmek için hemen kodumuzda kullanabileceğimiz (bu yazıda bulacağınız diğerleriyle birlikte) kolay bir kolaylık özelliği sağladıkları için zarif davrandı.

Tek yapmanız gereken aşağıdaki satırı yöntem bir nesneye ve konsola yazdırılacak bir nesneyi döndürün:

Symbol.for('nodejs.util.inspect.custom')

Örneğin, bunu sayfamıza ekleyebiliriz. Page sınıf şöyle:

class Page {
  #state = {
    previous: '',
    current: '',
    history: [],
  }
  authenticated = false;

  [Symbol.for('nodejs.util.inspect.custom')]() {
    return {
      ...this.snapshot(),
    }
  }

  get state() {
    return this.#state
  }

  async authenticate() {
    const response = await fetch('https://authenticateme.com/api', {
      method: 'post',
      body: {
        username: 'hello',
        password: 'abc123',
      },
    })
    const data = await response.json()
    this.authenticated = data.role === 'admin'
    return this.authenticated
  }

  async navigate(pathname) {
    if (typeof window !== 'undefined') {
      window.location.href = pathname
    }
    this.#state.history.unshift(pathname)
    this.#state.previous = this.currrent
    this.#state.current = pathname
  }

  snapshot() {
    return {
      ...this.#state,
      historySize: this.#state.history.length,
      authenticated: this.authenticated,
    }
  }
}

Şimdi oturumumuzu açtığımızda Page konsola:

const page = new Page()

page.navigate('/login').then(() => {
  console.log(page)
})

Bunun yerine anlık görüntü sonucumuzu çıktı olarak görebiliriz:

{
  "previous": undefined,
  "current": "/login",
  "history": ["/login"],
  "historySize": 1,
  "authenticated": false
}

Müthiş!

2: Telleştirme

Önceki ipucumuza ek olarak, nesnelerin dizilmesini özelleştirebileceğimiz güzel bir numara da var.

Örneğin, daha önce olduğu gibi, varsayılan stringication çıktımız Page tarafından çağrıldığında sınıf toString() bizim için pek yararlı olmayan bir şey ortaya çıkıyor:

Bunun önemli olmasının nedeni, dönüş değerinin toString() varsayılan olarak çağrıldığından, bunları özellik olarak atadığımızda da kullanılır:

const page = new Page()

page.navigate('/login').then(() => {
  const ourObject = {
    fruits: ['apple', 'banana'],
    [page]: page.snapshot(),
  }
  console.log(ourObject)
})

Çıktı:

{
  "fruits": ["apple", "banana"],
  "[object Object]": {
    "previous": undefined,
    "current": "/login",
    "history": ["/login"],
    "historySize": 1,
    "authenticated": false
  }
}

Neyse ki varsayılanın üzerine yazabiliriz toString() yöntemi ve bir anahtara seri hale getirmenin daha uygun bir yolunu sağlayın:

toString() {
    return JSON.stringify(this.snapshot())
  }
const output = {
  fruits: ['apple', 'banana'],
  '{"current":"/login","history":["/login"],"historySize":1,"authenticated":false}':
    {
      previous: undefined,
      current: '/login',
      history: ['/login'],
      historySize: 1,
      authenticated: false,
    },
}

Bu, önbelleğe almak ve canlandırmak istiyorsak (veya daha geleneksel terim “rehydrate“) kullanıcılar için daha iyi bir kullanıcı deneyimi sağlamak için uygulamamızın önceki durumları. Örneğin, bu çıktı yerel depolamaya önbelleğe alındıysa ve kullanıcı çıkarsa, 7 saat sonra geri gelirse, sonuncuyu alarak uygulamamızın kendisini yeniden sulandırmasını sağlayabiliriz. önbelleğe alınmış ve kendisini buna göre başlatan durum:

localStorage.setItem('appState', page)
window.addEventListener('load', () => {
  const cachedState = localStorage.get('appState')
  const page = new Page(JSON.parse(cachedState))
})

bu Page yapıcı bunu bir argüman olarak alabilir ve durumunu buna göre başlatabilir:

constructor(initialState) {
  for (const [key, value] of Object.entries(initialState)) {
    if (key in this.#state) {
      this.#state[key] = value
    } else if (key === 'authenticated') {
      this.authenticated = value
      if (!window.location.pathname.endsWith('/admin')) {
        window.location.href = '/admin'
      }
    }
  }
}

3. Jsonifikasyon

Önceki ipuçlarına benzer şekilde, çağırdığımızda çıktıyı özelleştirmek de mümkündür. JSON.stringify bizim üzerimizde Page sınıf. Varsayılan olarak, kullanıldığında bize bu verilir:

const page = new Page()

page.navigate('/login').then(() => {
  console.log(JSON.stringify(page))
})

Çıktı:

{ "authenticated": false }

Bu, doğrudan giriş yaptığımızda bizi birinci kareye geri getirdi. Page başlangıçta.

Varsayılanı geçersiz kıldığımızda toString() yöntemi daha önce istediğimiz dizgeye dönüştürülebilmesi için çağırmamız gerekiyordu. page.snapshot istediğimiz çıktıyı dizgelendirmek için:

page.navigate('/login').then(() => {
  const ourObject = {
    fruits: ['apple', 'banana'],
    [page]: page.snapshot(),
  }
  console.log(ourObject)
})

Anlık görüntüyü aramanın çıktısı haline getirebiliriz. JSON.stringify (ve bu daha iyidir çünkü JSON.stringify ve JSON.parse API’lerle çalışırken verileri seri hale getirmek için kullanılıyor)

Tek yapmanız gereken bir özel tanımlamak toJSON şöyle bir yöntem:

snapshot() {
  return {
    ...this.#state,
    historySize: this.#state.history.length,
    authenticated: this.authenticated,
  }
}

toString() {
  return JSON.stringify(this.snapshot())
}

toJSON() {
  return this.snapshot()
}

Şimdi geçtiğimizde Page ile JSON.stringify bize anlık görüntüyü verir:

const page = new Page()

page.navigate('/login').then(() => {
  console.log(JSON.stringify(page))
})
{
  "current": "/login",
  "history": ["/login"],
  "historySize": 1,
  "authenticated": false
}

4. Terminali doğru yoldan temizlemek

muhtemelen aşinasınızdır console.clear hangi görünüşte konsolu temizler. Ancak yukarı kaydırdığınızda, önceki çıktı aslında hala orada.

Tüm bu verileri temizlemenin ve yeni bir başlangıç ​​yapmanın doğru yolu şudur:

process.stdout.write('x1Bc')

Bu benim için yaygın bir ihtiyaç olduğundan, yazarken otomatik olarak oluşturmak için bu seti VSCode’da Kullanıcı Parçacığı olarak kullanmam inanılmaz derecede kullanışlıdır. clear (“gibi başka bir anahtar kelime olabilir”cls“ama ben seçtim clear)

Bunu snippet’lerinize eklemek için Ctrl+P ve seçin Preferences: Configure User Snippetsve Seç typescript.json (veya javascript.jsonveya her ikisi veya hatta typescriptreact.json etkinleştirmek için .tsx dosyalar) ve bunu json nesnesinin içine koyun:

{
  "clear": {
    "prefix": "clear",
    "body": "process.stdout.write('\x1Bc')"
  }
}

Şimdi yazdığınızda clear içinde .ts dosya ve enter tuşuna basın, üretecek:

process.stdout.write('x1Bc')

5. Öncesi, Sonrası

Hepimiz her zamanki gibi çalışıyoruz start ve build geliştirirken komutlar, içinde bulunan uygulamalardır. package.json:

"scripts": {
  "start": "gatsby develop --port 3000",
  "build": "gatsby build",
  "test": "jest"
}

Ancak hepimizin bilmediği bir şey, çalıştırılacak başka bir komut dosyası tanımlayabileceğimizdir. önceki ana komut dosyası yürütülür ve/veya sonrasında bitti.

Örneğin, kullanıcılar çalıştırdıktan sonra bir dosyayı çalıştırmak için npm install deponuzda, yapmanız gereken tek şey önek ile başka bir komut dosyası komutu eklemektir. post komut dosyası adından önce. Örneğin:

"scripts": {
  "postinstall": "./scripts/postinstall.js",
  "start": "gatsby develop --port 3000",
  "build": "gatsby build",
  "test": "jest"
}

Burada Gatsby’nin bunu çalıştırdıktan sonra kullanıcıya bir karşılama mesajı otomatik olarak yazdırmak için kullandığı gerçek bir örnektir. npm install onların deposunda.

Bu iki önek için kullanılabilir hiç komut dosyası ve yine de eşleşen komut dosyasını pre ana komut dosyasından önceki önek ve post daha sonra, şöyle bir şeye sahip olabilirsiniz:

"scripts": {
  "postinstall": "node ./scripts/postinstall.js",
  "start": "gatsby develop --port 3000",
  "build": "gatsby build",
  "test": "jest",
  "pregenerate": "node ./scripts/init-directories.js",
  "generate": "node ./scripts/fetch-data.js",
  "postgenerate": "node ./scripts/upload-data.js"
}

npm komut dosyaları için daha fazla püf noktası okuyun burada

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!

İlgili Makaleler

Bir cevap yazın

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

Başa dön tuşu