JQuery'ye Giriş (Bölüm 3): Sayfanın Yüklenmesini Bekleme ve Anonim İşlevler

Reklamcılık

jQuery tartışmasız modern için gerekli bir beceridir. web geliştiricisi Hangi Programlama Dilini Öğrenmelisiniz - Web ProgramlamaBugün internete güç veren çeşitli web programlama dillerine bir göz atacağız. Bu, yeni başlayanlar için bir programlama serisinin dördüncü bölümüdür. 1. bölümde, temel bilgileri öğrendik... Devamını oku ve bu kısa mini dizide, kendi web projelerinizde kullanmaya başlamanız için size bilgi vermeyi umuyorum. İçinde jQuery eğitimimizin ilk bölümü jQuery Eğitimi - Başlarken: Temel Bilgiler ve SeçicilerGeçen hafta, jQuery'nin herhangi bir modern web geliştiricisi için ne kadar önemli olduğundan ve neden harika olduğundan bahsetmiştim. Bu hafta, sanırım bazı kodlarla ellerimizi kirletmemizin ve nasıl yapılacağını öğrenmemizin zamanı geldi... Devamını oku , bazı dil temellerine ve seçicilerin nasıl kullanılacağına baktık; 2. bölümde, devam ettik DOM'yi manipüle etme yöntemleri jQuery'ye Giriş (Bölüm 2): Yöntemler ve İşlevlerBu, jQuery web programlama serisine devam eden yeni başlayanlar tanıtımının bir parçasıdır. Bölüm 1, jQuery'nin projenize nasıl dahil edileceğine ilişkin temel bilgileri ve seçicileri kapsıyordu. 2. bölümde devam edeceğiz...

Devamını oku .

3. bölümde, sayfa yüklenene kadar jQuery'nin nasıl geciktirileceği sorununu ele alacağız, ardından anonim işlevlerin ne olduğunu ve neden bunlar hakkında bilmeniz gerektiğini açıklamaya çalışacağım.

Gecikmeli Yükleme: Nasıl ve Neden?

Bölüm 1 ve 2'deki bazı kodları deniyorsanız, bazı hatalarla, garip davranışlarla veya çalışmayan şeylerle karşılaşmış olabilirsiniz. JQuery öğrenirken karşılaştığım en yaygın hata, DOM öğelerinin bulunamamasıydı. Onları sayfanın kaynağında açıkça görebilsem de, jQuery bana bulamadığını söyleyip duruyordu. onlara! Nedenmiş?

Eh, her şey tarayıcı tarafından yüklenen sıra ile ilgili. En basit haliyle, tarayıcıda çalışan bir jQuery betiğiniz varsa önce aradığı DOM öğesi gerçekten oluşturuldu, önce komut dosyası yüklenecek, ancak öğeyi bulamadığı için hiçbir şey yapmayacak, ardından DOM öğesi daha sonra yüklenecek. Tüm komut dosyalarınızı altbilginin yanına yerleştirirseniz bu daha az sorun olur, ancak yine de olabilir.

Çözüm, komut dosyalarınızı a denilen şeye sarmaktır. belge hazır olayı. Bu, ekteki kodun DOM tamamen yüklenene kadar beklemesini sağlar (tamamen yüklenene kadar). hazır). Kullanımı basittir:

$(belge).hazır (işlev(){ // gecikme kodunuz buraya gelir. });

Bunu yapmanın daha da kısa bir yolu var: jQuery belgeleri, ancak kod okunabilirliği için bu yolu kullanmanızı şiddetle tavsiye ederim.

Bu belgeye hazır olay, bir başka iyi örnektir. anonim işlev, öyleyse bunun ne anlama geldiğini anlamaya çalışalım.

Anonim İşlevler

Eğer benden hoşlanıyorsanız, kemerinizin altında başlangıç ​​seviyesinde bir programlama deneyiminiz varsa, anonim işlevler - jQuery ve Javascript'in özü olan - biraz endişe verici olabilir. Birincisi, uyumsuz parantezler nedeniyle oldukça yaygın hatalar yapıyor, bu yüzden şimdi açıklayacağım. Anonim işlevlerin neden normal adlandırılmış işlevlerden daha iyi olduğuna dair kapsamlı bir açıklama istiyorsanız daha teknik bir düzeyde işlev görürse, bu oldukça karmaşık blog gönderisini okumanızı öneririm [Artık Mevcut].

Şimdiye kadar, muhtemelen sadece rastladınız adlandırılmış işlevler. Bunlar, bir adla bildirilmiş ve bu nedenle başka herhangi bir yerde, istediğiniz kadar çağrılabilen işlevlerdir. Sayfa yüklendiğinde konsola bir mesaj kaydedecek olan bu önemsiz örneği düşünün.

işlev doStuffOnPageLoad(){ konsol.log("bir şeyler yapmak!"); } $(belge).hazır (doStuffOnPageLoad);

Bu, işleviniz yeniden kullanılmak üzere tasarlandıysa yararlıdır, ancak bu durumda, sayfa yüklendiğinde yalnızca bir kez etkinleşmesini istediğimiz için biraz karmaşıktır. Bunun yerine, ayrı bir işlev tanımlamakla uğraşmıyoruz ve gerektiğinde onu bir parametre olarak satır içi olarak ilan ediyoruz. Bu nedenle önceki örnek şu şekilde yeniden yazılabilir:

$(belge).hazır (işlev(){ konsol.log("bir şeyler yapmak"); });

Şu anda bunun pek çok avantajını göremeyebilirsiniz – bu durumda yalnızca marjinal olarak daha az kod vardır – ancak komut dosyalarınız karmaşıklıkta ilerler, işlev bulmaya çalışırken etrafta zıplamak zorunda kalmayacağınızı takdir edersiniz tanımlar. Ne yazık ki, yeni başlayanlar için işleri biraz daha zorlaştırıyor – sadece tüm bu parantezlere bakın – bu yüzden hata alıyorsanız aşağıdaki noktaları kontrol ettiğinizden emin olun:

• Doğru sayıda karşılık gelen parantez - kodunuzu girintilemek yardımcı olur.
• Kıvırcık vs yuvarlak parantez.
• Noktalı virgülle kapatılan ifade - ancak kapanış küme ayracından sonra gerekli değildir.

Gibi bir kod düzenleyici kullanma Yüce Metin 2 Platformlar Arası Kod Düzenleme İhtiyaçlarınız İçin Sublime Text 2'yi DeneyinSublime Text 2, adını daha yeni duyduğum bir çapraz platform kod düzenleyicisi ve beta etiketine rağmen gerçekten etkilendiğimi söylemeliyim. Tek kuruş ödemeden tam uygulamayı indirebilirsiniz... Devamını oku karşılık gelen parantezleri vurguladığı ve sizin için kodu otomatik olarak girintilediği için gerçekten yardımcı olabilir. Özel bir kod düzenleyici gerçekten çok önemlidir.

Bu ders için bu kadar, ancak bazı temel DOM manipülasyonlarını dahil etme alışkanlığı edinmelisiniz. devam etmeden önce belgeye hazır olayında ve değilseniz bir kod düzenleyicide dosyaları düzenlemeye başlayın. çoktan. Bir dahaki sefere, olaylara ve bunların bir sayfaya etkileşim eklemek için nasıl kullanıldığına bir göz atacağız – örneğin, bir düğmeye tıklandığında jQuery'nin bir şeyler yapmasını sağlayacağız. Sorular veya yorumlar her zaman aşağıdadır.