Şimdiye kadar organize olma konusunda oldukça iyi bir iş çıkardık. HTML'mizi bir şablonda kırmak büyük bir adımdı. Artık tabiri caizse suları çamurluyoruz. JavaScript'teki farklı işlevsel parçalarımız, gizli bölümlere ayrılmıştır, bu da işlerin anlaşılmasını ve sürdürülmesini kolaylaştırır. Oldukça küçük bir demo üzerinde çalıştığımızı biliyorum, ancak umarım bir uygulama daha karmaşık hale geldikçe ve daha fazla kod satırı arttıkça, bu organizasyonun inanılmaz derecede değerli olduğunu hayal edebilirsiniz.
JavaScript'in organizasyonla ilgili olduğu gibi herhangi bir "görüşü" yoktur. Muhtemelen bazı insanlar onu seviyor ve bazıları içinde kaybolmuş hissediyor. Nasıl organize etmeyi seçeceğiniz tamamen size kalmış. Bu aynı zamanda muhtemelen bazı insanların, bir organizasyon yapısı sağlayan, fikir sahibi olsun ya da olmasın çerçevelere gerçekten bağlı kalmasının nedeni de budur. Örneğin, Backbone. Ama bu başka bir dizi!
Demomuz için, basitçe oluşturduğumuz bir nesnenin etrafında organize edeceğiz.
var Movies = ( )Burada yaptığımız her şey, sayfaya bazı filmler çekmekle ilgili, bu yüzden onu Filmler adı verilen tek bir "şey" içinde saklayacağız. Organizasyonel olarak bize mantıklı gelen her şeyi yaptığımızı unutmayın. Bunun "global kapsam" içine sadece bir değişken koyma avantajı da vardır. Her şeyi küresel kapsamda yaparsak, yanlışlıkla geçersiz kılan değişkenlerin (ve işlevlerin vb.) Başka bir yerde beyan edilmesi karmaşası olur.
Böyle bir nesne aslında hiçbir şey "yapmaz". "Başlamamız" gerekecek.
var Movies = ( init: function() ( ) ) Movies.init();İnit adında bir işleve sahip olmak, bu kodu okuyan herkesin, içindeki kodun bu kod grubu çalıştırıldığında çalıştırılan şey olduğunu bilmesini sağlayan bir standarttır. Bu, bu kod grubu ile olanların biraz içindekiler tablosu gibi okunmalıdır. Daha sonra, yapmamız gereken şeyleri ayrı parçalar halinde yapan başka işlevler (Movies nesnesinin daha fazla özelliği) yaparız. Unutma, istediğimiz şeyi, bize mantıklı gelen her şeyi arayabiliriz.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( // Templating here ), getData: function() ( // Data getting here ), appendMoviesToPage: function(data) ( // Display logic here ), bindUIActions: function() ( // Event delegating binding here. ) ) Movies.init();Oldukça açık değil mi? İçinde appendMovesToPageçağrılmadığını fark edebilirsiniz init. Çünkü veri gönderene kadar onu arayamayız. Bu veriler bir Ajax aramasından gelecek, yani geri aramaya ihtiyacımız var. Yani getDataonu aramakla bitecek.
Burada doldurulacak diğer her şey, zaten yazdığımız kod parçalarını doğru yere taşımaktır.
var Movies = ( init: function() ( this.setUpTemplate(); this.getData(); this.bindUIActions(); ), setUpTemplate: function() ( Movies.compiled = _.template( "" + " " + "" + "" + "
" + "" + "" + "
" + " " + " " ); ), getData: function() ( $.getJSON("http://codepen.io/chriscoyier/pen/0b21d5b4f7fbf4e7858b2ffc8890e007.js", function(data) ( Movies.appendMoviesToPage(data); )); ), appendMoviesToPage: function(data) ( var i, html = ""; for (i = 0; i < data.movies.length; i++) ( html += Movies.compiled(data.movies(i)); ) $("#movies").append(html); ), bindUIActions: function() ( $(document).on("click", ".module-movie", function() ( alert("movie added"); )); ) ) Movies.init();
Ve bitti.
Daha önce özetlediğimiz dört endişeye bakalım ve onlar hakkında ne yaptığımızı görelim.
- Verileri alıyorum.
$.getJSONGerçek bir durumda yapmamız gerekeceğinden , JSON'yi vurabileceğimiz bir dosyaya taşıdık . Bunu sadece pratik yapmaktan başka, bu, etrafına testler yazmamıza izin verecektir. - Mantığı görüntüleyin. Artık filmlerimizi sayfaya eklemeye hazır olduğumuzda çağrılan, appendMoviesToPage adlı çok özel bir işlevimiz var. Tek amaçlı işlevler (tekrar) organizasyon, anlaşılabilirlik ve sürdürülebilirlik için harikadır.
- Olay işleme. Olay yetkilendirmesini kullanarak, artık bu "iş mantığını" görüntüleme mantığı veya şablonla karıştırmıyoruz. Kaynak siparişinin yürütülmesi konusunda endişelenmemize bile gerek yok, çünkü nihayetinde olayları
document. İşlevselliğimiz, şablonun sayfaya ne zaman / nasıl eklendiğinden bağımsız olarak çalışacaktır. - Şablonlama. Özellikle şablon oluşturma amaçlı kütüphaneleri kullanmak için tamamen taşındı.
Ben buna galibiyet derim. İşte sona erdiğimiz yer:
CodePen'de Chris Coyier (@chriscoyier) tarafından Kalem BwbhI'yi görün