JavaScript, Dünya’da en yaygın kullanılan dilidir. WordPress de, JavaScript dilini yoğun olarak kullanmaktadır. Özellikle Gutenberg Editorü ile birlikte bu yoğunluk daha da artmıştır. Bu derste bahsedeceğimiz hususlar, bir WordPress teması yaparken, kullanacağınız JavaScript kodlarının, diğer içerik ya da eklentiler ile çakışma yaşamaması için yapmamız gerekenlerdir.

Öncelikle, WordPress’in, JavaScript kodlarken bizden beklediği standartları görelim.

JavaScript Kodlama Standartları

“Kaç farklı kişi kodlarsa kodlasın, bakıldığı zaman tek bir kişi kodlamış gibi görünmelidir.”

Yukarıdaki söz, JavaScript kodlarken, belli standartlara uymanın ne demek olduğunu etkili bir şekilde ifade etmektedir.

Burada bahsedeceğimiz standartlar, bazı küçük farklılıklar dışında, jQuery-JavaScript stil rehberinden alınmış standartlardır.

Boşluklar

Kodlarımızın okunabilir olması için, boşluklar önemlidir. Fakat, boşlukları minimize etmek de, tarayıcıların işini kolaylaştırır ve temamızı hızlandırır.

Boşluk, tab tuşu ile veya space tuşu ile oluşturulur. Space tuşu ile oluşturulan boşluğa boş karakter denir.

Boşluklar ile ilgili WordPress-JavaScript standartları şunlardır:

• Kodlarınızdaki satır başı girintilerini, tab tuşu ile bırakın.
• Satır sonlarında veya boş satırlarda boş karakter bırakmayın.
• Satırlarımız 80 karakterden uzun olmamalı, 100 karakteri aşmamalıdır. Bu katı bir kural değildir fakat, uzun satırlar kodumuzun karmaşık görünmesine sebep olacaktır.
• if/else/for/while/try blokları, her zaman parantezli olmalı ve birden fazla satıra yayılmalıdır.
• ++ ve -- gibi tekli özel karakter operatörleri kendilerinden sonra boşluk içeremezler.
• , ve ; işaretlerinden önce boşluk olmaz.
• ; bir kod ifadesinin sonlandığını belirtir ve her zaman satırın en sonunda olur.
• JavaScript objelerinde kullanılan : işaretinden önce boşluk kullanılmaz.
• Üçlü koşul yapılarında kullanılan ? ve : işaretlerinin her iki tarafında da birer boşluk kullanılır.
• Parantezlerin –(), [], {}– içinde herhangi bir ifade yoksa boşluk da olmaz.
• Dosyaların sonunda, yeni -boş- bir satır bulunmalıdır.
• Ünlem işaretlerinin (!) ardında bir boşluk karakteri kullanılmalıdır.
• Fonksiyon gövdeleri bir girinti içermelidir.
• Satır başında bırakılan boşluklar için tab tuşu kullanılmalıdır, space tuşu değil.

Objects – JavaScript Nesneleri

Kısa bir nesne oluşturacaksanız, nesneyi tek bir satırda oluşturabilirsiniz. Fakat uzun bir nesne olacaksa, her bir elemanı bir satırda olacak şekilde nesneyi satırlara yaymanız doğru olacaktır. Nesne satırlara yayılırken, ilk satırda nesnenin başlangıç parantezinden sonrası boş bırakılmalıdır.

// Tercih edilen
var obj = {
    ready: 9,
    when: 4,
    'you are': 15,
};
var arr = [
    9,
    4,
    15,
];
  
// Kabul edilebilir nesne ve diziler
var obj = { ready: 9, when: 4, 'you are': 15 };
var arr = [ 9, 4, 15 ];
  
// Kötü Örnek
var obj = { ready: 9,
    when: 4, 'you are': 15 };
var arr = [ 9,
    4, 15 ];

Dizi ve Fonksiyonları Çağırma

Dizi ve fonksiyonları oluştururken-çağırırken-kullanırken, argümanların sağında ve solunda birer boşluk bırakılır:

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

Doğru boşluk örnekleri:

var i;
 
if ( koşul ) {
    bişeyYap( 'bu yazı ile' );
} else if ( diğerKoşul ) {
    başkaBişeyYap( {
        anahtar: değer,
        diğerAnahtar: diperDeğer
    } );
} else {
    yoksaŞu( true );
}
 
