نحوه عملکرد زیباسازی JavaScript
زیباساز کد شما را کاراکتر به کاراکتر میخواند، عمق تودرتوی هر جمله را دنبال میکند و آن را با فاصلهگذاری یکسان مجدداً emit میکند. هرگز آنچه کد انجام میدهد را تغییر نمیدهد — فقط نحوه ظاهر شدن آن را.
- توکنسازی. کتابخانه ورودی شما را به جریانی از توکنها تبدیل میکند: کلمات کلیدی، شناسهها، رشتهها، عملگرها و نشانهگذاری. رشتهها، template literals و regular-expression literals بهعنوان واحدهای منفرد شناسایی میشوند، بنابراین یک آکولاد درون رشته هرگز با جداکننده بلوک اشتباه گرفته نمیشود.
- ردیابی تودرتویی. زیباساز هنگام پیمایش جریان توکن، سطح تورفتگی جاری را نگه میدارد. هر آکولاد، براکت یا پرانتز باز سطح را عمیقتر میکند؛ هر بستهشونده آن را برمیگرداند. آن عمق تعیین میکند چه تعداد واحد تورفتگی در ابتدای هر خط قرار میگیرد.
- اعمال گزینههای شما. انتخاب تورفتگی (۲ فاصله، ۴ فاصله، یا یک tab) عرض یک سطح را تعیین میکند. تنظیم brace-style مشخص میکند آکولاد باز به جمله قبل از خود بچسبد یا به خط خودش برود. محدودیت خط خالی، اجراهای طولانی خطوط خالی را به حدی که انتخاب میکنید کاهش میدهد.
- بازتولید. در نهایت formatter توکنها را با تورفتگی و شکستن خطی که محاسبه کرده چاپ میکند، و اختیاراً سمیکولنهایی را که automatic semicolon insertion در runtime تأمین میکرد اضافه مینماید. نتیجه همان برنامه است که برای خوانده شدن توسط انسان چیدمان شده.
چرا JavaScript را زیبا کنیم
- خواندن کد فشرده. bundle های production در یک خط با نام متغیرهای تکحرفی ship میشوند. زیباسازی شکستن خطوط و تورفتگی را بازمیگرداند تا بتوانید یک bug را به جملهای که آن را ایجاد کرده ردیابی کنید، حتی بدون source map.
- مرتب کردن فایلهای ناهماهنگ. کدی که چندین نفر به آن دست زدهاند به تورفتگی مختلط و سبکهای آکولاد متنوع میرسد. یک بار عبور از زیباساز کل فایل را به یک چیدمان واحد normalize میکند، که diff بعدی تغییرات منطقی واقعی را به جای سروصدای فضای خالی نشان میدهد.
- این ابزار صفحه شما را کند نمیکند. اکثر formatter های آنلاین کل کتابخانه را به محض باز شدن صفحه لوڈ میکنند. این ابزار js-beautify را فقط وقتی روی Beautify کلیک میکنید یا Live mode را روشن میکنید lazy-load میکند، بنابراین بارگذاری صفحه چند کیلوبایت هزینه میبرد نه چند صد، و رندر اولیه سریع میماند.
- هیچ چیز مرورگر شما را ترک نمیکند. زیباساز کاملاً روی دستگاه شما اجرا میشود. کد شما هرگز به سروری آپلود نمیشود، که اهمیت دارد وقتی اسکریپتی که بررسی میکنید متعلق به یک مشتری است، مسیرهای API داخلی دارد، یا تحت توافق محرمانگی است.
کاربردهای رایج
زیباسازی JavaScript هر بار که کسی نیاز دارد کدی را بخواند که برای خوانده شدن نوشته نشده ظاهر میشود.
- اشکالزدایی production: یک bundle فشرده کشیدهشده از تب Network را paste کنید تا تابعی را پیدا کنید که پشت یک error stack است که به روش دیگری نمیتوان آن را رمزگشایی کرد.
- آمادهسازی code review: فایل یک contributor با تورفتگی ناهماهنگ را قبل از باز کردن pull request reformat کنید تا reviewers منطق را ببینند نه اغتشاش layout.
- ممیزی امنیتی و انطباق: یک analytics یا ad snippet شخص ثالث را گسترش دهید تا دقیقاً تأیید کنید چه کاری انجام میدهد قبل از اینکه live شود.
یک مثال عملی
یک تکخطی فشرده بگیرید: function f(a){if(a){return a*2}else{return 0}}. آن را در بالا با تورفتگی روی ۲ فاصله و brace style روی Collapse paste کنید، سپس Beautify را بزنید. یک بلوک خوانا برمیگردانید: function f(a) {، سپس یک if (a) { تورفته، جمله return a * 2; یک سطح عمیقتر nested، و آکولادهای تطابقدهنده زیر آنها ردیف شده. brace style را به Expand تغییر دهید و هر آکولاد باز به خط خودش میرود. تورفتگی را به Tabs تغییر دهید و هر سطح از دو فاصله به یک کاراکتر tab تغییر میکند. ساختار یکسان است؛ فقط چیدمان تغییر میکند.
FAQ
آیا این در مرورگر من اجرا میشود؟
بله. کتابخانه js-beautify اولین بار که روی Beautify کلیک میکنید یا Live mode را فعال میکنید lazy-load میشود، سپس cached میشود. کد شما هرگز صفحه را ترک نمیکند — هیچ round-trip سروری و هیچ آپلودی در کار نیست.
آیا زیباسازی همان un-minifying است؟
قالببندی خوانا را برمیگرداند — تورفتگی، شکستن خطوط و فاصلهگذاری — اما نمیتواند نام متغیرهای اصلی یا کامنتهایی که minification حذف کرده را بازگرداند. اگر source map وجود داشته باشد، DevTools مرورگرتان میتواند نامهای اصلی را بازیابی کند؛ خود زیباساز فقط با آنچه در فایل هست کار میکند.
آیا زیباسازی نحوه عملکرد کدم را تغییر میدهد؟
نه. زیباسازی فقط فضاهای خالی و شکستن خطوط اضافه و حذف میکند؛ برنامه بهطور یکسان اجرا میشود. تنها گزینهای که توکنها را لمس میکند «افزودن سمیکولنهای مفقود» است که statement terminatorهایی را که automatic semicolon insertion در runtime به هر حال اضافه میکرد وارد میکند و کد را برای minify شدن بعدی ایمن میکند.
گزینههای brace-style به چه معناست؟
Collapse آکولاد باز را در همان خط statement نگه میدارد (if (x) {)، که convention رایج JavaScript است. Expand هر آکولاد باز را به خط خودش میبرد (سبک Allman). End-expand آکولاد باز را attached نگه میدارد اما else و catch را بعد از آکولاد بسته در خط جدید قرار میدهد.
زیباسازی JavaScript در سمت مرورگر بدون مرحله build یا آپلود به شما کد خوانا میدهد. یک اسکریپت فشرده یا بینظم الصاق کنید، تورفتگی و سبک آکولاد را انتخاب کنید، سپس نتیجه را کپی یا دانلود کنید. هیچ چیز دستگاه شما را ترک نمیکند، هیچ حسابی نیاز نیست، و کتابخانه فقط وقتی آن را بخواهید بارگذاری میشود — بنابراین باز کردن این صفحه چند کیلوبایت هزینه دارد، نه یک مگابایت.