תוֹכֶן
- בוא נתחיל אז
- הדגם הראשון שלנו
- אוסף תמונות
- FlickrBombImage
- שכבת הנוף
- FlickrBombImageView
- המתיחה הביתית
- עובד מצוין גם עם אפליקציות אינטרנט גדולות
- משאבים נוספים
אם אתה מעוניין לבנות במהירות כלי JavaScript קטן, אתה בטח לא חושב להשתמש במסגרת. קל יותר לפרוץ קצת קוד jQuery במקום להתקין וללמוד מסגרת חדשה, נכון? שגוי, Backbone.js היא מסגרת דבק קלת משקל שנראית בדיוק כמו JavaScript הישן הרגיל שהיית רגיל לכתוב.
אנו עושים הרבה אבות-טיפוס סטטיים כאן ב- ZURB, מכיוון שאנחנו אוהבים להיות מסוגלים ללחוץ על דפים מבלי לכתוב קוד קוד אחורי. לעיתים קרובות היינו מפילים תמונות מצביעות מקום אפורות, או לפעמים היינו מחפשים בפליקר תמונות לדוגמה שיעזרו לנו לדמיין מה עשוי להופיע בטיוטה הסופית. זה עד יום שישי קסום אחד, בו החלטנו שזה יהיה מדהים לכתוב קצת JavaScript כדי לפתור את הבעיות שלנו. רצינו להיות מסוגלים לחפש ולבחור תמונות ב- Flickr, ישירות מתמונות מציין המיקום עצמם. היינו קוראים לזה FlickrBomb, וזה הסיפור איך בנינו אותו באמצעות Backbone.js.
מומלץ מאוד להציץ ב FlickrBomb לפני הקריאה. זה אחד מאותן עסקאות מסוג "קליק שווה אלף מילים". קדימה, נמתין.
יש הרבה מסגרות JavaScript בחסימה בימינו, SproutCore, JavaScriptMVC, Spine, Sammy, Knockout. אבל אהבנו את Backbone.js עבור פרויקט מסוים זה מכמה סיבות שונות:
1. זה קליל (100% ללא שומן למעשה)
- במשקל, כאשר הגרסה הארוזה האחרונה עמדה על 4.6kb
- בקוד, בהיותם קצת יותר מ -1,000 שורות קוד, לא נורא קשה לעקוב אחר עקבות מחסנית אל תוך הפנימיות מבלי לאבד את דעתך
2. זה נראה כמו JavaScript
- בגלל שזה JavaScript, זה הכל וזה הכל
- הוא משתמש ב- jQuery, שאפילו סבתא שלך מכירה בימינו
3. התמדה סופר פשוטה
- מהקופסה הוא ממשיך נתונים למגד אחורי (באמצעות REST), אך על ידי הטלת תוסף יחיד הוא יחסוך לאחסון מקומי במקום זאת
- מכיוון שהוא ממצה את ממשק ה- API להתמדה, נוכל להמשיך ולהתקיים אל backend של REST רק על ידי הסרת תוסף האחסון המקומי
בוא נתחיל אז
מכיוון ש- Backbone.js הוא רק JavaScript, כל שעלינו לעשות הוא לכלול אותו יחד עם Underscore.js בדף. jQuery אינו תלות קשה עבור Backbone כשלעצמה, אך אנו נשתמש בו ולכן נכלול אותו כאן. אנו נקשר גם את תוסף האחסון המקומי, מכיוון שאיננו רוצים להתעסק עם הגדרת backend. שים לב שקשרו כאן ישירות את הקבצים לשם פשטות, אך עליך תמיד לארח את הנכסים שלך בייצור.
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>
כל הקוד הבא במאמר זה ספציפי ליישום שלנו, כך שנוכל לכלול אותו בקובץ app.js, או פשוט להטמיע אם זה הקטע שלך. רק זכרו לכלול אותו אחרי עמוד השדרה. עמוד השדרה מאפשר להפשט חלקים מהיישום שלנו, ולהפוך את שניהם למודולריים לשימוש חוזר וקל לקריאה עבור אחרים. כדי להמחיש בצורה הטובה ביותר את ההפשטה הזו, עמדנו להסביר את העיצוב של FlickrBomb מלמטה למעלה, החל מהדגמים וכלה בתצוגות.
הדגם הראשון שלנו
המשימה הראשונה שעמדה להתמודד היא משיכת התמונות מפליקר. דוגמנות FlickrImage בעמוד השדרה היא פשוטה דיה, ניצור דגם חדש בשם FlickrImage, ונוסיף כמה שיטות שיעזרו לנו לקבל אגודלים בגודל שונה.
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 במקרה הארוך בצד 'גדול ': size_code =' _b '; break; // 1024 בצד הארוך ביותר ברירת מחדל: size_code =' ';} להחזיר "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
מודלים בעמוד השדרה הם אובייקטים שניתן לעמוד בהם, ויש להם כמה פונקציות המשויכים אליהם, בדומה למודלים במסגרות MVC אחרות. החלק הקסום במודלים של עמוד השדרה הוא שנוכל לקשור אירועים לתכונות, כך שכאשר תכונה זו משתנה נוכל לעדכן את השקפותינו כך שישקפו זאת. אבל אנחנו מקדימים קצת את עצמנו.
כאשר אנו שולפים את התמונות מפליקר, אנו נקבל מספיק מידע בכדי ליצור כתובות אתרים לכל הגדלים. עם זאת, ההרכבה נותרה עלינו ולכן מימשנו את הפונקציה .image_url () שלוקחת פרמטר גודל ומחזירה קישור ציבורי. מכיוון שמדובר במודל עמוד שדרה, אנו יכולים להשתמש ב- this.get () כדי לגשת לתכונות במודל. אז עם מודל זה, אנו יכולים לבצע את הפעולות הבאות במקומות אחרים בקוד כדי לקבל את כתובת האתר של תמונת Flickr.
flickrImage.image_url ('גדול')
די תמציתי, אה? מכיוון שמודל זה הוא ספציפי ליישום שלנו, נוסיף כמה פונקציות עטיפה לגודל התמונה בגודל מלא ובאגודל.
אוסף תמונות
FlickrBomb עוסק באוספי תמונות, לא בתמונות בודדות, ול- Backbone יש דרך נוחה לדגמן זאת. האוסף הנקרא כראוי הוא מה שנשתמש בו כדי לקבץ תמונות פליקר יחד עבור מציין מיקום יחיד.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, key: flickrbombAPIkey, page: 1, fetch: function (keywords, success) {var self = this; success = success || $ .noop; this.keywords = keywords) || מילות מפתח זו; $ .ajax ({url: 'http://api.flickr.com/services/rest/', נתונים: {api_key: self.key, פורמט: 'json', שיטה: 'flickr. photos.search ', תגיות: this.keywords, per_page: 9, עמוד: this.page, רישיון: flickrbombLicenseTypes}, dataType:' jsonp ', jsonp:' jsoncallback ', הצלחה: פונקציה (תגובה) {self.add (תגובה .photos.photo); הצלחה ();}});}, nextPage: פונקציה (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);}});
יש כאן כמה דברים שיש לציין. ראשית, ה- דֶגֶם תכונה מספרת לאוספים איזה סוג דגם הוא אוסף. יש לנו גם כמה תכונות שאותחלנו לשימוש מאוחר יותר: המפתח הוא מפתח ה- Flickr API שלנו, אתה רוצה להחליף את flickrbombAPIkey במחרוזת של מפתח ה- API שלך Flickr. קבלת מפתח API של Flickr היא בחינם וקלה, פשוט עקוב אחר קישור זה: www.flickr.com/services/api/misc.api_keys.html. מאפיין העמוד הוא הדף הנוכחי של תמונות פליקר בהן אנו נמצאים.
השיטה הגדולה כאן היא .fetch (), שממצה את הפרטים של משיכת תמונות מ- Flickr API. כדי להימנע מבעיות בבקשות חוצה דומיינים, אנו משתמשים ב- JSONP, שתומך ב- Flickr API וב- jQuery. הפרמטרים האחרים שאנו מעבירים ל- API צריכים להיות מובנים מאליהם. מעניינים במיוחד פונקציות השדרה הנקראות כאן. בשיחה החוזרת בהצלחה בה אנו משתמשים .add (), פונקציה שלוקחת מערך של תכונות מודל, יוצרת מופעי מודל מאותן תכונות ואז מוסיפה אותן לאוסף.
הפונקציות .nextPage () ו- .prevPage () משנות תחילה את הדף אותו אנו רוצים להציג,
השתמש בפונקציית האוסף .remove (), כדי להסיר את כל הדגמים הקיימים מה-
אוסף, ואז התקשר לאחזור כדי לקבל את התמונות עבור הדף הנוכחי (שאנחנו פשוט
השתנה).
FlickrBombImage
כאשר אנו עוברים את דרכנו חזרה, אנו זקוקים למודל אחד נוסף כדי לייצג את תמונת מציין המיקום, שתורכב מאוסף של FlickrImages, ו- FlickrImage הנוכחי שנבחר. אנו נקרא למודל זה FlickrBombImage.
var localStorage = (supports_local_storage ())? חנות חדשה ("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 ('שינוי: src', this.changeSrc) ;}, changeSrc: function () {this.save ();}, loadFirstImage: function () {if (this.get ('src') === undefined) {this.set ({src: this.flickrImages. הראשון (). image_url ()});}}});
מכיוון שמודל זה אחראי על מעקב אחר התמונה שנבחרה כעת בין טעינת העמודים, עליו לדעת באיזו חנות אחסון מקומית להשתמש.השורה הראשונה תבטיח שיש תמיכה ב- localstorage, ואז תיצור את החנות בה נשתמש כדי להתמיד בתמונה שנבחרה.
עמוד השדרה מאפשר לנו להגדיר פונקציה .initialize () שתיקרא כאשר נוצר מופע של המודל. אנו משתמשים בפונקציה זו ב- FlickrBombImage כדי ליצור מופע חדש של אוסף FlickrImages, מעבירים את מילות המפתח שישמשו לתמונה זו ואז מביאים את התמונות מ- Flickr.
הפונקציה .loadFirstImage () הועברה כקריאה להתקשר להפעלה כאשר התמונות נטענו מ- Flickr. כפי שאתה בוודאי יכול לנחש, פונקציה זו מגדירה את התמונה הנוכחית להיות הראשונה באוסף מ- Flickr. זה לא עושה זאת אם התמונה הנוכחית כבר הוגדרה.
אנו נשתמש גם בקריאות חוזרות של התכונה של Backbone כדי להפעיל את פונקציית .changeSrc () כאשר תכונת src של המודל הזה משתנה. כל מה שההתקשרות הזו היא להתקשר ל- .save (), פונקציית מודל עמוד שדרה המתמיד בתכונות של המודל לכל שכבת החנות שהוטמעה (במקרה שלנו localstore). בדרך זו, בכל פעם שהתמונה שנבחרה משתנה, היא נמשכת מייד.
שכבת הנוף
כעת, לאחר שכתבנו את כל קוד ה- backend (ובכן, ה- backend), אנו יכולים להרכיב את ה- Views. התצוגות בעמוד השדרה הן מעט שונות מההשקפות במסגרות MVC מסורתיות אחרות. בעוד שתצוגה בדרך כלל נוגעת רק במצגת, תצוגה בעמוד השדרה אחראית גם להתנהגות. זה אומר שהתצוגה שלך לא רק מגדירה איך משהו נראה, אלא גם מה עליו לעשות כאשר מתקיימת איתו אינטראקציה.
תצוגה קשורה בדרך כלל (אך לא תמיד) לנתונים מסוימים ועוברת בשלושה שלבים כדי ליצור סימון מצגות מאותם נתונים:
1. האובייקט תצוגה מאותחל, ונוצר אלמנט ריק.
2. נקראת פונקציית ה- render, ויוצרת את הסימון לתצוגה על ידי הכנסתה לאלמנט שנוצר בשלב הקודם.
3. האלמנט מחובר ל- DOM.
זה אולי נראה כמו הרבה עבודה כדי ליצור סימון כלשהו, ואנחנו אפילו לא בחלק התנהגותי של התצוגה המפורטת, אבל זה חשוב, והנה הסיבה. בכל פעם שאתה משנה אלמנטים ב- DOM, אתה מפעיל משהו שנקרא reflow של דפדפן. זרימה מחודשת היא הדפדפן המחשב מחדש כיצד כל דבר בדף ממוקם. הזרמת דפדפן עשויה להיות גרועה לביצועים אם נקרא בתוך גרור או שינוי גודל האירוע, אשר נורה במרווח קצר מאוד, אך גרוע מכך, הם נראים מרושלים. עם מניפולציה מורכבת של עמודים, אתה יכול למעשה לראות אלמנטים שמתווספים לדף, ומרכיבים מושפעים מחדש. בעקבות דפוס האתחול, העיבוד והצירוף של עמוד השדרה, אתה מבטיח הזרמה יחידה, והשינויים בדף יהיו באופן מיידי מבחינה תפיסתית, ללא קשר למורכבות של מניפולציה על אלמנטים.
FlickrBombImageView
var FlickrBombImageView = Backbone.View.extend ({tagName: "div", className: "flickrbombContainer", lock: false, template: _.template ('div id = "% = this.image.id.replace (" ", "")%> "... / div> '), אתחל: פונקציה (אפשרויות) {_.bindAll (זה,' addImage ',' updateSrc ',' setDimentions ',' updateDimentions '); var מילות מפתח = אפשרויות. img.attr ('src'). מקום ('flickr: //', ''); זה. $ el = $ (this.el); this.image = FlickrBombImage חדש ({מילות מפתח: מילות מפתח, מזהה: אפשרויות. img.attr ('id')}); this.image.flickrImages.bind ('add', this.addImage); this.image.bind ('שינוי: src', this.updateSrc);}, אירועים: { "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 (); להחזיר את זה;}, ...});
הפונקציות של תצוגה זו הושמטו בקיצור, קוד המקור בשלמותו זמין ב- GitHub: github.com/zurb/flickrbomb
בחלק העליון של התצוגה יש לנו כמה מאפיינים ספציפיים של עמוד השדרה. tagName ו- className משמשים להגדרת התג והמחלקה שיוחלו על אלמנט התצוגה הזו. זכור כי שלב ראשון של יצירת תצוגה הוא יצירת אובייקט, ומכיוון שיצירה זו מטופלת על ידי עמוד השדרה, עלינו לציין את האלמנט והמחלקה. שים לב שלעמוד השדרה יש ברירות מחדל הגיוניות; אם נשמיט את התכונות הללו, ברירת המחדל משמשת div, ולא תוחל מחלקה אלא אם תציין אחת מהן.
תכונת התבנית היא מוסכמה, אך אינה חובה. אנו משתמשים בה כאן כדי לציין את פונקציית תבנית JavaScript בה נשתמש כדי ליצור את הסימון שלנו לתצוגה זו. אנו משתמשים בפונקציה _.template () הכלולה ב- Underscore.js, אך אתה יכול להשתמש באיזה מנוע תבנית אי פעם שאתה מעדיף, אנו לא נשפוט אותך.
בפונקציה .initialize () שלנו אנו שולפים את מחרוזת מילות המפתח מתג התמונה ואז יוצרים מודל FlickrBombImage באמצעות מילות מפתח אלה. אנו מחייבים גם את הפונקציה .addImage () שתופעל כאשר נוסף FlickrImage לאוסף FlickrImages. פונקציה זו תצרף את ה- FlickrImage שנוספה לאחרונה לעבר בורר התמונות שלנו. השורה האחרונה והחשובה ביותר מחייבת את הפונקציה .updateSrc () להפעלה כאשר FlickrImage שנבחר כרגע משתנה. כאשר משתנה התמונה הנוכחית במודל, פונקציה זו תפעל, תעדכן את תכונת src של אלמנט התמונה, ו- CSS תשנה את גודל החיתוך ותחתוך את התמונה כך שתתאים למידות התמונה שצוינו על ידי המשתמש.
אירועים: {"click .setupIcon": "clickSetup", "click .flickrbombFlyout a.photo": "selectImage", "click .flickrbombFlyout a.next": "nextFlickrPhotos", "click .flickrbombFlyout a.prev": "prevFlickrPhotos "}
בעקבות .initialize () יש לנו את חלק ההתנהגות של התצוגה. עמוד השדרה מספק דרך נוחה לאגד אירועים באמצעות אובייקט אירועים. אובייקט האירועים משתמש בשיטת jQuery .delegate () כדי לבצע את הכריכה בפועל לאלמנט View, כך שללא קשר לאיזו מניפולציה אתה עושה לאלמנט שבתצוגה, כל האירועים הקשורים שלך עדיין יעבדו. זה עובד בדיוק כמו jQuery .live (), אלא שבמקום לאגד אירועים למסמך כולו, אתה יכול לאגד אותם במסגרת כל רכיב. המפתח של כל ערך באובייקט האירועים מורכב מהאירוע ובורר, הערך מציין את אותה פונקציה שצריכה להיות קשורה לאירוע זה. שים לב ש .delegate () אינו עובד עם אירועים מסוימים כמו הגשה, עיין בתיעוד jQuery .live () לקבלת רשימה מלאה של אירועים נתמכים.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); להחזיר את זה;}
לבסוף, יש לנו את הפונקציה .render () האחראית ליצירת הסימון שלנו וביצוע כל עבודה נוספת שלא ניתן לבצע עד שסימון התצוגה נוסף לאלמנט התצוגה. לאחר שניתנו את התבנית שלנו, עלינו להתקשר ל- .fetch () ב- FlickrBombImage שלנו. .fetch () היא פונקציית עמוד שדרה המקבלת את העותק האחרון של הדגם משכבת ההתמדה. אם שמרנו מודל זה בעבר, .fetch () היה מאחזר את הנתונים כעת. לאחר שאוחזר התמונה עלינו להתקשר לשינוי גודל כדי למקם אותה כהלכה.
המתיחה הביתית
עם כל החלקים במקום, כל שעלינו לעשות עכשיו הוא למצוא את תמונות מציין המיקום בדף ולהחליפן בתצוגות FlickrBombImage שניתנו.
$ ("img [src ^ = 'flickr: //']") .each (function () {var img = $ (this), flickrBombImageView = FlickrBombImageView חדש ({img: img}); img.replaceWith (flickrBombImageView. לדקלם (). אל);});
צריך להריץ את הקטע הקטן הזה בתחתית הדף, או בשיחה חוזרת מוכנה למסמך, כדי להבטיח שהוא יוכל למצוא את תמונות מציין המיקום שהוא יחליף. אנו משתמשים במוסכמה של ציון flickr: // [KEYWORD] בתכונה src של תג תמונה כדי לציין שיש לאכלס בתמונות מ- Flickr. אנו מוצאים אלמנטים של תמונה עם מאפיין תואם של src, יוצרים FlickrBombImageView חדש, ואז מחליפים את התמונה לשלנו. אנו תופסים עותק של התמונה המקורית ומעבירים אותה ל- FlickrBombView שלנו, כדי שנוכל למשוך כמה אפשרויות תצורה נוספות שייתכן שהוגדרו על האלמנט.
התוצאה הסופית של כל אותה עבודה קשה היא ממשק API פשוט מאוד לאנשים המשתמשים בספרייה. הם יכולים פשוט להגדיר תגי תמונה באמצעות ה- flickr: // המוסכמה, להוריד את קוד FlickrBomb בתחתית העמוד שלהם, ו- bam, יש להם תמונות ממיקום פליקר.
עובד מצוין גם עם אפליקציות אינטרנט גדולות
יש לנו אפליקציית אינטרנט גדולה בשם 'ראוי לציון', שנכתבה ללא חשש ליצירת תוכן מצד הלקוח. כשרצינו לחייב חלקים בטורבו של האפליקציה על ידי יצירת צד לקוח תוכן, בחרנו בעמוד השדרה. הסיבות היו זהות: רצינו מסגרת קלה שתסייע בשמירה על הקוד, אך לא תכריח אותנו לחשוב מחדש על היישום כולו.
השקנו את השינויים בתחילת השנה בהצלחה רבה ומאז אנו שרים שבחי Backbones.
משאבים נוספים
יש בעמוד השדרה הרבה יותר ממה שסיקרתי במאמר זה, החלק C (בקר) של MVC (בקר תצוגת מודל) בתור התחלה, שהוא למעשה R (נתב) בגרסה האחרונה. והכל מכוסה בתיעוד של עמוד השדרה, בבוקר שבת קליל נכתב:
documentcloud.github.com/backbone/
אם מדריכים מסורתיים יותר הם הקטע שלך, בדוק את הקוד המתועד היטב של יישום todo זה שנכתב בעמוד השדרה:
documentcloud.github.com/backbone/docs/todos.html