// jQuery den farklı olarak WordPress, ! işaretinden sonra bir boşluk
// bırakılmasını tavsiye eder. Bu, PHP standartları ile de uyumluluk sağlar.
while ( ! koşul ) {
    yineleme++;
}
 
for ( i = 0; i < 100; i++ ) {
    nesne[ array[ i ] ] = birFonksiyon( i );
    $( '.container' ).val( array[ i ] );
}
 
try {
    // Kod ifadeleri buradan başlar
} catch ( e ) {
    // Kod ifadeleri buradan başlar
}

Noktalı Virgül (;)

Her zaman elle atın. Otomatik oluşturuculara güvenmeyin.

Satır Başı ve Satır Sonu

Satır başları ve satır sonları, kodunuzun daha okunaklı olmasını sağlar. her bir fonksiyon başlangıcını diğerinden bir tab içeride, fonksiyon içeriklerini de fonksiyonun kendisinden bir tab içeride başlatın:

( function( $ ) {
    // Kod ifadeleri buradan başlar
 
    function doSomething() {
        // Kod ifadeleri buradan başlar
    }
} )( jQuery );

Kod Blokları ve Süslü Parantezler

if, else, for, while, ve try gibi kod blokları ve bu blokların süslü parantezleri şu şekilde kodlanır:

var a, b, c;
 
if ( myFunction() ) {
    // Kod ifadeleri buradan başlar
} else if ( ( a && b ) || c ) {
    // Kod ifadeleri buradan başlar
} else {
    // Kod ifadeleri buradan başlar
}

Çok Satırlı İfadeler

Bazen, tek bir satıra sığmayacak kadar uzun cümleler ile çalışabiliriz. Böyle bir durumda, cümleyi bölerken operatörlerden sonra bölmek daha doğrdur:

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

İfadeler mantıklı olarak bölünmelidir ki daha okunaklı olsun:

// Kabul edilebilir bir yeni satıra geçiş
var baz = ( true === conditionalStatement() ) ? 'thing 1' : 'thing 2';
 
// Daha iyisi
var baz = firstCondition( foo ) && secondCondition( bar ) ?
    qux( foo, bar ) :
    foo;

Koşullu ifadenin koşulu çok uzunsa, şöyle yazılır:

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

Metotların Zincirleme Çağırılması

Tek bir satıra sığmayacak kadar çok metodu birbirine bağlamanız gerektiğinde, aşağıdaki stili kullanırsınız:

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

Const ve let Kullanarak Değişken Oluşturma

ES2015 ve sonrası ile kod yazarken, değişken tanımlamak için, tıpkı var gibi const ve let ifadeleri de kullanılabilir.

Bir JavaScript değişkeni oluşturma işlemi için aşağıdaki kodu inceleyiniz:

// İyi
var k, m, length,
    // Alt metin satırlarını bir tab ile girintileyin
    value = 'WordPress';
 
// Kötü
var foo = true;
var bar = false;
var a;
var b;
var c;

JavaScript Global Değişkenleri

Global değişkenler, herhangi bir fonksiyonun içinde tanımlanmayan değişkenlerdir. Birden çok global değişken, dosyanın üstünde ve aralarına virgül konularak tanımlanabilir.

Genel Kütüphaneler

WordPress bir çok JavaScript kütüphanesi ile birlikte gelir. Bunlardan Backbone ve Underscore gibilerine her zaman erişilebilirken, jQuery kütüphanesine erişmek için aşağıdaki çerçeveyi kullanmamız gerekir:

( function( $ ) {
    // Kod ifadeleri buradan başlar
} )( jQuery );

WordPress’in bir JavaScript nesnesi olan wp, her zaman her yerden ulaşılabilen bir nesnedir. Bu nesneye sağlıklı bir şekilde ulaşmak için aşağıda kodu kullanabilirsiniz:

// Dosyanın en üstünde, varsa önceden aldığı değer ile birlikte wp nesnesi
window.wp = window.wp || {};

Adlandırma Gelenekleri

JavaScript kodlarına veya değişkenlerine verdiğimiz isimler, küçük harflerden oluşmalı ve yeni bir kelimeye başlarken, kelimenin ilk harfi büyük yazılmalıdır (camel case).

Örnek: benimFonksiyonum(), var benimDegiskenim

Kısaltmalar ( Acronyms)

