Mengapa JavaScript tidak kemas?

Saya amat kesal apabila mendengar bahawa pembangunan bahagian hadapan adalah tidak kemas, terutamanya dakwaan bahawa JavaScript "menerima apa-apa" dan membenarkan kod tidak teratur, kerana pelbagai pendekatan membawa kepada hasil yang sama.

Malah, kritikan ini berasas. Anda boleh menulis JavaScript dengan cara yang berbeza, mencapai objektif yang sama.

Perbezaan utama antara frontend (JavaScript) dan backend terletak pada takrifan corak reka bentuk. Pada bahagian belakang, rangka kerja dan konvensyen diterima pakai secara meluas. Pada bahagian hadapan, amalan dan piawaian yang baik tersebar, menghasilkan perbezaan dan menyukarkan pemahaman, terutamanya untuk pemula. Malah saya, penulis, mempunyai pendapat saya sendiri.

---

Intinya

Walaupun kekurangan struktur yang jelas ini, ini tidak bermakna corak tidak wujud atau anda tidak perlu mencarinya. JavaScript mempunyai banyak sumber dan piawaian yang jelas, tersedia pada pelbagai tapak web dan dokumentasi (cth. Mozilla Docs JS). Perkara utama ialah menumpukan masa untuk belajar dan menggunakan konsep ini dengan betul.

---

Contoh praktikal

Kod di bawah, diambil daripada projek pengeluaran, berfungsi, tetapi pendekatannya boleh dioptimumkan untuk kebolehbacaan dan prestasi yang lebih baik. Mari kita memfaktorkannya semula, menggunakan ciri JavaScript asas (Susun atur dan Objek) untuk menggambarkan penambahbaikan.

Objek di bawah, yang mewakili data yang diterima daripada API, memerlukan medan "label" baharu (awalan nama kedai "Dibuka"):

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

Pelaksanaan pertama ini, menggunakan reduce, forEach dan push, kurang cekap:

<code>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>

Perhatikan kerumitan yang tidak perlu. Penyelesaian di bawah, menggunakan flatMap dan map, adalah lebih ringkas dan cekap:

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

flatMap "meratakan" tatasusunan dan map menambah medan "label" pada setiap item:

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

---

Kesimpulan

JavaScript menawarkan alat yang berkuasa untuk kod kualiti. Rahsianya ialah kajian dan penggunaan sumber ini dengan betul, mengelakkan pembangunan tergesa-gesa dan tidak terancang.

---

Cadangan membaca:

• [PT-BR] - https://www.php.cn/link/729404b28f3bd32761c667a668453f4c
• [EN] - https://www.php.cn/link/f5c80b20fdee4e645ff315a56f12a716

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