گذاشتن جاوا اسکریپت در وردپرس | استانداردهای طراحی قالب

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

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

استانداردهای گذاشتن جاوا اسکریپت در وردپرس به شرح زیر می باشند.

دستور سوییچ (Switch)

به طور کلی استفاده از دستور switch در برنامه نویسی کاهش یافته اما زمانی که تعداد زیادی حالت (case) برای یک دستور شرطی موجود باشد، دستور switch بهترین گزینه برای استفاده می باشد.

زمانی که از دستور switch استفاده می کنید:

برای هر case یک خط مجزا در نظر بگیرید.
هر case باید نسبت به دستور switch، دارای یک tab (فرورفتگی) باشد.

switch ( event.keyCode ) {
    // ENTER and SPACE both trigger x()
    case $.ui.keyCode.ENTER:
    case $.ui.keyCode.SPACE:
        x();
        break;
    case $.ui.keyCode.ESCAPE:
        y();
        break;
    default:
        z();
}

بازگردانی (return) مقادیر (value) از درون دستور switch پیشنهاد نمی شود، بلکه بهتر است برای قرار دادن مقدار از case استفاده کنید، و در آخر آن ها را بازگردانی (return) کنید.

function getKeyCode( keyCode ) {
    var result;
 
<pre><code>switch ( event.keyCode ) {
    case $.ui.keyCode.ENTER:
    case $.ui.keyCode.SPACE:
        result = 'commit';
        break;
    case $.ui.keyCode.ESCAPE:
        result = 'exit';
        break;
    default:
        result = 'default';
}
 
return result;
</code></pre>
 
}

تجربیاتی در زبان جاوا اسکریپت

آرایه ها

در ساختن آرایه ها در جاوا اسکریپت باید به جای ()new Array از علامت [] استفاده شود:

var myArray = [];

می توانید یک آرایه را به شکل زیر بنویسید:

var myArray = [ 1, 'WordPress', 2, 'Blog' ];

آرایه های چندگانه در جاوا اسکریپت به عنوان یک شیء (object) شناخته می شوند.

شیء (object)

راه های زیادی برای ساختن شیء در جاوا اسکریپت وجود دارد. استفاده از علائم {} راحت ترین و خواناترین روش برای انجام این کار است.

var myObj = {};

فقط در مواردی که شیء به یک نمونه ی خاص نیاز داشته باشد، با فراخوانی یک تابع سازنده (constructor) با عبارت new، شیء را ایجاد می کنیم. مثل کد:

var myObj = new ConstructorMethod();

پراپرتی های شیء باید از طریق نقطه گذاری قابل دسترس باشند. مگر این که کلید مورد نظر (key) یک رشته یا متغیر نامعتبر باشد.

prop = object.propertyName;
prop = object[ variableKey ];
prop = object['key-with-hyphens'];

تکرار

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

// Good &amp; Efficient
var i, max;
 
// getItemCount() gets called once
for ( i = 0, max = getItemCount(); i &lt; max; i++ ) {
    // Do stuff
}
 
// Bad &amp; Potentially Inefficient:
// getItemCount() gets called every time
for ( i = 0; i &lt; getItemCount(); i++ ) {
    // Do stuff
}

توابع مجموعه ی Underscore.js

متدها و آرایه های مجموعه ی Underscore را یاد بگیرید این توابع (شامل each._ و map._ و reduce._) ، به خوانایی کدهای بزرگ و طولانی کمک می کنند.

همچنین Underscore این اجازه را می دهد تا شیء های پرکاربرد جاوا اسکریپت را به روش جی‌کوئری زنجیر کنیم.

var obj = {
    first: 'thing 1',
    second: 'thing 2',
    third: 'lox'
};
 
var arr = _.chain( obj )
    .keys()
    .map( function( key ) {
        return key + ' comes ' + obj[ key ];
    } )
    // Exit the chain
    .value();
 
// arr === [ 'first comes thing 1', 'second comes thing 2', 'third comes lox' ]

تکرار در مجموعه ی جی‌کوئری

