Validasi kata sandi dalam stackoverflow javascript

Ada banyak hal sederhana yang dapat Anda lakukan untuk meningkatkan JavaScript. Berikut adalah beberapa metode yang kami gunakan untuk menulis JS yang lebih baik

Ryland Goldstein Kepala Produk di Temporal

Dalam Survei Dev 2019 kami, kami menanyakan jenis konten apa yang ingin dilihat pengguna Stack Overflow di luar pertanyaan dan jawaban. Yang paling banyak adalah “artikel teknologi yang ditulis oleh pengembang lain. “Jadi mulai sekarang kami akan rutin menerbitkan artikel dari para kontributor. Jika Anda memiliki ide dan ingin mengirimkan penawaran, Anda dapat mengirim email ke pitches@stackoverflow. com

Halo, saya Ryland Goldstein, seorang staf produk yang mengerjakan Reshuffle di Binaris. Ini adalah bagian kedua saya untuk Stack Overflow. Mari kita menggali lebih dalam

Saya tidak melihat cukup banyak orang berbicara tentang cara praktis untuk meningkatkan JavaScript. Berikut adalah beberapa metode teratas yang saya gunakan untuk menulis JS yang lebih baik

Gunakan TypeScript

Hal nomor satu yang dapat Anda lakukan untuk meningkatkan JS Anda adalah dengan tidak menulis JS. Untuk yang belum tahu, TypeScript (TS) adalah superset JS yang "dikompilasi" (apa pun yang berjalan di JS berjalan di TS). TS menambahkan sistem pengetikan opsional yang komprehensif di atas pengalaman vanilla JS. Untuk waktu yang lama, dukungan TS di seluruh ekosistem cukup tidak konsisten sehingga saya merasa tidak nyaman untuk merekomendasikannya. Untungnya, hari-hari itu sudah lama berlalu dan sebagian besar kerangka mendukung TS di luar kotak. Sekarang kita semua berada di halaman yang sama tentang apa itu TS, mari kita bicara tentang mengapa Anda ingin menggunakannya

TypeScript memberlakukan keamanan tipe

Keamanan tipe menjelaskan proses di mana kompiler memverifikasi bahwa semua tipe digunakan dengan cara yang legal di seluruh bagian kode. Dengan kata lain, jika Anda membuat fungsi

console.log(foo("two")); // invalid TS code

function foo(someNum: number): number {
  return someNum + 5;
}

Fungsi

console.log(foo("two")); // invalid TS code

good

console.log(foo(2)); // prints "7"

no good

console.log(foo("two")); // invalid TS code

Selain biaya tambahan untuk menambahkan tipe ke kode Anda, tidak ada kerugian dari penerapan keamanan tipe. Manfaatnya di sisi lain, terlalu besar untuk diabaikan. Keamanan jenis memberikan tingkat perlindungan ekstra terhadap kesalahan/bug umum, yang merupakan berkah bagi bahasa tanpa hukum seperti JS

Jenis TypeScript memungkinkan pemfaktoran ulang aplikasi yang lebih besar

Memfaktorkan ulang aplikasi JS yang besar bisa menjadi mimpi buruk yang nyata. Sebagian besar rasa sakit dari refactoring JS adalah karena fakta bahwa itu tidak menerapkan tanda tangan fungsi. Ini berarti fungsi JS tidak pernah bisa disalahgunakan. Misalnya, jika saya memiliki fungsi

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

dan saya sedikit mengubah tanda panggilan

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

Saya harus 100% yakin, bahwa setiap tempat di mana fungsi ini digunakan (ribuan tempat), saya memperbarui penggunaannya dengan benar. Jika saya melewatkan satu saja, kredensial saya bisa bocor. Berikut skenario yang sama dengan TS

before

function myAPITS(someNum: number, someString: string) { .. }

after

good

Seperti yang Anda lihat, fungsi

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

TypeScript membuat komunikasi arsitektur tim lebih mudah

Ketika TS diatur dengan benar, akan sulit untuk menulis kode tanpa terlebih dahulu menentukan antarmuka dan kelas Anda. Ini menyediakan cara untuk berbagi proposal arsitektur yang ringkas dan komunikatif. Sebelum TS, ada solusi lain untuk masalah ini, tetapi tidak ada yang menyelesaikannya secara asli tanpa membuat Anda melakukan pekerjaan ekstra. Misalnya, jika saya ingin mengusulkan tipe

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

