Omurga ile çatlamak

Yıllar boyunca geliştiriciler, CakePHP, CodeIgniter ve hatta Ruby modellerini kullanarak MVC şablonuna dayanan PHP çerçevelerinden yararlanıyorlar. Ancak, bunun hakkında düşünürseniz, aynı şekilde bize yardımcı olacak pek çok JavaScript çerçevesi bulunmuyor.

Belki de JavaScript'in 'gerçek' programcılar tarafından sık sık gözden geçirilmesi, ancak JavaScript çerçevelerinin her zaman biraz geride kalmasıdır. Omurga bunu değiştirdi ve bu girişte göreceğiniz gibi, JavaScript kodunu ayırmak ve yapılandırılmış uygulamalar oluşturmamıza yardımcı olmak için MVC modelini kullanıyor. Aslında, MVC şablonunu ön uç gelişime teslim eder.

Omurga nedir?

Omurga, aynı içerik oluşturucudan gelen hafif bir JavaScript kütüphanesidir. CoffeeScript. Ancak, bir kütüphanenin jQuery ile karıştırmanıza izin vermeyin, Backbone, işlevsellik söz konusu olduğunda jQuery'den uzaklaşır. Omurga DOM öğelerini işlemez, bu yüzden birçok geliştirici jQuery ile el ele kullanır; DOM'u düzenleyen omurga düzenleme yapısı ve jQuery.

Hangi Omurganın gerçekten iyi yaptığı JavaScript uygulamalarınızın tedarik yapısıdır ve JSON ile çalıştığı için hemen hemen tüm ön uçlu şablonlama sistemlerine takılması kolaydır.

Omurgada MVC kalıbı

MVC, Modeller, Görünümler ve Koleksiyonlar anlamına gelir; ve omurgada, ayrıca Yönlendiriciler var.

Modeller

Omurgada bir model temsil eder ve varlıktır, örneğin, kullanıcılarla uğraşıyorsak, her kullanıcı bir Model olacaktır; Veritabanındaki bir satır gibi.

Backbone kullanarak basit bir model oluşturmak için şunu yazdık:

var user = Backbone.Model.extend({});

Bu kod teknik olarak doğru ancak Model'in herhangi bir işlevselliği olmayacaktı, bu nedenle bu Model için bir örnek eklememiz gerekir. Bu, örneklendiğinde ve bunu yapmak için biraz daha karmaşık kod kullanırdık:

User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain}  ');}, defaults: {isim:' John Doe ', yaş: 30,}}); var kullanıcı = yeni Kullanıcı; 

Yukarıdaki kodda, bu modelin yeni bir örneğini oluşturduğumuzda her başlatma fonksiyonu tetiklenecektir, tüm yaptığımızı başlattıktan sonra, Model için hiçbir veri iletilmediğinde bazı varsayılan değerler eklenir. Bunu yaptıktan sonra, Modelin bir örneğini oluşturmak için aşağıdaki kodu kullanırız:

var dave = new User({name:'Dave Smith', age:25});

Belirli bir özelliğin bir özelliğini almak için şunları kullanırız:

var name = dave.get('name');

Ve kullandığımız bir özelliği değiştirmek için:

dave.set({age:31});

Bu, Modellerin Backbone'da nasıl çalıştıklarıyla ilgili temel bilgiler. Elde edebileceğimiz çok daha fazla şey var, ancak umarız, kodun yapılandırılma potansiyelini zaten görebilirsiniz.

Koleksiyonları

Bir modelin bir kullanıcı gibi olduğunu söylediğimi hatırlıyor musun? Bu benzetmeyi takiben bir Koleksiyon, sahip olduğumuz tüm kullanıcılar. Koleksiyonlar, Modellerin temel setlerinde ve kullanıcı Modelimize zaten sahip olduğumuzdan, oradan bir koleksiyon oluşturacağız:

var Users = Backbone.Collection.extend({model: User});

Şu anda bu Koleksiyon boş, ancak bazı kullanıcılar oluşturmak ve bunları koleksiyona eklemek çok basit:

var barney = new User({ name: 'Barney Stinson', age: 30});var ted = new User({ name: 'Ted Mosby', age:32});var lily = new User({ name: 'Lily Aldrin', age: 29});var himym = new Users([barney, ted, lily]);

Şimdi, eğer biz, himym.models dosyasını seçersek, barney, ted ve zambak değerlerini elde ederiz.

Görünümler

Görünümler DOM'ın bir kısmı ile ilişkilendirilir, esasen uygulamanın verileri olan Modellere bağlı olacak şekilde tasarlanır ve bu verileri son kullanıcıya sunmaya hizmet eder.

Bir görünüm oluşturmak basittir:

UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});

Bu, bir görüşün temel yapısıdır. TagName, görünümü sarmak için kullanılacak elemandır, sınıf className kullanılarak ayarlanır ve son olarak bir render işlevi ekleriz, ancak bu son durumda işlev boştu. Sahneye eklemek için kullandığımız render işlevi, şöyle ki:

UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});

Oluşturma işlevindeki el öğesi, oluşturduğumuz sargıya ve kullanıcının yaşını div içine yerleştirdiğimiz innerHTML işlevini kullanır.

Bu örnekte herhangi bir şablon sistemi kullanılmamıştır, ancak isterseniz, Backbone ile birlikte gelen Underscore.js'den yararlanabilirsiniz.

Ayrıca bir olay dinleyicisini görüşümüze ekleyerek olayları dinleyebiliriz ve bu örnekte div için basit bir tıklama dinleyicisi oluşturacağız (bu kod, render işlevimizden hemen sonra gelir):

events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}

Yönlendiriciler

Omurga Yönlendiricileri, hashtag (#) kullanırken uygulamadaki URL'leri yönlendirmek için kullanılır. Bir yönlendirici tanımlamak için, her zaman en az bir rota ve en azından, istenen URL'ye ulaşıldığında çalışacak bir işlev eklemelisiniz:

var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();

Bu, / # kullanıcı karma ulaştığında bir eylem gerçekleştirecek son derece basit bir yönlendiricidir. Backbone.history.start () yöntem çağrısı, hashtag'leri izlemek için Backbone'u sorar, böylece sitenin çeşitli durumları yer işareti alabilir ve tarayıcıyla gezinilebilir.

Sonuç

Bu makalede, yalnızca JavaScript'de yapılandırılmış uygulamalar oluşturmak için kullanılabilecek Backbone'un temel bilgileri yer almaktadır. Bu kütüphanenin tüm potansiyelini görmek için Backbone ile birlikte kullanılacak şablon sistemini kontrol etmenizi tavsiye ederim. Umarım bu kısa tanıtımlar, MVC'nin ön uçta ne kadar yararlı olabileceğini size göstermiştir.

Backbone ile uygulamalar yaptınız mı? Ne tür bir uygulama oluşturmak istersiniz? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, iskele görüntüsü Shutterstock üzerinden.