Memikirkan semula JavaScript. Aplikasi Separa, Ketelusan Rujukan dan Operasi Malas

Hai semua! Beberapa ketika dahulu, semasa menyemak imbas cadangan TC39 terbaharu, saya terjumpa satu yang membuatkan saya teruja — dan agak ragu-ragu. Ini mengenai sintaks aplikasi separa untuk JavaScript. Pada pandangan pertama, ia kelihatan seperti penyelesaian yang sempurna untuk banyak sakit kepala pengekodan biasa, tetapi apabila saya memikirkannya, saya menyedari terdapat banyak perkara untuk disukai dan sedikit ruang untuk penambahbaikan.  

Lebih baik lagi, kebimbangan ini mencetuskan idea baharu yang boleh menjadikan JavaScript lebih berkuasa. Izinkan saya membawa anda dalam perjalanan ini, lengkap dengan contoh realistik tentang cara ciri ini boleh mengubah cara kami mengekod setiap hari.

TLDR: artikel datang dari isu lama saya kepada cadangan: https://github.com/tc39/proposal-partial-application/issues/53

---

Cadangan

Aplikasi separa membolehkan anda "pratetap" beberapa argumen fungsi, mengembalikan fungsi baharu untuk kegunaan kemudian. Kod semasa kami kelihatan seperti ini:

const fetchWithAuth = (path: string) => fetch(
  { headers: { Authorization: "Bearer token" } },
  path,
);
fetchWithAuth("/users");
fetchWithAuth("/posts");

Cadangan memperkenalkan sintaks ~() untuk ini:

const fetchWithAuth = fetch~({ headers: { Authorization: "Bearer token" } }, ?);
fetchWithAuth("/users");
fetchWithAuth("/posts");

Lihat apa yang berlaku? Fungsi fetchWithAuth praisi argumen pengepala, jadi anda hanya perlu membekalkan URL. Ia seperti .bind() tetapi lebih fleksibel dan lebih mudah dibaca.

Cadangan itu juga membolehkan anda menggunakan ? sebagai pemegang tempat untuk hujah yang tidak diisi dan ... untuk parameter rehat. Contohnya:

const sendEmail = send~(user.email, ?, ...);
sendEmail("Welcome!", "Hello and thanks for signing up!");
sendEmail("Reminder", "Don't forget to confirm your email.");

Bahagian kegemaran saya ialah saya tidak perlu menduplikasi anotasi jenis!

Nampak berguna, kan? Tetapi ada banyak lagi untuk dibongkar.

---

Kes untuk Ketelusan Rujukan

Mari kita mulakan dengan titik kesakitan yang praktikal: penutupan fungsi dan rujukan pembolehubah lapuk.

Katakan anda menjadualkan beberapa pemberitahuan. Anda mungkin menulis sesuatu seperti ini:

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(() => alert(state.data), 1000)
  }
}

Adakah anda sudah melihat masalahnya? Sifat "data" mungkin berubah semasa tamat masa dan amaran tidak akan menunjukkan apa-apa! Membetulkan perkara ini memerlukan secara eksplisit menghantar rujukan nilai, semoga "setTimeout" menerima argumen tambahan untuk menghantarnya ke dalam panggilan balik:

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout((data) => alert(data), 1000, state.data)
  }
}

Tidak teruk, tetapi ia tidak disokong secara meluas merentas API. Aplikasi separa boleh menjadikan corak ini lebih universal:

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(alert~(state.data), 1000)
  }
}

Dengan mengunci state.data pada masa penciptaan fungsi, kami mengelakkan pepijat yang tidak dijangka disebabkan rujukan lapuk.

---

Mengurangkan Pengiraan Berulang

Satu lagi faedah praktikal aplikasi separa ialah menghapuskan kerja berlebihan apabila memproses set data yang besar.

Sebagai contoh, anda mempunyai logik pemetaan, yang perlu mengira data tambahan untuk setiap langkah lelaran:

const fetchWithAuth = (path: string) => fetch(
  { headers: { Authorization: "Bearer token" } },
  path,
);
fetchWithAuth("/users");
fetchWithAuth("/posts");

Masalahnya ialah dalam akses proksi kepada this.some.lain, ia agak berat untuk memanggil setiap langkah lelaran. Adalah lebih baik untuk memfaktorkan semula kod ini seperti:

const fetchWithAuth = fetch~({ headers: { Authorization: "Bearer token" } }, ?);
fetchWithAuth("/users");
fetchWithAuth("/posts");

Dengan aplikasi separa, kami boleh melakukannya dengan kurang bertele-tele:

const sendEmail = send~(user.email, ?, ...);
sendEmail("Welcome!", "Hello and thanks for signing up!");
sendEmail("Reminder", "Don't forget to confirm your email.");

Dengan membakar dalam pengiraan kongsi, anda menjadikan kod lebih ringkas dan lebih mudah untuk diikuti, tanpa mengorbankan prestasi.

---