good

Saya sudah harus menulis kodenya, tetapi sekarang saya dapat membagikan kemajuan tambahan saya dan mendapatkan umpan balik tanpa menginvestasikan lebih banyak waktu. Saya tidak tahu apakah TS secara inheren kurang rentan bug dibandingkan JS. Saya sangat percaya bahwa memaksa pengembang untuk mendefinisikan antarmuka dan API menghasilkan kode yang lebih baik terlebih dahulu

Secara keseluruhan, TS telah berkembang menjadi alternatif yang matang dan lebih dapat diprediksi dari vanilla JS. Pengembang pasti masih harus merasa nyaman dengan vanilla JS, tetapi sebagian besar proyek baru yang saya mulai hari ini adalah TS sejak awal

Gunakan Fitur Modern

JavaScript adalah salah satu bahasa pemrograman paling populer (jika bukan yang paling banyak) di dunia. Anda mungkin berharap bahwa bahasa berusia 20+ tahun yang digunakan oleh ratusan juta orang sebagian besar sudah diketahui sekarang, tetapi yang terjadi justru sebaliknya. Baru-baru ini, banyak perubahan dan penambahan telah dilakukan pada JS (ya saya tahu, secara teknis ECMAScript), yang secara mendasar mengubah pengalaman pengembang. Sebagai seseorang yang baru mulai menulis JS dalam dua tahun terakhir, saya mendapat keuntungan karena masuk tanpa bias atau ekspektasi. Ini menghasilkan pilihan yang jauh lebih pragmatis tentang fitur bahasa apa yang akan digunakan dan mana yang harus dihindari

function myAPI(someNum, someString) { if (someNum > 0) { leakCredentials(); } else { console.log(someString); } }3 dan function myAPI(someNum, someString) { if (someNum > 0) { leakCredentials(); } else { console.log(someString); } }4

Untuk waktu yang lama, callback asinkron dan digerakkan oleh peristiwa adalah bagian yang tidak dapat dihindari dari pengembangan JS

good

good

Saya tidak akan menghabiskan waktu untuk menjelaskan mengapa hal di atas bermasalah (tetapi saya pernah melakukannya sebelumnya). Untuk mengatasi masalah callback, konsep baru—Janji—ditambahkan ke JS. Janji memungkinkan Anda untuk menulis logika asinkron sambil menghindari masalah bersarang yang sebelumnya mengganggu kode berbasis panggilan balik

good

good

Keuntungan terbesar Janji dibandingkan panggilan balik adalah keterbacaan dan keteraturan rantai

Sementara Janji itu bagus, mereka masih meninggalkan sesuatu yang diinginkan. Bagi banyak orang, pengalaman Janji masih terlalu mirip dengan panggilan balik. Secara khusus, pengembang meminta alternatif untuk model Janji. Untuk mengatasinya, komite ECMAScript memutuskan untuk menambahkan metode baru dalam memanfaatkan promise,

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

good

good

Satu-satunya peringatan adalah, apa pun yang Anda

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

good

good

Juga dimungkinkan untuk

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someNum, someString) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) { if (someNum > 0) { leakCredentials(); } else { console.log(someString); } }3 dan function myAPI(someString, someNum) { if (someNum > 0) { leakCredentials(); } else { console.log(someString); } }4

Untuk sebagian besar keberadaan JS, hanya ada satu kualifikasi cakupan variabel.

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

Adapun kapan harus menggunakan

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

Saya mengatakan

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

Panah function myAPITS(someNum: number, someString: string) { .. }_8 Fungsi

Fungsi panah adalah metode ringkas untuk mendeklarasikan fungsi anonim di JS. Fungsi anonim mendeskripsikan fungsi yang tidak diberi nama secara eksplisit. Biasanya, fungsi anonim diteruskan sebagai callback atau event hook

console.log(foo(2)); // prints "7"

console.log(foo(2)); // prints "7"

Sebagian besar, tidak ada yang "salah" dengan gaya ini. Fungsi anonim vanilla berperilaku "menarik" dalam hal ruang lingkup, yang dapat/telah mengakibatkan banyak bug yang tidak terduga. Kami tidak perlu khawatir tentang itu lagi berkat fungsi panah. Ini adalah kode yang sama yang diimplementasikan dengan fungsi panah

console.log(foo("two")); // invalid TS code

Selain jauh lebih ringkas, fungsi panah memiliki perilaku pelingkupan yang jauh lebih praktis. Fungsi panah mewarisi

