WordPress JavaScript Coding Standards

July 6th, 2016

JavaScript นับได้ว่าเป็นภาษาหนึ่งที่คนส่วนใหญ่จะ Write Once, Run Anywhere Without Modification.. หมายความว่าอะไร หมายความว่าโค้ดส่วนใหญ่อ่านไม่รู้เรื่อง แล้วก็เข้าใจยากน่ะสิ ฮะๆ >_< โพสต์นี้จะนำเสนอเรื่องการเขียน JavaScript ตาม Coding Standards ที่ WordPress วางเอาไว้ ซึ่งอาจจะช่วยให้อ่านโค้ดแล้วเข้าใจมากขึ้น เพราะโค้ดดูสะอาดตา

ถ้ายังสงสัยว่าทำไมต้องทำตาม Coding Standards ลองอ่าน WordPress Coding Standards สำคัญไฉน? ก่อนนะ

Brace

เหมือนกับของ PHP เลย เปิดปีกกาก็ควรให้อยู่บรรทัดเดียวกับพวก if-else หรือตอนประกาศฟังก์ชั่น

var a, b;
if ( a && b ) {
    action1();
    action2();
}
else if ( a ) {
    action3();
    action4();
}
else {
    defaultAction();
}

Quotations

พวกสตริงทั้งหลายก็ให้ใช้ single quote เพื่อความง่าย และใช้ double quotes ตามความเหมาะสม เช่น

'Just your everyday string.';

// Use double quotes when a string contains single quotes
"Note the capital 'P' in WordPress";

การเว้นวรรค หรือ Whitespace

ก็ให้ใช้ตามความเหมาะสมครับ เพื่อทำให้โค้ดเราดูสะอาดตา ไม่ดูรกมากจนเกินไป หรือทำเหมือนกับ PHP ก็ได้ แต่จำไว้ว่า เราไม่ควรมี whitespace ตอนสิ้นสุดบรรทัด ถ้ามีก็ให้เอาออกซะ จะทำให้การทำ Minification ได้ผลดีขึ้น

Indentation

จัดไปให้เหมือน PHP เลย

การตั้งชื่อฟังก์ชั่นหรือตัวแปร Naming Conventions

ตรงนี้จะต่างกับของ PHP เพราะว่าจะใช้ camelCase แทน ไม่ใช้ underscore ถ้าตัวแปรไหนเป็น constructure ก็ให้ใช้ TitleCase

การตั้งชื่อไฟล์

ให้ใช้ hypen ถ้ามีมากกว่าสองคำ เช่น file-name.js หรือ file-name.min.js

The var Keyword

ส่วนนี้ค่อนข้างสำคัญในภาษา JavaScript แต่ละฟังก์ชั่นควรจะประกาศ var เพื่อบ่งบอกว่าตัวแปรนั้นๆ เป็นแบบ local ถ้าไม่ได้ประกาศแล้ว มันจะเป็นไปตาม context ในขณะนั้น ซึ่งส่วนใหญ่จะกลายเป็นตัวแปรแบบ global ทำให้เราสับสน และจะหาข้อบกพร่องได้ยากมากถึงยากที่สุด

การประกาศก็ควรให้อยู่ในบรรทัดเดียวกัน แต่ถ้าตัวแปรไหนที่เราใส่ค่าให้มันก่อน ก็เอาขึ้นบรรทัดใหม่ก็ได้ เช่น

var k, m, length,
    value = 'WordPress';

Operators

ใส่เว้นวรรคให้เหมาะสม ดูสะอาดตา

var k;
k = ( 20 + 30 ) - 17;

Objects

การสร้าง object จะใส่วงเล็บปีกกา (เราจะไม่ใช้ new Object()) เมื่อประกาศ เราก็เว้นวรรคให้ดูสะอาดตา มีเว้นวรรคหลังโคล่อน ถ้าประกาศใน var กับตัวแปรอื่นๆ เราก็ควรแยกบรรทัดให้มัน หรือถ้า object นั้นมี key มากกว่า 1 เราก็อาจจะแยกออกมาประกาศตัวมันอีกทีหนึ่งก็ได้

