Backbone.js ve jQuery

Backbone'un tüm üst düzey soyutlamaları işlediği söylenirken, jQuery veya benzeri kitaplıkların DOM ile çalıştığı, olayları normalleştirdiği vb.

Birisi bu ifadeyi herhangi bir basit pratik örnekle anlamama yardım edebilir mi?

Ayrıca Backbone, Knockout gibi MVC çerçevesinin önemli bir özelliği de modeli (verileri) ve görünümü senkronize tutmasıdır. Ancak bu, tüm uygulama genelinde değil, sayfa düzeyinde belirli görünüyor. Model / veri ve görünümü birden çok sayfada senkronize edebilir miyiz .. (bir tür küresel)

Backbone / Knockout, genellikle tek sayfalı uygulamalar için kullanılır. Dolayısıyla jQuery, herhangi bir web sayfasıyla kullanılabilen bir araç kutusu iken, Backbone belirli bir uygulama türü içindir ve bunun için kodunuzu düzenlemenize yardımcı olur. En azından deneyimlerime göre, tek sayfalık bir uygulama oluşturmadaki en büyük zorluklardan biri kodu temiz ve modüler tutmaktır ve omurga bu konuda büyük ölçüde yardımcı olur.

Tipik bir omurga uygulamasının özellikleri şunlardır:

• Esasen statik html sayfası, sunucuda hiçbir şey oluşturulmaz
• Sunucu, uygulama için içerik sağlayan bir json REST api gibi davranır
• Verileri görüntülemek için dom öğeleri, omurga görünümlerinde javascript ile oluşturulur, yardımcı olmak için jQuery ve çeşitli şablonlama kitaplıkları kullanılır.
• Sunucuyla ve uygulamanın farklı bölümleri arasındaki iletişim omurga modelleri aracılığıyla yapılır

Verileri birden çok sayfada senkronize tutma konusundaki sorunuzla ilgili olarak, içgüdüsel cevabım, birden fazla sayfaya ihtiyacınız olmadığıdır: kullanıcı sayfanın değiştiğini algılayabilir, url çubuğundaki adres pushState işlevi sayesinde değişir, ancak teknik olarak tüm uygulama tek sayfadır.

Bu tür bir yaklaşımın en büyük avantajları, sorunsuz bir kullanıcı deneyimi (sayfaları yeniden yükleme yok), json verileri dışındaki her şey statik içerik olduğundan iyi bir önbelleğe alma desteği, mobil hedefler için web uygulamasını phoneGap ile bir mobil uygulamaya dönüştürme olasılığı (çünkü json dışındaki her şey statiktir).

Açılış cümleniz aslında Backbone.js ve jQuery arasındaki farkların çok iyi bir ifadesiydi, bu yüzden biraz açalım.

Birincisi, iki kütüphane hiç rekabet içinde değil - ücretsiz.

Örnek olarak, işte jQuery ile yapacağım bazı şeyler:

• Animasyonlu slayt gösterileri
• İOS tarzı numara "döndürücü" gibi form denetimi geliştirmeleri
• Bir sınıf adına göre öğelerin görünürlüğünü değiştirme

Ve Backbone.js'de yapabileceğim bazı şeyler:

• Kullanıcının bir küçük resme tıkladığı ve kullanılan kamera, konum ve fotoğrafçının adı gibi bazı verilerle birlikte fotoğrafın daha büyük bir sürümünü görüntüleyebileceği bir fotoğraf albümü oluşturun
• Bir veri ızgarası sunan ve kullanıcının tek tek öğelere tıklayıp bunları bir formda güncellemesine olanak tanıyan bir ana / ayrıntı türü sayfa oluşturun.

jQuery mikro düzeyde mükemmeldir - sayfa öğelerini seçerek, tarayıcıların olayları işleme biçimindeki farklılıkları yumuşatır.

Backbone.js daha büyük resimdir. Verileri ve uygulama mantığını yönetmenize yardımcı olur. Yukarıdaki fotoğraf albümü örneğinde, Backbone birkaç yararlı yapı sunar: fotoğraflarla ilgili tüm verileri (bir model), albümdeki tüm fotoğrafların bir listesini (bir koleksiyon) ve koyacak bir yere sahip olacaksınız. Kullanıcı bir küçük resme (görünüm) tıkladığında ne olacağını belirleyen mantık. Omurga kontrolü veya uygulamasındaki ana parçalardır.

Backbone.js, uygulamanızın verilerinin ve mantığının sonuçlarını DOM'a dönüştürmeye yardımcı olmak için jQuery'den veya buna benzer bir şeyden yararlanır. Örneğin, Omurga uygulamanız için konteyner görevi görecek sayfadaki öğeyi seçmek için jQuery'yi kullanmak yaygındır. $(function () {});Omurga kontrolünüzün parçalarını çalıştırmak için jQuery'leri kullanmak da yaygındır . Muhtemelen form alanı doğrulama hata mesajlarını jQuery ile de görüntülersiniz.