function myAPITS(someNum: number, someString: string) { .. }

Dalam beberapa kasus, fungsi panah bisa lebih ringkas

console.log(foo(2)); // prints "7"

Fungsi panah yang berada pada satu baris menyertakan pernyataan

after

Saya ingin menjelaskannya. Ini bukan situasi

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

console.log(foo(2)); // prints "7"

Menyebarkan Operator after2

Mengekstrak pasangan kunci/nilai dari satu objek dan menambahkannya sebagai turunan dari objek lain adalah skenario yang sangat umum. Secara historis, ada beberapa cara untuk melakukannya, tetapi semua metode itu cukup kikuk

console.log(foo(2)); // prints "7"

Pola ini sangat umum, sehingga pendekatan di atas dengan cepat menjadi membosankan. Berkat operator spread, tidak perlu menggunakannya lagi

console.log(foo(2)); // prints "7"

Bagian terbaiknya adalah, ini juga berfungsi mulus dengan array

console.log(foo(2)); // prints "7"

Ini mungkin bukan fitur JS terbaru yang paling penting, tapi ini salah satu favorit saya

Templat Literal (String Templat)

String adalah salah satu konstruksi pemrograman yang paling umum. Inilah mengapa sangat memalukan bahwa mendeklarasikan string secara native masih kurang didukung dalam banyak bahasa. Untuk waktu yang lama, JS termasuk dalam keluarga "string jelek". Namun penambahan literal template menempatkan JS dalam kategori tersendiri. Template literal secara native dan mudah memecahkan dua masalah terbesar dengan menulis string. menambahkan konten dinamis dan menulis string yang menjembatani banyak baris

console.log(foo(2)); // prints "7"

Saya pikir kode berbicara untuk dirinya sendiri. Implementasi yang luar biasa

Penghancuran Objek

Penghancuran objek adalah cara untuk mengekstraksi nilai dari kumpulan data (objek, larik, dll. ), tanpa harus mengulangi data atau mengakses kuncinya secara eksplisit

no good

no good

perusakan

no good

Tapi tunggu, masih ada lagi. Anda juga dapat menentukan destrukturisasi dalam tanda tangan suatu fungsi

no good

no good

Ini juga bekerja dengan array

no good

no good

Ada banyak fitur modern lainnya yang harus Anda manfaatkan. Berikut adalah beberapa orang lain yang menonjol bagi saya

• Parameter Istirahat
• Impor Lebih dari Kebutuhan
• Temukan Elemen Array

Selalu Asumsikan Sistem Anda Terdistribusi

Saat menulis aplikasi paralel, tujuan Anda adalah mengoptimalkan jumlah pekerjaan yang Anda lakukan pada satu waktu. Jika Anda memiliki empat inti yang tersedia dan kode Anda hanya dapat menggunakan satu inti, 75% dari potensi Anda terbuang sia-sia. Ini berarti pemblokiran, operasi sinkron adalah musuh utama komputasi paralel. Tetapi mengingat JS adalah bahasa utas tunggal, banyak hal tidak berjalan pada banyak inti. Jadi apa gunanya?

JS adalah utas tunggal, tetapi bukan file tunggal (seperti baris di sekolah). Meskipun tidak paralel, itu masih bersamaan. Mengirim permintaan HTTP mungkin memakan waktu beberapa detik atau bahkan beberapa menit, jadi jika JS berhenti mengeksekusi kode hingga respons kembali dari permintaan tersebut, bahasa tersebut tidak akan dapat digunakan

JavaScript menyelesaikan ini dengan loop acara. Loop peristiwa mengulang melalui peristiwa terdaftar dan mengeksekusinya berdasarkan logika penjadwalan/prioritas internal. Inilah yang memungkinkan pengiriman ribuan permintaan HTTP secara bersamaan atau membaca banyak file dari disk secara bersamaan. Inilah tangkapannya. JavaScript hanya dapat menggunakan kemampuan ini jika Anda menggunakan fitur yang tepat. Contoh paling sederhana adalah for-loop

no good

Vanilla for-loop adalah salah satu konstruksi paling tidak paralel yang ada dalam pemrograman. Pada pekerjaan terakhir saya, saya memimpin sebuah tim yang menghabiskan waktu berbulan-bulan mencoba mengubah

after

no good