var a = { key: 'value' },
    b, c;

b = {
    key1: 'value1',
    key2: 'value2'
};

ห้าม! ใส่คอมม่าที่ key ตัวสุดท้าย ตรงนี้ไม่เหมือนกับการประกาศอาเรย์ใน PHP นะครับ ถ้าใส่ไป IE จะสร้างปัญหาให้เราได้

Arrays

อาเรย์ใน JavaScript จะใช้ [ ] แทนการสร้าง Array() และข้างใน [ ] ก็ควรจะมีเว้นวรรคให้เหมาะสม

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

ถ้าเราอยากสร้าง associative array ก็ให้สร้างเป็น object แทนนะ 🙂

Conditionals

ในภาษา JavaScript จะมี 3 แบบ

if/else

พวกตัวแปรควรจะประกาศอยู่ข้างนอก ปีกกาควรจะใช้ตลอด และส่วนการเว้นวรรคก็คล้ายๆ กับของ PHP

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

ternary

เหมือนของ PHP เลย คือให้เช็ค condition ที่เป็น true เท่านั้น เพื่อกันความสับสน

ที่ควรทำจะเป็นแบบนี้

var fixedP;
fixedP = 'WordPress' === $('#comment').val() ? true : false;

นี่คือที่ไม่ควรทำ

var fixedP;
fixedP = 'wordpress' === $('#comment').val() ? "WordPress" : $('#comment').val();

switch

เหมือนกับการใช้ if/else เลย

switch ( myFunction() ) {
    case 'foo':
        // ...
        break;
    case 'bar':
        // ...
        break;
    default:
        //
        break;
}

Loops

การใช้ for ทั้งตัวแปร index และตัวแปรความยาวของอาเรย์ควรจะประกาศก่อนการใช้ for ซึ่งจะมีส่วนช่วยให้ลูปทำงานเร็วขึ้น

var k, z;
for ( k = 0, z = 10; k < z; k++ ) {
    // ...
}

การใช้ forin (บอกตามตรงเลยว่าผมเพิ่งรู้ว่ามีคำสั่งนี้ใน JavaScript ปกติใช้แต่ for) จะใช้ดึงค่าใน object แต่ถ้าใครอยากใช้กับอาเรย์ก็สามารถใช้ได้นะ แต่พวกอาเรย์ถ้าใช้ for จะดูอ่านเข้าใจง่ายกว่า

var foo, bar;
for ( foo in bar ) {
    // ...
}

การใช้ while จะเป็นที่นิยมกว่าใช้ do เพราะจะอ่านง่ายกว่า ทำความเข้าใจได้ง่ายกว่า การประกาศตัวแปรที่จะใช้ใน while ก็ควรประกาศไว้ข้างนอก

var a, b;
while ( a && b ) {
    // ...
}

ถ้าฟังก์ชั่นไหนที่ส่งค่ากลับมาเป็น boolean เราก็สามารถใช้กับ while ได้

while ( condition() ) {
    // ...
}

การใช้ do ก็คล้ายๆ กับ while แต่ do จะทำคำสั่งข้างในก่อนที่จะตรวจสอบ condition และ while ก็ควรอยู่บรรทัดเดียวกับปีกกาปิดของ do

var a, b;
do {
    // ...
} while ( a && b );

jQuery

การใช้ jQuery ส่วนใหญ่ปัญหาจะอยู่ที่การ conflict ของโค้ด ทำให้เราต้องเรียกฟังก์ชั่น noConflict หรือ เซตค่า $ ไปเป็นตัวแปรอื่นอยู่เสมอ ดังนั้นเวลาที่จะประกาศ anonymous ฟังก์ชัน ให้ส่ง jQuery ไปเป็น argument ก่อนเลย เช่น

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

เอาล่ะ ส่วนของ JavaScript ก็มีประมาณนี้ครับ มี Tool แนะนำครับ เป็นตัววัดคุณภาพของโค้ด JavaScript ของเรา ไปลองเล่นได้ที่ JSLint ครับ 😀

 

อ้างอิงจากต้นฉบับ WordPress JavaScript Coding Standards