Cantikkan JavaScript _

Cara pengindahan JavaScript berfungsi

Pemerelah membaca kod anda aksara demi aksara, menjejaki seberapa dalam setiap pernyataan bersarang, dan memancarkannya semula dengan jarak yang konsisten. Ia tidak pernah mengubah apa yang dilakukan oleh kod — hanya cara ia kelihatan.

1. Tokenkan. Perpustakaan mengimbas input anda kepada aliran token: kata kunci, pengecam, rentetan, pengendali, dan tanda baca. Rentetan, literal templat, dan literal ungkapan biasa diiktiraf sebagai unit tunggal, jadi pendakap di dalam rentetan tidak akan disalah anggap sebagai pemisah blok.
2. Jejak bersarang. Semasa mengembara aliran token, pemerelah menyimpan tahap lekukan yang sedang berjalan. Setiap pendakap kerinting, kurungan siku, atau kurungan bulat yang dibuka mendalamkan tahap; setiap yang ditutup mengembalikannya. Kedalaman itu menentukan berapa banyak unit lekukan yang berada di hadapan setiap baris yang anda terima semula.
3. Terapkan pilihan anda. Pilihan lekukan anda (2 ruang, 4 ruang, atau tab) menetapkan lebar satu tahap. Tetapan gaya pendakap memutuskan sama ada pendakap kerinting pembuka memeluk pernyataan sebelumnya atau jatuh ke barisnya sendiri. Had baris kosong meruntuhkan rentetan panjang baris kosong kepada had yang anda pilih.
4. Pancarkan semula. Akhirnya pemformat mencetak token kembali dengan lekukan dan pemisah baris yang telah diperkirakan, secara pilihan menambahkan koma bertitik yang penyisipan koma bertitik automatik akan bekalkan pada masa larian. Hasilnya adalah program yang sama, disusun supaya manusia boleh membacanya.

Mengapa cantikkan JavaScript

• Baca kod yang diminikan. Bundle produksi dihantar dalam satu baris dengan nama pemboleh ubah satu huruf. Pengindahan memulihkan pemisah baris dan lekukan supaya anda benar-benar boleh mengesan bug ke pernyataan yang menyebabkannya, walaupun tanpa source map.
• Kemas fail yang tidak konsisten. Kod yang disentuh oleh beberapa orang hanyut ke lekukan dan gaya pendakap yang bercampur. Satu laluan melalui pemerelah menormalkan keseluruhan fail kepada satu susun atur, yang menjadikan diff seterusnya menunjukkan perubahan logik sebenar dan bukannya bunyi ruang kosong.
• Alat ini tidak membebankan halaman anda. Kebanyakan pemformat dalam talian memuatkan seluruh perpustakaan mereka sejurus anda membuka halaman. Alat ini memuatkan js-beautify secara malas hanya apabila anda mengklik Cantikkan atau menghidupkan mod langsung, jadi membuka halaman hanya memerlukan beberapa kilobait dan bukannya beberapa ratus, dan render awal kekal pantas.
• Tiada apa yang meninggalkan pelayar anda. Pemerelah berjalan sepenuhnya pada peranti anda. Kod anda tidak pernah dimuat naik ke pelayan, yang penting apabila skrip yang anda periksa milik klien, mengandungi laluan API dalaman, atau tertakluk kepada perjanjian kerahsiaan.

Aplikasi biasa

Pengindahan JavaScript timbul apabila seseorang perlu membaca kod yang tidak ditulis untuk dibaca.

• Nyahpepijat produksi: tampal bundle yang diminikan yang ditarik dari tab Rangkaian untuk mencari fungsi di sebalik tindanan ralat yang tidak boleh anda nyahkod sebaliknya.
• Persediaan semakan kod: format semula fail kontributor yang dilekukan secara tidak konsisten sebelum membuka permintaan tarik supaya pengulas melihat logik, bukan kekacauan susun atur.
• Audit keselamatan dan pematuhan: kembangkan snippet analitik atau iklan pihak ketiga untuk mengesahkan dengan tepat apa yang dilakukannya sebelum ia ditayangkan.

Satu contoh yang dikerjakan

Ambil satu baris yang diminikan: function f(a){if(a){return a*2}else{return 0}}. Tampalkan di atas dengan lekukan ditetapkan kepada 2 ruang dan gaya pendakap Runtuh, kemudian klik Cantikkan. Anda mendapat semula blok yang boleh dibaca: function f(a) {, kemudian if (a) { yang dilekukan, pernyataan return a * 2; bersarang satu tahap lebih dalam, dan pendakap penutup yang sepadan berbaris di bawah. Tukar gaya pendakap kepada Kembang dan setiap pendakap kerinting pembuka jatuh ke barisnya sendiri. Tukar lekukan kepada Tab dan setiap tahap beralih dari dua ruang kepada aksara tab. Strukturnya adalah sama; hanya susun atur yang berubah.

FAQ

Adakah ini berjalan di pelayar saya?

Ya. Perpustakaan js-beautify dimuatkan secara malas kali pertama anda mengklik Cantikkan atau mendayakan mod langsung, kemudian dicache. Kod anda tidak pernah meninggalkan halaman — tiada perjalanan pergi balik pelayan dan tiada muat naik.

Adakah pengindahan sama dengan un-minifying?

Ia memulihkan pemformatan yang boleh dibaca — lekukan, pemisah baris, dan jarak — tetapi ia tidak dapat membawa kembali nama pemboleh ubah asal atau ulasan yang dihapus oleh peminifikasian. Jika source map wujud, DevTools pelayar anda boleh memulihkan nama asal; pemerelah sahaja hanya berfungsi dengan apa yang ada dalam fail.

Adakah pengindahan mengubah cara kod saya berkelakuan?

Tidak. Pengindahan hanya menambah dan mengalih keluar ruang kosong dan pemisah baris; program berjalan sama. Satu-satunya pilihan yang menyentuh token ialah "Tambah koma bertitik yang hilang," yang memasukkan penamat pernyataan yang penyisipan koma bertitik automatik akan tambahkan pada masa larian, menjadikan kod selamat untuk diminikan kemudian.

Apakah maksud pilihan gaya pendakap?

Runtuh mengekalkan pendakap kerinting pembuka pada baris yang sama dengan pernyataan (if (x) {), yang merupakan konvensyen JavaScript biasa. Kembang menjatuhkan setiap pendakap kerinting pembuka ke barisnya sendiri (gaya Allman). Kembang di hujung mengekalkan pendakap pembuka terlampir tetapi meletakkan else dan catch pada baris baru selepas pendakap penutup.

Pengindahan JavaScript sebelah pelayar memberi anda kod yang boleh dibaca tanpa langkah binaan atau muat naik. Tampal skrip yang diminikan atau tidak kemas, pilih lekukan dan gaya pendakap anda, kemudian salin atau muat turun hasilnya. Tiada apa yang meninggalkan peranti anda, tiada akaun, dan perpustakaan hanya dimuatkan apabila anda memintanya — jadi membuka halaman ini hanya memerlukan beberapa kilobait, bukan satu megabait.