Mengapa JavaScript tidak huru-hara?

Ia sentiasa tidak menggalakkan saya...

Saya menjengkelkan apabila mendengar bahawa pembangunan bahagian hadapan adalah kucar-kacir, terutamanya kenyataan bahawa JavaScript "menerima apa-apa" dan boleh ditulis dalam apa jua cara tanpa menjejaskan keputusan akhir.

Sebenarnya, ia tidak sepenuhnya palsu. Memang benar bahawa JavaScript membenarkan berbilang pendekatan untuk mencapai matlamat yang sama.

Masalahnya terletak pada kekurangan corak reka bentuk serta ditakrifkan seperti di bahagian belakang. Pada bahagian hadapan, amalan terbaik tersebar, menjana kepelbagaian pendapat dan kekurangan keseragaman. Penyerakan ini menyukarkan pembangunan dan pemahaman, terutamanya untuk pemula. Malah sesiapa yang menulis ini mempunyai pendapatnya sendiri.

Inti utama…

Di sebalik kekecewaan, saya ingin menekankan bahawa kekurangan bukti amalan baik tidak bermakna ia tidak wujud. Adalah penting untuk mencari pengetahuan dan menggunakan sekurang-kurangnya asas corak reka bentuk. Dalam JavaScript, terdapat banyak sumber dengan pelaksanaan dan corak yang ditetapkan. Ia hanya mengambil masa untuk membaca dan memahami tujuan dan penggunaan yang betul. Contoh: Dokumentasi Mozilla untuk JavaScript.

Contoh praktikal…

Kod berikut datang daripada projek sebenar dalam pengeluaran. Walaupun ia berfungsi dengan betul, pelaksanaannya boleh dipertingkatkan dalam kebolehbacaan dan prestasi.

Kami akan melaraskan beberapa bahagian agar sejajar dengan pengesyoran dalam dokumentasi JavaScript, menggunakan kaedah dan fungsi yang lebih cekap. Kami akan memberi tumpuan kepada konsep asas: manipulasi tatasusunan dan objek. Kod ini dipermudahkan untuk tujuan pendidikan.

Mari kita mulakan dengan objek, mewakili data yang diterima daripada API bahagian belakang:

<code class="language-javascript">const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]</code>

Kita perlu menambah medan "label" dengan awalan "Dibuka" diikuti dengan nama kedai.

Mari kita lihat pelaksanaan yang "kurang ideal", yang tidak menggunakan alat JavaScript terbaik:

<code class="language-javascript">storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// resultado:
[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

Kami melihat .reduce, .forEach dan .push, hanya untuk membina semula senarai. Kekurangan penggunaan .flatMap dan .map adalah jelas. Sintaksnya mengelirukan dan bertele-tele.

Mari kita lihat pelaksanaan yang dipertingkatkan:

<code class="language-javascript">storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})</code>

Lebih ringkas, bukan?

.flatMap "meratakan" susunan objek kepada satu tahap:

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2
    }
]</code>

Kemudian, .map "memetakan semula" tatasusunan, menambah sifat "label":

<code class="language-javascript">[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]</code>

Kesimpulan…

JavaScript menawarkan alatan untuk menulis kod berkualiti. Yang penting ialah mempelajarinya dan mengaplikasikan konsep dengan betul, bukan hanya program demi pengaturcaraan.

Cadangan membaca:

• [PT-BR] - //m.sbmmt.com/link/729404b28f3bd32761c667a668453f4c
• [EN] - //m.sbmmt.com/link/f5c80b20fdee4e645ff315a56f12a716

Atas ialah kandungan terperinci Mengapa JavaScript tidak huru-hara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!