Edmund Richardson
0 
3877
130
jQuery belki de modern web geliştiricisi için zorunlu bir beceridir. Hangi Programlama Dilini Öğrenin - Web Programlama Hangi Programlama Dilini Öğrenin - Web Programlama Bugün İnterneti destekleyen çeşitli web programlama dillerine göz atacağız. Bu yeni başlayanlar için programlama serisinin dördüncü bölümü. Birinci bölümde,… 'nin temelini öğrendik ve bu kısa mini dizide, bunu kendi web projelerinizde kullanmaya başlamanız için bilgi vermeyi umuyorum. JQuery eğitiminin ilk bölümünde jQuery Eğitimi - Başlarken: Temel Bilgiler ve Seçiciler jQuery Eğitimi - Başlarken: Temel Bilgiler ve Seçiciler Geçen hafta, jQuery'nin herhangi bir modern web geliştiricisi için ne kadar önemli olduğu ve neden harika olduğu hakkında konuştum. Bu hafta, sanırım bir kodla ellerimizi kirletme zamanı geldi ve öğrendik…… bazı dillerin temellerini ve seçicilerin nasıl kullanılacağını öğrendik; 2. bölümde, DOM'u manipüle etme yöntemlerine geçtik. jQuery'e Giriş (Bölüm 2): Yöntemler ve İşlevler jQuery'e Giriş (Bölüm 2): Yöntemler ve İşlevler Bu, jQuery web programlama serisine devam eden yeni başlayanların bir parçasıdır . Bölüm 1, projenize nasıl dahil edileceğine ilişkin jQuery temellerini ve seçicileri kapsamıştır. 2. bölümde, devam edeceğiz… .
3. bölümde, sayfa yüklenene kadar jQuery'yi geciktirme problemi ile ilgileneceğiz. Daha sonra isimsiz fonksiyonların ne olduğunu ve neden onlar 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 düz şeylerle karşılaşmış olabilirsiniz. JQuery'i öğrenirken karşılaştığım en yaygın hata, bulunmayan DOM öğelerinin olmasıdır - onları sayfanın kaynağında açıkça görebildiğim halde, jQuery bana onları sadece bulamadığını söylemeye devam etti! Neden?
Şey, bunların tarayıcıya yüklendiği sırayla ilgili. En basitinde, tarayıcıda çalışan bir jQuery betiğiniz varsa önce Aradığı DOM öğesi gerçekte oluşturuldu, komut dosyası ilk olarak yüklenecek, ancak öğeyi bulamadığı için hiçbir şey yapmaz, ardından DOM öğesi daha sonra yüklenir. Tüm komut dosyalarınızı altbilginin yanına yerleştirirseniz sorun daha az olur, ancak yine de olabilir..
Çözüm, komut dosyalarınızı bir belgeye hazır etkinlik. Bu ekteki kodu DOM tamamen yüklenene kadar bekletir ( hazır). Kullanımı basittir:
$ (document) .ready (function () // gecikme kodun buraya geliyor);Bunu, jQuery belgelerinde ana hatlarıyla belirtmenin daha da kısa bir yolu var, ancak bu yolu kod okunabilirliği için kullanmanızı şiddetle tavsiye ederim..
Bu belgeye hazır etkinlik bir başka iyi örnek adsız işlev, öyleyse bunun ne anlama geldiğini anlamaya çalışalım.
Anonim İşlevler
Benim gibiyseniz, kemerinizin altında başlangıç seviyesindeki bir programlama deneyimine sahipseniz, adsız işlevler - jQuery ve Javascript'in özü olan - biraz endişe verici olabilir. Birincisi, uyumsuz ayraçlar nedeniyle hatalar oldukça yaygın, bu yüzden şimdi açıklayacağım. Anonim işlevlerin neden normal adlandırılmış işlevlerden daha teknik bir düzeyde daha iyi olduğu konusunda tam bir açıklama istiyorsanız, bu oldukça karmaşık blog yazısını okumanızı tavsiye ederim..
Şimdiye kadar, muhtemelen sadece rastlamak adlandırılmış işlevler. Bunlar, bir adla bildirilmiş ve bu nedenle istediğiniz kadar başka bir yerde çağrılabilen işlevlerdir. Sayfa yüklendiğinde konsola bir mesaj gönderecek olan bu önemsiz örneği göz önünde bulundurun.
işlevi doStuffOnPageLoad () console.log ("şeyler yapıyor!"); $ (document) .ready (doStuffOnPageLoad);İşleviniz yeniden kullanılmak üzere tasarlandıysa faydalıdır, ancak bu durumda biraz kıvrımlıdır, çünkü sayfa yüklendiğinde gerçekten yalnızca bir kez ateşlenmesini istiyoruz. Bunun yerine, ayrı bir işlev tanımlamayı zahmet etmiyoruz ve sadece gerektiğinde ve gerektiğinde parametre olarak satır içi olarak ilan ediyoruz. Bu nedenle önceki örnek şöyle yeniden yazılabilir:
$ (document) .ready (function () console.log ("şeyler yapıyor"););Şu anda bunun pek çok avantajını göremeyebilirsiniz - bu durumda sadece marjinal olarak daha az kod - ancak komut dosyalarınızın karmaşıklığı arttıkça işlev tanımlarını bulmaya çalışırken atlamak zorunda kalmayacaksınız. 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 nedenle hatalar alıyorsanız aşağıdaki noktaları kontrol ettiğinizden emin olun:
- Doğru sayıda kaşlı ayraç - kodunuzu girintilendirmeye yardımcı olur.
- Kıvırcık vs yuvarlak parantez.
- Noktalı virgülle kapanma ifadesi - ancak kapanış kaşlı ayraçtan sonra gerekli değildir.
Sublime Text 2 gibi bir kod editörü kullanma Sublime Text 2 Çapraz Platform Kodunuz için İhtiyaçları Düzenleme için deneyin Exlime Text 2 Çapraz Platform Kodunuz için İhtiyaçlar İçin Düzenleme Sublime Text 2, sadece son zamanlarda duyduğum bir çapraz platform kod editörüdür, ve beta etiketine rağmen gerçekten etkilendiğimi söylemeliyim. Bir kuruş ödemeden tam uygulamayı indirebilirsiniz ... karşılık gelen parantez vurgulamak ve otomatik olarak sizin için kod girintileri gibi gerçekten yardımcı olabilir. Özel bir kod editörü gerçekten önemlidir.
İşte bu ders için bu, ancak devam etmeden önce bazı temel DOM manipülasyonlarını belgeye hazır olayı dahil etme alışkanlığı edinmeli ve daha önce değilseniz, bir kod editöründe dosyaları düzenlemeye başlamalısınız. Bir dahaki sefere, bir düğmeye tıklandığında jQuery yapmak için bir şeyler yapmak gibi olaylara ve bir sayfaya etkileşim eklemek için nasıl kullanıldığına bakacağız. Sorularınız veya yorumlarınız her zaman aşağıda açıktır.