منسق JavaScript عبر الإنترنت لكود مواقع أنظف

مقدمة

شيفرة JavaScript التي جرى تصغيرها للنشر، أو كُتبت على عجل دون اهتمام كبير بالتنسيق، قد تكون صعبة القراءة فعلاً: لا مسافات بادئة منتظمة، وعدة تعليمات محشورة في سطر واحد، وكتل لا يمكن تمييز بعضها عن بعض بالنظر. والتجميل يعيد تنسيق تلك الشيفرة — فيضيف المسافات البادئة وفواصل الأسطر بين التعليمات ومباعدة متناسقة — دون أن يغيّر ما تفعله. فالمنطق وأسماء المتغيّرات والسلوك تبقى كما هي تماماً؛ ولا يتغيّر سوى شكلها على الشاشة. ولمن يتعلّم قراءة JavaScript لا كتابتها وحسب، لهذا الفرق وزن حقيقي: البرنامج النصي نفسه يبدو مُرهِباً حين يكون سطراً واحداً مكتظاً، ويصير واضحاً تماماً حين يتوزّع على تعليمات وكتل بمسافات بادئة سليمة.

كيف تنسّق هذه الأداة شيفرتك

تقرأ الأداة الشيفرة الملصقة جزءاً جزءاً، فتتعرّف على السلاسل النصية والتعليقات والأقواس والمعاملات باعتبارها عناصر مستقلة، بدل أن تكتفي بإقحام فواصل أسطر اعتماداً على تطابق الأنماط في النص. وهذا بالضبط ما يجعلها تميّز بدقة بين / التي تبدأ تعليقاً، وتلك التي تشكّل جزءاً من تعبير نمطي، وتلك التي تعني القسمة — وهو ما يخطئ فيه أي منسّق يعتمد على النص وحده. وتعيد بناء المسافات البادئة بقاعدة واحدة (ثلاث مسافات لكل مستوى تداخل)، وتضع فواصل الأسطر بنفسها استناداً إلى بنية الشيفرة، فتنال كل تعليمة وكل كتلة سطرها الخاص. أما التعليقات فلا تُحذف: تُحفظ ويُعاد تنسيقها مع الشيفرة، فيبقى الشرح المرافق لدالة ما أو ترويسة الترخيص موجوداً في الناتج.

والفواصل المنقوطة يُعاد ترتيبها في مواضعها، فلا تُضاف ولا تُحذف. تسمح JavaScript في حالات كثيرة بأن تنتهي التعليمة دون فاصلة منقوطة — إذ تسدّ المواصفة الرسمية للّغة هذه الثغرة تلقائياً عبر قاعدة تُسمّى الإدراج التلقائي للفاصلة المنقوطة — وبعض المطوّرين يكتبون بهذا الأسلوب عن قصد. والأداة لا تنحاز في هذا الخيار الأسلوبي: إن خلت شيفرتك الأصلية من الفواصل المنقوطة فلن تظهر في الناتج المنسّق، وإن وُجدت بقيت في مواضعها تماماً، ولا يتغيّر سوى انتظامها حول فواصل الأسطر والمسافات البادئة الجديدة. ويجدر الانتباه إلى ذلك إن كنت تستعين بالأداة في شرح كيفية انتهاء تعليمات JavaScript أو في فهمها، لأنها لن "تصحّح" أسلوباً لتحوّله إلى الآخر.

ما ينبغي معرفته قبل الاستخدام

أمران يستحقان الانتباه قبل لصق شيفرة حقيقية هنا:

• الأسطر الفارغة لا تُحفظ. يحدّد المنسّق مواضع فواصل الأسطر استناداً إلى بنية الشيفرة نفسها، لا إلى المواضع التي تركت فيها أسطراً فارغة عند اللصق. فإن كنت تستخدم تلك الأسطر لفصل أقسام البرنامج النصي بصرياً، فليس مضموناً أن يبقى هذا الفصل بعد التنسيق — المنطق وكل التعليمات ستظل موجودة، لكن دون تجميعك الأصلي.
• السلاسل القالبية (النصوص المحصورة بعلامات الاقتباس الخلفية) لا يُتعرَّف عليها كسلاسل. تتيح JavaScript الحديثة بناء السلاسل بعلامات اقتباس خلفية وتعبيرات مضمّنة، مثل `Hello, ${name}`. ومنسّق هذه الأداة لا يعامل النص المحصور بين هذه العلامات معاملة النص المحصور بين علامات الاقتباس العادية، ولذلك قد تخرج الشيفرة المعتمدة على السلاسل القالبية بتنسيق خاطئ في تلك المواضع. فإن استخدم برنامجك النصي هذه الميزة، فراجع ذلك الجزء من الناتج بعناية بعد التجميل، أو نسّق بقية البرنامج واترك تلك الأسطر كما هي.

