OpenByt - مصدرك النهائي لمعرفة ووردبريس مجانًا

إتقان JavaScript في ووردبريس: دليل أفضل الممارسات

أوبن بايت

إتقان معايير ترميز ووردبريس جافا سكريبت: دليل شامل للمطورين

JavaScript coding standards in WordPress are crucial for maintaining consistency, readability, and high-quality code, whether you are developing themes, plugins, or contributing to the core. These standards ensure that your JavaScript integrates seamlessly with PHP, HTML, and CSS and facilitate collaboration across diverse teams. Let’s dive into these standards, breaking them down with practical examples to make them accessible for all developers.

Overview: Building on jQuery’s Foundation

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

تشمل الاختلافات الرئيسية ما يلي:

  1. اقتباسات مفردة للأوتار: يُفضِّل ووردبريس علامات الاقتباس المفردة لتعريفات السلاسل.
  2. المسافة البادئة لبيان الحالة: في ووردبريس، يتم وضع مسافة بادئة لعبارات الحالة داخل كتلة تبديل.
  3. اتساق المسافة البادئة للوظيفة: يتم وضع مسافة بادئة لكل المحتوى داخل الدالة، بما في ذلك أغلفة الإغلاق على مستوى الملف.
  4. حد طول الخط المخفف: بينما يفرض jQuery حد 100 حرف لكل سطر، يشجع ووردبريس على ذلك ولكنه لا يفرضه بصرامة.

المجالات الأساسية التي تغطيها معايير ووردبريس جافا سكريبت

1- تنسيق الرمز والمسافة البادئة

التنسيق السليم والمسافة البادئة ضروريان لشفرة قابلة للقراءة والصيانة. يؤكد معيار ووردبريس على:

( الدالة ( $ ) { {
    // يتم وضع مسافة بادئة لتعبيرات الكتلة
    الدالة doSomething() { // رمز الدالة ذو مسافة بادئة
        // شيفرة الدالة ذات مسافة بادئة أيضًا
        console.log( 'القيام بشيء ما' );
    }
) )) (jQuery);

في المثال أعلاه، تم وضع مسافة بادئة بين الدالة doSomething() ومحتواها لإظهار أنها جزء من IIFE.

في المثال أعلاه، تم وضع مسافة بادئة بين الدالة doSomething() ومحتواها لإظهار أنها جزء من IIFE.

var html = '<p>مجموع " + أ + " و " + ب + " يساوي " + (أ + ب) +</p>';

العناصر
    .addClass( 'foo' )
    الأطفال()
        .html( 'مرحبًا' )
    .end()
    .appendTo( 'body' );

هنا، تبدأ كل طريقة في السلسلة في سطر جديد، مما يجعل تسلسل العمليات أكثر قابلية للقراءة.

2. تباعد الكائنات والمصفوفات

الكائنات والمصفوفات: يعد التباعد المتسق أمرًا بالغ الأهمية للوضوح المرئي، خاصة عند العمل مع هياكل البيانات المعقدة. اتبع هذه الإرشادات الخاصة بالتباعد:

// Correct way to declare objects
var obj = {
    name: 'John',
    age: 27,
    height: 179
};

// Incorrect way to declare objects (do not condense properties)
var obj = { name: 'John', age: 27, height: 179 };

// Arrays should also follow consistent spacing
var array = [ 1, 2, 3 ];

يضمن التباعد الصحيح في الكائنات والمصفوفات أن تكون بنية بياناتك مميزة بصريًا، مما يساعد عند تصحيح الأخطاء أو مراجعة التعليمات البرمجية.

3. الفواصل المنقوطة

استخدم دائماً فاصلة منقوطة to terminate statements. Omitting semicolons can lead to unexpected issues during JavaScript’s automatic semicolon insertion (ASI).

var array = [ 1, 2 ];
console.log( 'Hello, world!' );

Even though JavaScript can sometimes infer semicolons, it’s best practice to include them explicitly to avoid ambiguities, especially when combining multiple code snippets or contributing to team projects.

4. إعلانات المتغيرات: تشكل, دعناو فار

const userName = 'Alice'؛ // استخدم const للقيم الثابتة
دع عمر المستخدم = 30؛ // استخدم دع للقيم التي قد تتغير.

استخدام تشكل و دعنا يساعد بشكل مناسب على تحسين سلامة الشيفرة البرمجية ويجعل من السهل التفكير في أعمار المتغيرات.

5. اصطلاحات التسمية

تجعل اصطلاحات التسمية المتناسقة التعليمات البرمجية أكثر قابلية للقراءة والصيانة:

