JavaScript বিউটিফিকেশন কীভাবে কাজ করে
বিউটিফায়ার আপনার কোড অক্ষর অক্ষর করে পড়ে, প্রতিটি স্টেটমেন্ট কতটা গভীরে নেস্টেড তা ট্র্যাক করে, এবং সামঞ্জস্যপূর্ণ স্পেসিং দিয়ে পুনরায় নির্গত করে। কোড কী করে তা কখনও পরিবর্তন হয় না — কেবল এটি কেমন দেখায় তা বদলায়।
- টোকেনাইজ. লাইব্রেরি আপনার ইনপুটকে টোকেনের স্ট্রিমে স্ক্যান করে: কীওয়ার্ড, আইডেন্টিফায়ার, স্ট্রিং, অপারেটর ও পাংচুয়েশন। স্ট্রিং, টেমপ্লেট লিটারেল ও রেগুলার-এক্সপ্রেশন লিটারেল একক ইউনিট হিসেবে চেনা যায়, তাই স্ট্রিংয়ের ভেতরের ব্রেসকে কখনও ব্লক ডিলিমিটার ভুল করা হয় না।
- নেস্টিং ট্র্যাক করুন. টোকেন স্ট্রিমে চলার সময় বিউটিফায়ার একটি চলমান ইন্ডেন্ট লেভেল রাখে। প্রতিটি ওপেনিং ব্রেস, ব্র্যাকেট বা প্যারেন্থেসিস লেভেল গভীর করে; প্রতিটি ক্লোজিং একটি তা ফিরিয়ে দেয়। সেই গভীরতা নির্ধারণ করে আপনি ফেরত পাওয়া প্রতিটি লাইনের সামনে কতটি ইন্ডেন্ট ইউনিট থাকবে।
- আপনার অপশন প্রয়োগ করুন. আপনার ইন্ডেন্ট পছন্দ (২ স্পেস, ৪ স্পেস, বা ট্যাব) এক লেভেলের প্রস্থ নির্ধারণ করে। ব্রেস-স্টাইল সেটিং ঠিক করে ওপেনিং ব্রেস আগের স্টেটমেন্টের সাথে থাকবে নাকি নিজের লাইনে নামবে। ব্ল্যাংক-লাইন ক্যাপ দীর্ঘ খালি লাইনগুলো আপনার বেছে নেওয়া সীমায় সংকুচিত করে।
- পুনর্নির্গমন. অবশেষে ফরম্যাটার নির্ধারিত ইন্ডেন্টেশন ও লাইন ব্রেক দিয়ে টোকেনগুলো ফিরিয়ে প্রিন্ট করে, ঐচ্ছিকভাবে সেই সেমিকোলনগুলো যোগ করে যা অটোমেটিক সেমিকোলন ইনসার্শন রানটাইমে দিত। ফলাফল একই প্রোগ্রাম, এমনভাবে সাজানো যা একজন মানুষ পড়তে পারে।
JavaScript বিউটিফাই কেন করবেন
- মিনিফাইড কোড পড়ুন. প্রোডাকশন বান্ডেল এক লাইনে একক-অক্ষরের ভেরিয়েবল নাম নিয়ে শিপ হয়। বিউটিফাই করলে লাইন ব্রেক ও ইন্ডেন্টেশন ফিরে আসে যাতে আপনি সোর্স ম্যাপ ছাড়াই একটি বাগকে যে স্টেটমেন্টটি ঘটিয়েছে তা পর্যন্ত ট্রেস করতে পারেন।
- অসংগত ফাইল সুসংহত করুন. অনেকে টাচ করা কোড মিশ্র ইন্ডেন্টেশন ও ব্রেস স্টাইলে পরিণত হয়। বিউটিফায়ার থেকে একটি পাস পুরো ফাইলকে একক লেআউটে নরমালাইজ করে, যার ফলে পরের ডিফ হোয়াইটস্পেস নয়েজের পরিবর্তে আসল লজিক পরিবর্তন দেখায়।
- এই টুল আপনার পেজকে ভার দেয় না. বেশিরভাগ অনলাইন ফরম্যাটার পেজ খুলতেই তাদের পুরো লাইব্রেরি লোড করে। এই টুল js-beautify কেবল তখনই লেজি-লোড করে যখন আপনি Beautify ক্লিক করেন বা লাইভ মোড চালু করেন, তাই পেজ খুলতে কয়েক শ কিলোবাইটের পরিবর্তে কয়েক কিলোবাইট লাগে এবং প্রাথমিক রেন্ডার দ্রুত থাকে।
- কিছুই আপনার ব্রাউজার ছাড়ে না. বিউটিফায়ার সম্পূর্ণ আপনার ডিভাইসে চলে। আপনার কোড কখনও সার্ভারে আপলোড হয় না, যা গুরুত্বপূর্ণ যখন আপনি যে স্ক্রিপ্টটি পরীক্ষা করছেন তা কোনো ক্লায়েন্টের, অভ্যন্তরীণ API পাথ রয়েছে, বা গোপনীয়তা চুক্তির আওতাভুক্ত।
সাধারণ ব্যবহার
JavaScript বিউটিফাই করা তখন কাজে আসে যখন কাউকে এমন কোড পড়তে হয় যা পড়ার জন্য লেখা হয়নি।
- প্রোডাকশন ডিবাগিং: Network ট্যাব থেকে টেনে আনা মিনিফাইড বান্ডেল পেস্ট করুন এবং ত্রুটির স্ট্যাকের পেছনের ফাংশন খুঁজুন যা আপনি অন্যথায় ডিকোড করতে পারতেন না।
- কোড রিভিউ প্রস্তুতি: পুল রিকোয়েস্ট খোলার আগে কোনো অবদানকারীর অসংগতভাবে ইন্ডেন্টেড ফাইল রিফরম্যাট করুন যাতে রিভিউয়াররা লেআউট পরিবর্তনের পরিবর্তে লজিক দেখেন।
- নিরাপত্তা ও সম্মতি নিরীক্ষা: তৃতীয় পক্ষের অ্যানালিটিক্স বা বিজ্ঞাপন স্নিপেট প্রসারিত করুন লাইভ হওয়ার আগে এটি ঠিক কী করে তা নিশ্চিত করতে।
একটি কাজের উদাহরণ
একটি মিনিফাইড এক-লাইনার নিন: function f(a){if(a){return a*2}else{return 0}}। ২ স্পেস ইন্ডেন্টেশন ও Collapse ব্রেস স্টাইল দিয়ে উপরে পেস্ট করুন, তারপর Beautify ক্লিক করুন। আপনি একটি পাঠযোগ্য ব্লক ফিরে পান: function f(a) {, তারপর ইন্ডেন্টেড if (a) {, এক লেভেল গভীরে return a * 2; স্টেটমেন্ট, এবং নিচে মিলিত ব্রেস। ব্রেস স্টাইল Expand-এ বদলান এবং প্রতিটি ওপেনিং ব্রেস নিজের লাইনে নামে। ইন্ডেন্টেশন Tabs-এ বদলান এবং প্রতিটি লেভেল দুই স্পেস থেকে ট্যাব ক্যারেক্টারে সরে যায়। কাঠামো একই; কেবল লেআউট পরিবর্তিত হয়।
FAQ
এটি কি আমার ব্রাউজারে চলে?
হ্যাঁ। js-beautify লাইব্রেরি প্রথমবার Beautify ক্লিক করলে বা লাইভ মোড সক্রিয় করলে লেজি-লোড হয়, তারপর ক্যাশ হয়ে যায়। আপনার কোড পেজ ছেড়ে যায় না — কোনো সার্ভার রাউন্ড-ট্রিপ নেই, কোনো আপলোড নেই।
বিউটিফাই করা কি আন-মিনিফাইয়ের সমান?
এটি পাঠযোগ্য ফরম্যাটিং পুনরুদ্ধার করে — ইন্ডেন্টেশন, লাইন ব্রেক ও স্পেসিং — কিন্তু মিনিফিকেশন যে মূল ভেরিয়েবল নাম বা মন্তব্য মুছে দিয়েছে তা ফিরিয়ে আনতে পারে না। যদি সোর্স ম্যাপ থাকে তাহলে ব্রাউজারের DevTools মূল নাম পুনরুদ্ধার করতে পারে; একা বিউটিফায়ার কেবল ফাইলে যা আছে তা দিয়েই কাজ করে।
বিউটিফাই করলে কি আমার কোডের আচরণ বদলে যাবে?
না। বিউটিফিকেশন কেবল হোয়াইটস্পেস ও লাইন ব্রেক যোগ ও বাদ দেয়; প্রোগ্রাম হুবহু একইভাবে চলে। একমাত্র অপশন যা টোকেন স্পর্শ করে তা হল "Add missing semicolons", যা সেই স্টেটমেন্ট টার্মিনেটর ঢোকায় যা অটোমেটিক সেমিকোলন ইনসার্শন রানটাইমে যোগ করত, কোডকে পরে নিরাপদে মিনিফাই করার উপযোগী করে।
ব্রেস-স্টাইল অপশনগুলোর অর্থ কী?
Collapse ওপেনিং ব্রেসকে স্টেটমেন্টের একই লাইনে রাখে (if (x) {), যা সাধারণ JavaScript কনভেনশন। Expand প্রতিটি ওপেনিং ব্রেসকে নিজের লাইনে রাখে (Allman স্টাইল)। End-expand ওপেনিং ব্রেস সংযুক্ত রাখে কিন্তু ক্লোজিং ব্রেসের পরে else ও catch-কে নতুন লাইনে রাখে।
ব্রাউজার-সাইড JavaScript বিউটিফিকেশন আপনাকে বিল্ড স্টেপ বা আপলোড ছাড়াই পাঠযোগ্য কোড দেয়। একটি মিনিফাইড বা অগোছালো স্ক্রিপ্ট পেস্ট করুন, আপনার ইন্ডেন্টেশন ও ব্রেস স্টাইল বেছে নিন, তারপর ফলাফল কপি বা ডাউনলোড করুন। কিছুই আপনার ডিভাইস ছাড়ে না, কোনো অ্যাকাউন্ট নেই, এবং লাইব্রেরি কেবল তখনই লোড হয় যখন আপনি চান — তাই এই পেজ খুলতে মেগাবাইট নয়, কয়েক কিলোবাইট লাগে।