JQuery'de kesinlikle büyük, karmaşık kullanıcı arayüzleri oluşturabilirsiniz. İşte sürdürdüğüm uygulamada birkaç tane var. Ancak bunlarla çalışmak zordur çünkü jQuery bir uygulamaya yapı sağlamak için tasarlanmamıştır. Özellikle, öğe gruplarının seçilmesi ve ardından bu öğeleri işleyen geri arama işlevlerinin iletilmesine dayanan jQuery API'si, büyük, karmaşık bir denetim veya uygulamada kullanmak için iyi bir model değildir. Sonunda çok sayıda iç içe geçmiş işlev elde edersiniz ve neler olduğunu görmek çok zordur.

Şu anda Backbone.js'de bu kontrollerden birini yeniden çalışıyorum. Son bir örnek olarak, her iki farklı kütüphanede aynı kontrol üzerinde çalışırken düşünce sürecimin nasıl farklılaştığının hızlı bir özetini burada bulabilirsiniz.

JQuery'de şunlar hakkında endişeliyim:

• liİstediğim öğe grubunu almak için doğru seçiciyi kullanıyor muyum?
• Bu Ajax çağrısı tamamlandığında bu değerler listesini yeniden doldurmam gerekir mi?
• Bu dizi değerlerini inputsayfadaki öğelere nasıl geri koyabilirim ?

Backbone'da daha çok şunlara odaklanıyorum:

• Bu özellik kümesini model öğemde doğrulamak için doğru mantık nedir?
• Kullanıcı Ekle düğmesini tıkladığında, koleksiyona hemen yeni bir öğe eklemeli miyim, yoksa tüm verileri doldurup "geçerli" olana kadar mı beklemeliyim?
• Koleksiyonumdaki bir öğe, silindikten hemen önce veya sonra öğe silindiğinde nasıl yanıt vermelidir?

jQuery nitty-cesur ayrıntıları ele alır ve Backbone daha üst düzeydir.

Kapanırken, Backbone.js örneklerini tartışırken "kontrol" ve "uygulama" kelimelerini kullandığımı fark edin. Backbone.js'nin yalnızca tek sayfalı uygulamalar için olduğu doğru değil. Yine de, Backbone.js'nin verileri işleyen ve birçok mantığı işleyen karmaşık uygulamalar oluşturmak için iyi olduğu doğrudur. Küçük ölçekli kullanıcı arayüzü öğeleri için kullanmak aptalca olurdu - empoze ettiği ekstra yapıya gerek yok.

Güncelleme: Birden çok sayfa konusunda, evet, Backbone verilerinizin kalıcı olması için güçlü bir mekanizma sağlar. Her modelin, savedeğişiklikleri sunucuda depolamak için bir AJAX çağrısı yürütecek bir yöntemi vardır. Yani, verilerinizi kaydettiğiniz sürece çok sayfalı bir uygulamaya sahip olabilirsiniz. Bu çok esnek bir model ve muhtemelen işte Backbone'u nasıl kullanacağız. Tek sayfalık bir uygulama oluşturmayı çok isterdim, ancak mevcut çok sayfalı uygulamamızda 10 yıllık çalışmamız var. Daha yoğun UI bileşenlerimizden bazılarını Backbone'da yeniden oluşturmayı, ardından kullanıcı farklı bir sayfaya geçmeden önce değişiklikleri sunucuyla senkronize etmeyi arıyoruz.

Birden fazla sayfada backbone.js kullanan insanları hiç duymadım. Neredeyse her zaman bir tür tek sayfalı uygulama.

Tek sayfanın birçok farklı modeli, görünümü ve durumu olabilir ve tam gelişmiş, güçlü bir uygulama ile sonuçlanabilir.

Java'da zaten sunucu tarafı şablon / görünüm oluşturmaya sahipseniz, backbone.js sizin için DEĞİLDİR. Backbone.js'den en iyi şekilde yararlanmak için, bu kodun bir kısmını ön uç javascript'te taşımanız veya çoğaltmanız gerekir.

Tek sayfalık bir uygulama yapmak istemiyorsanız (bu sadece sayfa yenilemeyen veya değiştirmeyen bir uygulama anlamına gelir, ancak url yine de değişebilir ve kullanıcıya çok sayfalı gibi görünebilir), o zaman tüm MVC'nizi açık tutabilirsiniz. sunucu ve omurgaya ihtiyacınız yok.

Düzenle:

Omurga yaptığı şey, normalde sunucuda işlenen bazı MVC öğelerini taşımak ve bunları istemciye taşımaktır. Çoğu kişi için bu, sunucuyu unutmak ve uygulamanızı tek sayfalık bir javascript uygulaması olarak yazmak anlamına gelir. Sunucu yalnızca bir JSON / REST verisi kaynağı haline gelir. Bunu yapmaya hazır değilseniz, backbone.js o kadar kullanışlı değildir.

Backbone bir MV * çerçevesidir, jQuery ise bir DOM araç takımıdır.

Bir MV * uygulamasının ana özellikleri yönlendirme, veri bağlama, şablonlar / görünümler, modeller ve veri erişimidir. Omurga jQuery'ye kısmen bağımlı olabilir.

jQuery, kapsamlı tarayıcı desteği ve canlı bir toplulukla DOM'u sorgulamak için sağlam bir API'dir. Olay işleme, ertelenmiş nesneler ve animasyonlarla birlikte gelir.

JQuery kullanarak basit olay bağlama

// When any <p> tag is clicked, we expect to see '<p> was clicked' in the   console.
$( "p" ).on( "click", function() {
console.log( "<p> was clicked" );
});