ES2015 için WordPress Geliştirici Kılavuzu (ES6)

WordPress geliştirici topluluğu, şu anda özellikle WordPress çekirdeğinde hangi JavaScript çerçevesinin kullanılacağı konusunda JavaScript konuşmasıyla meşgul. Hangi çerçevenin seçildiğine bakılmaksızın, WordPress'in UI geliştirmeye yönelik daha modern bir JavaScript merkezli yaklaşıma doğru ilerlediği açıktır. Özelleştirici, Calypso ve Gutenberg, bu tür UI geliştirmelerinin örnekleridir.

Hatırlarsanız, 2015'te Matt “JavaScript'i derinlemesine öğrenin” demişti, ama dürüst olmak gerekirse, ben pek dikkate almadım. Ancak son zamanlarda JavaScript bilgimi tazelemek için ortak bir çaba göstermeye karar verdim. Bu yazıda JavaScript'inize şıklık katacak ES2015'in en sevdiğim kısımlarını paylaşmak istiyorum.

ES2015 nedir? ES6 Hakkında?

Yakın zamana kadar ES2015'in tam olarak ne olduğunu tam olarak anlamadığımı itiraf etmeliyim. JavaScript'in 'daha yeni' bir sürümü olduğunu biliyordum, ancak ES6 ve Harmony'ye referanslar da görmüştüm. Hepsinin farklı sürümler olduğunu varsaydım, ancak hepsi aslında JavaScript'in 2015 sürümünün takma adları. Orijinal isim Harmony idi ve bundan sonra ES6 (çünkü bu ECMAScript'in altıncı büyük versiyonu). O zamandan beri ECMA International tarafından ES2015 olarak yeniden adlandırıldı. JavaScript'in gelecekteki sürümleri, adlarında yılı kullanacak.

Bu arada, işte ES2015'in en sevdiğim bölümleri:

• Geliştirilmiş Nesneler
• sınıflar
• Modüller
• Ok Fonksiyonları
• vaatler
• Şablon Dizeleri
• Varsayılan Parametreler

Geliştirilmiş Nesneler

Nesnelerin ES2015'te bazı harika eklemeleri var:

Yöntem Steno

Değerin anonim bir işlev olduğu bir anahtar değer çifti kullanarak nesne yöntemlerini bildirmeye alışmış olabilirsiniz:

 var utils = { increment: function( count ) { return count + 1; } };

Artık function anahtar sözcüğünü tamamen atlayabilirsiniz:

 var utils = { increment( count ) { return count + 1; } };

Çok daha temiz!

Şeklini bozma

Bir işlev veya yöntem bir nesneyi döndürdüğünde, her zaman tüm nesne değerlerine ihtiyacınız olmaz. Sunucunun döndürmüş olabileceği herhangi bir veriye ek olarak istek hakkında bilgi veren bir AJAX isteği düşünün:

 var response = { data: {}, headers: {}, responseCode: 200, };

Elbette, nokta gösterimini kullanarak özelliklere erişebilirsiniz:

 var data = response.data; var responseCode = response.responseCode; console.log( data, responseCode ); // {}, 200

Ancak, nesne yok etme ile her değeri bir değişkene manuel olarak atamanız gerekmez:

 var { data, responseCode } = response; console.log( data, responseCode ); // {}, 200

Gereksinim duyduğunuz değerleri önceden açabileceğiniz için bu, işlevlerinizi veya yöntemlerinizi basitleştirebilir:

 function handleResponse( { data, responseCode } ) { console.log( data, responseCode ); }

Onun yerine:

 function handleResponse( response ) { console.log( response.data, response.responseCode ); }

sınıflar

JavaScript'te sınıflar her zaman biraz hantal olmuştur. Ayrıca, özellikle PHP sınıflarına alışmış yeni başlayan kullanıcılar için kavraması zor olabilir. Bunun nedeni, JavaScript'teki sınıf yöntemlerinin nesnenin prototipine eklenmesidir. Basit bir Form sınıfı alalım:

 // form.js function Form( inputs ) { this.inputs = inputs; } // constructor Form.prototype.submit = function( url ) { // Ajax post to server } // submit() method

ES2015 sınıfları daha çok PHP sınıflarına benzer:

 class Form { constructor( inputs ) { this.input = inputs; } submit() { // Ajax post to server } }

Statik yöntemler de tanımlayabilirsiniz. Yani yerine:

 Form.inputHelper = function() { // Static method }

Yapabilirsin:

 class Form { constructor( inputs ) { this.input = inputs; } submit() { // Ajax post to server } static inputHelper() { // Static method } }

Sınıflar genişletilebilir ve super anahtar sözcüğünü kullanarak bir ebeveynin yöntemlerine erişebilirsiniz:

 class OrderForm extends Form { submit() { super.submit(); // Do something after ajax post to server } }

Bunun sadece sözdizimsel şeker olduğunu belirtmekte fayda var. Prototip tabanlı yaklaşım, kaputun altında hala kullanılmaktadır. Sonuç aynı olsa da ES2015 sınıflarını çok daha okunaklı buluyorum.

Modüller

Projeler daha karmaşık hale geldikçe, JavaScript'inizi birden çok dosyaya bölmek genellikle gerekli hale gelir. Form sınıfına bir bağımlılık ekleyerek önceki örneği genişletelim. Errors sınıfı ayrı bir dosyada saklanacaktır:

 // form.js class Form { constructor( inputs ) { this.inputs = inputs; this.errors = new Errors(); } }; // errors.js class Errors {};

Genellikle, bunu yaparken komut dosyalarını sayfa kaynağınıza manuel olarak eklersiniz. Ancak, dosyaların hangi sırayla yüklendiğine dikkat etmeniz gerekir:

 <script src="errors.js"></script> <script src="form.js"></script>

Modülleri kullanarak sınıflarınızı dışa aktarabilir ve gerektiğinde içe aktarabilirsiniz.

 // form.js export default class Form { constructor( inputs ) { this.inputs = inputs; this.errors = new Errors(); } }; // errors.js export default class Errors {};

Modüller birden çok adlandırılmış üyeyi dışa aktarabilir ancak bu örnekte tek bir öğeyi dışa aktarıyorum. default anahtar sözcük, modülün adlandırılmış bir üyesini özellikle istemediğinizde neyin dışa aktarılacağını belirtmek için kullanılır. form.js Errors sınıfını şu şekilde içe aktarabilirsiniz:

 // form.js import Errors from './errors.js'; export default class Form { constructor( inputs ) { this.inputs = inputs; this.errors = new Errors(); } };

Artık yalnızca form.js dosyasını sayfa kaynağınıza eklemeniz gerekiyor:

 <script src="form.js"></script>

JavaScript'te küçük yeniden kullanılabilir bileşenler yazmak yeni bir şey değil, ancak daha önce AMD, CommonJS veya UMD gibi bir modül yükleyici gerekliydi ve bunların hepsinin farklı sözdizimleri vardı. Neyse ki ES2015 modülleri, modül yüklemeye standart bir yaklaşım getiriyor.

Ne yazık ki, ES2015 modülleri söz konusu olduğunda bir 'yakalama' var. Şu anda hiçbir tarayıcı içe veya dışa aktarma özelliklerini desteklemediğinden rollup.js, webpack veya Babel gibi bir modül paketleyici kullanmanız gerekir. Gelecekte tarayıcılar gerekli tüm bağımlılıkları otomatik olarak içe aktaracaktır.

Ok Fonksiyonları

Ok işlevleri, ES2015'e en sevdiğim eklentidir. Üç ana avantajı vardır:

Kısa Sözdizimi

Ok işlevi, normal bir işlevden daha kısa bir sözdizimine sahiptir. İşleyiciye bir kapatma ilettiğimiz tipik bir olay işleyicisini ele alalım:

 $( item ).on( 'click', function( event ) { console.log( 'Clicked!' ); } );

Ok işlevleriyle, aşağıdaki gibi daha kısa bir sürüm yazabilirsiniz:

 $( item ).on( 'click', event => { console.log( 'Clicked!' ); } );

function anahtar sözcüğünün nasıl kaldırıldığına dikkat edin. Ve kapatma herhangi bir parametre gerektirmediğinden, bunu daha da basitleştirebilirsiniz:

 $( item ).on( 'click', () => { console.log( 'Clicked!' ); } );

Geri aramanız birden fazla parametre gerektiriyorsa, bunları parantez içine almanız yeterlidir:

 $( item ).on( 'click', (event, someData, moreData) => { console.log( 'Clicked!' ); } );

Kapatma yalnızca tek bir mantık satırı içerdiğinde küme parantezlerini tamamen atlamak da mümkündür:

 $( item ).on( 'click', () => console.log( 'Clicked!' ) );

this Bağlanması Yok

Düzenli işlevler kendi this değerini tanımlar. Bu, örneğin bir kapatma içinden, ana bağlamdan this erişmeye çalıştığınızda sorunludur. this bir referans kaydetmek yaygın bir uygulamaydı:

 var customComponent = { clickListener: function( item ) { var self = this; $( item ).on( 'click', function( event ) { self.handleClickEvent( event ); } ); }, handleClickEvent: function( event ) { console.log( 'Item Clicked!' ); } }; customComponent.clickListener( 'body' );

this yaklaşım, ebeveynin bağlamını devraldığı için ok işlevlerini kullanırken artık gerekli değildir.

 var customComponent = { clickListener: function( item ) { $( item ).on( 'click', ( event ) => this.handleClickEvent( event ) ); }, handleClickEvent: function( event ) { console.log( 'Item Clicked!' ); } }; customComponent.clickListener( 'body' );

örtük dönüşler

Örtülü dönüşler, return anahtar sözcüğünü atlamanıza izin vererek kısa söz dizimini bir adım daha ileri götürür. Bu, tipik olarak bir kapatma içinde, tek satırlık işlevler yazarken kullanışlıdır. Bir dizi kullanıcınız varsa ve yaşlarını döndürmek istiyorsanız, dizi üzerinde eşleyebilirsiniz:

 var users = [ { name: 'John Doe', age: 32, }, { name: 'Jane Doe', age: 31, } ]; users.map( function( user ) { return user.age; } ); // [32, 31]

Kısa sözdizimini ve örtük dönüşü kullanarak bunu şöyle yeniden yazabilirsiniz:

 users.map( user => user.age ); // [32, 31]

Ok işlevleri ilk bakışta biraz gizemli görünebilir, ancak yeni sözdizimine alıştığınızda, kısa sürede zarafetlerini takdir edeceksiniz. Ancak, delirmeden ve tüm normal işlevleri ok işlevleriyle değiştirmeden önce, normal işlevlerin hala yerlerinin olduğunu unutmayın. Örneğin, bir öğenin görüntüsünü değiştirmek için basit bir tıklama işleyici oluşturuyorsanız, this yine de tıklanan öğeye bağlanmasını istersiniz:

 $( item ).on( 'click', function() { this.toggle(); } );

Wes Bos'un Ok İşlevi Ne Zaman Kullanılmaması gerektiği, ok işlevlerinin uygun olmadığı durumlar için iyi bir referanstır.

vaatler

Sözler, dönüş değerini hemen bilemeyebileceğiniz eşzamansız görevler için kullanılır. Bunun iyi bir örneği, bir AJAX isteği gönderdiğinizde ancak sunucudan bir yanıt beklemeniz gerektiğidir. Ayrıca, istek başarılı olabilir veya başarısız olabilir. Bir söz, bu olayların ne zaman meydana gelebileceğine bakılmaksızın her iki senaryoyu da yönetmenize olanak tanır. Bir sözü düşünmenin basit bir yolu:

Bu eylemi gerçekleştirmek istiyorum ve tamamlandığında bunu yapın veya başarısız olduğunda bunu yapın.

Aşağıdaki delayedTask() işlevi, bir AJAX isteğini simüle eder. 1 saniye sonra, çözülmüş veya reddedilmiş bir Sözü rastgele döndürür. Çözülen bir söz, başarıyla tamamlanan bir sözdür, reddedilen bir söz ise başarısız olandır. AJAX istekleriyle uğraşırken, sunucudan gelen 200 yanıt kodu dışında herhangi bir şey genellikle reddedilir:

 function delayedTask() { return new Promise( ( resolve, reject ) => { setTimeout( () => { var rand = Math.floor( Math.random() * 3 ) + 1; // Random number between 1 - 3 return rand === 2 ? reject() : resolve(); }, 1000 ); } ); }

Daha sonra, then ve catch yöntemlerini kullanarak sözün sonucunu işleyebilirsiniz:

 delayedTask() // I want to perform this task .then(() => alert( 'Look mom, I succeeded!' ) ) // when it completes do this .catch(() => alert( 'Boooo! I failed!' ) ); // on failure do this

Şablon Dizeleri

Programlamada, çeşitli verilerle iç içe geçmiş bir dize oluşturma zorunluluğu yaygındır. PHP'de, bir değişkeni doğrudan çift tırnaklı bir dizgeye bırakabilirsiniz:

 $output = "User {$user->name} is {$user->age} years old.";

Ancak bu, ES2015'ten önce mümkün değildi. Ya dize bitiştirme ya da gidon gibi bir üçüncü taraf yardımcı kitaplık kullanmanız gerekiyordu:

 var output = 'User ' + user.name + ' is ' + user.age + ' years old.'

Şablon dizeleri (veya şablon değişmezleri), kodun okunabilirliğini büyük ölçüde artırır ve dizelerden hatalı şekilde kaçma riskini azaltır. Bir şablon dizgisi oluşturmak için dizginizi geri tepmeler içine almanız yeterlidir. Değişkenlerin başına dolar işareti konulmalı ve kaşlı ayraçlar içine alınmalıdır:

 var output = `User ${user.name} is ${user.age} years old.`;

ES2015'ten önce dize birleştirme gerektiren çok satırlı dizeler için şablon dizeleri de kullanabilirsiniz.

 console.log( `Line of text. Another line of text.` );

Şablon değişmezleri harika bir ektir!

Varsayılan Parametreler

Varsayılan parametreler sonunda JavaScript'e ulaştı! Girişlerinden önce, değeri manuel olarak kontrol etmeniz gerekir:

 function incrementCount(count) { count = count || 0; return count + 1; }

Artık PHP'de yaptığınız gibi varsayılan değeri önceden belirtebilirsiniz:

 function incrementCount(count = 0) { return count + 1; }

Bir işlevi varsayılan parametre olarak bile iletebilirsiniz. Değeri dinamik olarak belirlemeniz gerekiyorsa bu kullanışlıdır. Bu örnekte, kullanıcı /feelinglucky sayfasında olmadığı sürece varsayılan 0 döndürülür:

 function getDefaultValue() { if ( window.location.pathname === 'feelinglucky' ) { return Math.floor( Math.random() * 100 ); } return 0; } function incrementCount( count = getDefaultValue() ) { return count + 1; }

Oldukça havalı, değil mi?

Tarayıcı Desteği

Modüller dışında bu makalede ele alınan her şey, tüm büyük tarayıcıların mevcut sürümlerinde desteklenmektedir. Peki ya eski tarayıcılar? Neyse ki Babel, modern JavaScript'i tarayıcı uyumlu JavaScript'te derlemek için kullanılabilir. Babel'in Internet Explorer 10 ve altıyla ilgili birkaç uyarısı var, ancak bu artık WordPress 4.8'in bu tarayıcılar için desteği bırakmasıyla ilgili bir sorun olmamalıdır. ES2015'i bugün kullanmamanız için gerçekten hiçbir neden yok!

Çözüm

ES2015'teki yeni özellikler sadece kodunuzu basitleştirmekle kalmayacak, aynı zamanda onu daha özlü ve okunabilir hale getirecek. Daha fazlasını öğrenmek isterseniz, Laracasts'taki ücretsiz 17 videolu ES2015 Crash Course'a göz atın. (hayır, bunu söylemek için para almadık)

Geçmişte, sadece JavaScript yazma düşüncesi bile jQuery spagetti kabuslarına yol açardı! Ancak ES2015 ve Vue.js ve React gibi çerçeveler bunu değiştirdi.

Bu günlerde çoğunlukla PHP yerine JavaScript yazmayı tercih ediyorum, ancak belki de bunun nedeni WordPress ekosisteminde hala PHP 5.2'yi beslemek zorunda olmamızdır. JavaScript yazmaktan hoşlanıyor musunuz? ES2015'te en sevdiğiniz eklenti hangisi? Aşağıdaki yorumlarda bize bildirin.