Eğer bir kısaltma, baş harflerin bir araya gelmesi ile oluşuyorsa (Acronyms) bu kısaltma büyük harflerle yazılır. Bunun dışındaki kısaltmalar, camel case tarzında yazılır, fakat fonksiyon isimlerinden farklı olarak kısaltmaların ilk harfi büyük başlar.

Aşağıda bazı kısaltma örnekleri verilmiştir:

// "Id" ifadesi "Identifier" kelimesinin kısaltmasıdır:
const userId = 1;
  
// "DOM" ifadesi "Document Object Model" ifadesinin kısaltmasıdır:
const currentDOMDocument = window.document;
  
// Yukarıdaki kısaltmalar ile oluşturulan değişken ve sınıflar 
const domDocument = window.document;
class DOMDocument {}
class IdCollection {}

JavaScript Sınıfı (Class) Oluşturma

new ifadesi ile kullanılmak üzere oluşturulan yapılar büyük harf ile başlayan camel case tarzında (UpperCamelCase) adlandırılır. Bu kurala bütün JavaScript sınıfları da dahildir.

class Earth {
    static addHuman( human ) {
        Earth.humans.push( human );
    }
 
    static getHumans() {
        return Earth.humans;
    }
}
  
Earth.humans = [];

Sabitler

JavaScript sabitleri, BEN_BIR_SABITIM (screaming snake case) formatında yazılır.

Yorumlar

Tek satırlık yorumlar şöyledir:

// Ben tek satırlık bir yorumum

// Ben tek satıra sığmayacak kadar uzun bir yorumum ve devamım
// var. Ben tek satıra sığmam

Çok satırlı bir yorum yapacaksanız /** şeklinde başlarsınız:

/** Ben tek satıra sığmayacak kadar uzun bir yorumum ve devamım
* Ben tek satıra sığmayacak kadar uzun bir yorumum ve devamım
*/

Satır içi yorumlar şöyledir:

function foo( types, selector, data, fn, /* SATI İÇİ YORUM */ one ) {
    // Kodlar buraya...
}

Eşitlik

Mümkün olan her durumda, tipi ile birlikte eşitlik ifadesi (===) ikili eşitlik ifadesine (==) tercih edilmelidir.

Tip Kontrolü

Bir JavaScript varlığının tipini kontrol etmek için tercih edilebilecek bir çok yol vardır:

• String: typeof object === 'string'
• Number: typeof object === 'number'
• Boolean: typeof object === 'boolean'
• Object: typeof object === 'object' veya _.isObject( object )
• Plain Object: jQuery.isPlainObject( object )
• Function: _.isFunction( object ) veya jQuery.isFunction( object )
• Array: _.isArray( object ) veya jQuery.isArray( object )
• Element: object.nodeType veya _.isElement( object )
• null: object === null
• null veya undefined: object == null
• undefined:
  • Global Variables: typeof variable === 'undefined'
  • Local Variables: variable === undefined
  • Properties: object.prop === undefined
  • Yukarıdakilerin yerine: _.isUndefined( object )

Backbone ve Underscore kütüphanelerinin kullanılabildiği her yerde, tip kontrolü için jQuery kütüphanesi yerine Underscore.js kullanmanız tavsiye edilir.

String İfadeler

String ifadeleri tek tırnak içinde gösterin.

var myStr = 'strings should be contained in single quotes';

String ifadesinin kendisinde bir tek tırnak varsa, kaçış karakterini (\) kullanalım.

// String ifadelerinde tek tırnaktan kaçış:
var myStr = 'JavaScript\'in ustasıdır Gökalp\'im.';

Switch İfadeleri

Aşağıda örnek bir switch bloğu verilmiştir. Kodlardan ziyade, stiline dikkat edelim:

switch ( event.keyCode ) {
    // ENTER ve SPACE değerleri, x() fonksiyonunu tetikler
    case $.ui.keyCode.ENTER:
    case $.ui.keyCode.SPACE:
        x();
        break;
    case $.ui.keyCode.ESCAPE:
        y();
        break;
    default:
        z();
}

Aşağıda, bir fonksiyon içinde iken switch ifadesinin kullanımını görüyorsunuz:

function getKeyCode( keyCode ) {
    var result;
 
    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;
}

En İyi JavaScript Pratikleri

Aşağıda verilen örnekler, tavsiye edilen kodlama stilleridir.

Diziler

Bir dizi oluşturma:

var myArray = [];

Diziyi oluştururken doldurabiliriz:

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