const MAX_CONNECTIONS = 5;
صنف UserProfile {
    مُنشئ( الاسم ) {
        هذا.name = الاسم;
    }
}

تساعد حالة CamelCase للمتغيرات والدوال على التفريق بينها وبين الفئات والثوابت، مما يساهم في تحسين وضوح الشيفرة البرمجية.

6. فحوصات المساواة

استخدم دائماً المساواة التامة/عدم المساواة التامة (===******** و !==) بدلًا من تلك المجردة (== و !=). يساعد ذلك على تجنب أنواع الإكراه غير المتوقعة التي يمكن أن تؤدي إلى أخطاء.

إذا كان (الاسم === 'جون' ) {
    // التحقق من المساواة الصارمة
    console.log( 'مرحبًا، جون!' );
}

إذا كانت ( النتيجة !=== خطأ ) { {
    // التحقق من عدم المساواة الصارم
    console.log( 'النتيجة ليست خاطئة' );
}

تضمن المساواة الصارمة أن تتم مقارنة كل من النوع والقيمة، مما يجعل شفرتك أكثر قابلية للتنبؤ.

7. التعامل مع الأوتار

الاستخدام اقتباسات مفردة للسلاسل إلا إذا كانت السلسلة تحتوي على علامة اقتباس مفردة، وفي هذه الحالة استخدم علامات اقتباس مزدوجة لتجنب الهروب.

var greeting = "مرحبًا أيها العالم!";
var statement = "إنه يوم جميل";

تضمن هذه القاعدة الاتساق عبر قاعدة التعليمات البرمجية، مما يسهل على المطورين اتباع نفس الممارسات.

8. تبديل البيانات

يجب أن تحتوي عبارات التبديل على استراحة لكل حالة (باستثناء الحالة الافتراضية) لمنع حدوث أخطاء في السقوط. بالإضافة إلى ذلك, بيانات الحالة البادئة في علامة تبويب واحدة داخل المفتاح.

التبديل ( event.keyCode ) {
    الحالة $.ui.keyCode.ENTER:
    الحالة $.ui.keyCode.SPACE:
        executeFunction();
        كسر;
    الحالة $.ui.keyCode.ESCAPE:
        إلغاء الدالة();
        كسر;
    افتراضي:
        الدالة الافتراضية();
}

تمنع المسافة البادئة المناسبة واستخدام الفواصل السلوك غير المقصود عند استيفاء حالات متعددة.

أفضل الممارسات في تطوير ووردبريس جافا سكريبت

1. تجنب المتغيرات العالمية

يمكن أن تؤدي المتغيرات العالمية إلى تلوث مساحة الاسم والتعارض مع النصوص البرمجية الأخرى. بدلاً من ذلك، غلف شفرتك داخل تعبير الدالة المُستدعاة فوراً (IIFE) لإنشاء نطاق محلي.

( الدالة() {
    const localVar = "نطاق هذه الدالة";
    // الرمز هنا محمي من النطاق العام
} )();

يقلل تغليف الشيفرة البرمجية من مخاطر التعارضات، خاصةً عند العمل في بيئات ذات مكتبات متعددة تابعة لجهات خارجية.

2. الوثائق والتعليقات

ووردبريس يتبع معيار JSDoc 3 لتوثيق شيفرة JavaScript. التوثيق أمر بالغ الأهمية لفهم وظائف الأساليب والفئات والدوال المعقدة.

/**
 * يضيف رقمين معًا.
 *
 * @param {رقم} أ - الرقم الأول.
 * @param {رقم} b - الرقم الثاني.
 *إرجاع {رقم} مجموع أ و ب.
 */
الدالة إضافة (أ، ب) {
    إرجاع أ + ب;
}

يسمح توثيق الشيفرة البرمجية باستخدام JSDoc للأدوات بإنشاء الوثائق تلقائيًا ويساعد المطورين على فهم شيفرتك البرمجية دون التعمق في التنفيذ.

3. معالجة الأخطاء

الاستخدام try…catch للتعامل مع الأخطاء المحتملة بأمان. تضمن معالجة الأخطاء ألا تتسبب المشكلات غير المتوقعة في فشل تطبيقك بالكامل.

حاول {
    const data = JSON.parse( jsonString );
} التقاط ( خطأ ) {
    console.error( 'Invalid JSON:'، خطأ );
}

تعمل المعالجة السليمة للأخطاء على تحسين مرونة الشيفرة البرمجية الخاصة بك، مما يسهل تصحيح الأخطاء وصيانتها.

معايير ترميز جافا سكريبت في الممارسة العملية

للتأكُّد من التزام كود JavaScript الخاص بك بمعايير ووردبريس

الخروج من إصدار الهاتف المحمول