استانداردهای کدنویسی جاوا اسکریپت در وردپرس

با قسمت پنجم از سری «آموزش تخصصی استانداردهای طراحی قالب وردپرس» در خدمت شما هستیم. در این قسمت به بررسی استانداردهای تعریف شده از طرف وب سایت وردپرس برای استفاده از زبان برنامه نویسی جاوا اسکریپت در وردپرس می پردازیم.

استانداردهای کدنویسی جاوا اسکریپت در وردپرس

JavaScript به یک زبان مهم در توسعه برنامه های مبتنی بر وردپرس (قالب ها و افزونه ها) و همچنین هسته وردپرس تبدیل شده است. همانطور كه استانداردهایی برای کدنویسی وردپرس بر پایه ی زبان های PHP ،HTML و CSS وجود داشت، استانداردهایی برای طراحی بوسیله ی كدهای جاوا اسكریپت نیز لازم است.

چنانچه کدها را یک تیم نوشته باشند، باید آنطور به نظر برسد که همه ی آن ها را یک نفر نوشته است.

استانداردهای که در ادامه بررسی می کنیم، در موارد زیر با استانداردهای jQuery تفاوت دارد:

در وردپرس برای رشته ها (strings) از تک کوتیشن ( '...' ) استفاده می کنیم.
بیانیه های پرونده (Case statements) درون بلوک های switch قرار می گیرند.
محتوای فانکشن ها همواره فرو رونده هستند.
برخی از قوانین مربوط به فضاهای خالی در اینجا متفاوت است. علت آن هم برای سازگاری با برنامه های php در وردپرس است.
پایبندی به محدودیت 100-خط در جی‌کوئری، در اینجا نیز توصیه می شود اما ضروری نیست.

بسیاری از قوانینی که در ادامه ذکر خواهند شد، برگرفته از راهنمای جی‌کوئری می باشند. همه ی این قوانین و استانداردها باید در کدنویسی برای وردپرس نیز رعایت شوند. مگر این که در جایی صراحتا به استثنائات آن قانون اشاره شود.

ریفکتورینگ کد (Code Refactoring)

این دیدگاه اشتباه است که چون می توان code refactoring را انجام داد، آن را انجام می دهیم. باید گفت این کار ضروری است.

خیلی از استانداردهای تعریف شده برای جاوا اسکریپت، برای ساختار فایل های وردپرسی مناسب نیست. کمپانی وردپرس در تلاش است تا به تدریج این امر را بهبود ببخشد.

وقتی که پیروی از استانداردهای کدنویسی مهم تر به نظر برسند، ریفکتورینگ کردن فایل های قدیمی js. موضوع ضروری ای نیست.

تمام کدهای جاوا اسکریپت برای حصول اطمینان از رعایت استانداردها توسط کارشناسان بررسی می شوند.

فاصله گذاری ها (spacing)

می توانید به صورت آزادانه از اسپیس در کد خود استفاده کنید.

قانون زیر آزادی بیشتری به توسعه دهندگان می دهد تا کدهای بازتری بسازند. پروسه ی کوچک کردن و خلاصه سازی، فایل های کوچکتری را برای بهبود عملکرد مرورگرها ایجاد خواهد کرد.

تو رفتگی با تب ها (tabs)
هیچ فضای خالی ای (whitespace) در انتهای خط وجود ندارد.
هر خط نباید بیشتر از 80 کاراکتر داشته باشد و نهایتا نباید از حد 100 کاراکتر تجاوز کند.
بلوک های if/else/for/while/try باید همواره دارای بریس باشند (بریس شامل اشکالی مثل "[]" و "()" و "{}" و "<>" و غیره می شود).
فقط کاراکترهایی مثل ++ و -- نباید از المان خود فاصله داشته باشند.
کاراکترهای ( , ) و ( ; ) هم نباید قبل از خود فاصله داشته باشند.
کاراکتر ( ; ) باید در انتهای خط نوشته شود.
کاراکتر دونقطه ( : ) ، زمانی که درون یک شیء بعد از نام پراپرتی می آید، نباید قبل از خود فاصله ای داشته باشد.
کاراکترهای ( ؟ ) و ( : ) در یک شرط سه گانه باید قبل و بعد از خود فاصله یا اسپیس داشته باشند.
هیج فضای خالی ای در بریس های خالی وجود ندارد ( "[]" و "()" و "{}" )
در پایان هر فایل (file) باید یک خط خالی گذاشته شود.
هر کاراکتر یا اپراتور نفی ( ! ) باید بعد از خود یک فاصله داشته باشد.
بدنه ی هر فانکشن باید بوسیله ی یک تب (tab) فرورفتگی داشته باشد. (کلید tab در برنامه نویسی باعث می شود که آن خط کد، با رعایت یک سری اصول، کمی از اول خط فاصله بگیرد)
دکمه ی اسپیس که برای فاصله گذاری ها کاربرد دارد، ممکن است در جاهای مختلفی مورد استفاده قرار بگیرد اما دکمه ی tab که برای فرورفتگی استفاده می شد فقط در اول خط استفاده می شود. نباید در ابتدای خط از اسپیس استفاده کرد.

استانداردهای وردپرس برای زبان برنامه نویسی جاوا اسکریپت زمانی بیشتر کاربردی خواهند بود که جاوا اسکریپت در وردپرس با پی اچ پی و غیره مخلوط شود.

فضاهای خالی یا فضاهای سفید به راحتی می تواند در انتهای یک خط جمع شوند - این فضاها ممکن است در JSHint باعث به وجود آمدن ارور شوند، بنابراین از این کار خودداری کنید. یکی از راه های فهمیدن فضای سفید در کد، فعال کردن قابلیت «مشاهده کاراکتر های خالی» یا visible whitespace characters در ویرایشگر متن است.

اشیاء (Objects)

اعلان کردن شیء یا Object declaration را می توان در یک خط انجام داد. البته اگر آن خط کوتاه باشد (به قانون 100 کاراکتر مراجعه کنید). زمانی که اعلان یا تعریف یک شیء طولانی باشد، باید به ازای هر خط یک پراپرتی را برای آن قرار داد. نام های پراپرتی ها باید دارای کوتیشن باشند، مگر این که نام های پیش فرض یا کاراکترهای خاصی باشند.

اگر خواستید ابجکت ها و آرایه ها را با هم اعلان کنید، باز هم دو حالت پیش می آید: اگر کوتاه بودند، می شود آن ها را در یک خط نوشت. اما اگر طولانی شدند باید هر عضو (member) از آرایه در یک خط باشد و آن خط با یک کاما ( , ) به پایان برسد.

مثال:

// Preferred
var obj = {
    ready: 9,
    when: 4,
    'you are': 15,
};
var arr = [
    9,
    4,
    15,
];
 
// Acceptable for small objects and arrays

فراخوانی آرایه ها (Arrays) و فانکشن ها (Functions)

همواره در اطراف عناصر یا المان ها و ارگومان ها از فضای خالی استفاده کنید.

array = [ a, b ];
 
foo( arg );
 
foo( 'string', object );
 
foo( options, object[ property ] );
 
foo( node, 'property', 2 );
 
prop = object[ 'default' ];
 
firstArrayElement = arr[ 0 ];

مثالی از فاصله گذاری مناسب

به فاصله گذاری مناسب و خوب در کد زیر دقت کنید:

var i;
 
if ( condition ) {
    doSomething( 'with a string' );
} else if ( otherCondition ) {
    otherThing( {
        key: value,
        otherKey: otherValue
    } );
} else {
    somethingElse( true );
}