Kode ini hanya menghasilkan hasil yang diinginkan jika dijalankan secara berurutan, iterasi demi iterasi. Jika Anda mencoba menjalankan beberapa iterasi sekaligus, prosesor mungkin salah bercabang berdasarkan nilai yang tidak akurat, yang membuat hasilnya tidak valid. Kami akan melakukan percakapan yang berbeda jika ini adalah kode C, karena penggunaannya berbeda dan ada beberapa trik yang dapat dilakukan kompiler dengan loop. Dalam JavaScript, for-loop tradisional hanya boleh digunakan jika benar-benar diperlukan. Jika tidak, gunakan konstruksi berikut

peta

no good

peta dengan indeks

console.log(foo("two")); // invalid TS code

untuk setiap

console.log(foo("two")); // invalid TS code

Saya akan menjelaskan mengapa ini merupakan peningkatan dari for-loop tradisional. Alih-alih menjalankan setiap iterasi secara berurutan (berurutan), konstruksi seperti

after

console.log(foo("two")); // invalid TS code

Seperti yang Anda lihat, for-loop tidak mencegah saya melakukannya dengan cara yang benar, tetapi tentu saja juga tidak membuatnya lebih mudah. Bandingkan dengan versi peta

console.log(foo("two")); // invalid TS code

Seperti yang Anda lihat,

after

after

console.log(foo("two")); // invalid TS code

console.log(foo("two")); // invalid TS code

Ada banyak kasus di mana for-loop akan sama berkinerjanya (atau mungkin lebih) dibandingkan dengan

after

after

after

after

good

Lint Kode Anda dan Terapkan Gaya

Kode tanpa gaya yang konsisten (tampilan dan nuansa) sangat sulit untuk dibaca dan dipahami. Oleh karena itu, aspek penting dalam penulisan kode kelas atas dalam bahasa apa pun adalah memiliki gaya yang konsisten dan masuk akal. Karena luasnya ekosistem JS, ada BANYAK pilihan untuk linter dan spesifikasi gaya. Apa yang saya tidak bisa cukup tekankan adalah bahwa jauh lebih penting bahwa Anda menggunakan linter dan menerapkan gaya (salah satunya) daripada linter/gaya mana yang Anda pilih secara khusus. Pada akhirnya, tidak ada yang akan menulis kode persis seperti yang saya inginkan, jadi mengoptimalkannya adalah tujuan yang tidak realistis

Saya melihat banyak orang bertanya apakah mereka harus menggunakan eslint atau lebih cantik. Bagi saya, mereka melayani tujuan yang sangat berbeda dan oleh karena itu harus digunakan bersamaan. Eslint adalah linter tradisional hampir sepanjang waktu. Ini akan mengidentifikasi masalah dengan kode Anda yang kurang berkaitan dengan gaya dan lebih berkaitan dengan kebenaran. Misalnya, saya menggunakan eslint dengan aturan AirBNB. Dengan konfigurasi tersebut, kode berikut akan memaksa linter gagal

console.log(foo("two")); // invalid TS code

Seharusnya cukup jelas bagaimana eslint menambah nilai pada siklus pengembangan Anda. Intinya, ini memastikan Anda mengikuti aturan tentang praktik yang baik dan tidak. Karena itu, linter secara inheren berpendirian. Seperti semua pendapat, ambillah dengan sebutir garam. Linter bisa salah

Prettier adalah pemformat kode. Itu kurang peduli dengan kebenaran dan jauh lebih khawatir tentang keseragaman dan konsistensi. Prettier tidak akan mengeluh tentang penggunaan

function myAPI(someString, someNum) {
  if (someNum > 0) {
    leakCredentials();
  } else {
    console.log(someString);
  }
}

Uji Kode Anda

Tes penulisan adalah metode tidak langsung namun sangat efektif untuk meningkatkan kode JS yang Anda tulis. Saya merekomendasikan untuk membiasakan diri dengan beragam alat pengujian. Kebutuhan pengujian Anda akan bervariasi, dan tidak ada alat tunggal yang dapat menangani semuanya. Ada banyak sekali alat pengujian yang mapan di ekosistem JS, jadi memilih alat sebagian besar bergantung pada selera pribadi. Seperti biasa, pikirkan sendiri

Bagaimana saya bisa memvalidasi kata sandi dalam JavaScript?

Apa itu Validator () dalam JavaScript?

Bagaimana Anda mengonfirmasi kata sandi dalam HTML?

Apa itu validasi kata sandi?