Kandungan
- Mari mulakan
- Model pertama kami
- Kumpulan gambar
- The FlickrBombImage
- Lapisan Pandangan
- The FlickrBombImageView
- Peregangan Rumah
- Berfungsi hebat dengan aplikasi web ol yang besar juga
- Sumber tambahan
Sekiranya anda ingin membuat alat JavaScript dengan cepat, anda mungkin tidak memikirkan menggunakan kerangka kerja. Lebih mudah untuk menggodam beberapa kod jQuery daripada memasang dan mempelajari kerangka baru, bukan? Salah, Backbone.js adalah rangka gam super ringan yang kelihatan seperti JavaScript lama biasa yang biasa anda tulis.
Kami melakukan banyak prototaip statik di sini di ZURB, kerana kami ingin dapat mengklik halaman tanpa perlu menulis kod backend. Selalunya, kami akan memasukkan gambar placeholder kelabu yang menjemukan, atau kadang-kadang kami mencari sampel gambar Flickr untuk membantu kami memvisualisasikan apa yang mungkin ada dalam draf akhir. Sehingga satu hari Jumaat yang ajaib, ketika kami memutuskan akan mengagumkan untuk menulis beberapa JavaScript untuk menyelesaikan masalah kami. Kami mahu dapat mencari dan memilih foto di Flickr, langsung dari gambar placeholder itu sendiri. Kami akan memanggilnya FlickrBomb, dan ini adalah kisah bagaimana kami membuatnya menggunakan Backbone.js.
Sangat disarankan agar anda melihat FlickrBomb dengan cepat sebelum membaca. Ini adalah salah satu jenis tawaran "satu klik bernilai seribu perkataan". Teruskan, kita akan tunggu.
Terdapat banyak kerangka kerja JavaScript di blok hari ini, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Tetapi kami menyukai Backbone.js untuk projek tertentu ini kerana beberapa sebab yang berbeza:
1. Ringan (100% bebas lemak sebenarnya)
- berat, dengan versi kemas terkini kira-kira 4.6kb
- dalam kod, hanya lebih dari 1,000 baris kod, tidak terlalu sukar untuk mengikuti jejak timbunan ke dalam tanpa kehilangan akal
2. Ia kelihatan seperti JavaScript
- kerana itu adalah JavaScript, itu saja dan itu sahaja
- ia menggunakan jQuery, yang bahkan nenek anda tahu hari ini
3. Ketekunan yang sangat sederhana
- di luar kotak data berterusan ke backend (melalui REST), tetapi dengan memasukkan satu plug-in, ia akan menyimpan ke penyimpanan tempatan sebagai gantinya
- kerana ia mengaburkan API kegigihan, kita dapat mengekalkannya menjadi backend REST dengan hanya membuang plugin storan tempatan
Mari mulakan
Kerana Backbone.js hanya JavaScript, yang perlu kita lakukan adalah menyertakannya bersama dengan Underscore.js di halaman. jQuery bukanlah pergantungan yang sukar untuk Backbone per se, tetapi kami akan menggunakannya sehingga kami akan memasukkannya ke sini. Kami juga akan menghubungkan plugin storan tempatan, kerana kami tidak ingin bersusah payah menyiapkan backend. Perhatikan bahawa secara langsung menghubungkan fail di sini untuk kesederhanaan, tetapi anda harus selalu menyimpan aset anda sendiri dalam pengeluaran.
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 "> / skrip>
Semua kod berikut dalam artikel ini khusus untuk aplikasi kami, jadi kami dapat memasukkannya ke dalam file app.js, atau hanya sebaris jika itu adalah perkara anda. Ingatlah untuk memasukkannya selepas Backbone. Backbone memungkinkan untuk mengaburkan sebahagian aplikasi kami, menjadikannya modular agar mudah digunakan semula dan lebih mudah dibaca oleh orang lain. Untuk menggambarkan abstraksi itu dengan sebaik-baiknya, akan menjelaskan reka bentuk FlickrBomb dari bawah ke atas, bermula dengan model, dan diakhiri dengan pandangan.
Model pertama kami
Tugas pertama yang harus ditangani ialah menarik foto dari Flickr. Memodelkan FlickrImage di tulang belakang cukup mudah, kami akan membuat model baru bernama FlickrImage, dan menambahkan beberapa kaedah untuk membantu kami mendapatkan ukuran yang berbeza.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium');}, thumb_url: function () {return this.image_url ('square');}, image_url: fungsi ( size) {var size_code; switch (size) {case 'square': size_code = '_s'; break; // case 75x75 'medium': size_code = '_z'; break; // 640 pada casing sisi terpanjang 'besar ': size_code =' _b '; break; // 1024 di sisi terpanjang lalai: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
Model dalam Backbone adalah objek yang dapat bertahan, dan mempunyai beberapa fungsi yang berkaitan dengannya, seperti model dalam kerangka MVC lain. Bahagian ajaib model Backbone adalah kita dapat mengikat peristiwa dengan atribut, sehingga apabila atribut itu berubah, kita dapat mengemas kini pandangan kita untuk mencerminkannya. Tetapi kita sedikit lebih maju daripada diri kita sendiri.
Apabila kami mengambil gambar dari Flickr, kami akan mendapat cukup maklumat untuk membuat URL untuk semua ukuran. Bagaimanapun, pemasangan itu terserah kepada kami, jadi kami menerapkan fungsi .image_url () yang mengambil parameter ukuran dan mengembalikan pautan awam. Kerana ini adalah model tulang belakang, kita dapat menggunakan this.get () untuk mengakses atribut pada model. Jadi dengan model ini, kita dapat melakukan perkara berikut di tempat lain dalam kod untuk mendapatkan URL gambar Flickr.
flickrImage.image_url ('besar')
Cukup ringkas, ya? Oleh kerana model ini khusus untuk aplikasi kami, kami akan menambahkan beberapa fungsi pembungkus untuk ukuran ukuran penuh dan gambar ibu jari.
Kumpulan gambar
FlickrBomb berkaitan dengan koleksi gambar, bukan satu gambar, dan Backbone mempunyai cara yang mudah untuk memodelkannya. Koleksi bernama tepat adalah apa yang akan kita gunakan untuk mengumpulkan gambar Flickr bersama-sama untuk satu tempat letak.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, key: flickrbombAPIkey, halaman: 1, fetch: function (kata kunci, kejayaan) {var diri = ini; kejayaan = kejayaan || $ .noop; this.keywords = kata kunci || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', data: {api_key: self.key, format: 'json', kaedah: 'flickr. photos.search ', tag: this.keywords, per_page: 9, page: this.page, license: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', kejayaan: function (respons) {self.add (respons .photos.photo); berjaya ();}});}, nextPage: function (callback) {this.page + = 1; this.remove (this.models); this.fetch (null, callback);}, prevPage: function (callback) {if (this.page> 1) {this.page - = 1;} this.remove (this.models); this.fetch (null, callback);}});
Terdapat beberapa perkara yang perlu diperhatikan di sini. Pertama, the model atribut memberitahu koleksi jenis model yang dikumpulkannya. Kami juga mempunyai beberapa atribut yang kami mulakan untuk digunakan kemudian: kunci adalah kunci API Flickr kami, anda ingin mengganti flickrbombAPIkey dengan rentetan kunci API Flickr anda sendiri. Mendapatkan kunci API Flickr adalah percuma dan mudah, ikuti pautan ini: www.flickr.com/services/api/misc.api_keys.html. Atribut halaman adalah halaman semasa foto Flickr yang kami buka.
Kaedah besar di sini adalah .fetch (), yang menyingkirkan butiran menarik foto dari Flickr API. Untuk mengelakkan masalah dengan permintaan merentas domain, kami menggunakan JSONP, yang disokong oleh Flickr API dan jQuery. Parameter lain yang kami sampaikan ke API harus cukup jelas. Yang menarik adalah fungsi Backbone yang dipanggil di sini. Dalam panggil balik kejayaan, kami menggunakan .add (), fungsi yang menggunakan array atribut model, membuat contoh model dari atribut tersebut, dan kemudian menambahkannya ke koleksi.
Fungsi .nextPage () dan .prevPage () terlebih dahulu mengubah halaman yang ingin kita paparkan,
gunakan fungsi pengumpulan .remove (), untuk membuang semua model yang ada dari
koleksi, dan kemudian panggil ambil untuk mendapatkan foto untuk halaman semasa (yang kami hanya
berubah).
The FlickrBombImage
Dengan cara membuat cadangan, kami memerlukan satu lagi model untuk mewakili gambar placeholder, yang terdiri daripada koleksi FlickrImages, dan FlickrImage terkini yang telah dipilih. Kami akan memanggil model ini sebagai FlickrBombImage.
var localStorage = (menyokong_local_storage ())? Kedai baru ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (this, 'loadFirstImage'); this.flickrImages = new FlickrImages (); this.flickrImages.fetch (this.get ('kata kunci'), 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). pertama (). image_url ()});}}});
Oleh kerana model ini bertanggungjawab untuk mengawasi gambar yang sedang dipilih di antara pemuatan halaman, ia perlu mengetahui apa yang akan digunakan kedai stor tempatan.Baris pertama akan memastikan ada sokongan untuk penyimpanan tempatan, dan kemudian membuat kedai yang akan kami gunakan untuk mengekalkan gambar yang dipilih.
Backbone memungkinkan kita untuk menentukan fungsi .initialize () yang akan dipanggil ketika contoh model dibuat. Kami menggunakan fungsi ini di FlickrBombImage untuk membuat contoh baru dari koleksi FlickrImages, menyampaikan kata kunci yang akan digunakan untuk gambar ini, dan kemudian mengambil gambar dari Flickr.
Fungsi .loadFirstImage () telah diteruskan sebagai panggilan balik untuk dijalankan apabila gambar telah dimuat dari Flickr. Seperti yang anda jangkakan, fungsi ini menetapkan gambar semasa menjadi yang pertama dalam koleksi dari Flickr. Ia tidak melakukan ini jika gambar semasa sudah ditetapkan.
Kami juga akan menggunakan panggilan balik atribut Backbone untuk mengaktifkan fungsi .changeSrc () apabila atribut src model ini berubah. Semua panggilan balik ini adalah panggilan .save (), fungsi model Backbone yang mengekalkan atribut model ke lapisan kedai apa pun yang telah dilaksanakan (di kedai tempatan kami). Dengan cara ini, setiap kali gambar yang dipilih diubah, gambar tersebut akan tetap ada.
Lapisan Pandangan
Sekarang kita telah menulis semua kod backend (baik, backend frontend), kita dapat mengumpulkan Views. Pandangan di Backbone sedikit berbeza daripada pandangan di kerangka kerja MVC tradisional yang lain. Walaupun pandangan biasanya hanya berkaitan dengan persembahan, Pandangan Tulang Belakang bertanggungjawab untuk tingkah laku juga. Ini bermaksud bahawa Pandangan anda bukan sahaja menentukan bagaimana sesuatu kelihatan, tetapi juga apa yang harus dilakukan ketika berinteraksi dengannya.
Pandangan biasanya (tetapi tidak selalu) berkaitan dengan beberapa data, dan melalui tiga fasa untuk menghasilkan markup persembahan dari data tersebut:
1. Objek View diinisialisasi, dan elemen kosong dibuat.
2. Fungsi render dipanggil, menghasilkan markup untuk pandangan dengan memasukkannya ke elemen yang dibuat pada langkah sebelumnya.
3. Elemen itu dilekatkan pada DOM.
Ini mungkin kelihatan seperti banyak kerja untuk menghasilkan beberapa markup, dan kita belum sampai ke bahagian tingkah laku Tampilan, tetapi penting, dan inilah sebabnya. Setiap kali anda mengubah elemen yang terdapat di DOM, anda mencetuskan sesuatu yang disebut reflow penyemak imbas. Reflow adalah penyemak imbas yang mengira semula bagaimana setiap perkara di halaman diletakkan. Reflow penyemak imbas boleh buruk untuk prestasi jika dipanggil dalam acara drag atau resize, yang berlaku pada selang waktu yang sangat singkat, tetapi lebih buruk lagi, mereka kelihatan ceroboh. Dengan manipulasi halaman yang rumit, anda benar-benar dapat melihat elemen ditambahkan ke halaman, dan mempengaruhi penentuan semula elemen. Mengikuti corak inisialisasi, rendering, dan lampiran Backbone, anda menjamin satu reflow tunggal, dan perubahan pada halaman akan dibuat secara seketika, tanpa mengira kerumitan manipulasi elemen.
The FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", kunci: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), inisialisasi: function (options) {_.bindAll (ini,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var kata kunci = pilihan. img.attr ('src') .replace ('flickr: //', ''); ini. $ el = $ (this.el); this.image = baru FlickrBombImage ({kata kunci: kata kunci, id: pilihan. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, peristiwa: { "click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos" render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); kembalikan ini;}, ...});
Fungsi paparan ini telah dihilangkan kerana singkatnya, kod sumber secara keseluruhan tersedia di GitHub: github.com/zurb/flickrbomb
Di bahagian atas Paparan, kami mempunyai beberapa atribut khusus Tulang Belakang. tagName dan className digunakan untuk menentukan tag dan kelas yang akan diterapkan pada elemen View ini. Ingat bahawa langkah pertama pembuatan View adalah membuat objek, dan kerana penciptaan itu dikendalikan oleh Backbone, kita perlu menentukan elemen dan kelas. Perhatikan bahawa Backbone mempunyai lalai yang masuk akal; jika kita menghilangkan atribut ini, div digunakan secara lalai, dan tidak ada kelas yang akan digunakan kecuali anda menentukannya.
Atribut templat adalah konvensyen, tetapi tidak diperlukan. Kami menggunakannya di sini untuk menentukan fungsi templat JavaScript yang akan kami gunakan untuk menghasilkan markup kami untuk paparan ini. Kami menggunakan fungsi _.template () yang termasuk dalam Underscore.js, tetapi anda boleh menggunakan mesin templat yang anda sukai, kami tidak akan menilai anda.
Dalam fungsi .initialize () kami mengeluarkan rentetan kata kunci dari tag gambar, dan kemudian membuat model FlickrBombImage menggunakan kata kunci tersebut. Kami juga mengikat fungsi .addImage () untuk dijalankan apabila FlickrImage ditambahkan ke koleksi FlickrImages. Fungsi ini akan menambahkan FlickrImage yang baru ditambahkan ke flyout pemilih gambar kami. Garis terakhir dan paling penting adalah mengikat fungsi .updateSrc () untuk dinyalakan apabila FlickrImage yang dipilih sekarang diubah. Apabila gambar saat ini diubah dalam model, fungsi ini akan berjalan, memperbarui atribut src elemen gambar, dan mengubah ukuran CSS dan memotong gambar agar sesuai dengan dimensi gambar yang ditentukan oleh pengguna.
acara: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}
Mengikuti. Inisialisasi () kita mempunyai bahagian tingkah laku Tampilan. Backbone menyediakan cara yang mudah untuk mengikat peristiwa menggunakan objek peristiwa. Objek peristiwa menggunakan kaedah jQuery .delegate () untuk melakukan pengikatan sebenar pada elemen Tampilan, sehingga tanpa mengira manipulasi yang anda lakukan terhadap elemen di dalam paparan, semua peristiwa terikat anda akan tetap berfungsi. Ia berfungsi seperti jQuery .live (), kecuali bahawa daripada mengikat peristiwa ke seluruh dokumen, anda boleh mengikatnya dalam ruang lingkup elemen apa pun. Kunci setiap entri dalam objek peristiwa terdiri dari peristiwa dan pemilih, nilai menunjukkan fungsi yang harus terikat pada peristiwa itu. Perhatikan bahawa .delegate () tidak berfungsi dengan beberapa acara seperti menghantar, lihat dokumentasi jQuery .live () untuk senarai lengkap peristiwa yang disokong.
render: function () {$ (this.el) .html (this.template ()); ini.image.fetch (); ini.saiz semula (); kembalikan ini;}
Terakhir, kami mempunyai fungsi .render () yang bertanggungjawab untuk membuat markup kami dan melakukan kerja tambahan yang tidak dapat dilakukan sehingga markup View ditambahkan ke elemen View. Selepas membuat templat kami, kami perlu memanggil .fetch () di FlickrBombImage kami. .fetch () adalah fungsi Backbone yang mendapat salinan model terbaru dari lapisan kegigihan. Sekiranya kita menyimpan model ini sebelumnya, .fetch () akan mengambil data itu sekarang. Setelah gambar diambil, kita perlu memanggil ukuran untuk meletakkannya dengan betul.
Peregangan Rumah
Dengan semua bahagian yang ada, yang perlu kita lakukan sekarang adalah mencari gambar placeholder di halaman dan menggantinya dengan paparan FlickrBombImage yang diberikan.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = baru FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});
Potongan kecil ini perlu dijalankan di bahagian bawah halaman, atau dalam panggilan balik siap dokumen, untuk memastikan ia dapat mencari gambar placeholder yang akan digantinya. Kami menggunakan konvensi menentukan flickr: // [KEYWORD] dalam atribut src dari tag gambar untuk menunjukkan bahawa ia harus diisi dengan gambar dari Flickr. Kami menjumpai elemen gambar dengan atribut src yang sepadan, membuat FlickrBombImageView baru, dan kemudian mengganti gambar dengan yang kami miliki. Kami mengambil salinan gambar asli dan menyebarkannya ke FlickrBombView kami, sehingga kami dapat menarik beberapa pilihan konfigurasi tambahan yang mungkin telah ditentukan pada elemen tersebut.
Hasil akhir dari semua kerja keras itu adalah API yang sangat mudah bagi orang yang menggunakan perpustakaan. Mereka hanya dapat menentukan tag gambar menggunakan konvensyen flickr: //, menjatuhkan kod FlickrBomb di bahagian bawah halaman mereka, dan bam, mereka mendapat gambar placeholder dari Flickr.
Berfungsi hebat dengan aplikasi web ol yang besar juga
Kami mempunyai aplikasi web besar bernama Notable, yang ditulis tanpa perhatian untuk menghasilkan kandungan dari sisi pelanggan. Semasa kami ingin membuat bahagian turbo aplikasi dibebankan dengan menghasilkan sisi pelanggan kandungan, kami memilih Backbone. Sebabnya sama: kami mahukan rangka kerja ringan untuk membantu menjaga kodnya tetap teratur, tetapi tidak memaksa kami memikirkan semula keseluruhan aplikasi.
Kami melancarkan perubahan pada awal tahun ini dengan kejayaan besar, dan sejak itu menyanyikan pujian Backbones.
Sumber tambahan
Terdapat banyak lagi untuk Backbone daripada yang saya bahas dalam artikel ini, bahagian C (pengawal) MVC (model view controller) untuk pemula, yang sebenarnya adalah R (penghala) dalam versi terbaru. Dan semua ini dibahas dalam dokumentasi Backbone, pagi Sabtu yang ringan berbunyi:
documentcloud.github.com/backbone/
Sekiranya tutorial yang lebih tradisional adalah perkara anda, maka periksa kod yang sangat didokumentasikan dari aplikasi todo ini yang ditulis dalam Backbone:
documentcloud.github.com/backbone/docs/todos.html
