نحوه عملکرد زیباسازی HTML
زیباساز markup شما را تگ به تگ میخواند، عمق تودرتوی هر عنصر را دنبال میکند و آن را با تورفتگی یکسان مجدداً emit میکند. هرگز آنچه صفحه رندر میکند را تغییر نمیدهد — فقط چیدمان سورس را.
- تجزیه تگها. کتابخانه ورودی شما را به جریانی از توکنها تبدیل میکند: تگهای باز، تگهای بسته، محتوای متنی، کامنتها، و محتوای بلوکهای script و style. مقادیر attribute نقلقولشده و محتوای عناصر pre و textarea بهعنوان واحدهای منفرد شناسایی میشوند، بنابراین فضاهای خالی داخل آنها دستنخورده باقی میمانند.
- ردیابی تودرتویی. زیباساز هنگام پیمایش جریان توکن، سطح تورفتگی جاری را نگه میدارد. هر تگ بازی که self-closing نیست سطح را عمیقتر میکند؛ هر تگ بسته تطابقدهنده آن را برمیگرداند. آن عمق تعیین میکند چه تعداد واحد تورفتگی در ابتدای هر خط قرار میگیرد.
- اعمال گزینههای شما. انتخاب تورفتگی — ۲ فاصله، ۴ فاصله، یا یک tab — عرض یک سطح را تعیین میکند. مقدار شکستن خط در ستون، خطوط طولانی attribute یا متن را هنگام گذشتن از ستونی که انتخاب میکنید میشکند. محدودیت خط خالی، اجراهای طولانی خطوط خالی را به حدی که تعیین میکنید کاهش میدهد.
- بازتولید. در نهایت formatter تگها را با تورفتگی و شکستن خطی که محاسبه کرده چاپ میکند. اگر قالببندی درونخطی را فعال کرده باشید، محتوای هر بلوک style از CSS formatter و محتوای هر بلوک script از JS formatter عبور میکند تا کد جاسازیشده با markup پیرامون هماهنگ شود.
چرا HTML را زیبا کنیم
- خواندن صفحات فشرده. HTML production بدون شکستن خط برای صرفهجویی در بایت ship میشود. زیباسازی ساختار را بازمیگرداند تا بتوانید بخشی را که دنبالش هستید پیدا کنید، یک closing tag مفقود را تشخیص دهید، و ببینید سند واقعاً چگونه تودرتوست.
- مرتب کردن قالبهای ناهماهنگ. markupی که چندین نفر ویرایش کردهاند به تورفتگی مختلط و جایگذاری تگ متنوع میرسد. یک بار عبور از زیباساز کل فایل را normalize میکند، بنابراین commit بعدی تغییری را که انجام دادهاید نشان میدهد نه دیواری از فضای خالی بازقالببندیشده.
- صفحه شما را کند نمیکند. اکثر formatter های آنلاین کل کتابخانه را به محض باز شدن صفحه بارگذاری میکنند. این ابزار js-beautify را فقط وقتی روی Beautify کلیک میکنید یا Live mode را روشن میکنید fetch میکند، بنابراین بارگذاری اول چند کیلوبایت هزینه دارد نه چند صد، و صفحه سریع میماند.
- هیچ چیز مرورگر شما را ترک نمیکند. همه چیز روی دستگاه شما اجرا میشود. markup شما هرگز به سروری آپلود نمیشود، که اهمیت دارد وقتی صفحه متعلق به یک مشتری است، URLهای داخلی دارد، یا تحت توافق محرمانگی است.
کاربردهای رایج
زیباسازی HTML هر بار که کسی نیاز دارد markupی را بخواند که برای خوانده شدن نوشته نشده ظاهر میشود.
- بررسی یک صفحه زنده: سورس فشرده از View Source را paste کنید تا markup پشت یک باگ layout را پیدا کنید که نمیتوانید آن را بهصورت محلی بازتولید کنید.
- پاکسازی خروجی CMS: قالبی را که یک page builder در یک خط export کرده قبل از commit کردن آن به مخزن بازقالببندی کنید.
- بررسیهای دسترسپذیری و SEO: سند را گسترش دهید تا ترتیب عنوانها، ساختار landmark و attribute های alt را در برابر DOM واقعی بررسی کنید.
یک مثال عملی
یک قطعه فشرده بگیرید: <div><p>hi</p><span>x</span></div>. آن را در بالا با تورفتگی روی ۲ فاصله الصاق کنید، سپس Beautify را بزنید. یک بلوک خوانا برمیگردانید: <div> در خط خودش، <p>hi</p> و <span>x</span> هر کدام یک سطح عمیقتر زیر آن تورفته، و </div> تطابقدهنده زیر آنها ردیف شده. تورفتگی را به Tabs تغییر دهید و هر سطح از دو فاصله به یک کاراکتر tab تغییر میکند. یک بلوک <style>a{color:red}</style> اضافه کنید، «CSS و JS درونخطی را هم قالببندی کن» را روشن کنید، و rule به جای ماندن در یک خط روی خطوط تورفته خود گسترش مییابد.
FAQ
آیا این در مرورگر من اجرا میشود؟
بله. کتابخانه js-beautify اولین بار که روی Beautify کلیک میکنید یا Live mode را فعال میکنید lazy-load میشود، سپس cached میشود. markup شما هرگز صفحه را ترک نمیکند — هیچ round-trip سروری و هیچ آپلودی در کار نیست.
آیا زیباسازی نحوه رندر شدن صفحهام را تغییر میدهد؟
نه. زیباساز فقط فضاهای خالی و شکستن خطوط بین تگها را اضافه و حذف میکند. مرورگر آن فضاها را هنگام ساخت صفحه نادیده میگیرد، بنابراین نتیجه رندرشده یکسان است. تنها چیزی که باید مراقبش بود محتوای حساس به فاصله داخل pre، textarea، یا عناصر inline است که formatter عمداً آن را دستنخورده میگذارد.
toggle CSS و JS درونخطی چه کاری میکند؟
وقتی خاموش است، محتوای بلوکهای style و script دقیقاً همانطور که paste کردهاید رها میشوند. روشن کنید و CSS داخل هر بلوک style از CSS formatter، و کد داخل هر بلوک script از JS formatter عبور میکند تا کد جاسازیشده با markup پیرامون هماهنگ تورفتگی داشته باشد.
«شکستن خط در ستون» به چه معناست؟
طول خطی را تعیین میکند که یک تگ با attributeهای زیاد، یا یک متن طولانی، روی چند خط شکسته میشود. روی ۰ بگذارید تا هر عنصر صرفنظر از طولش روی یک خط بماند. روی ۸۰ یا ۱۲۰ تنظیم کنید و formatter هر چیزی را که از آن ستون میگذرد wrap میکند تا عناصر پهن در یک ویرایشگر باریک خوانا بمانند.
زیباسازی HTML در سمت مرورگر بدون مرحله build یا آپلود به شما markup خوانا میدهد. یک صفحه فشرده یا بینظم الصاق کنید، تورفتگی و عرض شکستن خط را انتخاب کنید، تصمیم بگیرید که CSS و JS درونخطی را هم بازقالببندی کنید یا نه، سپس نتیجه را کپی یا دانلود کنید. هیچ چیز دستگاه شما را ترک نمیکند، هیچ حسابی نیاز نیست، و کتابخانه فقط وقتی آن را بخواهید بارگذاری میشود — بنابراین باز کردن این صفحه چند کیلوبایت هزینه دارد، نه یک مگابایت.