WordPress Geliştiricileri için JavaScript: Nesnelerle Başlamak
Nesneler en önemli ve en güçlü JavaScript özelliklerinden biridir ve doğuştan gelen özelliklerin çoğu orijinal nesneyi kullanır. Temel olarak, nesneler bir özellik koleksiyonudur ve özellik anahtarlardan ve değerlerden oluşur. Bu anlamda, JavaScript’teki nesneler PHP’deki ilişkisel dizilere benzer, ancak benzerlik orada sona erer. Bu, WordPress geliştiricileri için JavaScript’e odaklanan beş bölümümüzdeki ikinci gönderi. Bu dizi boyunca temel bilgileri öğreneceksiniz, ancak bence zaten HTML ve CSS hakkında bilginiz var. Bu yapı taşı ile ilgili yardıma ihtiyacınız varsa, yeni başlayanlar için WordPress’in gelişimi hakkındaki dizimize bakın.
Bu serinin son makalesinde, sayfalara eklemek ve değişkenleri ve işlevleri kullanmak için JavaScript’in temellerini görüyoruz. Bu öğreticide, JavaScript’te yaygın olarak kullanılan nesnelere odaklanacağız. WordPress geliştiricilerimiz için JavaScript serisindeki öğreticiyi özlüyor musunuz? Beş yazıyı buradan takip edebilirsiniz:
WordPress Geliştiricileri için JavaScript: Temelleri inceleyin
WordPress Geliştiricileri için JavaScript: Nesnelerle Başlamak
WordPress Geliştiricileri için JavaScript: JQuery ile Başlayarak
WordPress Geliştiricileri için JavaScript: WordPress’e JavaScript Yükle
WordPress Geliştiricileri için JavaScript: Ajax kullanma
Nesneler JavaScript’teki nesneler örneğine bakarak doğrudan seks yapalım:
D8038C332948FBB10AAAD64CE3EEE56C’nin özünü içerir
Bu dört özelliğe sahip çok basit bir nesne. İlk mülk “isim” ve “Daniel Pataki” değerine sahiptir. Diğer özelliklerden de görebileceğiniz gibi, değer birçok farklı veri türü kullanabilir. Nesneleri çok kullanışlı hale getiren, ama aynı zamanda biraz kafa karıştırıcı yapan şey, özellik değerlerinin de işlevler şeklinde olabilmesidir. Önceki JQuery kodlarından bazılarını kopyaladıysanız, bunu böyle görünen bir iade çağrısı işlevi şeklinde görmüş olabilirsiniz: özü içerir
Yukarıdaki kod, verilen URL’ye bir posta isteği gönderecektir. “Tam” mülkiyet, istek tamamlandığında gerçekleştirilen işlevi çağırır. Nasıl çalıştığını görmek için kendi işlevlerimizi hızlı bir şekilde yazalım:
D8038C332948FBB10AAAD64CE3EEE56C’nin özünü içerir
Nesne, bir işlev olan adın ve tebrik özelliğini içerir. Tanımlandıktan sonra, işlevi sözdizimi noktalarını kullanarak gerçekleştirebiliriz: me.greeting. Bu anahtar kelimeyi kullanarak özelliği aynı nesnenin içinden bile yönlendirebilirsiniz.
Daha önce bir PHP nesnesiyle çalıştıysanız, fikir çok benzer. Sözdiziminin sadeliği bazen insanları karıştırır, ancak içinde olağanüstü bir güç vardır. Nesnelerle çalışarak bir adım geri dönelim ve nesneleri nasıl oluşturacağınızı ve manipüle edeceğinizi öğrenelim. Bir nesne her zaman kıvırcık parantezlere sarılır. Mülk adı alıntılamaz, ancak bağlantı işareti gibi özel karakterler içeriyorsa alıntılamalıdır. Özellik değerleri, dizeler, tamsayı, diziler ve diğer nesneler dahil olmak üzere çeşitli türlerden oluşabilir. Manipüle edebileceğimiz bazı yararlı bilgilere sahip bir test nesnesi oluşturalım: D8038C332948FBB10AAAD64CE3EE56C’nin özünü içerir
Bir özelliğin değerini elde etmek için bir nokta gösterimi veya dirsek parantezleri kullanabilirsiniz. Değişken özelliğin adını kullanmak istiyorsanız, braket gösterimi yararlıdır. Aşağıdaki örneğe bakın:
D8038C332948FBB10AAAD64CE3EEE56C’nin özünü içerir
Ve bu tarayıcı konsolundaki görünüm:
Nesne değerini kaydedin
Nesnede yer alan işlevi aynı şekilde kullanabilirsiniz, sadece braketleri sonunda ekleyin (ve gerekirse parametreyi).
Sayfa başına 2,5 dakikalık okuma hızını göz önünde bulundurarak okuma süresinin hesaplanmasının işlevi. Tam okumak için gereken dakikalara ulaşmak için toplam sayfa sayısını 2.5 ile çarpıyorum. Daha sonra ihtiyaç duyulan saat sayısına ulaşmak için 60’a bölündüm.
Önceki makalede, dizileri kullanarak birkaç tweet’in bir listesini yaptığımız bir örnek verdik, ancak örneklerimizi nesneleri kullanarak daha esnek hale getirebiliriz. Aşağıda, nesneyi kullanmak için yeniden yazılmış tam bir koddur:
D8038C332948FBB10AAAAD64ce3eee56cperies’in özünü içerir ve göreceğiniz en büyük değişiklik, ayrı ayrı verilen dizi tweetleri ve kullanıcı adları yerine bir dizi tweet nesnesi yaptığımdır. Her tweet nesnesi tweet ve kullanıcı adı içerir. Bu, başka yerlerden kullanıcı adlarının girilmesindeki belirsizliği ortadan kaldırır. Tweet () işlevi artık ayrı bir argüman yerine nesnenin özelliğini kullanıyor ve belgeyi sildim.
Mevcut yapıcıyı kullanarak, kodumuz kötü değil, yine de çok daha iyi olabilir. Tweet nesneleri olmadan tweet’leri asla görüntülememiz gerekebilir, bu nedenle nesnenin dışındaki tweet işlevimizi gerçekten tanımlamak zorunda değiliz. Aynı yapıyı kullanırsak, üç nesneye display_tweet () işlevini eklememiz gerekir. Yapıcı buraya girer. Nesne yönelimli PHP’ye alışkınsanız, bu PHP’de sınıfları ve nesneleri kullanmaya benzer. Yapıcıyı sınıfı başlatmanın bir yolu olarak düşünün. Size daha açık hale getirmek için birkaç kod göstereyim:
D8038C332948FBB10AAAD64CE3EEE56C’nin özünü içerir
Tweet_1 ile başlayalım. İki parametreyi sürdürerek tweet işlevini aramak için yeni bir tweet () kullanıyorum. Fonksiyon, nesneler için özellik oluşturan bir yapıcıdır. Bu, buna ilk parametreyi verir. Ayrıca bu işlevleri yapar. Tweet’leri görüntüleyen görüntüler. İşlevde, bu anahtar kelimeyi kullanarak özelliğe başvurabiliriz. Fonksiyonumuzun dışında nokta gösterimi kullanır. İlk tweet metnini kaydetmek için Tweet_1.text kullanıyoruz, Tweet ekranını kaydetmek için Tweet_2.display () kullandığımız ikinci tweet için. Tweet sınıfını kullanarak yeni nesneler oluşturmak istediğiniz kadar tweet yapabilirsiniz. Nesne, işlev görmek için gereken tüm işlevleri ve diğer öğeleri içerecektir. Yapıcıyı göz önünde bulundurarak tweet’imiz örneğini yeniden yazalım:
D8038C332948FBB10AAAD64CE3EEE56C’nin özünü içerir
Çok daha temiz ve daha anlaşılır. Ekstra esneklik sağlamak için Tweet’e önek ve sonek ekleme yeteneği ekledim. Bu şekilde kolayca bir liste öğesi olarak görüntüleyebiliriz.
Özet Bu öğreticide, JavaScript nesnelerini inceliyoruz ve kodumuzu daha iyi, daha iyi ve daha esnek hale getirmek için veri yapıları yapmak için nasıl kullanılabileceğini öğreniyoruz.Önceki öğretici ile birlikte, şimdi temel dizi, değişkenler ve JavaScript hakkında bilgi sahibi olmalısınız.Bir sonraki öğreticide, WordPress tarafından yaygın olarak kullanılan bir JavaScript çerçevesi olan JQuery’yi göreceğiz.Anahtarlama, çekme tarihi ve daha fazlası gibi harika şeyler yapabilmeniz için web sitelerini nasıl değiştireceğinizi öğreneceksiniz. Bu öğreticinin yararlı olduğunu düşünüyor musunuz?WordPress’in geliştirilmesinde neden JavaScript’i öğrenmek istiyorsunuz?Daha fazla bilmek istiyorsun?Bize aşağıdaki yorumlarda anlatın.
Etiket:
Javascript