ولا يغيّر أيٌّ من الأمرين ما تفعله شيفرتك الأصلية — فأنت تعمل دائماً على ما لصقته بنفسك، ولا يتبدّل شيء ما لم تنسخ الناتج المنسّق إلى مشروعك.

متى تكون هذه الأداة الخيار المناسب

• قراءة برنامج نصي مصغّر كتبه غيرك. الاطّلاع على شيفرة JavaScript لموقع عام من خلال أدوات المطوّر في المتصفّح يُظهر غالباً ملفاً مكتظاً بلا تنسيق — ولصقه هنا وتجميله يتيح دراسة طريقة عمله فعلياً، وهو استخدام حقيقي في مجال الثقافة الرقمية لا مجرد خطوة تنظيف للشيفرة.
• مراجعة شيفرة سلّمها طالب. البرنامج النصي الذي يصل بلا تنسيق منتظم تبطؤ قراءته وتقييمه؛ وتجميله أولاً يجعل كتابة الملاحظات أسرع وأيسر.
• ترتيب شيفرتك قبل تسليم الواجب. التنسيق المنتظم يسهّل على المعلّم — أو عليك أنت بعد بضعة أشهر — تتبّع المنطق.
• تحضير مثال برمجي للدرس. الدالة التي تُكتب بسرعة أثناء التحضير تبدو على جهاز العرض مكتظة ويصعب تتبّعها؛ وتجميلها مسبقاً يعطي شيفرة نظيفة بمسافات بادئة متساوية يقرؤها الصف حتى من المقاعد الخلفية.

أما الشيفرة التي تعتمد بكثافة على السلاسل القالبية، أو قاعدة الشيفرة الحديثة الكبيرة التي تحتاج فيها إلى ناتج صحيح مضمون، فالمنسّق المدمج في محرّر الشيفرة خيار أوثق — انظر القيد المذكور أعلاه. وهذه الأداة أنسب ما تكون للبرامج النصية بالحجم المعتاد في الصف.

مثال

يعثر طالب في موقع دروس على برنامج نصي تفاعلي قصير مصغّر في سطر واحد مكتظ، ويريد أن يفهم كيف يعمل قبل أن يكيّفه لمشروعه. وبلصقه في هذه الأداة يتمدّد البرنامج إلى تعليمات وكتل بمسافات بادئة سليمة، فيصبح بالإمكان قراءة المنطق فعلاً — أي دالة تعمل عند أي حدث، وأين تبدأ الحلقة وأين تنتهي — بدل تتبّع سطر شيفرة واحد متصل.

أسئلة شائعة

هل يغيّر التجميل طريقة عمل شيفرتي؟

لا. يتغيّر التنسيق وحده — المسافات البادئة وفواصل الأسطر والمباعدة؛ أما المنطق والسلوك فيبقيان كما هما.

هل تبقى تعليقاتي؟

نعم. تُحفظ التعليقات، بما فيها ترويسات الترخيص، ويُعاد تنسيقها مع بقية الشيفرة.

هل تتعامل مع السلاسل القالبية (النصوص بين العلامات الخلفية)؟

ليس على نحو موثوق. الشيفرة التي تستخدم `like this ${example}` قد تخرج بتنسيق خاطئ في تلك المواضع — راجع ذلك الجزء من الناتج، أو اترك تلك الأسطر دون تنسيق.

هل تُحفظ شيفرتي في أي مكان؟

لا. تُعالَج الشيفرة الملصقة لإنتاج الناتج المنسّق ولا تُخزَّن بعد ذلك؛ ولا يُسجَّل سوى أن الأداة استُخدمت، دون الشيفرة نفسها.

هل تضيف فواصل منقوطة أو تحذفها؟

لا. تبقى الفواصل المنقوطة تماماً كما ترد في شيفرتك الأصلية، ويُعاد ترتيبها فقط حول فواصل الأسطر والمسافات البادئة الجديدة — وإن لم تكن في شيفرتك أي فاصلة، فلن تكون في الناتج كذلك.

هل يمكنني تجميل عدة برامج نصية دفعة واحدة؟

الصق برنامجاً نصياً واحداً وجمّله في كل مرة. وإن احتجت إلى تنسيقها معاً فادمج الملفات أولاً، أو كرّر العملية مع كل ملف على حدة.

ما الأدوات ذات الصلة التي يمكنني استخدامها؟

استخدم CSS Beautifier أو HTML Beauty لتنسيق أنواع أخرى من الشيفرة، أو CSS Minifier حين تكون جاهزاً لضغط CSS للنشر.