ES2015 için WordPress Geliştirici Kılavuzu (ES6)
Mevcut WordPress geliştirici topluluğu, JavaScript hakkındaki görüşmelerden, özellikle WordPress’in özünde hangi JavaScript çerçevesinin kullanılacağı hakkında şok oluyor. Çerçevenin seçildiği dışında, WordPress’in kullanıcı arayüzü gelişimi için daha modern bir JavaScript merkezli yaklaşımı teşvik ettiği açıktır. Özelleştirici, Calypso ve Gutenberg, UI’nin gelişimine örnektir. Hatırlarsanız, 2015’te Matt “JavaScript’i derinlemesine öğrenin” dedi, ancak dürüst olmak gerekirse, gerçekten dikkat etmiyorum. Ancak, son zamanlarda JavaScript bilgimi cilalamak için ortak çaba göstermeye karar verdim. Bu makalede, JavaScript’inize zarif bir dokunuş katacak olan ES2015’in en sevdiğim bölümünü paylaşmak istiyorum.
ES2015 nedir? ES6’ya ne dersin? Şimdiye kadar ES2015’in ne olduğunu tam olarak anlamadığımı itiraf etmeliyim. Bunun ‘daha yeni’ bir JavaScript sürümü olduğunu biliyorum, ama aynı zamanda ES6 ve Harmony’ye referanslar görüyorum. Bence hepsi farklı sürümler, ama hepsi aslında JavaScript’in 2015 sürümü için takma adlar. Harmony gerçek adı ve bundan sonra ES6 (çünkü bu ECMAScript’in altıncı ana sürümüdür). O zamandan beri isim ECMA International tarafından ES2015 olarak değiştirildi. Yaklaşan JavaScript sürümü yılı adına kullanacak.
Bununla, bu ES2015’in en sevdiğim kısmı:
Yükseltilmiş bir nesne
Sınıf
Modül
Ok işlevi
söz vermek
Şablon dizesi
Varsayılan parametre
Geliştirilmiş nesneler olan nesneler ES2015’te bazı harika eklere sahiptir: Kısaltma yönteminiz, bir çift anahtar değer kullanarak nesne yöntemini bildirmeye alışabilir, burada değer anonim bir işlevdir: var utils = {artış: function (count) {return sayım + 1; }}; Artık anahtar kelime işlevini tamamen ortadan kaldırabilirsiniz: var utils = {artış (count) {dönüş sayımı + 1; }}; Çok daha temiz! Yıkma Nesneleri geri yükleme işlevi veya yöntemi olduğunda, her zaman tüm nesne değerlerine ihtiyacınız yoktur. Sunucu tarafından döndürülebilecek herhangi bir veri dışındaki istekler hakkında bilgi döndüren AJAX isteğini düşünün: var Response = {data: {}, başlıklar: {}, yanıt kodu: 200,}; Tabii ki özellik gösterimini kullanarak özelliğe erişebilirsiniz: var data = rep Respon.Data; Var sorseecode = Response.Responsecode; console.log (veri, yanıt); // {}, 200 Bununla birlikte, nesnenin yok edilmesiyle, her değeri manuel olarak ayarlamanız gerekmez: var {data, yanıt} = yanıt; console.log (veri, yanıt); // {}, 200 işlevlerinizi veya yöntemlerinizi basitleştirebilir, çünkü başlangıçta ihtiyacınız olan değeri sökebilirsiniz: Function HandlerSesponse ({data, yanıt}) {console.log (data, yanıt); } Hariç:
İşlev HandLeresponse (yanıt) {console.log (Response.Data, Response.ResponseCode); } Sınıflar JavaScript’te her zaman oldukça karmaşıktır. Özellikle PHP sınıfına alışkın olan acemi kullanıcılar için de anlaşılması zor olabilir. Bunun nedeni, JavaScript’teki sınıf yönteminin nesnenin prototipine bağlı olmasıdır. Basit bir form sınıfı alalım: // form.js işlev formu (girişler) {this.inputs = girişler; } // yapıcı formu.pototype.submit = function (url) {// ajax sunucuya gönder} // gönder () ES2015 sınıf yöntemi php sınıfına daha benzer: sınıf formu {constructor (girişler) {this.input = girişler ; } Stick () {// ajax gönderisini sunucuya}} statik yöntemi de belirleyebilirsiniz. Yani: form. İnputhelper = function () {// statik yöntem} yapabilirsiniz: sınıf formu {yapıcı (girişler) {this.input = girişler; } stick () {// ajax post to Server’a} static inputhelper () {// statik yöntem}} sınıf genişletilebilir ve Süper Anahtar Kelime: Class Sipariş formu kullanılarak üst düzey yönteme erişebilirsiniz Form {Supon () {Super.submit ()); // Ajax Post’tan sonra sunucuya bir şeyler yapın}} Bunun sadece sözdizimsel şeker olduğu belirtilmelidir. Prototip tabanlı yaklaşım hala bir çadırın altında kullanılmaktadır. Sonuçlar aynı olsa da, ES2015 sınıfının okunmasının çok daha kolay olduğunu buldum. Modül Proje daha karmaşık hale geldiğinden, JavaScript’inizi birkaç dosyaya bölmek için genellikle gerekli hale gelir. Form sınıfına bağımlılıklar ekleyerek önceki örneği geliştirelim. Hatalar sınıfı ayrı dosyalarda saklanır:
// form.js sınıf formu {yapıcı (girişler) {this.inputs = girişler;this.errors = yeni hatalar ();}};// errors.js sınıf hataları {};Genellikle, bunu yaparken, komut dosyasını sayfa kaynağınıza manuel olarak gireceksiniz.Ancak, yüklenen dosya dizisi konusunda dikkatli olmalısınız:
JavaScript’te yeniden kullanılabilecek küçük bileşenler yazmak yeni değil, ancak AMD gibi gerekli modül yüklemesinden önce, Commonjs veya umd-her şey farklı sözdizimi vardır. Neyse ki, ES2015 modülü modülün yüklenmesi için standart bir yaklaşım getirdi. Ne yazık ki, ES2015 modülü söz konusu olduğunda ‘gotcha’ var. Şu anda içe aktarma veya dışa aktarma özelliklerini destekleyen hiçbir tarayıcı olmadığından, Rollup.js, Webpack veya Babel gibi bir Bundler modülü kullanmanız gerekir. Gelecekte, tarayıcı gereken tüm bağımlılıkları otomatik olarak aktaracaktır. Ok işlevinin ok işlevi ES2015’e en sevdiğim ektir. Üç ana avantajı vardır: Ok işlevinin özlü bir sözdizimi, normal işlevden daha kısa bir sözdizimine sahiptir. İşleyiciye kapatmaya devam ettiğimiz sıradan bir işleyici etkinliği ele alalım: $ (öğe) .on (‘Click’, Function (Event) {Console.log (‘Tıklandı!’);}); Ok işlevi ile: $ (öğe) .on (‘Click’, Event => {Console.log (‘Clicked!’);}) Gibi daha özlü bir sürüm yazabilirsiniz; Anahtar kelime işlevinin nasıl silindiğine dikkat edin. Kapanış herhangi bir parametre gerektirmediğinden, bunu daha da basitleştirebilirsiniz:
$ (öğe) .on (‘tıklayın’, () => {console.log (‘tıklandı!’);}); İade aramanız birkaç parametreye ihtiyacınız varsa, sadece paranteze sarıyorsunuz:
$ (öğe) .on (‘tıklayın’, (olay, someda, maredata) => {console.log (‘tıklandı!’);});Yalnızca bir mantık satırı içerdiğinde kurawal braketlerini tamamen ortadan kaldırabilirsiniz: $ (öğe) .on (‘tıklayın’, () => console.log (‘tıklatıldı!’));Kendi değerini tanımlayan bu normal işlevin bağlayıcısı yoktur.Bu, ana bağlamdan, örneğin kapanıştan erişmeye çalıştığınızda sorunludur.Bu, referansları depolamak için genel bir uygulamadır:
var customponent = {clickListener: function (öğe) {var self = this; $ (öğe) .on (‘tıklayın’, function (olay) {self.handlecliccent (olay);}); }, handleclicKeVent: function (olay) {console.log (‘öğe tıklandı!’); }}; CustomComponent.ClickListener (‘Body’); Bu yaklaşıma ok işlevini kullanırken artık gerekli değildir, çünkü bu ana bağlamı devralır. var customponent = {clickListener: function (öğe) {$ (öğe) .on (‘click’, (event) => this.handlecliccent (olay)); }, handleclicKeVent: function (olay) {console.log (‘öğe tıklandı!’); }}; CustomComponent.ClickListener (‘Body’); Örtük dönüş örtük dönüşü, anahtar kelime dönüşünü ortadan kaldırmanıza izin vererek bir adım daha ileri bir öz bir sözdizimi alır. Bu, genellikle kapanışta bir ilçe işlevi yazarken kullanışlıdır. Bir kullanıcı diziniz varsa ve yaşlarını geri yüklemek istiyorsanız, Array: var kullanıcılar = [{name: ‘John Doe’, Yaş: 32,}, {Name: ‘Jane Doe’, Yaş: 31,} ]; users.map (function (user) {return user.age;}); // [32, 31] Kısa bir sözdizimi ve örtük dönüş kullanarak bunu yeniden yazabilirsiniz: kullanıcılar.map (user => user.age);
// [32, 31] Okun işlevi ilk bakışta oldukça belirsiz görünebilir, ancak yeni bir sözdizimine alıştıktan sonra, zarafetini hemen takdir edeceksiniz. Ancak, delirmeden ve tüm normal işlevleri ok işlevleriyle değiştirmeden önce, normal işlevlerin hala bir yeri olduğunu unutmayın. Örneğin, öğenin görünümünü etkinleştirmek için basit bir tıklama yaparsanız, yine de tıklanan öğeye bağlı olmasını istersiniz: $ (öğe) .on (‘click’, function () {this.toggle (); }); WES BOS tarafından ok işlevini kullanmamak, ok işlevi uygun olmadığında iyi bir referanstır. Promise Promise, iade değerini hemen bilemeyeceğiniz eşzamansız atamalar için kullanılır. İyi örnek, Ajax istekleri gönderdiğinizde ancak sunucudan yanıtları beklemeniz gerektiğinde. Ardından, talep başarılı olabilir veya başarısız olabilir. Bir söz, bu olayın ne zaman gerçekleşebileceğine bakılmaksızın iki senaryoyu ele almanıza izin verir. Bir sözü düşünmenin basit yolu: Bu eylemi yapmak ve bunu yapmayı bitirdiğimde ya da bunu yapamazsa. Aşağıdaki gecikme işlevi AJAX isteklerini simüle eder. 1 saniye sonra rastgele tamamlanan veya reddedilen sözü iade edecektir. Çözülen vaat başarılı bir vaatti, reddedilen vaad başarısız bir vaatti. Ajax ile uğraşırken, sunucudan 200 yanıt kodunun yanı sıra herhangi bir istek genellikle reddedilecektir: Fonksiyon DecnedTask () {Return Yeni Promise ((çözüm, reddet) => {setTimeout (() => {var Rand = Math.Floor ( matematik .Random () * 3) + 1;
ES2015 nedir? ES6’ya ne dersin? Şimdiye kadar ES2015’in ne olduğunu tam olarak anlamadığımı itiraf etmeliyim. Bunun ‘daha yeni’ bir JavaScript sürümü olduğunu biliyorum, ama aynı zamanda ES6 ve Harmony’ye referanslar görüyorum. Bence hepsi farklı sürümler, ama hepsi aslında JavaScript’in 2015 sürümü için takma adlar. Harmony gerçek adı ve bundan sonra ES6 (çünkü bu ECMAScript’in altıncı ana sürümüdür). O zamandan beri isim ECMA International tarafından ES2015 olarak değiştirildi. Yaklaşan JavaScript sürümü yılı adına kullanacak.
Bununla, bu ES2015’in en sevdiğim kısmı:
Yükseltilmiş bir nesne
Sınıf
Modül
Ok işlevi
söz vermek
Şablon dizesi
Varsayılan parametre
Geliştirilmiş nesneler olan nesneler ES2015’te bazı harika eklere sahiptir: Kısaltma yönteminiz, bir çift anahtar değer kullanarak nesne yöntemini bildirmeye alışabilir, burada değer anonim bir işlevdir: var utils = {artış: function (count) {return sayım + 1; }}; Artık anahtar kelime işlevini tamamen ortadan kaldırabilirsiniz: var utils = {artış (count) {dönüş sayımı + 1; }}; Çok daha temiz! Yıkma Nesneleri geri yükleme işlevi veya yöntemi olduğunda, her zaman tüm nesne değerlerine ihtiyacınız yoktur. Sunucu tarafından döndürülebilecek herhangi bir veri dışındaki istekler hakkında bilgi döndüren AJAX isteğini düşünün: var Response = {data: {}, başlıklar: {}, yanıt kodu: 200,}; Tabii ki özellik gösterimini kullanarak özelliğe erişebilirsiniz: var data = rep Respon.Data; Var sorseecode = Response.Responsecode; console.log (veri, yanıt); // {}, 200 Bununla birlikte, nesnenin yok edilmesiyle, her değeri manuel olarak ayarlamanız gerekmez: var {data, yanıt} = yanıt; console.log (veri, yanıt); // {}, 200 işlevlerinizi veya yöntemlerinizi basitleştirebilir, çünkü başlangıçta ihtiyacınız olan değeri sökebilirsiniz: Function HandlerSesponse ({data, yanıt}) {console.log (data, yanıt); } Hariç:
İşlev HandLeresponse (yanıt) {console.log (Response.Data, Response.ResponseCode); } Sınıflar JavaScript’te her zaman oldukça karmaşıktır. Özellikle PHP sınıfına alışkın olan acemi kullanıcılar için de anlaşılması zor olabilir. Bunun nedeni, JavaScript’teki sınıf yönteminin nesnenin prototipine bağlı olmasıdır. Basit bir form sınıfı alalım: // form.js işlev formu (girişler) {this.inputs = girişler; } // yapıcı formu.pototype.submit = function (url) {// ajax sunucuya gönder} // gönder () ES2015 sınıf yöntemi php sınıfına daha benzer: sınıf formu {constructor (girişler) {this.input = girişler ; } Stick () {// ajax gönderisini sunucuya}} statik yöntemi de belirleyebilirsiniz. Yani: form. İnputhelper = function () {// statik yöntem} yapabilirsiniz: sınıf formu {yapıcı (girişler) {this.input = girişler; } stick () {// ajax post to Server’a} static inputhelper () {// statik yöntem}} sınıf genişletilebilir ve Süper Anahtar Kelime: Class Sipariş formu kullanılarak üst düzey yönteme erişebilirsiniz Form {Supon () {Super.submit ()); // Ajax Post’tan sonra sunucuya bir şeyler yapın}} Bunun sadece sözdizimsel şeker olduğu belirtilmelidir. Prototip tabanlı yaklaşım hala bir çadırın altında kullanılmaktadır. Sonuçlar aynı olsa da, ES2015 sınıfının okunmasının çok daha kolay olduğunu buldum. Modül Proje daha karmaşık hale geldiğinden, JavaScript’inizi birkaç dosyaya bölmek için genellikle gerekli hale gelir. Form sınıfına bağımlılıklar ekleyerek önceki örneği geliştirelim. Hatalar sınıfı ayrı dosyalarda saklanır:
// form.js sınıf formu {yapıcı (girişler) {this.inputs = girişler;this.errors = yeni hatalar ();}};// errors.js sınıf hataları {};Genellikle, bunu yaparken, komut dosyasını sayfa kaynağınıza manuel olarak gireceksiniz.Ancak, yüklenen dosya dizisi konusunda dikkatli olmalısınız:
JavaScript’te yeniden kullanılabilecek küçük bileşenler yazmak yeni değil, ancak AMD gibi gerekli modül yüklemesinden önce, Commonjs veya umd-her şey farklı sözdizimi vardır. Neyse ki, ES2015 modülü modülün yüklenmesi için standart bir yaklaşım getirdi. Ne yazık ki, ES2015 modülü söz konusu olduğunda ‘gotcha’ var. Şu anda içe aktarma veya dışa aktarma özelliklerini destekleyen hiçbir tarayıcı olmadığından, Rollup.js, Webpack veya Babel gibi bir Bundler modülü kullanmanız gerekir. Gelecekte, tarayıcı gereken tüm bağımlılıkları otomatik olarak aktaracaktır. Ok işlevinin ok işlevi ES2015’e en sevdiğim ektir. Üç ana avantajı vardır: Ok işlevinin özlü bir sözdizimi, normal işlevden daha kısa bir sözdizimine sahiptir. İşleyiciye kapatmaya devam ettiğimiz sıradan bir işleyici etkinliği ele alalım: $ (öğe) .on (‘Click’, Function (Event) {Console.log (‘Tıklandı!’);}); Ok işlevi ile: $ (öğe) .on (‘Click’, Event => {Console.log (‘Clicked!’);}) Gibi daha özlü bir sürüm yazabilirsiniz; Anahtar kelime işlevinin nasıl silindiğine dikkat edin. Kapanış herhangi bir parametre gerektirmediğinden, bunu daha da basitleştirebilirsiniz:
$ (öğe) .on (‘tıklayın’, () => {console.log (‘tıklandı!’);}); İade aramanız birkaç parametreye ihtiyacınız varsa, sadece paranteze sarıyorsunuz:
$ (öğe) .on (‘tıklayın’, (olay, someda, maredata) => {console.log (‘tıklandı!’);});Yalnızca bir mantık satırı içerdiğinde kurawal braketlerini tamamen ortadan kaldırabilirsiniz: $ (öğe) .on (‘tıklayın’, () => console.log (‘tıklatıldı!’));Kendi değerini tanımlayan bu normal işlevin bağlayıcısı yoktur.Bu, ana bağlamdan, örneğin kapanıştan erişmeye çalıştığınızda sorunludur.Bu, referansları depolamak için genel bir uygulamadır:
var customponent = {clickListener: function (öğe) {var self = this; $ (öğe) .on (‘tıklayın’, function (olay) {self.handlecliccent (olay);}); }, handleclicKeVent: function (olay) {console.log (‘öğe tıklandı!’); }}; CustomComponent.ClickListener (‘Body’); Bu yaklaşıma ok işlevini kullanırken artık gerekli değildir, çünkü bu ana bağlamı devralır. var customponent = {clickListener: function (öğe) {$ (öğe) .on (‘click’, (event) => this.handlecliccent (olay)); }, handleclicKeVent: function (olay) {console.log (‘öğe tıklandı!’); }}; CustomComponent.ClickListener (‘Body’); Örtük dönüş örtük dönüşü, anahtar kelime dönüşünü ortadan kaldırmanıza izin vererek bir adım daha ileri bir öz bir sözdizimi alır. Bu, genellikle kapanışta bir ilçe işlevi yazarken kullanışlıdır. Bir kullanıcı diziniz varsa ve yaşlarını geri yüklemek istiyorsanız, Array: var kullanıcılar = [{name: ‘John Doe’, Yaş: 32,}, {Name: ‘Jane Doe’, Yaş: 31,} ]; users.map (function (user) {return user.age;}); // [32, 31] Kısa bir sözdizimi ve örtük dönüş kullanarak bunu yeniden yazabilirsiniz: kullanıcılar.map (user => user.age);
// [32, 31] Okun işlevi ilk bakışta oldukça belirsiz görünebilir, ancak yeni bir sözdizimine alıştıktan sonra, zarafetini hemen takdir edeceksiniz. Ancak, delirmeden ve tüm normal işlevleri ok işlevleriyle değiştirmeden önce, normal işlevlerin hala bir yeri olduğunu unutmayın. Örneğin, öğenin görünümünü etkinleştirmek için basit bir tıklama yaparsanız, yine de tıklanan öğeye bağlı olmasını istersiniz: $ (öğe) .on (‘click’, function () {this.toggle (); }); WES BOS tarafından ok işlevini kullanmamak, ok işlevi uygun olmadığında iyi bir referanstır. Promise Promise, iade değerini hemen bilemeyeceğiniz eşzamansız atamalar için kullanılır. İyi örnek, Ajax istekleri gönderdiğinizde ancak sunucudan yanıtları beklemeniz gerektiğinde. Ardından, talep başarılı olabilir veya başarısız olabilir. Bir söz, bu olayın ne zaman gerçekleşebileceğine bakılmaksızın iki senaryoyu ele almanıza izin verir. Bir sözü düşünmenin basit yolu: Bu eylemi yapmak ve bunu yapmayı bitirdiğimde ya da bunu yapamazsa. Aşağıdaki gecikme işlevi AJAX isteklerini simüle eder. 1 saniye sonra rastgele tamamlanan veya reddedilen sözü iade edecektir. Çözülen vaat başarılı bir vaatti, reddedilen vaad başarısız bir vaatti. Ajax ile uğraşırken, sunucudan 200 yanıt kodunun yanı sıra herhangi bir istek genellikle reddedilecektir: Fonksiyon DecnedTask () {Return Yeni Promise ((çözüm, reddet) => {setTimeout (() => {var Rand = Math.Floor ( matematik .Random () * 3) + 1;
// 1 – 3 arasında rastgele sayı rand === 2? RECTEGE (): Resolve (); }, 1000); }); } Daha sonra bir randevunun sonuçlarını o zaman ve yakalama yöntemini kullanarak işleyebilirsiniz: DeclededTask () // Bu görevi gerçekleştirmek istiyorum. Bunu tamamlar. // Arıza üzerine programlamada bu dize şablonunu yapın, çeşitli verilerle ilişkili dizeler oluşturmak için yaygın bir şeydir. PHP’de, değişkeni doğrudan alıntılanan dizeye indirebilirsiniz: $ output = “user {$ user-> name} {$ user-> age} yaşında.”; Ancak, ES2015’ten önce bu mümkün değildir. Ayrıca bir dize devresi veya gidonlar gibi üçüncü bir parti yardımcısı kullanmanız gerekir: var output = ‘user’ + user.name + ” + user.age + ‘yaşında.’ Şablon dizesi (veya gerçek şablon) kod okunabilirliğini büyük ölçüde artırır ve yanlış dize serbest bırakma riskini azaltır. Bir şablon dizesi yapmak için, ipinizi backticks’e ekleyecek kadar. Değişken dolar işareti ile başlamalı ve kıvırcık parantezlerle çevrili olmalıdır: var output = ‘user $ {user.name} $ {user.age} yaş.`; ES2015’ten önce bir dizelerin bir kombinasyonunu gerektiren çok aralıklı dizeler için bir dize şablonu da kullanabilirsiniz. console.log (`metin satırı. Başka bir metin satırı. ‘); Gerçek şablon iyi bir ektir! Varsayılan parametreler Varsayılan parametreler nihayet JavaScript’e geldi! Girişlerinden önce, değeri manuel olarak kontrol etmelisiniz: işlev artışı (count) {count = count || 0; Dönüş sayısı + 1;
} Artık varsayılan değeri PHP: Function IncrementCount (Count = 0) ‘da yaptığınız gibi önceden belirleyebilirsiniz {dönüş sayımı + 1;} İşlevi varsayılan parametre olarak bile geçebilirsiniz.Bu, değeri dinamik olarak belirlemeniz gerekiyorsa kullanışlıdır.Bu örnekte, kullanıcı sayfada olmadıkça varsayılan 0 döndürülür: Function GetDefaultValue () {if (window.Loocation.Pathname === ‘DuyguLucky’) {return Math.floor (Math.Random () * * 100);} dönüş 0;} İşlev artış (count = getDefaultValue ()) {dönüş sayımı + 1;
