Gutenberg'de Geliştirmek İçin Bilmeniz Gereken 5 JavaScript Özelliği

2016'da Matt Mullenweg bize şunları söyledi:

Sana biraz ev ödevi vereceğim: JavaScript'i derinlemesine öğren (…) çünkü bu web'in geleceği.

Matt Mullenweg (YouTube'da)

Üç yıl önce tavsiyesine uydun mu bilmiyorum ama yapmadıysan artık erteleyemezsin. Blok düzenleyicinin resmi sürümü, birçok geliştiriciyi JavaScript ile hızlanmaya zorladı. Dil, WordPress içinde giderek daha alakalı hale geliyor ve geride kalmak istemiyorsak, onunla becerilerimizi geliştirmemiz gerekiyor.

Geçmişte, jQuery gibi kütüphaneler olmadan Vanilla JavaScript kullanarak neler başarabileceğiniz hakkında bir yazı yazmıştım. Bugün bir adım daha ileri gitmek ve JavaScript'in yeni sürümlerinde bulunan ve onları ilk gördüğünüzde şoke eden bazı yenilikleri açıklamak istiyorum. Bunları bilmenizin önemli olduğunu düşünüyorum, çünkü tüm yeni JavaScript projelerinde bulunurlar (elbette Gutenberg dahil).

JavaScript'i Gutenberg ile öğrenelim!

#1 – Nesneleri ve Dizileri İmha Etme

Diyelim ki Gutenberg'de bir paragraf düzenleme arayüzünün nasıl çalıştığını görmek istiyoruz. Gutenberg ile ilgili önceki yazılarımızı okuduysanız, ilgili bloğun edit bileşenine bakmamız gerektiğini biliyorsunuz. Bizim durumumuzda, bu bileşen ParagraphBlock ve oluşturma yönteminde, satır 127'de bulacağımız ilk şey şudur:

Tüm bunlar ne? Pekala, daha kolay bir şeyle başlayalım. Aşağıdaki gibi bir nesneniz olduğunu hayal edin:

Nesneleri ve dizileri yok etmek, dizilerdeki değerleri veya nesnelerden gelen özellikleri farklı değişkenlere ayırmayı mümkün kılar:

Tek bir açıklama ile post id , title ve content kurtarabildik. Ve Gutenberg'in ilk snippet'imizde tam olarak yaptığı şey buydu: this.props öğesinin attributes nesnesini, setAttributes işlevini, isRTL özniteliğini vb. çektik.

Biraz daha kafa karıştırıcı, ancak aynı derecede ilginç olan, iç içe nesnelerden öznitelikleri çıkarma olasılığıdır. Yani, şöyle bir nesneden başlayarak:

id veya name in author gibi iç içe geçmiş bir nesnedeki değerlerin yanı sıra post değerleri de alabiliriz:

Şimdi dikkat edin: bir nesneyi her yok ettiğimizde, yarattığımız değişkenler, çektiğimiz niteliklerle aynı adlara sahiptir. Bu şu soruyu akla getiriyor: Farklı iç içe nesnelerden birden çok id özniteliğini kurtarmak istersek ne olur? Örneğin, bizim durumumuzda hem post hem de iç içe nesne author bir kimliği vardır, yani…

Bu iki değeri çıkarabilir miyiz? Çözüm takma adlarda yatıyor:

Yani, çekmek istediğimiz özniteliği (örneğin, author.id ) ve değerini tutacak değişkenin adını ( authorId ) bir kerede belirtebiliriz.

Son olarak, yok etmenin dizilerle de çalıştığını söyleyeyim:

yanı sıra fonksiyon parametreleri. Yani, fonksiyonumuzdaki parametrelerden biri bir nesne ise, onu fonksiyon tanımının kendisinde yok edebiliriz:

Oldukça kullanışlı, ha?

#2 – Ok İşlevleri

Oldukça yaygın bir başka örnek. Gutenberg görüntü bloklarının altyazılarına bakarsanız, 693. satırda aşağıdakileri görürsünüz:

Parantez içindeki value nedir? Neden bir ok var? İçinde küme parantezleri olan setAttributes hakkında ne var? Ahh!!

Pekala, adım adım bu şifreyi çözelim. => gibi bir ok gördüğünüzde, sadece bir ok işleviyle tanıştınız. Bir ok işlevi, klasik işlevlere son derece benzer olabilir, ancak biraz farklı bir sözdizimi kullanırlar:

Ok işlevlerinin ana avantajı, kodu daha da kompakt hale getirerek daha da basitleştirilebilmesidir. Örneğin, işlevinizin tek bir talimatı varsa, işlev tek ifadesini değerlendirmenin sonucunu otomatik olarak döndüreceğinden, küme parantezlerini ve return anahtar sözcüğünü kaydedebilirsiniz:

Yapabileceğimiz bir diğer sadeleştirme, argüman listesindeki parantezlerdir. Tek parametreli bir fonksiyon yazıyorsak, parantezler isteğe bağlı hale gelir:

#3 – Yayma ve Dinlendirme Operatörleri

Paragraf bloğuna geri dönersek, satır 64'e bir göz atın:

Ne halt?

Pekala, sizi spread operatörüyle tanıştırayım: ... .

Yayılmış sözdizimi, sıfır veya daha fazla bağımsız değişkenin (işlev çağrıları için) veya öğelerin (dizi değişmez değerleri için) beklendiği yerlerde bir dizi ifadesi veya dize gibi yinelenebilir bir öğenin genişletilmesine veya sıfır veya daha fazla olduğu yerlerde bir nesne ifadesinin genişletilmesine olanak tanır. anahtar/değer çiftleri (nesne değişmezleri için) bekleniyor.

En basit örnekle başlayalım. Belirli sayıda elemana sahip bir dizimiz olduğunu ve onu başka bir dizinin içine koymak istediğimizi varsayalım. Bunu şununla başarabiliriz:

Bununla, bir dizinin ( list ) öğelerini diğerinin ( result ) içinde "genişletiyoruz" (dolayısıyla operatörün adı).

Bu aynı zamanda nesnelerle de çalışır:

Şimdi aşağıdaki örneğe bakın (bu, bu bölümü açtığımız Gutenberg örneğinin bir kopyasıdır):

Ortak özelliklere sahip iki nesneyi genişletiyorsam, ortaya çıkan nesne her iki nesnenin özelliklerinin birleşimini içerecek ve her "yinelenen" özellik için sağdaki nesnenin değerini içerecektir. Bu nedenle, örneğin, her iki nesnede de tekrarlanan title niteliği, newAttributes nesnesinin değerini içerirken, diğer nitelikler (bir yandan author ve diğer yandan words ) sonuçta içerebilecekleri yalnızca değerlerle görünür. .

#4 – Şablon Değişmezleri

Şablon değişmezleri Gutenberg'de yaygın olarak kullanılmaktadır. Aşağıdaki index.js , satır 133'te bir örnek görebilirsiniz:

Veya daha da karmaşık, satır içi 136:

Şablon değişmezleri, gömülü ifadelere izin veren dize değişmezleridir. Onlarla çok satırlı dizeleri ve dize enterpolasyon özelliklerini kullanabilirsiniz. ES2015 belirtiminin önceki sürümlerinde bunlara "şablon dizeleri" deniyordu. Burada ilk gördüğümüze benzer başka bir örneğiniz var:

Şimdi, ikinci örnekte neler oluyordu? Temel olarak, "adları" dinamik olan özelliklere sahip bir nesne oluşturuyoruz (bazıları bir değişken kullanır, diğerleri şablon değişmezlerini kullanır). Bunu daha kısa bir örnekle görelim:

Beklediğinden daha kolay, değil mi?

#5 – Bir süreliğine hoşçakalın

Son olarak, dizilerle çalışmak için çok faydalı olan ve zaten aşina olmanız gereken birkaç fonksiyonla bu yazıyı bitirmek istiyorum. Her ikisi de örneğin Gutenberg sütunları bloğunda bulunabilir. Gerçekten de map (satır 136) ve reduce (satır 119) bahsediyorum. Her birinin ne işe yaradığını ve bunları nasıl kullanabileceğinizi görelim.

map yöntemi, çağıran dizideki her öğe üzerinde sağlanan bir işlevi çağırmanın sonuçlarıyla yeni bir dizi oluşturur:

Temel olarak, bir dizinin tüm öğelerinden geçen (bu for ifadesidir) ve her öğeye bir işlev uygulayan (klasik for öğesinin "gövdesi") bir yöntemdir.

reduce yöntemi map öğesine çok benzer, ancak öğeleri orijinal öğelere bir işlev uygulamanın sonucu olan bir dizi döndürmek yerine tek bir değer döndürür. Yani, bir akümülatöre ve bir dizinin her bir değerine (soldan sağa) bir fonksiyon uygulamanıza izin vererek onu tek bir değere indirgemenize izin veren bir yöntemdir. Örneğin:

Toplama

Gördüğünüz gibi, JavaScript'in yeni sürümleri, daha verimli ve rahat kod yazmaya izin veren yapılar ekler, ancak sözdizimi ilk başta kafa karıştırıcı olabilir. Umarım bugünkü gönderi, JavaScript'teki yenilikleri ve yeni yapılarını ve işlevlerini nasıl kullanacağınızı anlamanıza yardımcı olmuştur.

JavaScript'in gelişme şeklini gerçekten seviyorum, çünkü daha iyi ve daha okunabilir kod yazmanıza olanak tanıdığını düşünüyorum (bir kez nasıl okuyacağınızı öğrendikten sonra tabii ki). Ne düşünüyorsun? Bu gönderiyi okuduktan sonra, "JavaScript'i derinlemesine öğrenmeye" hazır mısınız?

Unsplash'ta Ross Findon tarafından öne çıkan görsel .