Mengapa Tambah Sintaks Baharu?

Sekarang, di sinilah saya mula menggaru kepala. Walaupun sintaks yang dicadangkan adalah elegan, JavaScript sudah mempunyai banyak pengendali. Terutamanya pengendali tanda soal?. Menambah ~() mungkin menjadikan bahasa lebih sukar untuk dipelajari dan dihuraikan.

Bagaimana jika kita boleh mencapai fungsi yang sama tanpa memperkenalkan sintaks baharu?

---

Alternatif Berasaskan Kaedah

Bayangkan memanjangkan Function.prototype dengan kaedah seri:

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(() => alert(state.data), 1000)
  }
}

Ia lebih bertele-tele tetapi mengelak daripada memperkenalkan pengendali baharu sepenuhnya. Menggunakan simbol khas tambahan untuk ruang letak kita boleh menggantikan tanda soal.

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout((data) => alert(data), 1000, state.data)
  }
}

Ia mengumpul dengan sempurna tanpa kerumitan masa terbina tambahan!

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(alert~(state.data), 1000)
  }
}

Tetapi ini hanyalah puncak gunung ais. ia menjadikan konsep pemegang tempat boleh diguna semula merentas API yang berbeza.

---

Operasi Malas: Ambil Lagi

Di sinilah perkara menjadi sangat menarik. Bagaimana jika kita mengembangkan konsep simbol untuk membolehkan operasi malas?

Contoh 1: Menggabungkan .filter() dan .map()

Andaikan anda sedang memproses senarai produk untuk tapak e-dagang. Anda mahu menunjukkan item diskaun sahaja, dengan harganya dibundarkan. Biasanya, anda akan menulis ini:

class Store  {
  data: { list: [], some: { another: 42 } }
  get computedList() {
    return this.list.map((el) => computeElement(el, this.some.another))
  }
  contructor() {
    makeAutoObservable(this)
  }
}

Tetapi ini memerlukan lelaran ke atas tatasusunan dua kali. Dengan operasi malas, kami boleh menggabungkan kedua-dua langkah menjadi satu laluan:

class Store  {
  data: { list: [], some: { another: 42 } }
  get computedList() {
    const { another } = this.some
    return this.list.map((el) => computeElement(el, another))
  }
  contructor() {
    makeAutoObservable(this)
  }
}

Symbol.skip memberitahu enjin untuk mengecualikan item daripada tatasusunan akhir, menjadikan operasi itu cekap dan ekspresif!

Contoh 2: Penamatan Awal dalam .reduce()

Bayangkan mengira jumlah hasil daripada lima jualan pertama. Biasanya, anda akan menggunakan bahagian dalam bersyarat .reduce():

class Store  {
  data: { list: [], some: { another: 42 } }
  get computedList() {
    return this.list.map(computeElement~(?, this.some.another))
  }
  contructor() {
    makeAutoObservable(this)
  }
}

Ini berfungsi, tetapi ia masih memproses setiap item dalam tatasusunan. Dengan pengurangan yang malas, kami boleh memberi isyarat penamatan awal:

function notify(state: { data?: Data }) {
  if (state.data) {
      setTimeout(alert.tie(state.data), 1000)
  }
}

Kehadiran Symbol.skip boleh memberitahu enjin untuk berhenti lelaran sebaik sahaja keadaan dipenuhi, menjimatkan kitaran berharga.

---

Mengapa Ini Penting

Idea ini — aplikasi separa, ketelusan rujukan dan operasi malas — bukan sekadar konsep akademik. Mereka menyelesaikan masalah dunia sebenar:

• Penggunaan API yang lebih bersih: Kunci hujah di hadapan dan elakkan rujukan lapuk.
• Prestasi yang dipertingkatkan: Hapuskan pengiraan berlebihan dan dayakan lelaran yang lebih cekap.
• Ekspresif yang lebih baik: Tulis kod deklaratif yang ringkas dan lebih mudah dibaca dan diselenggara.

Sama ada kita kekal dengan ~() atau meneroka alternatif seperti tie dan Symbol.skip, prinsip asas mempunyai potensi besar untuk meningkatkan cara kita menulis JavaScript.

Saya mengundi pendekatan simbol kerana ia mudah diisi poli dan mempunyai pelbagai kegunaan.

---

Apa Seterusnya?

Saya ingin tahu—apa pendapat anda? Adakah ~() arah yang betul, atau patutkah kita meneroka pendekatan berasaskan kaedah? Dan bagaimanakah operasi malas akan memberi kesan kepada aliran kerja anda? Mari berbincang dalam komen!

Keindahan JavaScript terletak pada evolusi yang dipacu komunitinya. Dengan berkongsi dan membahaskan idea, kita boleh membentuk bahasa yang berfungsi lebih baik untuk semua orang. Mari teruskan perbualan!

Atas ialah kandungan terperinci Memikirkan semula JavaScript. Aplikasi Separa, Ketelusan Rujukan dan Operasi Malas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!