Isi
- Mari kita mulai
- Model pertama kami
- Koleksi gambar
- FlickrBombImage
- Lapisan Tampilan
- FlickrBombImageView
- Peregangan Rumah
- Berfungsi bagus dengan aplikasi web lama juga
- Sumber daya tambahan
Jika Anda ingin membuat alat JavaScript kecil dengan cepat, Anda mungkin tidak berpikir untuk menggunakan kerangka kerja. Lebih mudah untuk meretas beberapa kode jQuery daripada menginstal dan mempelajari kerangka kerja baru, bukan? Salah, Backbone.js adalah kerangka kerja lem super ringan yang terlihat seperti JavaScript lama biasa yang biasa Anda tulis.
Kami melakukan banyak prototipe statis di ZURB, karena kami ingin dapat mengklik halaman tanpa harus menulis kode backend. Seringkali, kita akan memasukkan gambar placeholder abu-abu yang menjemukan, atau terkadang kita akan mencari Flickr untuk contoh gambar untuk membantu kita memvisualisasikan apa yang mungkin ada dalam draf akhir. Sampai suatu hari Jumat yang ajaib, ketika kami memutuskan akan sangat menyenangkan untuk menulis beberapa JavaScript untuk menyelesaikan masalah kami. Kami ingin dapat mencari dan memilih foto di Flickr, langsung dari gambar placeholder itu sendiri. Kami akan menyebutnya FlickrBomb, dan ini adalah kisah bagaimana kami membuatnya menggunakan Backbone.js.
Sangat disarankan agar Anda melihat sekilas FlickrBomb sebelum membaca. Ini adalah salah satu jenis transaksi "satu klik bernilai seribu kata". Silakan, kami tunggu.
Ada banyak framework JavaScript yang diblokir saat ini, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. Tetapi kami menyukai Backbone.js untuk proyek khusus ini karena beberapa alasan berbeda:
1. Ringan (faktanya 100% bebas lemak)
- beratnya, dengan versi terbaru yang dikemas sekitar 4.6kb
- dalam kode, menjadi lebih dari 1.000 baris kode, tidak terlalu sulit untuk mengikuti jejak tumpukan ke internal tanpa kehilangan akal
2. Sepertinya JavaScript
- karena ini JavaScript, itu saja dan itu saja
- itu menggunakan jQuery, yang bahkan nenek Anda tahu hari ini
3. Ketekunan yang super sederhana
- di luar kotak itu menyimpan data ke backend (melalui REST), tetapi dengan memasukkan satu plug-in itu akan menyimpan ke penyimpanan lokal sebagai gantinya
- karena itu mengabstraksi API persistensi, kita bisa membuatnya tetap ke backend REST hanya dengan menghapus plug-in penyimpanan lokal
Mari kita mulai
Karena Backbone.js hanyalah JavaScript, yang perlu kita lakukan adalah memasukkannya bersama dengan Underscore.js di halaman. jQuery bukanlah dependensi yang sulit untuk Backbone itu sendiri, tetapi kami akan menggunakannya jadi kami akan memasukkannya di sini. Kami juga akan menautkan plugin penyimpanan lokal, karena kami tidak ingin repot menyiapkan backend. Perhatikan bahwa file di sini secara langsung menautkan untuk kesederhanaan, tetapi Anda harus selalu menghosting aset Anda sendiri dalam produksi.
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>
Semua kode berikut dalam artikel ini khusus untuk aplikasi kita, jadi kita dapat memasukkannya ke dalam file app.js, atau hanya sebaris jika itu yang Anda inginkan. Ingatlah untuk memasukkannya setelah Backbone. Backbone memungkinkan untuk mengabstraksi bagian dari aplikasi kita, menjadikannya modular agar mudah digunakan kembali dan lebih mudah dibaca oleh orang lain. Untuk menggambarkan dengan baik abstraksi itu, kami akan menjelaskan desain FlickrBomb dari bawah ke atas, dimulai dengan model, dan diakhiri dengan tampilan.
Model pertama kami
Tugas pertama yang akan dilakukan adalah menarik foto-foto dari Flickr. Membuat model FlickrImage di backbone cukup sederhana, kita akan membuat model baru yang disebut FlickrImage, dan menambahkan beberapa metode untuk membantu kita mendapatkan ukuran jempol yang berbeda.
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 pada sisi terpanjang case 'large ': size_code =' _b '; break; // 1024 di sisi terpanjang default: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
Model di Backbone adalah objek yang dapat dipertahankan, dan memiliki beberapa fungsi yang terkait dengannya, seperti model dalam kerangka kerja MVC lainnya. Bagian ajaib dari model Backbone adalah kita bisa mengikat kejadian ke atribut, sehingga ketika atribut itu berubah, kita bisa memperbarui pandangan untuk mencerminkannya. Tapi kami sedikit terlalu maju dari diri kami sendiri.
Saat kami mengambil foto dari Flickr, kami akan mendapatkan informasi yang cukup untuk membuat URL untuk semua ukuran. Namun perakitan itu terserah kita, jadi kita mengimplementasikan fungsi .image_url () yang mengambil parameter ukuran dan mengembalikan tautan publik. Karena ini adalah model tulang punggung, kita dapat menggunakan this.get () untuk mengakses atribut pada model tersebut. Jadi dengan model ini, kita dapat melakukan hal berikut di tempat lain dalam kode untuk mendapatkan URL gambar Flickr.
flickrImage.image_url (’besar’)
Cukup ringkas, ya? Karena model ini khusus untuk aplikasi kita, kita akan menambahkan beberapa fungsi pembungkus untuk ukuran gambar ukuran penuh dan ukuran ibu jari.
Koleksi gambar
FlickrBomb berurusan dengan koleksi gambar, bukan gambar tunggal, dan Backbone memiliki cara mudah untuk memodelkannya. Collection yang diberi nama tepat inilah yang akan kita gunakan untuk mengelompokkan gambar Flickr bersama-sama untuk satu placeholder.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, key: flickrbombAPIkey, halaman: 1, fetch: function (keywords, success) {var self = this; success = success || $ .noop; this.keywords = keywords || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', data: {api_key: self.key, format: 'json', method: 'flickr. photos.search ', tags: this.keywords, per_page: 9, page: this.page, license: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', success: function (respon) {self.add (respon .photos.photo); success ();}});}, 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);}});
Ada beberapa hal yang perlu diperhatikan di sini. Pertama, model atribut memberi tahu koleksi jenis model apa yang dikumpulkannya. Kami juga memiliki beberapa atribut yang kami jalankan untuk digunakan nanti: kunci adalah kunci API Flickr kami, Anda akan ingin mengganti flickrbombAPIkey dengan string kunci API Flickr Anda sendiri. Mendapatkan kunci API Flickr gratis dan mudah, cukup ikuti tautan ini: www.flickr.com/services/api/misc.api_keys.html. Atribut halaman adalah halaman foto Flickr saat ini.
Metode besar di sini adalah .fetch (), yang mengabstraksi detail pengambilan foto dari Flickr API. Untuk menghindari masalah dengan permintaan lintas domain, kami menggunakan JSONP, yang didukung oleh Flickr API dan jQuery. Parameter lain yang kami teruskan ke API harus cukup jelas. Yang menarik adalah fungsi Backbone dipanggil di sini. Dalam callback sukses kami menggunakan .add (), fungsi yang mengambil larik atribut model, membuat contoh model dari atribut tersebut, dan kemudian menambahkannya ke koleksi.
Fungsi .nextPage () dan .prevPage () pertama-tama mengubah halaman yang ingin kita tampilkan,
gunakan fungsi collection .remove (), untuk menghapus semua model yang ada dari
koleksi, dan kemudian panggil ambil untuk mendapatkan foto untuk halaman saat ini (yang baru saja kita
berubah).
FlickrBombImage
Bekerja kembali, kita membutuhkan satu model lagi untuk mewakili gambar placeholder, yang akan terdiri dari kumpulan FlickrImages, dan FlickrImage saat ini yang telah dipilih. Kami akan menyebut model ini FlickrBombImage.
var localStorage = (support_local_storage ())? Toko baru ("flickrBombImages"): null; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, inisialisasi: function () {_.bindAll (ini, 'loadFirstImage'); this.flickrImages = new FlickrImages (); this.flickrImages.fetch (this.get ('keywords'), 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 ()});}}});
Karena model ini bertanggung jawab untuk melacak gambar yang saat ini dipilih di antara pemuatan halaman, model ini perlu mengetahui penyimpanan penyimpanan lokal apa yang akan digunakan.Baris pertama akan memastikan ada dukungan untuk penyimpanan lokal, dan kemudian membuat toko yang akan kita gunakan untuk menyimpan gambar yang dipilih.
Backbone memungkinkan kita untuk mendefinisikan fungsi .initialize () yang akan dipanggil ketika sebuah instance model dibuat. Kami menggunakan fungsi ini di FlickrBombImage untuk membuat contoh baru dari koleksi FlickrImages, meneruskan kata kunci yang akan digunakan untuk gambar ini, dan kemudian mengambil gambar dari Flickr.
Fungsi .loadFirstImage () telah diteruskan sebagai callback untuk dijalankan ketika gambar telah dimuat dari Flickr. Seperti yang mungkin bisa Anda tebak, fungsi ini menyetel gambar saat ini menjadi yang pertama dalam koleksi dari Flickr. Ini tidak melakukan ini jika gambar saat ini telah disetel.
Kami juga akan menggunakan callback atribut Backbone untuk mengaktifkan fungsi .changeSrc () kami saat atribut src dari model ini berubah. Semua callback ini lakukan adalah memanggil .save (), fungsi model Backbone yang mempertahankan atribut model ke lapisan penyimpanan apa pun yang telah diterapkan (dalam kasus kami localstore). Dengan cara ini, setiap kali gambar yang dipilih diubah, gambar tersebut segera dipertahankan.
Lapisan Tampilan
Sekarang setelah kita mendapatkan semua kode backend (well, frontend backend) tertulis, kita dapat mengumpulkan Views. Tampilan di Backbone sedikit berbeda dari tampilan di kerangka kerja MVC tradisional lainnya. Meskipun tampilan biasanya hanya berkaitan dengan presentasi, Tampilan Tulang Belakang juga bertanggung jawab atas perilaku. Artinya, View Anda tidak hanya menentukan bagaimana sesuatu terlihat, tetapi juga apa yang harus dilakukannya saat berinteraksi dengannya.
Tampilan umumnya (tetapi tidak selalu) terikat dengan beberapa data, dan melewati tiga fase untuk menghasilkan markup presentasi dari data tersebut:
1. Objek View diinisialisasi, dan elemen kosong dibuat.
2. Fungsi render dipanggil, menghasilkan markup untuk tampilan dengan memasukkannya ke dalam elemen yang dibuat pada langkah sebelumnya.
3. Elemen dilampirkan ke DOM.
Ini mungkin tampak seperti banyak pekerjaan untuk menghasilkan beberapa markup, dan kami bahkan belum sampai ke bagian perilaku Tampilan, tapi ini penting, dan inilah alasannya. Setiap kali Anda memodifikasi elemen yang ada di DOM, Anda memicu sesuatu yang disebut perubahan posisi browser. Alur ulang adalah browser yang menghitung ulang posisi setiap hal di halaman. Alur ulang browser bisa berdampak buruk untuk kinerja jika dipanggil dalam peristiwa seret atau pengubahan ukuran, yang dijalankan pada interval yang sangat singkat, tetapi lebih buruk lagi, terlihat ceroboh. Dengan manipulasi halaman yang kompleks, Anda benar-benar dapat melihat elemen yang ditambahkan ke halaman, dan mengubah posisi elemen. Mengikuti pola Backbone dalam menginisialisasi, merender, dan melampirkan, Anda menjamin alur ulang tunggal, dan perubahan pada halaman akan terlihat seketika, terlepas dari kerumitan manipulasi elemen.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), inisialisasi: function (options) {_.bindAll (ini,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var keywords = options. img.attr ('src') .replace ('flickr: //', ''); ini. $ el = $ (this.el); this.image = new FlickrBombImage ({keywords: keywords, id: options. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('change: src', this.updateSrc);}, peristiwa: { "klik .setupIcon": "clickSetup", "klik .flickrbombFlyout a.photo": "selectImage", "klik .flickrbombFlyout a.next": "nextFlickrPhotos", "klik .flickrbombFlyout a.prev": "prevFlickrPhotos"}, render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); kembalikan ini;}, ...});
Fungsi tampilan ini telah dihilangkan agar singkat, kode sumber secara keseluruhan tersedia di GitHub: github.com/zurb/flickrbomb
Di bagian atas Tampilan, kami memiliki beberapa atribut khusus Backbone. tagName dan className digunakan untuk menentukan tag dan kelas yang akan diterapkan ke elemen Tampilan ini. Ingat bahwa langkah pertama pembuatan View adalah membuat objek, dan karena pembuatan itu ditangani oleh Backbone, kita perlu menentukan elemen dan kelasnya. Perhatikan bahwa Backbone memiliki default yang masuk akal; jika kita menghilangkan atribut ini, div digunakan secara default, dan tidak ada kelas yang akan diterapkan kecuali Anda menentukannya.
Atribut template adalah konvensi, tapi tidak wajib. Kami menggunakannya di sini untuk menentukan fungsi template JavaScript yang akan kami gunakan untuk menghasilkan markup kami untuk tampilan ini. Kami menggunakan fungsi _.template () yang termasuk dalam Underscore.js, tetapi Anda dapat menggunakan mesin templat mana yang Anda sukai, kami tidak akan menilai Anda.
Dalam fungsi .initialize () kami menarik string kata kunci dari tag gambar, dan kemudian membuat model FlickrBombImage menggunakan kata kunci tersebut. Kami juga mengikat fungsi .addImage () untuk dijalankan saat FlickrImage ditambahkan ke koleksi FlickrImages. Fungsi ini akan menambahkan FlickrImage yang baru ditambahkan ke flyout pemilih gambar kita. Baris terakhir dan terpenting adalah mengikat fungsi .updateSrc () untuk diaktifkan saat FlickrImage yang saat ini dipilih diubah. Ketika gambar saat ini diubah dalam model, fungsi ini akan berjalan, memperbarui atribut src dari elemen gambar, dan CSS mengubah ukuran dan memotong gambar agar sesuai dengan dimensi gambar yang ditentukan oleh pengguna.
peristiwa: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "klik .flickrbombFlyout a.next": "nextFlickrPhotos", "klik .flickrbombFlyout a.prev": "prevFlickrPhotos "}
Mengikuti .initialize () kita memiliki porsi perilaku View. Backbone menyediakan cara mudah untuk mengikat acara menggunakan objek acara. Objek peristiwa menggunakan metode jQuery .delegate () untuk melakukan pengikatan aktual ke elemen View, sehingga terlepas dari manipulasi apa yang Anda lakukan pada elemen di dalam tampilan, semua peristiwa terikat Anda akan tetap berfungsi. Ini berfungsi seperti jQuery .live (), kecuali bahwa alih-alih mengikat acara ke seluruh dokumen, Anda dapat mengikatnya dalam cakupan elemen apa pun. Kunci dari setiap entri di objek acara terdiri dari acara dan selektor, nilai menunjukkan fungsi yang harus terikat ke acara itu. Perhatikan bahwa .delegate () tidak berfungsi dengan beberapa acara seperti kirim, lihat dokumentasi jQuery .live () untuk daftar lengkap acara yang didukung.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); kembalikan ini;}
Terakhir, kami memiliki fungsi .render () yang bertanggung jawab untuk membuat markup kami dan melakukan pekerjaan tambahan yang tidak dapat dilakukan hingga markup View telah ditambahkan ke elemen View. Setelah kita merender template kita, kita perlu memanggil .fetch () di FlickrBombImage kita. .fetch () adalah fungsi Backbone yang mendapatkan salinan model terbaru dari lapisan persistensi. Jika kita telah menyimpan model ini sebelumnya, .fetch () akan mengambil data itu sekarang. Setelah gambar diambil, kita perlu memanggil resize untuk memposisikannya dengan benar.
Peregangan Rumah
Dengan semua bagian di tempatnya, yang perlu kita lakukan sekarang adalah menemukan gambar placeholder di halaman dan menggantinya dengan tampilan FlickrBombImage yang telah dirender.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = new FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});
Potongan kecil ini perlu dijalankan di bagian bawah halaman, atau dalam callback siap dokumen, untuk memastikan bahwa ia dapat menemukan gambar placeholder yang akan diganti. Kami menggunakan konvensi menentukan flickr: // [KEYWORD] di atribut src dari tag gambar untuk menunjukkan bahwa itu harus diisi dengan gambar dari Flickr. Kami menemukan elemen gambar dengan atribut src yang cocok, membuat FlickrBombImageView baru, dan kemudian mengganti gambar dengan milik kami. Kami mengambil salinan gambar asli dan meneruskannya ke FlickrBombView kami, sehingga kami dapat menarik beberapa opsi konfigurasi tambahan yang mungkin telah ditentukan pada elemen.
Hasil akhir dari semua kerja keras itu adalah API yang sangat sederhana untuk orang-orang yang menggunakan perpustakaan. Mereka dapat dengan mudah menentukan tag gambar menggunakan konvensi flickr: //, meletakkan kode FlickrBomb di bagian bawah halaman mereka, dan bam, mereka mendapatkan gambar placeholder dari Flickr.
Berfungsi bagus dengan aplikasi web lama juga
Kami memiliki aplikasi web besar bernama Notable, yang ditulis tanpa mempedulikan pembuatan konten dari sisi klien. Ketika kami ingin membuat bagian dari aplikasi turbo diisi dengan menghasilkan sisi klien konten, kami memilih Backbone. Alasannya sama: kami menginginkan kerangka kerja yang ringan untuk membantu menjaga kode tetap teratur, tetapi tidak memaksa kami untuk memikirkan kembali seluruh aplikasi.
Kami meluncurkan perubahan tersebut awal tahun ini dengan sukses besar, dan sejak itu terus menyanyikan pujian Backbones.
Sumber daya tambahan
Ada lebih banyak Backbone daripada yang saya bahas dalam artikel ini, bagian C (pengontrol) dari MVC (pengontrol tampilan model) sebagai permulaan, yang sebenarnya merupakan R (router) di versi terbaru. Dan semuanya tercakup dalam dokumentasi Backbone, Sabtu pagi yang ringan membaca:
documentcloud.github.com/backbone/
Jika Anda menyukai tutorial yang lebih tradisional, periksa kode yang terdokumentasi dengan sangat baik dari aplikasi rencana ini yang ditulis di Backbone:
documentcloud.github.com/backbone/docs/todos.html
