Şablon oluşturma, JavaScript uygulamalarıyla çalışmanın önemli bir parçasıdır. Verilerin size sunulması oldukça yaygındır, ancak ekranda görüntülenmeye hazır bir biçimde değildir. Bu, JSON biçimindeki yaygın (ancak her zaman değil) verilerdir. Bu, JavaScript'te çalışmak için harika bir format, ancak yine de kullanabileceğimiz bir şekilde biçimlendirmemiz gerekiyor.
Örneğin, elimizde olabilecek bazı kurgusal veriler şunlardır:
var data = ( movies: ( ( movieTitle: "Ender's Game", movieDirector: "Gavin Hood", movieImage: "http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/movie-endersgame.jpg.webp" ),… ) )Ve nihayetinde bunu şu hale getirmek istiyoruz:
Ender's Game
Gavin Hood
JQuery'nin bunda harika olduğunu düşünebilirsiniz. jQuery, DOM çapraz geçiş / işleme araçlarıyla doludur. Ancak, söyleyebileceğiniz çok sağlam bir DOM oluşturma araçlarına sahip değil. JQuery ekibinin bir noktada şablon eklemeyi düşündüğüne ve hatta "resmi" bir eklentiyle oynadığına inanıyorum, ancak işe yaramadı.
Bu videoda bugün geleneksel olarak şablon olarak düşünülen şeyi yapmıyoruz. Sadece jQuery ile yeni bir tane oluşturuyoruz ve ihtiyaç duyduğumuz HTML'yi oluşturmak için dize birleştirme kullanıyoruz ve nihayetinde sayfaya enjekte ediyoruz. Bunda teknik olarak yanlış bir şey yok, ancak bu yaklaşımın nasıl hızla kontrolden çıkabileceğini eve götürmeye çalışıyorum.
Bu videoda yazdığımız biraz JS'de çeşitli endişeleri / işleri karıştırıyoruz:
- Verileri alıyorum. Elimizde sadece var, ama muhtemelen bu biraz daha karmaşık. Belki hata işleme ve önbelleğe alma gibi bir zaman uyumsuz Ajax isteği.
- Mantığı görüntüleyin. Neyi göstermemiz gerektiğine karar vermek. Kaç? Hangi kısımlar? Neye bağlı olarak?
- Olay işleme. Yeni eklenen div'lerimiz, yetki vermek yerine onları oluştururken olay işleme eklendi.
- Şablonlama. Tasarımı gerçekleştirmek, verileri yapılandırmak ve barındırmak veya ihtiyaçları karşılamak için oluşturduğumuz HTML.
Bu, bitirdiğimiz spagetti benzeri koddur:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen 31b07f30dce13b31904da36693b29b41'e bakın
Bir sonraki video bloğu, bir grup şablon oluşturmaya odaklanacak çünkü bu çok önemli, ancak sonuçta tüm bu endişeleri bir şekilde ortadan kaldırıp çok daha organize ve sürdürülebilir bir kod elde edeceğiz.