استفاده از جاوا اسکریپت در وردپرس | آموزش طراحی قالب وردپرس

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

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

ادامه ی استانداردهای استفاده از جاوا اسکریپت در وردپرس به شرح زیر می باشند:

فرو رفتگی و شکستن خط ها (Indentation & line breaks)

به کمک فرو رفتگی ها و شکستن خط ها (رفتن به خط بعد) می توان خوانایی کدهای پیچیده را افزایش داد.

از کلید tab برای ایجاد فرو رفتگی استفاده می شود. محتوای فانکشن ها حتما باید در یک خط بعد و با داشتن یک tab نوشته شوند. به کد زیر دقت کنید.

( function( $ ) {
    // Expressions indented
 
<pre><code>function doSomething() {
    // Expressions indented
}
</code></pre>
 
} )( jQuery );

بلوک ها و کرلی بریس ها

بلوک های if و else و for و while و try همیشه باید از بریس ها استفاده کنند. (بریس به علائمی مثل "[]" و "()" و "{}" و "<>" گفته می شود)

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

var a, b, c;
 
if ( myFunction() ) {
    // Expressions
} else if ( ( a &amp;&amp; b ) || c ) {
    // Expressions
} else {
    // Expressions
}

جملات و کدهای چند خطی (Multi-line Statements)

وقتی که یک کد به قدری طولانی می شود که نمی توان آن را در یک خط جای داد، شکست خط باید بعد از یک عملگر (+ ، - ، ؟ ، و غیره) صورت گیرد.

در کد زیر شکست خط بعد از عملگر انجام نشده، پس اشتباه است:

// Bad
var html = '&lt;p>The sum of ' + a + ' and ' + b + ' plus ' + c
    + ' is ' + ( a + b + c ) + '&lt;/p>';

در کد زیر شکست خط بعد از عملگر انجام شده است. پس درست است:

// Good
var html = '&lt;p>The sum of ' + a + ' and ' + b + ' plus ' + c +
    ' is ' + ( a + b + c ) + '&lt;/p>';

بعضی وقت ها نشکستن خط مشکلی به وجود نمی آورد اما بهتر است این کار را در مواقعی که باعث خوانایی بیشتر کد می شود انجام داد. مثلا در کد زیر، از نظر ساختاری نیازی به شکست خط نیست:

// Acceptable
var baz = ( true === conditionalStatement() ) ? 'thing 1' : 'thing 2';

اما بهتر است که این خط کد به شکل زیر، و پس از عملگر ( ؟ ) بشکند:

// Better
var baz = firstCondition( foo ) &amp;&amp; secondCondition( bar ) ?
    qux( foo, bar ) :
    foo;

زمانی که عملگرهای منطقی به قدر کافی طولانی باشند، هر یک را در یک خط مجزا قرار می دهیم:

if (
    firstCondition() &amp;&amp;
    secondCondition() &amp;&amp;
    thirdCondition()
) {
    doStuff();
}

فراخوانی زنجیره ای متدها

زمانی که فراخوانی زنجیره ای متدها، برای جایگیری در یک خط زیادی طولانی باشند، باید به ازای هر فراخوانی یک خط در نظر گرفته شود. اگر متد مذکور contex را تغییر می داد باید به اندازه ی یک سطح فرو رفتگی (tab) بگیرد.

elements
    .addClass( 'foo' )
    .children()
        .html( 'hello' )
    .end()
    .appendTo( 'body' );

اعلام متغیرها با const و let

در کدنویسی با استفاده از ES2015 و بعد از آن، const و let همواره باید به جای var مورد استفاده قرار بگیرند. در هنگام اعلام یک متغیر از const استفاده می شود. زمانی که می خواهیم مقدار متغیر را مجددا تعریف کنیم، let مناسب خواهد بود.

نیازی نیست که همه ی متغیرها را بالاتر (قبل از) از فانکشن تعریف کنیم. var زمانی استفاده می شود که بخواهیم متغیری را برای اولین بار تعریف کنیم.

تعریف متغیرها با var

هر فانکشن باید همراه با یک عبارت که معرف متغیرهای آن است، شروع شود. این عبارت دارای علام کاما ( , ) می باشد. اگر یک فانکشن متغیری را با استفاده از var تعریف نکرد، آن متغیر می تولند به محیط های بیرونی برنامه نفوذ کند و در جاهای دیگر برنامه، به صورت خواسته یا ناخواسته مورد استفاده قرار بگیرد.

وظایف (Assignments) درون var باید در خط های جداگانه ای نوشته شوند. هر خط اضافی باید به اندازه ی یک tab فرو رفتگی داشته باشد. شیء ها و فانکشن هایی که چند خط را اشغال کرده اند، باید بیرون از محدوده ی مربوط به var قرار بگیرند تا بدین وسیله از فرو رفتگی بیش از حد در کدها جلوگیری شود. فرو رفتگی بیش از حد در یک بلوک کد باعث پیچیدگی و سردرگمی می شود.

متغیرهای گلوبال (Globals)

در گذشته هسته ی وردپرس از متغیرهای گلوبال استفاده ی بیشتری می کرد. از آنجا که بعضی اوقات در پلاگین های وردپرس از جاوا اسکریپت استفاده می شود، لذا نباید متغیرهای گلوبال از وردپرس حذف شوند.

همه ی متغیرهای گلوبال استفاده شده در یک فایل باید ابتدا در بالای آن فایل نوشته شوند. متغیرهای Multiple globals نیز باید با کاما از یکدیگر جدا شوند.

در مثال زیر passwordStrength به یک متغیر گلوبال در آن فایل تبدیل شده است:

/* global passwordStrength:true */

عبارت true که بعد از passwordStrength آمده است، این موضوع را می گوید که این متغیر در این فایل گلوبال می باشد.

کتابخانه های پرکاربرد

کتابخانه های Backbone و jQuery و Underscore و شیء گلوبال wp در فیلد اصلی jshintrc. به عنوان گلوبال های مجاز شناخته می شوند.

Backbone و Underscore از هر جایی در برنامه قابل دسترسی هستند، اما برای استفاده از jQuery باید آن را با استفاده از $ به یک فانکشن پاس داد:

( function( $ ) {
    // Expressions
} )( jQuery );

این کار ما را از فراخوانی noConflict. بی نیاز می کند.

خب! همراهان گرامی، برای این جلسه کافی است. در جلسه ی بعدی استانداردهای مربوط به استفاده از جاوا اسکریپت در وردپرس را به پایان می رسانیم. حتما این استانداردها را یکبار برای همیشه یاد بگیرید تا کدهایی خوانا و باکیفیت بسازید و بدین وسیله بتوانید قالب ها و افزونه های وردپرسی خود را در بازار های داخلی و جهانی عرضه کرده یا به فروش برسانید.

منبع: سایت WordPress