Omurga ...
... kodunuzu düzenlemenize yardımcı olacak çok küçük bir bileşen kütüphanesi. Tek bir JavaScript dosyası olarak paketlenmiştir. Yorumlar hariç, 1000'den az gerçek JavaScript satırı vardır. Mantıklı bir şekilde yazılmıştır ve her şeyi birkaç saat içinde okuyabilirsiniz.
Bu bir ön uç kütüphanesidir, web sayfanıza bir komut dosyası etiketi eklersiniz. Yalnızca tarayıcıyı etkiler ve sunucunuz hakkında çok az şey söyler, ancak ideal olarak dinlendirici bir API'yi açığa çıkarması gerekir.
Bir API'niz varsa, Backbone, onunla konuşmanıza yardımcı olacak birkaç yararlı özelliğe sahiptir, ancak herhangi bir statik HTML sayfasına etkileşim eklemek için Backbone'u kullanabilirsiniz.
Omurga içindir ...
... JavaScript'e yapı ekliyor.
JavaScript belirli kalıpları zorlamadığından, JavaScript uygulamaları çok hızlı bir şekilde dağınık hale gelebilir. JavaScript'te önemsizin ötesinde bir şey inşa eden herkes muhtemelen aşağıdaki gibi sorulara karşı koşacaktır:
- Verilerimi nerede saklayacağım?
- İşlevlerimi nereye koyacağım?
- İşlevlerimi nasıl birbirine bağlayacağım, böylece mantıklı bir şekilde çağrılırlar ve spagetti'ye dönmezler mi?
- Bu kodu farklı geliştiriciler tarafından nasıl korunabilir hale getirebilirim?
Omurga bu soruları size vererek cevaplamayı amaçlamaktadır:
- Verileri ve veri koleksiyonlarını temsil etmenize yardımcı olacak modeller ve Koleksiyonlar.
- Görünümler, verileriniz değiştiğinde DOM'nizi güncellemenize yardımcı olmak için.
- Bileşenlerin birbirini dinleyebilmesi için bir olay sistemi. Bu, bileşenlerinizin bağlantısını keser ve spagettifikasyonu önler.
- Minimal mantıklı sözleşmeler kümesi, böylece geliştiriciler aynı kod tabanında birlikte çalışabilir.
Buna MV * deseni diyoruz. Modeller, Görünümler ve isteğe bağlı ekstralar.
Omurga hafif
İlk görünüşlerine rağmen, Omurga fevkalade hafiftir, neredeyse hiç bir şey yapmaz. Yaptığı şey çok faydalı.
Size, oluşturabileceğiniz ve olayları yayabilecek ve birbirini dinleyebilecek bir dizi küçük nesne verir. Örneğin, bir yorumu temsil etmek için küçük bir nesne ve ardından tarayıcıda belirli bir yerde yorumun görüntülenmesini temsil eden küçük bir commentView nesnesi oluşturabilirsiniz.
YorumGörünüme yorumu dinlemesini ve yorum değiştiğinde kendini yeniden çizmesini söyleyebilirsiniz. Sayfanızdaki çeşitli yerlerde aynı yorumu görüntülemenize rağmen, bu görünümlerin tümü aynı yorum modelini dinleyebilir ve senkronize kalabilir.
Kod oluşturmanın bu yolu, kod tabanınız birçok etkileşimle çok büyük hale gelse bile karışık olmanızı önlemeye yardımcı olur.
Modeller
Başlarken, verilerinizi genel bir değişkente veya DOM'da veri özellikleri olarak depolamak yaygındır . Her ikisinin de sorunları var. Global değişkenler birbiriyle çatışabilir ve genellikle kötü formdur. DOM'da depolanan veri öznitelikleri yalnızca dizeler olabilir, bunları içeri ve dışarı ayrıştırmanız gerekir. Diziler, tarihler veya nesneler gibi şeyleri depolamak ve verilerinizi yapılandırılmış bir biçimde ayrıştırmak zordur.
Veri özellikleri şu şekilde görünür:
<p data-username="derek" data-age="42"></p>
Omurga, verilerinizi ve ilişkili yöntemleri temsil etmek için bir Model nesnesi sağlayarak bunu çözer . Yapılacaklar listeniz olduğunu varsayalım, bu listedeki her öğeyi temsil eden bir modeliniz olur.
Modeliniz güncellendiğinde bir etkinlik başlatır. Söz konusu nesneye bağlı bir görünümünüz olabilir. Görünüm, model değişikliği olaylarını dinler ve kendini yeniden oluşturur.
Görüntüleme
Omurga, DOM ile konuşan View nesnelerini sağlar. DOM'yi manipüle eden veya DOM olaylarını dinleyen tüm işlevler buraya gider.
Bir Görünüm tipik olarak tüm görünümü veya muhtemelen görünümün bir bölümünü yeniden çizen bir oluşturma işlevi uygular. Bir oluşturma işlevi uygulama zorunluluğu yoktur, ancak bu yaygın bir konvansiyondur.
Her görünüm DOM'un belirli bir bölümüne bağlıdır, bu nedenle yalnızca arama formunu dinleyen bir searchFormView ve yalnızca alışveriş sepetini görüntüleyen bir shoppingCartView'a sahip olabilirsiniz.
Görünümler genellikle belirli Modellere veya Koleksiyonlara da bağlıdır. Model güncellendiğinde, görünümün dinlediği bir olayı başlatır. Görünüm, yeniden çizmek için render olarak adlandırılabilir.
Benzer şekilde, bir forma yazdığınızda görünümünüz bir model nesnesini güncelleyebilir. Bu modeli dinleyen diğer her görünüm kendi oluşturma işlevini çağırır.
Bu, kodumuzu düzenli ve düzenli tutan endişelerin temiz bir şekilde ayrılmasını sağlar.
Render fonksiyonu
Oluşturma işlevinizi uygun gördüğünüz herhangi bir şekilde uygulayabilirsiniz. DOM'u manuel olarak güncellemek için buraya bazı jQuery koyabilirsiniz.
Ayrıca bir şablon derleyebilir ve kullanabilirsiniz. Bir şablon yalnızca ekleme noktaları olan bir dizedir. Bir JSON nesnesiyle birlikte bir derleme işlevine iletir ve DOM'nize ekleyebileceğiniz derlenmiş bir dizeyi geri alırsınız.
Koleksiyonları
Model listelerini saklayan koleksiyonlara da erişebilirsiniz, bu nedenle todoCollection todo modellerinin bir listesi olacaktır. Bir koleksiyon bir model kazandığında veya kaybettiğinde, sırasını değiştirdiğinde veya koleksiyondaki bir model güncellendiğinde, tüm koleksiyon bir olayı tetikler.
Bir görünüm bir koleksiyonu dinleyebilir ve koleksiyon her güncellendiğinde kendini güncelleyebilir.
Koleksiyonunuza sıralama ve filtre yöntemleri ekleyebilir ve örneğin kendisini otomatik olarak sıralamasını sağlayabilirsiniz.
Ve Hepsini Birleştirecek Olaylar
Uygulama bileşenleri mümkün olduğunca birbirinden ayrılır. Olayları kullanarak iletişim kurarlar, böylece bir shoppingCartView bir shoppingCart koleksiyonunu dinleyebilir ve sepet eklendiğinde kendini yeniden çizebilir.
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);
Tabii ki, diğer nesneler de alışveriş sepetini dinliyor olabilir ve toplamı güncellemek veya durumu yerel depolama alanına kaydetmek gibi başka şeyler de yapabilir.
- Görünümler Modelleri dinler ve model değiştiğinde oluşturulur.
- Görünümler koleksiyonları dinler ve koleksiyondaki bir öğe değiştiğinde bir liste (veya ızgara veya harita vb.) Oluşturur.
- Modeller, belki de bir form düzenlendiğinde durumu değiştirebilmeleri için Görünümleri dinler.
Nesnelerinizi bu şekilde ayırmak ve olayları kullanarak iletişim kurmak, düğümlere asla karışmayacağınız ve yeni bileşenler ve davranışlar eklemenin kolay olduğu anlamına gelir. Yeni bileşenlerinizin sistemde bulunan diğer nesneleri dinlemesi yeterlidir.
Sözleşmeler
Omurga için yazılan kod gevşek bir dizi konvansiyonu takip eder. DOM kodu bir Görünüm'e aittir. Koleksiyon kodu bir Koleksiyona aittir. İş mantığı bir modele gider. Kod tabanınızı alan başka bir geliştirici, çalışmakta olan yere vurabilir.
Sonuç olarak
Omurga, kodunuza yapı katan hafif bir kütüphanedir. Bileşenler ayrıştırılır ve olaylar aracılığıyla iletişim kurar, böylece bir karmaşaya neden olmazsınız. Yeni bir nesne oluşturarak ve mevcut nesnelerinizi uygun şekilde dinlemesini sağlayarak kod tabanınızı kolayca genişletebilirsiniz. Kodunuz daha temiz, daha hoş ve daha sürdürülebilir olacaktır.
Benim küçük kitabım
Omurga'yı o kadar çok sevdim ki, bu konuda küçük bir giriş kitabı yazdım. Çevrimiçi olarak buradan okuyabilirsiniz: http://nicholasjohnson.com/backbone-book/
Ayrıca malzemeyi kısa bir çevrimiçi kursa katıldım, burada bulabilirsiniz: http://www.forwardadvance.com/course/backbone . Kursu yaklaşık bir gün içinde tamamlayabilirsiniz.