فقط زمانی جی‌کوئری برای تکرار مورد استفاده قرار می گیرد که تکرار بر روی اشیاء مجموعه ی جی‌کوئری انجام شود.

$tabs.each( function( index, element ) {
    var $element = $( element );
 
<pre><code>// Do stuff to $element
</code></pre>
 
} );

هرگز از جی‌کوئری برای تکرار بر روی «اطلاعات raw» یا «اشیاء vanilla» در جاوا اسکریپت استفاده نکنید.

JSHint

JSHint یک ابزار کیفیت‌ سنج خودکار است که برای پیدا کردن ارورها در کد جاوا اسکریپت شما طراحی شده است. ابزار JSHint در وردپرس برای پیدا کردن ارورهایی که به فرانت-اند مربوط می شوند، بسیار مناسب است.

نصب و اجرای JSHint

ابزار JSHint به وسیله ی یک ابزار دیگر به نام Grunt اجرا می شود. هر دو ابزار (JSHint و Grunt) با زبان Node.js نوشته شده اند. فایل پیکربندی به نام package.json با کدهای توسعه ی وردپرس همراه است این اجازه را می دهد تا این دو ابزار را نصب و پیکربندی نمایید.

برای نصب Node.js به وب سایت آن بروید و آن را دانلود و نصب نمایید. زمانی که آن را نصب کردید، یک خط فرمان یا ترمینال را در کامپیوتر خود اجرا کنید. با استفاده از فرمان cd به فولدر نصب محلی (local) وردپرس در کامپیوترتان بروید. همان فولدری که فایل package.json در آن جا قرار دارد.

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

بعد از این کار، حالا می توانید فرمان npm run grunt jshint را اجرا کنید. این فرمان، اقدام به پیدا کردن ارورهای منطقی و ساختاری جاوا اسکریپت در پروژه ی وردپرسی می کند. اگر خواستید ارورهای موجود در هسته ی وردپرس را بررسی کنید، فرمان npm run grunt jshint:core را اجرا کنید. برای این که فقط فایلی مثل test.js را بررسی کنید، فرمان npm run grunt jshint:tests را اجرا نمایید.

هدف قرار دادن یک فایل خاص

اگر می خواهید که JSHint فقط یک فایل خاص را بررسی کند، عبارت file=filename.js-- را به انتهای فرمان اضافه کنید. برای مثال، فرمان زیر فقط ارورهای فایل admin-bar.js موجود در هسته ی وردپرس را بررسی خواهد کرد:

npm run grunt jshint:core --file=admin-bar.js

فرمان زیر نیز فقط فایل password-strength-meter.js موجود در دایرکتوری tests را بررسی خواهد کرد.

npm run grunt jshint:tests --file=password-strength-meter.js

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

نادیده گرفتن یک بخش از کد به وسیله ی JSHint

اگر می خواهید که یک بلوک کد در پروسه ی خطایابی JSHint مورد بررسی قرار نگیرد، باید آن را مثل کد زیر برای JSHint در کامنت ها تعریف کنید.

/* jshint ignore:start <em>/
if ( typeof jQuery.fn.hoverIntent === 'undefined' ) {
    // hoverIntent r6 - Copy of wp-includes/js/hoverIntent.min.js
    (function(a){a.fn.hoverIntent=...............
}
/</em> jshint ignore:end */

به پایان قسمت هشتم با موضوع استانداردهای گذاشتن جاوا اسکریپت در وردپرس رسیدیم. تا اینجا، استانداردهای کلی و نیز استانداردهای مربوط به زبان های برنامه نویسی اچ تی ام ال (html)، سی اس اس (css)، و جاوا اسکریپت (javaScript) را مفصلا بررسی کردیم. امیدواریم که با دقت مطالعه کنید تا بتوانید برنامه ها و قالب هایی مطابق کیفیت ها و فاکتورهای بین المللی برای وردپرس ایجاد نمایید. در قسمت بعدی به سراغ استانداردهای مربوط به زبان برنامه نویسی پی اچ پی (php) می رویم. با ما همراه باشید.

منبع: سایت WordPress