محتوا
- پس شروع کنیم
- اولین مدل ما
- مجموعه ای از تصاویر
- تصویر FlickrBombImage
- لایه نمایش
- FlickrBombImageView
- کشش خانگی
- با برنامه های وب بزرگ نیز عالی کار می کند
- منابع اضافی
اگر به دنبال ساختن سریع یک ابزار جاوا اسکریپت هستید ، احتمالاً به استفاده از یک چارچوب فکر نمی کنید. هک کردن بعضی از کد های jQuery راحت تر از نصب و یادگیری یک چارچوب جدید است ، درست است؟ Wrong، Backbone.js یک چارچوب بسیار سبک وزن برای چسب است که دقیقاً مانند جاوا اسکریپت معمولی قدیمی است که شما برای نوشتن استفاده می کنید.
ما نمونه های استاتیک زیادی را اینجا در ZURB انجام می دهیم ، زیرا دوست داریم بدون نیاز به نوشتن کد باطن ، صفحات را کلیک کنیم. غالباً ، تصاویر مکان یاب خاکستری مبهم را رها می کردیم ، یا گاهی اوقات به دنبال Flickr برای دیدن نمونه تصاویر می گشتیم تا به ما کمک کند تا آنچه را که در پیش نویس نهایی است ، تجسم کنیم. این یک جمعه جادویی است که تصمیم گرفتیم نوشتن جاوا اسکریپت برای حل مشکلات عالی باشد. ما می خواستیم مستقیماً از طریق تصاویر مکان یاب ، عکس ها را در Flickr جستجو و انتخاب کنیم. ما آن را FlickrBomb می نامیم و این داستان چگونگی ساخت آن با استفاده از Backbone.js است.
بسیار توصیه می شود که قبل از مطالعه سریع به FlickrBomb نگاهی بیندازید. این یکی از معاملات نوع "یک کلیک هزار کلمه است" است. برو جلو ، منتظر می مانیم
این روزها چارچوبهای JavaScript زیادی در بلوک وجود دارد ، SproutCore ، JavaScriptMVC ، Spine ، Sammy ، Knockout. اما به چند دلیل مختلف Backbone.js را برای این پروژه خاص دوست داشتیم:
1. سبک است (در واقع 100٪ بدون چربی)
- در وزن ، با آخرین نسخه بسته بندی شده حدود 4.6 کیلوبایت است
- در کد ، کمی بیش از 1000 خط کد ، دنبال کردن ردیابی پشته در داخل داخلی بدون از دست دادن ذهن بسیار دشوار نیست
2. به نظر می رسد JavaScript است
- چون جاوا اسکریپت است ، همین است و همه
- از jQuery استفاده می کند ، که حتی مادربزرگ شما این روزها می داند
3. پایداری فوق العاده ساده
- خارج از جعبه ، داده ها را باطل می کند (از طریق REST) ، اما با رها کردن یک پلاگین ، در حافظه محلی ذخیره می شود
- از آنجا که API ماندگاری را از بین می برد ، می توانیم فقط با حذف پلاگین ذخیره سازی محلی ، آن را به REST backend ادامه دهیم.
پس شروع کنیم
از آنجا که Backbone.js فقط JavaScript است ، تنها کاری که باید انجام دهیم این است که آن را به همراه Underscore.js در صفحه قرار دهیم. jQuery به خودی خود وابستگی سختی به ستون فقرات ندارد ، اما ما قصد داریم از آن استفاده کنیم بنابراین آن را در اینجا قرار خواهیم داد. ما همچنین می خواهیم افزونه ذخیره سازی محلی را به هم پیوند دهیم ، زیرا نمی خواهیم با ایجاد یک باطن مشکلی ایجاد کنیم. توجه داشته باشید که مستقیماً پرونده ها را به اینجا پیوند می داد ، اما شما همیشه باید در تولید دارایی های خود را میزبانی کنید.
اسکریپت 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>
همه کد های زیر در این مقاله مختص برنامه ما است ، بنابراین می توانیم آن را در یک فایل app.js قرار دهیم یا اگر مورد شماست فقط درون آن قرار دهیم. فقط یادتان باشد که بعد از Backbone آن را اضافه کنید. Backbone امکان انتزاع بخشهایی از برنامه ما را فراهم می کند ، تا آنها را هم به صورت مدولار برای استفاده مجدد آسان و هم برای دیگران قابل خواندن تر کند. برای بهتر نشان دادن این انتزاع ، قصد داشتیم طراحی FlickrBomb را از پایین به بالا توضیح دهیم ، ابتدا با مدل ها شروع می کنیم و با نماها خاتمه می یابیم.
اولین مدل ما
اولین کاری که باید برای حل آن انجام شود ، کشیدن عکس ها از Flickr است. مدل سازی FlickrImage در ستون فقرات به اندازه کافی ساده است ، ما یک مدل جدید به نام FlickrImage ایجاد خواهیم کرد و برخی از روش ها را برای کمک به گرفتن انگشت های مختلف اندازه اضافه می کنیم.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {return this.image_url ('medium')؛}، thumb_url: function () {return this.image_url ('مربع))؛}، image_url: function ( size) {var size_code؛ switch (size) {case 'square': size_code = '_s'؛ break؛ // 75x75 case 'medium': size_code = '_z'؛ break؛ // 640 در بلندترین ضلع کناری 'large ': size_code =' _b '؛ break؛ // 1024 در پیش فرض طولانی ترین سمت: size_code =' '؛} بازگشت "http: // farm" + this.get ("farm") + ".static.flickr.com / "+ this.get (" سرور ") +" / "+ this.get (" id ") +" _ "+ this.get (" مخفی ") + size_code +" .webp "؛}})
مدل ها در Backbone اشیایی هستند که می توانند ادامه یابند و برخی از توابع را با آنها مرتبط می کنند ، دقیقاً مانند مدل های دیگر چارچوب های MVC. قسمت جادویی مدل های Backbone این است که می توانیم رویدادها را به ویژگی ها متصل کنیم ، بنابراین وقتی این ویژگی تغییر می کند ، می توانیم دیدگاه های خود را به روز کنیم تا آنرا منعکس کنیم. اما ما کمی از خود جلوتر هستیم.
وقتی عکس ها را از فلیکر می کشیم ، می خواهیم اطلاعات کافی برای ایجاد URL برای همه اندازه ها بدست آوریم. اما این مجموعه به عهده ما است ، بنابراین ما تابع .image_url () را اجرا می کنیم که یک پارامتر اندازه را می گیرد و یک پیوند عمومی را برمی گرداند. از آنجا که این یک مدل ستون فقرات است ، بنابراین می توانیم از this.get () برای دسترسی به ویژگی های موجود در مدل استفاده کنیم. بنابراین با استفاده از این مدل می توان موارد زیر را در قسمت دیگری از کد انجام داد تا URL تصویر Flickr را بدست آورد.
flickrImage.image_url ('بزرگ')
خیلی خلاصه ، ها؟ از آنجا که این مدل خاص برنامه ما است ، برخی از توابع لفافه را برای اندازه تصویر بزرگ و بزرگ اضافه خواهیم کرد.
مجموعه ای از تصاویر
FlickrBomb با مجموعه ای از تصاویر ، نه تصاویر مجزا سروکار دارد و Backbone روش مناسبی برای مدل سازی این امر دارد. مجموعه مناسب نامگذاری شده همان چیزی است که ما برای گروه بندی تصاویر Flickr برای یک مکان یاب تنها از آن استفاده خواهیم کرد.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage، کلید: flickrbombAPIkey، صفحه: 1، واکشی: تابع (کلمات کلیدی، موفقیت) {var self = this؛ موفقیت = موفقیت || $ .noop؛ this.keywords = کلمات کلیدی || this.keywords؛ $ .ajax ({url: 'http://api.flickr.com/services/rest/'، data: {api_key: self.key، قالب: 'json'، روش: 'flickr. photos.search '، برچسب ها: this.keywords، per_page: 9، page: this.page، مجوز: flickrbombLicenseTypes}، dataType:' jsonp '، jsonp:' jsoncallback '، موفقیت: تابع (پاسخ) {self.add (پاسخ . عکس.عکس)؛ موفقیت ()؛}})؛}، nextPage: عملکرد (پاسخ) {this.page + = 1؛ this.remove (this.models)؛ this.fetch (null، callback)؛}، prevPage: عملکرد (پاسخ) {if (this.page> 1) {this.page - = 1؛} this.remove (this.models)؛ this.fetch (null، callback)؛}})؛
در اینجا باید چند مورد را یادداشت کنید. اول از همه ، مدل ویژگی به مجموعه ها می گوید که چه نوع مدلی را جمع آوری می کند. همچنین ویژگی هایی داریم که بعداً برای استفاده اولیه آنها را تنظیم کردیم: کلید کلید Flickr API ماست ، شما می خواهید flickrbombAPIkey را با رشته کلید API Flickr خود جایگزین کنید. دریافت کلید API فلیکر رایگان و آسان است ، فقط این پیوند را دنبال کنید: www.flickr.com/services/api/misc.api_keys.html. ویژگی صفحه صفحه فعلی عکسهای فلیکر است که در آن هستیم.
روش اصلی در اینجا .fetch () است که جزئیات کشیدن عکس ها از API فلیکر را خلاصه می کند. برای جلوگیری از مشکلات مربوط به درخواست های دامنه بین المللی ، ما از JSONP استفاده می کنیم که هم از Flickr API و هم از jQuery پشتیبانی می کند. پارامترهای دیگری که ما به API منتقل می کنیم باید خود توضیح دهند. از توابع Backbone در اینجا فراخوانی می شود. در callback موفقیت ما از .add () تابعی استفاده می کنیم که آرایه ای از ویژگی های مدل را می گیرد ، نمونه هایی از مدل را از آن ویژگی ها ایجاد می کند و سپس آنها را به مجموعه اضافه می کند.
توابع .nextPage () و .prevPage () ابتدا صفحه ای را که می خواهیم نمایش دهیم تغییر می دهد ،
برای حذف تمام مدلهای موجود از. از تابع collection .remove () استفاده کنید
برای دریافت عکسهای صفحه فعلی (که ما همین الان هستیم) و سپس با واکشی تماس بگیرید
تغییر کرد).
تصویر FlickrBombImage
با بازگشت به بالا ، به یک مدل دیگر برای نشان دادن تصویر مکان نگهدار نیاز داریم که متشکل از مجموعه ای از FlickrImages و FlickrImage فعلی انتخاب شده است. ما این مدل را FlickrBombImage می نامیم.
var localStorage = (از_ ذخیره_ محلی) پشتیبانی می کند؟ فروشگاه جدید ("flickrBombImages"): null؛ var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage ، مقداردهی اولیه: تابع () {_.bindAll (این ، "loadFirstImage") ؛ this.flickrImages = FlickrImages جدید ()؛ this.flickrImages.fetch (this.get ('کلمات کلیدی')، this.loadFirstImage)؛ this.set (id: this.get ("id")))؛ this.bind ('change: src'، this.changeSrc) ؛}، changeSrc: function () {this.save ()؛}، loadFirstImage: function () {if (this.get ('src') === تعریف نشده) {this.set ({src: this.flickrImages). first (). image_url ()})؛}}})؛
از آنجا که این مدل وظیفه پیگیری تصویر انتخاب شده در حال حاضر بین بارگذاری صفحات را دارد ، باید بداند از چه فروشگاه محلی برای استفاده استفاده می کند.خط اول اطمینان از پشتیبانی از localstorage را ایجاد می کند و سپس فروشگاهی را که برای ادامه تصویر انتخاب شده استفاده خواهیم کرد ایجاد می کنیم.
Backbone به ما این امکان را می دهد که یک تابع .initialize () را تعریف کنیم که هنگام ایجاد نمونه ای از مدل فراخوانی می شود. ما از این تابع در FlickrBombImage برای ایجاد نمونه جدیدی از مجموعه FlickrImages استفاده می کنیم ، کلمات کلیدی را که برای این تصویر استفاده می شود عبور می دهیم و سپس تصاویر را از Flickr واکشی می کنیم.
تابع (.loadFirstImage () به عنوان فراخوانی برای اجرا در هنگام بارگیری تصاویر از Flickr ارسال شده است. همانطور که احتمالاً حدس می زنید ، این عملکرد تصویر فعلی را به عنوان اولین تصویر مجموعه از Flickr تنظیم می کند. اگر تصویر کنونی تنظیم شده باشد این کار را انجام نمی دهد.
همچنین وقتی ویژگی src این مدل تغییر می کند ، برای فراخوانی عملکرد .changeSrc () ما نیز از فراخوانی ویژگی Backbone استفاده می کنیم. تمام این پاسخگویی فراخوانی .save () است ، یک عملکرد مدل Backbone که ویژگی های مدل را برای هر لایه ذخیره ای که اجرا شده است (در مورد محلی ما) ادامه می دهد. به این ترتیب ، هر زمان که تصویر انتخاب شده تغییر کند ، بلافاصله ادامه پیدا می کند.
لایه نمایش
اکنون که همه کد backend (خوب ، frontend backend) را نوشتیم ، می توانیم Views ها را کنار هم قرار دهیم. نماها در ستون فقرات کمی متفاوت از نمای در سایر چارچوب های سنتی MVC هستند. در حالی که یک نمای معمولاً فقط مربوط به ارائه است ، یک نمای ستون فقرات نیز مسئول رفتار است. این بدان معناست که نمای شما نه تنها چگونگی به نظر رسیدن چیزی را مشخص می کند ، بلکه همچنین در تعامل با آن چه کاری باید انجام دهد.
یک View معمولاً (اما نه همیشه) با برخی از داده ها مرتبط است و برای تولید نشانه گذاری ارائه از آن داده ها ، سه مرحله را طی می کند:
1. شی View نمایش اولیه می شود و یک عنصر خالی ایجاد می شود.
2. تابع رندر فراخوانی می شود و با قرار دادن آن در عنصر ایجاد شده در مرحله قبل ، علامت گذاری را برای نمای ایجاد می کند.
3. عنصر به DOM متصل است.
به نظر می رسد این کار برای تولید برخی از نشانه ها کار زیادی باشد ، و ما هنوز حتی به قسمت رفتار View نمی رسیم ، اما مهم است و به همین دلیل است. هر بار که عناصری را که در DOM هستند اصلاح می کنید ، چیزی به نام reflow مرورگر را فعال می کنید. Reflow مرورگر است که نحوه قرارگیری هر چیز در صفحه را دوباره محاسبه می کند. بازخوانی مجدد مرورگر اگر در یک رویداد کشیدن یا تغییر اندازه فراخوانی شود ، ممکن است برای عملکرد بد باشد که در یک بازه زمانی کوتاه روشن می شود ، اما بدتر از آن ، به نظر می رسد شلخته است. با دستکاری پیچیده صفحه ، در واقع می توانید عناصری را که به صفحه اضافه می شوند ، و تغییر مکان عناصر تأثیرگذار را مشاهده کنید. به دنبال الگوی Backbone از مقداردهی اولیه ، ارائه و ضمیمه کردن ، شما یک بار دیگر را تضمین می کنید و تغییرات صفحه بدون توجه به پیچیدگی دستکاری عناصر ، بصورت آنی انجام می شوند.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div"، className: "flickrbombContainer"، قفل: false، template: _.template ('div id = "٪ = this.image.id.replace (" "، "")٪> "... / div> ') ، مقداردهی اولیه: تابع (گزینه ها) {_.bindAll (این ،' addImage '،' updateSrc '،' setDimentions '،' updateDimentions ') ؛ کلمات کلیدی var = گزینه ها. img.attr ('src') .replace ('flickr: //'، '')؛ this. $ el = $ (this.el)؛ this.image = new FlickrBombImage ({کلمات کلیدی: کلمات کلیدی، شناسه: گزینه ها. img.attr ('id')})؛ this.image.flickrImages.bind ('add'، this.addImage)؛ this.image.bind ('change: src'، this.updateSrc)؛}، حوادث: { "کلیک کنید. setupIcon": "کلیک کنید تنظیم" ، "کلیک کنید .flickrbombFlyout a.photo": "selectImage" ، "کلیک کنید .flickrbombFlyout a.next": "nextFlickrPhotos" ، "کلیک کنید .flickrbombFlyout a.prev": "prevFlickrPhotos"} ، render: function () {$ (this.el) .html (this.template ())؛ this.image.fetch ()؛ this.resize ()؛ this؛}، ...})؛
توابع این نمایش برای اختصار حذف شده است ، کد منبع به طور کامل در GitHub موجود است: github.com/zurb/flickrbomb
در بالای View ، دو ویژگی خاص Backbone داریم. tagName و className برای تعریف برچسب و کلاس استفاده می شود که به این عنصر View اعمال می شود. به یاد داشته باشید که مرحله اول ایجاد ایجاد ایجاد یک شی است ، و از آنجا که این ساخت توسط Backbone اداره می شود ، باید عنصر و کلاس را مشخص کنیم. توجه داشته باشید که ستون فقرات دارای پیش فرض های معقول است. اگر این ویژگی ها را حذف کنیم ، یک div به طور پیش فرض استفاده می شود و هیچ کلاسی اعمال نمی شود مگر اینکه یکی را مشخص کنید.
ویژگی الگو یک قرارداد است ، اما لازم نیست. ما در اینجا از آن برای تعیین عملکرد الگوی JavaScript استفاده می کنیم که برای تولید نشانه گذاری خود برای این نمایش استفاده خواهیم کرد. ما از تابع _.template () موجود در Underscore.js استفاده می کنیم ، اما شما می توانید از هر موتور وسوسه انگیزی که ترجیح می دهید استفاده کنید ، شما را قضاوت نمی کنیم.
در تابع .initialize () رشته کلمات کلیدی را از برچسب تصویر بیرون می کشیم و سپس با استفاده از آن کلمات کلیدی یک مدل FlickrBombImage ایجاد می کنیم. ما همچنین تابع .addImage () را ملزم می کنیم که وقتی FlickrImage به مجموعه FlickrImages اضافه می شود ، اجرا شود. این عملکرد FlickrImage را که به تازگی به آن افزوده شده است به روند انتخاب تصویر ما اضافه می کند. آخرین و مهمترین خط اتصال تابع .updateSrc () برای روشن شدن هنگام تغییر FlickrImage در حال حاضر انتخاب شده است. هنگامی که تصویر فعلی در مدل تغییر می کند ، این عملکرد اجرا می شود ، ویژگی src عنصر تصویر را به روز می کند و CSS تصویر را اندازه می گیرد و برش می دهد تا در ابعاد تصویر مشخص شده توسط کاربر قرار گیرد.
events: {"click .setupIcon": "clickSetup"، "click .flickrbombFlyout a.photo": "selectImage"، "click .flickrbombFlyout a.next": "nextFlickrPhotos"، "click .flickrbombFlyout a.prev": "prevFlickrPhotos" کلیک کنید. "}
در زیر .initialize () بخش رفتاری از View را داریم. Backbone یک روش مناسب برای اتصال رویدادها با استفاده از یک شی رویدادها فراهم می کند. شی رویدادها از روش jQuery .delegate () برای اتصال واقعی عنصر View استفاده می کند ، بنابراین بدون در نظر گرفتن اینکه چه دستکاری را با عنصر داخل نما انجام می دهید ، همه رویدادهای مقید شما همچنان کار خواهند کرد. این دقیقاً مانند jQuery .live () عمل می کند ، با این تفاوت که به جای اتصال رویدادها به کل سند ، می توانید آنها را در محدوده هر عنصر متصل کنید. کلید هر ورودی در شی رویدادها از رویداد و انتخابگر تشکیل شده است ، مقدار آن عملکردی را نشان می دهد که باید به آن واقعه متصل شود. توجه داشته باشید که .delegate () با برخی از رویدادها مانند ارسال کار نمی کند ، به لیست کامل مستندات jQuery .live () مراجعه کنید.
رندر: تابع () {$ (this.el) .html (this.template ())؛ this.image.fetch ()؛ this.reize ()؛ این را برگردانید ؛}
سرانجام ، ما تابع () رندر () را داریم که وظیفه ایجاد علامت گذاری و انجام هر کار اضافی دیگری را دارد که نمی تواند انجام شود تا زمانی که نماد View به عنصر View اضافه نشود. بعد از اینکه الگوی خود را رندر کردیم ، باید .fetch () را در FlickrBombImage خود فراخوانی کنیم. .fetch () یک تابع Backbone است که آخرین نسخه از مدل را از لایه ماندگاری دریافت می کند. اگر قبلاً این مدل را ذخیره کرده بودیم ، .fetch () اکنون این داده ها را بازیابی می کند. پس از واکشی تصویر ، برای قرارگیری صحیح آن نیاز به تغییر اندازه داریم.
کشش خانگی
با در دست داشتن تمام قطعات ، تنها کاری که اکنون باید انجام دهیم این است که تصاویر حفره نگهدارنده را در صفحه پیدا کرده و نماهای ارائه شده FlickrBombImage را جایگزین آنها کنیم.
$ ("img [src ^ = 'flickr: //']"). هر (تابع () {var img = $ (این) ، flickrBombImageView = جدید FlickrBombImageView ({img: img})؛ img.replaceWith (flickrBombImageView). رندر (). ال)؛})
برای اطمینان از اینکه می تواند تصاویر حفره یا سوراخ جایگزین را پیدا کند ، باید در پایین صفحه یا در یک تماس آماده آماده سازی سند اجرا شود. ما از قرارداد تعیین flickr: // [KEYWORD] در ویژگی src یک برچسب تصویر برای نشان دادن اینکه باید با تصاویر Flickr پر شود استفاده می کنیم. ما عناصر تصویری را با یک ویژگی src منطبق پیدا می کنیم ، یک FlickrBombImageView جدید ایجاد می کنیم و سپس تصویر را جایگزین تصویر خود می کنیم. ما یک کپی از تصویر اصلی را گرفته و آن را به FlickrBombView منتقل می کنیم تا بتوانیم برخی از گزینه های پیکربندی اضافی را که ممکن است روی عنصر مشخص شده باشند ، بکشیم.
نتیجه نهایی آن همه تلاش سخت یک API بسیار ساده برای افرادی است که از کتابخانه استفاده می کنند. آنها می توانند به راحتی برچسب های تصویر را با استفاده از Flickr: // Convention تعریف کنند ، کد FlickrBomb را در پایین صفحه خود بیندازند ، و بم ، آنها تصاویر مکان یاب را از Flickr دریافت کرده اند.
با برنامه های وب بزرگ نیز عالی کار می کند
ما یک برنامه وب بزرگ با نام Notable داریم که بدون نگرانی برای تولید محتوای سمت مشتری ساخته شده است. وقتی می خواستیم بخشهایی از برنامه توربو را با تولید سمت مشتری محتوا شارژ کنیم ، Backbone را انتخاب کردیم. دلایل آن یکی بود: ما می خواستیم یک چارچوب سبک برای کمک به سازماندهی کد کمک کنیم ، اما ما را مجبور به تجدید نظر در کل برنامه نمی کند.
ما تغییرات را در اوایل سال جاری با موفقیت زیادی آغاز کردیم و از آن زمان ستایش Backbones را می خوانیم.
منابع اضافی
در Backbone چیزهای بیشتری نسبت به آنچه در این مقاله آورده ام وجود دارد ، بخش C (کنترل کننده) MVC (کنترل کننده نمایش مدل) برای مبتدیان ، که در واقع یک R (روتر) در آخرین نسخه است. و همه این موارد در اسناد ستون فقرات آورده شده است ، صبح روز شنبه سبک:
documentcloud.github.com/backbone/
اگر آموزش های سنتی بیشتر مورد علاقه شماست ، کد کاملاً مستند این نرم افزار todo را که در Backbone نوشته شده است ، بررسی کنید:
documentcloud.github.com/backbone/docs/todos.html
