İçerik
- Haydi başlayalım o zaman
- İlk modelimiz
- Bir resim koleksiyonu
- FlickrBombImage
- Görünüm Katmanı
- FlickrBombImageView
- Ev Streç
- Büyük web uygulamalarıyla da harika çalışıyor
- Ek kaynaklar
Hızlı bir şekilde küçük bir JavaScript aracı oluşturmak istiyorsanız, muhtemelen bir çerçeve kullanmayı düşünmüyorsunuzdur. Yeni bir çerçeve kurmak ve öğrenmek yerine bazı jQuery kodunu birlikte kesmek daha kolay, değil mi? Yanlış, Backbone.js, yazmaya alışkın olduğunuz normal eski JavaScript gibi görünen süper hafif bir yapıştırıcı çerçevesidir.
ZURB'de birçok statik prototip yapıyoruz, çünkü herhangi bir arka uç kodu yazmak zorunda kalmadan sayfalar arasında tıklayabilmeyi seviyoruz. Çoğunlukla, donuk gri yer tutucu görüntüleri bırakırdık veya bazen son taslakta nelerin gidebileceğini görselleştirmemize yardımcı olması için örnek görüntüler için Flickr'ı aramaya giderdik. Bu, sorunlarımızı çözmek için JavaScript yazmanın harika olacağına karar verdiğimiz sihirli bir Cuma gününe kadar. Doğrudan yer tutucu resimlerden Flickr'da fotoğrafları arayabilmek ve seçebilmek istedik. Buna FlickrBomb adını verirdik ve bu, Backbone.js kullanarak onu nasıl oluşturduğumuzun hikayesidir.
Okumadan önce FlickrBomb'a hızlıca göz atmanız şiddetle tavsiye edilir. "Bir tıklama bin kelimeye bedeldir" türü anlaşmalardan biridir. Devam edin, bekleyeceğiz.
Bugünlerde blokta çok sayıda JavaScript çerçevesi var, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Ancak bu proje için Backbone.js'yi birkaç farklı nedenden dolayı beğendik:
1. Hafiftir (aslında% 100 yağsızdır)
- ağırlık olarak, en son paketlenmiş sürüm yaklaşık 4,6 kb'dir
- kodda, 1.000 satırın biraz üzerinde olduğundan, aklınızı kaybetmeden dahili bileşenlere kadar bir yığın izini takip etmek çok da zor değil
2. JavaScript'e benziyor
- çünkü JavaScript, hepsi bu ve hepsi bu kadar
- Bu günlerde büyükannenizin bile bildiği jQuery'yi kullanıyor
3. Süper basit kalıcılık
- Kutudan çıktığı gibi verileri bir arka uca (REST aracılığıyla) devam ettirir, ancak tek bir eklentiyi bırakarak bunun yerine yerel depolamaya kaydeder
- kalıcılık API'sini soyutladığı için, yalnızca yerel depolama eklentisini kaldırarak REST arka uçta kalmasını sağlayabiliriz.
Haydi başlayalım o zaman
Backbone.js yalnızca JavaScript olduğu için tek yapmamız gereken, onu sayfaya Underscore.js ile birlikte eklemektir. jQuery, Backbone için zor bir bağımlılık değildir, ancak onu kullanacağımız için buraya dahil edeceğiz. Bir arka uç kurmakla uğraşmak istemediğimiz için yerel depolama eklentisini de bağlayacağız. Basit olması için dosyaları doğrudan buraya bağladığına dikkat edin, ancak kendi varlıklarınızı her zaman üretimde barındırmanız gerekir.
script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> / script> script src = "http://documentcloud.github.com/backbone/ backbone-min.js "> / script> script src =" http://documentcloud.github.com/underscore/underscore-min.js "> / script> script src =" https://raw.github.com/ jeromegn / Backbone.localStorage / master / backbone.localStorage-min.js "> / script>
Bu makaledeki aşağıdaki kodun tümü uygulamamıza özeldir, bu nedenle onu bir app.js dosyasına ekleyebiliriz veya istediğiniz şey buysa yalnızca satır içi olabilir. Backbone'dan sonra eklemeyi unutmayın. Backbone, uygulamamızın bazı kısımlarının soyutlanmasına, bunları hem kolay yeniden kullanım için modüler hem de diğerleri için daha okunaklı hale getirmeye olanak tanır. Bu soyutlamayı en iyi şekilde göstermek için, FlickrBomb'un tasarımını aşağıdan yukarıya, modellerden başlayıp görünümlerle biten açıklayacaktık.
İlk modelimiz
İlk görev, fotoğrafları Flickr'dan çekmektir. Omurgada bir FlickrImage modellemek yeterince basit, FlickrImage adında yeni bir model oluşturacağız ve farklı boyutlarda küçük parmaklar elde etmemize yardımcı olacak bazı yöntemler ekleyeceğiz.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('square');}, image_url: function ( size) {var size_code; switch (size) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 en uzun kenarda 'büyük ': size_code =' _b '; break; // En uzun kenarda 1024 varsayılan: size_code =' ';} "http: // farm" + this.get (' farm ') + ".static.flickr.com döndür / "+ this.get ('sunucu') +" / "+ this.get ('id') +" _ "+ this.get ('gizli') + size_code +" .webp ";}})
Backbone'daki modeller, diğer MVC çerçevelerindeki modeller gibi, kalıcı olabilen ve bunlarla ilişkili bazı işlevlere sahip nesnelerdir. Backbone modellerinin büyülü kısmı, olayları niteliklere bağlayabilmemizdir, böylece bu nitelik değiştiğinde görüşlerimizi bunu yansıtacak şekilde güncelleyebiliriz. Ama kendimizin biraz önüne geçiyoruz.
Fotoğrafları Flickr'dan aldığımızda, tüm boyutlar için URL'ler oluşturmak için yeterli bilgi alacağız. Ancak bu derleme bize bırakıldı, bu nedenle bir boyut parametresi alan ve bir genel bağlantı döndüren .image_url () işlevini uyguladık. Bu bir omurga modeli olduğu için, modeldeki özniteliklere erişmek için this.get () kullanabiliriz. Bu modelle, bir Flickr görüntüsünün URL'sini almak için kodun başka bir yerinde aşağıdakileri yapabiliriz.
flickrImage.image_url ('büyük')
Oldukça kısa, değil mi? Bu model uygulamamıza özel olduğundan, tam boyutlu ve küçük resim boyutları için bazı sarmalayıcı işlevleri ekleyeceğiz.
Bir resim koleksiyonu
FlickrBomb, tek görüntülerle değil, görüntü koleksiyonlarıyla ilgilenir ve Backbone'un bunu modellemek için uygun bir yolu vardır. Uygun şekilde adlandırılan Koleksiyon, Flickr görüntülerini tek bir yer tutucu için gruplamak için kullanacağımız şeydir.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, key: flickrbombAPIkey, page: 1, fetch: function (anahtar kelimeler, başarı) {var self = this; success = success || $ .noop; this.keywords = anahtar kelimeler || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', veri: {api_key: self.key, format: 'json', yöntem: 'flickr. photos.search ', tags: this.keywords, per_page: 9, sayfa: this.page, lisans: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', başarı: function (yanıt) {self.add (yanıt .photos.photo); success ();}});}, nextPage: function (callback) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: function (geri arama) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
Burada dikkat edilmesi gereken birkaç nokta var. İlk olarak, model özniteliği koleksiyonlara ne tür bir model topladığını söyler. Ayrıca daha sonra kullanmak üzere başlattığımız bazı özniteliklere sahibiz: anahtar Flickr API anahtarımızdır, flickrbombAPIkey'i kendi Flickr API anahtarınızın dizesiyle değiştirmek isteyeceksiniz. Bir Flickr API anahtarı edinmek ücretsiz ve kolaydır, sadece şu bağlantıyı izleyin: www.flickr.com/services/api/misc.api_keys.html. Sayfa özniteliği, üzerinde bulunduğumuz Flickr fotoğraflarının geçerli sayfasıdır.
Buradaki en büyük yöntem, fotoğrafları Flickr API'sinden çekmenin ayrıntılarını özetleyen .fetch () 'dir. Alanlar arası isteklerle ilgili sorunları önlemek için hem Flickr API'nin hem de jQuery'nin desteklediği JSONP kullanıyoruz. API'ye aktardığımız diğer parametreler kendi kendini açıklayıcı olmalıdır. Burada çağrılan Omurga fonksiyonları özel ilgi çekicidir. Başarı geri çağrısında, bir dizi model özniteliklerini alan, bu özniteliklerden model örnekleri oluşturan ve ardından bunları koleksiyona ekleyen .add () işlevini kullanıyoruz.
.NextPage () ve .prevPage () işlevleri öncelikle görüntülemek istediğimiz sayfayı değiştirir,
mevcut tüm modelleri kaldırmak için collection işlevini .remove () kullanın.
koleksiyonu ve ardından geçerli sayfanın fotoğraflarını almak için getir çağrısı yapın (yalnızca
değişti).
FlickrBombImage
Geriye doğru giderken, FlickrImages koleksiyonundan ve seçilen geçerli FlickrImage'dan oluşan yer tutucu görüntüyü temsil edecek bir modele daha ihtiyacımız var. Bu modele FlickrBombImage adını vereceğiz.
var localStorage = (supports_local_storage ())? new Store ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new FlickrImages (); this.flickrImages.fetch (this.get ('anahtar kelimeler'), this.loadFirstImage); this.set (id: this.get ("id")); this.bind ('change: src', this.changeSrc) ;}, changeSrc: function () {this.save ();}, loadFirstImage: function () {if (this.get ('src') === undefined) {this.set ({src: this.flickrImages. ilk (). image_url ()});}}});
Bu model, sayfa yüklemeleri arasında o anda seçili olan görüntüyü takip etmekten sorumlu olduğundan, hangi yerel depolama deposunu kullanacağını bilmesi gerekir.İlk satır, yerel depolama için destek olmasını sağlayacak ve ardından seçilen görüntüyü sürdürmek için kullanacağımız mağazayı oluşturacaktır.
Omurga, modelin bir örneği oluşturulduğunda çağrılacak bir .initialize () işlevi tanımlamamıza izin verir. Bu işlevi FlickrBombImage'da FlickrImages koleksiyonunun yeni bir örneğini oluşturmak, bu görüntü için kullanılacak anahtar sözcükleri iletmek ve ardından görüntüleri Flickr'dan almak için kullanırız.
.LoadFirstImage () işlevi, görüntüler Flickr'dan yüklendiğinde çalıştırılacak bir geri arama olarak geçirildi. Muhtemelen tahmin edebileceğiniz gibi, bu işlev mevcut görüntüyü Flickr koleksiyonundaki ilk görüntü olarak ayarlar. Mevcut görüntü önceden ayarlanmışsa bunu yapmaz.
Bu modelin src özniteliği değiştiğinde .changeSrc () işlevimizi ateşlemek için Omurga’nın öznitelik geri aramalarını da kullanacağız. Bu geri çağırmanın yaptığı tek şey, modelin özniteliklerini hangi mağaza katmanı uygulanmış olursa olsun (bizim durumumuzda localstore) sürdüren bir Backbone model işlevi olan .save () çağrısıdır. Bu şekilde, seçilen görüntü her değiştiğinde, hemen saklanır.
Görünüm Katmanı
Artık tüm arka uç (yani, ön uç arka uç) kodunu yazdığımıza göre, Görünümleri bir araya getirebiliriz. Backbone'daki görünümler, diğer geleneksel MVC çerçevelerindeki görünümlerden biraz farklıdır. Bir görünüm tipik olarak yalnızca sunumla ilgiliyken, bir Omurga Görünümü de davranıştan sorumludur. Bu, Görünümünüzün yalnızca bir şeyin nasıl göründüğünü değil, aynı zamanda etkileşime girdiğinde ne yapması gerektiğini de tanımladığı anlamına gelir.
Bir Görünüm genellikle (ancak her zaman değil) bazı verilere bağlıdır ve bu verilerden sunum işaretlemesi oluşturmak için üç aşamadan geçer:
1. View nesnesi başlatılır ve boş bir eleman oluşturulur.
2. Oluşturma işlevi çağrılır ve görünüm için işaretleme, önceki adımda oluşturulan öğeye eklenerek oluşturulur.
3. Öğe, DOM'a eklenir.
Bu, bazı işaretlemeler oluşturmak için çok çalışma gibi görünebilir ve henüz Görünüm'ün davranış kısmına bile gelmedik, ancak bu önemli ve işte nedeni. DOM'daki öğeleri her değiştirdiğinizde, tarayıcı yeniden akışı adı verilen bir şeyi tetiklersiniz. Yeniden akış, tarayıcının sayfadaki her şeyin nasıl konumlandırıldığını yeniden hesaplamasıdır. Tarayıcı yeniden akışları, çok kısa bir aralıkta tetiklenen bir sürükleme veya yeniden boyutlandırma olayında çağrılırsa performans açısından kötü olabilir, ancak daha da kötüsü, özensiz görünürler. Karmaşık sayfa manipülasyonuyla, aslında sayfaya eklenen öğeleri ve etkilenen öğelerin yeniden konumlandırıldığını görebilirsiniz. Backbone’un başlatma, oluşturma ve ekleme modelini takiben, tek bir yeniden akış garanti edersiniz ve sayfadaki değişiklikler, öğe işlemenin karmaşıklığından bağımsız olarak algısal olarak anlık olacaktır.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), initialize: function (options) {_.bindAll (this,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src'] .replace ('flickr: //', ''); this. $ el = $ (this.el); this.image = new FlickrBombImage ({anahtar kelimeler: anahtar kelimeler, id: seçenekler. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, olaylar: { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "tıklayın .flickrbombFlyout a.prev": "prevFlickrPhotos"}, render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); bunu döndür;}, ...});
Bu görünümün işlevleri kısalık için atlanmıştır, kaynak kodun tamamı GitHub'da mevcuttur: github.com/zurb/flickrbomb
Görünümün üst kısmında, Omurgaya özgü birkaç özelliğimiz var. tagName ve className, bu Görünümün öğesine uygulanacak etiketi ve sınıfı tanımlamak için kullanılır. View yaratmanın birinci adımının bir nesne yaratmak olduğunu ve bu yaratım Backbone tarafından gerçekleştirildiğinden, elementi ve sınıfı belirlememiz gerektiğini unutmayın. Backbone'un makul varsayılanlara sahip olduğuna dikkat edin; Bu özellikleri atlarsak, varsayılan olarak bir div kullanılır ve siz bir sınıf belirtmediğiniz sürece hiçbir sınıf uygulanmaz.
Şablon özniteliği bir kuraldır, ancak zorunlu değildir. Burada, bu görünüm için işaretlememizi oluşturmak üzere kullanacağımız JavaScript şablon işlevini belirtmek için kullanıyoruz. Underscore.js'de bulunan _.template () işlevini kullanıyoruz, ancak tercih ettiğiniz şablon oluşturma motorunu kullanabilirsiniz, sizi yargılamayacağız.
.İnitialize () işlevimizde, anahtar sözcük dizesini görüntü etiketinden çıkarıyoruz ve ardından bu anahtar sözcükleri kullanarak bir FlickrBombImage modeli oluşturuyoruz. Ayrıca, FlickrImages koleksiyonuna bir FlickrImage eklendiğinde çalıştırılacak .addImage () işlevini de bağlarız. Bu işlev, yeni eklenen FlickrImage'ı resim seçici açılır penceremize ekleyecektir. Son ve en önemli satır, o anda seçili olan FlickrImage değiştirildiğinde .updateSrc () işlevini ateşlenecek şekilde bağlamaktır. Modelde mevcut görüntü değiştirildiğinde, bu işlev çalışır, görüntü öğesinin src özniteliğini günceller ve CSS, görüntüyü kullanıcı tarafından belirtilen görüntü boyutlarına sığacak şekilde yeniden boyutlandırır ve kırpar.
olaylar: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "tıklayın .flickrbombFlyout a.prev": "prevFlickrPhotos "}
.İnitialize () 'yi takiben, View'un davranış kısmına sahibiz. Backbone, bir olay nesnesi kullanarak olayları bağlamak için uygun bir yol sağlar. Olaylar nesnesi, View öğesine gerçek bağlamayı yapmak için jQuery .delegate () yöntemini kullanır, böylece görünüm içindeki öğeye ne tür bir değişiklik yaparsanız yapın, tüm bağlı olaylarınız çalışmaya devam eder. Tıpkı jQuery .live () gibi çalışır, ancak olayları tüm belgeye bağlamak yerine, bunları herhangi bir öğe kapsamında bağlayabilirsiniz. Olaylar nesnesindeki her girişin anahtarı olay ve seçiciden oluşur; değer, o olaya bağlanması gereken işlevi belirtir. .Delegate () işlevinin submit gibi bazı olaylarla çalışmadığını unutmayın, desteklenen olayların tam listesi için jQuery .live () belgelerine bakın.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); bunu iade et;}
Son olarak, işaretlememizi oluşturmaktan ve View öğesine View işaretlemesi eklenene kadar gerçekleştirilemeyecek herhangi bir ek işi yapmaktan sorumlu olan .render () işlevine sahibiz. Şablonumuzu oluşturduktan sonra, FlickrBombImage'da .fetch () 'i çağırmamız gerekir. .fetch (), modelin en son kopyasını kalıcılık katmanından alan bir Backbone işlevidir. Bu modeli daha önce kaydetmiş olsaydık, .fetch () bu verileri şimdi alırdı. Görüntü getirildikten sonra, doğru şekilde konumlandırmak için yeniden boyutlandırmayı çağırmamız gerekir.
Ev Streç
Tüm parçalar yerindeyken, şimdi yapmamız gereken tek şey sayfadaki yer tutucu görüntüleri bulmak ve bunları işlenmiş FlickrBombImage görünümleriyle değiştirmek.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});
Bu küçük kesicinin, değiştireceği yer tutucu görüntüleri bulabilmesini sağlamak için sayfanın altında veya belgeye hazır bir geri aramada çalıştırılması gerekir. Flickr'dan gelen görüntülerle doldurulması gerektiğini belirtmek için bir görüntü etiketinin src özniteliğinde flickr: // [KEYWORD] belirtme kuralını kullanırız. Eşleşen src özniteliğine sahip görüntü öğelerini buluruz, yeni bir FlickrBombImageView oluştururuz ve ardından görüntüyü bizimkiyle değiştiririz. Orijinal görüntünün bir kopyasını alıp FlickrBombView'ımıza iletiyoruz, böylece öğede belirtilmiş olabilecek bazı ek yapılandırma seçeneklerini çekebiliriz.
Tüm bu sıkı çalışmanın sonucu, kitaplığı kullanan kişiler için çok basit bir API'dir. Sadece resim etiketlerini flickr: // kuralını kullanarak tanımlayabilir, FlickrBomb kodunu sayfalarının altına bırakabilir ve bam, Flickr'dan yer tutucu resimleri edinebilirler.
Büyük web uygulamalarıyla da harika çalışıyor
Notable adında, istemci tarafında içerik oluşturma endişesi olmadan yazılmış büyük bir web uygulamamız var. İçerik istemci tarafı oluşturarak uygulama turbo bölümlerini şarj etmek istediğimizde Backbone'u seçtik. Sebepler aynıydı: kodu düzenli tutmaya yardımcı olacak hafif bir çerçeve istedik, ancak bizi tüm uygulamayı yeniden düşünmeye zorlamadık.
Değişiklikleri bu yılın başlarında büyük bir başarıyla başlattık ve o zamandan beri Backbones'u övüyoruz.
Ek kaynaklar
Backbone'da bu makalede anlattığımdan çok daha fazlası var, başlangıçlar için MVC'nin (model görünüm denetleyicisi) C (denetleyici) kısmı, aslında en son sürümde bir R (yönlendirici). Ve bunların tümü, hafif bir Cumartesi sabahı olan Backbone belgelerinde yer almaktadır:
documentcloud.github.com/backbone/
Daha geleneksel öğreticiler size göreyse, Backbone'da yazılmış bu yapılacaklar uygulamasının çok iyi belgelenmiş koduna bakın:
documentcloud.github.com/backbone/docs/todos.html