JavaScript, birleşmiş diziler içermez, birleşmiş diziler object (nesne) olarak oluşturulur.

Nesneler (Objects)

Aşağıda, bir nesne oluşturma, ya da bir nesneden değer getirme stillerine örnekler verilmiştir:

// Boş bir nesne oluşturulur
var myObj = {};
// Bir nesne bir değişkene yüklenir
var myObj = new ConstructorMethod();
// Bir nesneden değerler alınır
prop = object.propertyName;
prop = object[ variableKey ];
prop = object['key-with-hyphens'];

Döngüler

// İyi & Etkili:
var i, max;
 
// getItemCount() gets called once
for ( i = 0, max = getItemCount(); i < max; i++ ) {
    // Kodlar...
}
 
// Kötü & Muhtemelen verimsiz:
// getItemCount() fonksiyonu her defasında çağrılmak zorunda kalır
for ( i = 0; i < getItemCount(); i++ ) {
    // Kodlar...
}

En İyi Underscore.js Fonksiyonları Pratikleri

Underscore.js kütüphanesi bir çok açıdan işimizi kolaylaştırır. Aşağıda bu kütüphaneye ait fonksiyonları kullanırken uyacağımız stile bir örnek verilmiştir.

var obj = {
    first: 'thing 1',
    second: 'thing 2',
    third: 'lox'
};
 
var arr = _.chain( obj )
    .keys()
    .map( function( key ) {
        return key + ' comes ' + obj[ key ];
    } )
    // Zincirden (.chain()) çık
    .value();
 
// Yukarıdaki kodların oluşturduğu "arr" değişkeni şöyle olur:
// arr === [ 'first comes thing 1', 'second comes thing 2', 'third comes lox' ]

En İyi jQuery Pratikleri

Temamıza jQuery Kütüphanesini Ekleme

Temamıza jQuery kütüphanesini eklemek demek, temamızda kullanacağımız herhangi bir benim-dosyam.js dosyasında jQuery kullanmak demektir. Bir JS dosyasını temamıza eklerken, jQuery kütüphanesini kullanabilsin koşulu ile ekleyebiliriz. Bunun için aşağıdaki kodu kullanabiliriz:

functions.php

function tema_scriptleri() {
     wp_enqueue_script( 'slider-icin', get_template_directory_uri() . '/js/benim-dosyam.js', array ( 'jquery' ), 1.0, true);
}
add_action( 'wp_enqueue_scripts', 'tema_scriptleri' );

Yukarıdaki kod, temamızın ana dizininde bulunan js klasörünün içinde oluşturulmuş bemim-dosyam.js dosyasını, jQuery kütüphanesi kullanımına müsait bir şekilde temaya ekler.

WordPress temalarına JS dosyaları eklemek ile ilgili detaylı bilgi için CSS ve JavaScript Dosyaları Ekleme dersimizi okuyabilirsiniz.

jQuery Kodlarında $ İşaretini Kullanma

jQuery kütüphanesinin sembolü olan $ işaretini bir kargaşaya meydan vermeden kullanabilmek için, jQuery kodlarımızı şu şekilde bir çerçeve fonksiyonun içinde yazmalıyız:

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

jQuery Nesnelerini Döngüsü

jQuery ile bir döngü oluşturmak için sadece jQuery nesnelerini kullanabiliriz, JavaScript nesneleri için jQuery döngüleri kuramayız.

Aşağıda bir jQuery döngüsü verilmiştir:

$tabs.each( function( index, element ) {
    var $element = $( element );
 
    // Kodlar burada...
} );

Seçiciler (Selector)

Bir HTML elemanını seçmek için her defasında seçici kullanmak yerine bu elemanı bir değişkene yükleyip ihtiyaç halinde bu değişkeni kullanmak daha doğrudur. Aşağıda, bu duruma ait örnekler verilmiştir:

// Kötü Örnek
$('.post img').addClass('theme-image');
$('.post img').on('click', function() { /* ... */ });

// İyi Örnek
var $postImage = $('.post img');
$postImage.addClass('theme-image');
$postImage.on('click', function() { /* ... */ });

Hareket Yakalama (Event Handling)

Bir fare tıklamasını yakalamak için şu kodu kullanmak doğru değildir:

// Kötü Örnek
$('a').click( logClick );

Onun yerine, tarayıcınızı daha az yoran şu kodu kullanmamız tavsiye edilir:

// İyi Örnek
$(document).on('click', 'a', logClick);