உள்ளடக்கம்
- பின்னர் தொடங்குவோம்
- எங்கள் முதல் மாதிரி
- படங்களின் தொகுப்பு
- FlickrBombImage
- பார்வை அடுக்கு
- FlickrBombImageView
- வீட்டு நீட்சி
- பெரிய ஓல் வலை பயன்பாடுகளிலும் சிறப்பாக செயல்படுகிறது
- கூடுதல் ஆதாரங்கள்
நீங்கள் ஒரு சிறிய ஜாவாஸ்கிரிப்ட் கருவியை விரைவாக உருவாக்க விரும்பினால், நீங்கள் ஒரு கட்டமைப்பைப் பயன்படுத்துவதைப் பற்றி யோசிக்கவில்லை. புதிய கட்டமைப்பை நிறுவி கற்றுக்கொள்வதை விட சில jQuery குறியீட்டை ஒன்றாக ஹேக் செய்வது எளிது, இல்லையா? தவறு, Backbone.js என்பது ஒரு சூப்பர் இலகுரக பசை கட்டமைப்பாகும், இது நீங்கள் எழுதப் பழகிய வழக்கமான பழைய ஜாவாஸ்கிரிப்ட் போலவே தோன்றுகிறது.
ZURB இல் நாங்கள் நிறைய நிலையான முன்மாதிரிகளைச் செய்கிறோம், ஏனென்றால் எந்த பின்தளத்தில் குறியீட்டையும் எழுதாமல் பக்கங்களைக் கிளிக் செய்ய விரும்புகிறோம். பெரும்பாலும், நாங்கள் மந்தமான சாம்பல் நிற ஒதுக்கிட படங்களை கைவிடுவோம், அல்லது சில நேரங்களில் இறுதி வரைவில் என்ன நடக்கக்கூடும் என்பதைக் கற்பனை செய்ய உதவும் மாதிரி படங்களுக்காக பிளிக்கரைத் தேடுவோம். ஒரு மாயாஜால வெள்ளிக்கிழமை வரை, எங்கள் பிரச்சினைகளைத் தீர்க்க சில ஜாவாஸ்கிரிப்ட் எழுதுவது அருமையாக இருக்கும் என்று நாங்கள் முடிவு செய்தோம். பிளிக்கரில் புகைப்படங்களைத் தேடவும் தேர்ந்தெடுக்கவும் நாங்கள் விரும்பினோம், நேரடியாக ஒதுக்கிட படங்களிலிருந்து. நாங்கள் இதை FlickrBomb என்று அழைப்போம், இது Backbone.js ஐப் பயன்படுத்தி அதை எவ்வாறு உருவாக்கினோம் என்பதற்கான கதை.
படிப்பதற்கு முன் பிளிக்கர்பாம்பை விரைவாகப் பார்க்க பரிந்துரைக்கப்படுகிறது. இது “ஒரு கிளிக்கில் ஆயிரம் வார்த்தைகளுக்கு மதிப்புள்ளது” வகை ஒப்பந்தங்களில் ஒன்றாகும். மேலே செல்லுங்கள், நாங்கள் காத்திருப்போம்.
இந்த நாட்களில் ஸ்ப்ர out ட் கோர், ஜாவாஸ்கிரிப்ட் எம்விசி, ஸ்பைன், சாமி, நாக்அவுட் போன்ற ஜாவாஸ்கிரிப்ட் கட்டமைப்புகள் நிறைய உள்ளன. ஆனால் சில குறிப்பிட்ட காரணங்களுக்காக இந்த குறிப்பிட்ட திட்டத்திற்காக நாங்கள் Backbone.js ஐ விரும்பினோம்:
1. இது ஒளி (உண்மையில் 100% கொழுப்பு இல்லாதது)
- எடையில், சமீபத்திய பேக் செய்யப்பட்ட பதிப்பு சுமார் 4.6 கி.பை.
- குறியீட்டில், வெறும் 1,000 வரிகளுக்கு மேல் இருப்பதால், உங்கள் மனதை இழக்காமல் உள்ளகங்களில் ஒரு அடுக்கு தடத்தை பின்பற்றுவது மிகவும் கடினம் அல்ல
2. இது ஜாவாஸ்கிரிப்ட் போல் தெரிகிறது
- ஏனென்றால் அது ஜாவாஸ்கிரிப்ட், அதுதான், அவ்வளவுதான்
- இது jQuery ஐப் பயன்படுத்துகிறது, இது உங்கள் பாட்டிக்கு கூட இந்த நாட்களில் தெரியும்
3. சூப்பர் எளிய விடாமுயற்சி
- பெட்டியின் வெளியே அது ஒரு பின்தளத்தில் (REST வழியாக) தரவைத் தொடர்கிறது, ஆனால் ஒரு செருகுநிரலைக் கைவிடுவதன் மூலம் அது உள்ளூர் சேமிப்பகத்தில் சேமிக்கப்படும்
- ஏனெனில் இது தொடர்ச்சியான API ஐ சுருக்கமாகக் கூறுகிறது, உள்ளூர் சேமிப்பக செருகுநிரலை அகற்றுவதன் மூலம் அதை REST பின்தளத்தில் தொடர்ந்து வைத்திருக்க முடியும்.
பின்னர் தொடங்குவோம்
Backbone.js வெறும் ஜாவாஸ்கிரிப்ட் என்பதால், நாம் செய்ய வேண்டியது, பக்கத்தில் உள்ள Underscore.js உடன் சேர்க்க வேண்டும். jQuery என்பது முதுகெலும்புக்கு கடினமான சார்பு அல்ல, ஆனால் நாங்கள் அதைப் பயன்படுத்தப் போகிறோம், எனவே அதை இங்கே சேர்ப்போம். பின்தளத்தில் அமைப்பதில் நாங்கள் தொந்தரவு செய்ய விரும்பாததால், உள்ளூர் சேமிப்பக செருகுநிரலையும் இணைப்போம். எளிமைக்காக இங்கே கோப்புகளை நேரடியாக இணைக்கும் குறிப்பு, ஆனால் நீங்கள் எப்போதும் உங்கள் சொந்த சொத்துக்களை உற்பத்தியில் ஹோஸ்ட் செய்ய வேண்டும்.
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 "> / ஸ்கிரிப்ட்>
இந்த கட்டுரையில் பின்வரும் அனைத்து குறியீடுகளும் எங்கள் பயன்பாட்டிற்கு குறிப்பிட்டவை, எனவே இதை ஒரு app.js கோப்பில் சேர்க்கலாம் அல்லது அது உங்கள் விஷயமாக இருந்தால் இன்லைன் செய்யலாம். முதுகெலும்புக்குப் பிறகு அதைச் சேர்க்க நினைவில் கொள்ளுங்கள். எங்கள் பயன்பாட்டின் சுருக்கமான பகுதிகளை முதுகெலும்பு செயல்படுத்துகிறது, இவை இரண்டும் எளிதான மறுபயன்பாட்டிற்கான மட்டு மற்றும் பிறருக்கு மேலும் படிக்கக்கூடியவை. அந்த சுருக்கத்தை சிறப்பாக விளக்குவதற்கு, பிளிக்கர்பாம்பின் வடிவமைப்பை கீழே இருந்து விளக்கவும், மாடல்களில் தொடங்கி, காட்சிகளுடன் முடிவடையும்.
எங்கள் முதல் மாதிரி
பிளிக்கரில் இருந்து புகைப்படங்களை இழுப்பதே முதல் பணியாகும். முதுகெலும்பில் ஒரு FlickrImage ஐ மாதிரியாக்குவது போதுமானது, நாங்கள் FlickrImage என்ற புதிய மாதிரியை உருவாக்குவோம், மேலும் வெவ்வேறு அளவு கட்டைவிரலைப் பெற எங்களுக்கு சில முறைகளைச் சேர்ப்போம்.
var FlickrImage = Backbone.Model.extend ({fullsize_url: function () {this.image_url ('medium');}, thumb_url: function () {this.image_url ('square');}, image_url: function ( அளவு) {var size_code; சுவிட்ச் (அளவு) {case 'square': size_code = '_s'; break; // 75x75 case 'medium': size_code = '_z'; break; // 640 மிக நீண்ட பக்க வழக்கில் 'பெரியது ': size_code =' _b '; இடைவெளி; // 1024 நீண்ட பக்க இயல்புநிலையில்: size_code =' ';} return "http: // farm" + this.get (' farm ') + ".static.flickr.com / "+ this.get ('server') +" / "+ this.get ('id') +" _ "+ this.get ('secret') + size_code +" .webp ";}})
முதுகெலும்பில் உள்ள மாதிரிகள் தொடர்ந்து நீடிக்கக்கூடிய பொருள்கள், அவற்றுடன் சில செயல்பாடுகளைக் கொண்டுள்ளன, மற்ற எம்.வி.சி கட்டமைப்பில் உள்ள மாதிரிகள் போன்றவை. முதுகெலும்பு மாதிரிகளின் மாயாஜால பகுதி என்னவென்றால், நிகழ்வுகளை பண்புகளுடன் பிணைக்க முடியும், இதனால் அந்த பண்பு மாற்றங்கள் மாறும்போது அதைப் பிரதிபலிக்கும் வகையில் எங்கள் பார்வைகளைப் புதுப்பிக்க முடியும். ஆனால் நாம் நம்மைவிட சற்று முன்னேறி வருகிறோம்.
பிளிக்கரிடமிருந்து புகைப்படங்களை இழுக்கும்போது, எல்லா அளவுகளுக்கும் URL களை உருவாக்க போதுமான தகவல்களைப் பெறப்போகிறோம். இருப்பினும் அந்த சட்டசபை எங்களிடம் உள்ளது, எனவே .image_url () செயல்பாட்டை நாங்கள் செயல்படுத்தினோம், அது ஒரு அளவுருவை எடுத்து பொது இணைப்பை வழங்குகிறது. இது ஒரு முதுகெலும்பு மாதிரி என்பதால், மாதிரியில் உள்ள பண்புகளை அணுக இதை நாம் பயன்படுத்தலாம். எனவே இந்த மாதிரியுடன், ஒரு பிளிக்கர் படத்தின் URL ஐப் பெற குறியீட்டில் பின்வரும் இடங்களில் செய்யலாம்.
flickrImage.image_url (’பெரிய’)
அழகான சுருக்கமான, இல்லையா? இந்த மாதிரி எங்கள் பயன்பாட்டிற்கு குறிப்பிட்டது என்பதால், முழு அளவு மற்றும் கட்டைவிரல் பட அளவுகளுக்கு சில ரேப்பர் செயல்பாடுகளைச் சேர்ப்போம்.
படங்களின் தொகுப்பு
பிளிக்கர்பாம்ப் படங்களின் சேகரிப்பைக் கையாள்கிறது, ஒற்றை படங்கள் அல்ல, இதை மாதிரியாக்குவதற்கு முதுகெலும்புக்கு வசதியான வழி உள்ளது. பொருத்தமாக பெயரிடப்பட்ட சேகரிப்பு என்பது ஒரு ஒதுக்கிடத்திற்காக பிளிக்கர் படங்களை ஒன்றிணைக்கப் பயன்படுத்துவோம்.
var FlickrImages = Backbone.Collection.extend ({model: FlickrImage, key: flickrbombAPIkey, பக்கம்: 1, பெறுதல்: செயல்பாடு (முக்கிய வார்த்தைகள், வெற்றி) {var self = this; success = success || $ .noop; this.keywords = keywords. || this.keywords; $ .ajax ({url: 'http://api.flickr.com/services/rest/', தரவு: {api_key: self.key, format: 'json', method: 'flickr. photos.search ', குறிச்சொற்கள்: this.keywords, per_page: 9, பக்கம்: this.page, உரிமம்: flickrbombLicenseTypes data, dataType:' jsonp ', jsonp:' jsoncallback ', வெற்றி: செயல்பாடு (பதில்) {self.add (மறுமொழி .photos.photo); வெற்றி ();}});}, அடுத்த பக்கம்: செயல்பாடு (அழைப்பு) {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);}});
இங்கே கவனிக்க வேண்டிய இரண்டு விஷயங்கள் உள்ளன. முதலில், தி மாதிரி பண்புக்கூறு இது எந்த வகையான மாதிரியைச் சேகரிக்கிறது என்பதைக் கூறுகிறது. பின்னர் பயன்படுத்த நாங்கள் ஆரம்பித்த சில பண்புகளும் எங்களிடம் உள்ளன: விசை எங்கள் பிளிக்கர் ஏபிஐ விசை, நீங்கள் உங்கள் சொந்த பிளிக்கர் ஏபிஐ விசையின் சரத்துடன் FlickrbombAPIkey ஐ மாற்ற விரும்புவீர்கள். பிளிக்கர் ஏபிஐ விசையைப் பெறுவது இலவசம் மற்றும் எளிதானது, இந்த இணைப்பைப் பின்தொடரவும்: www.flickr.com/services/api/misc.api_keys.html. பக்க பண்புக்கூறு என்பது நாம் இருக்கும் பிளிக்கர் புகைப்படங்களின் தற்போதைய பக்கம்.
இங்கே பெரிய முறை .fetch (), இது பிளிக்கர் API இலிருந்து புகைப்படங்களை இழுக்கும் விவரங்களை சுருக்கமாகக் கூறுகிறது. குறுக்கு-டொமைன் கோரிக்கைகளில் உள்ள சிக்கல்களைத் தவிர்க்க, பிளிக்கர் API மற்றும் jQuery ஆதரவு இரண்டையும் ஆதரிக்கும் JSONP ஐப் பயன்படுத்துகிறோம். நாங்கள் API க்கு அனுப்பும் மற்ற அளவுருக்கள் சுய விளக்கமாக இருக்க வேண்டும். முதுகெலும்பு செயல்பாடுகள் இங்கு அழைக்கப்படுவது சிறப்பு ஆர்வம். வெற்றிகரமான மறுபிரவேசத்தில் .add () ஐப் பயன்படுத்துகிறோம், இது மாதிரி பண்புகளின் வரிசையை எடுத்து, அந்த பண்புகளிலிருந்து மாதிரி நிகழ்வுகளை உருவாக்கி, பின்னர் அவற்றை சேகரிப்பில் சேர்க்கிறது.
.NextPage () மற்றும் .prevPage () செயல்பாடுகள் முதலில் நாம் காட்ட விரும்பும் பக்கத்தை மாற்றுகின்றன,
சேகரிப்பு செயல்பாட்டைப் பயன்படுத்தவும் .remove (), தற்போதுள்ள அனைத்து மாடல்களையும் அகற்ற
சேகரிப்பு, பின்னர் தற்போதைய பக்கத்திற்கான புகைப்படங்களைப் பெற ஃபெட்சை அழைக்கவும் (நாங்கள் தான்
மாற்றப்பட்டது).
FlickrBombImage
எங்கள் வழியை மீண்டும் செயல்படுத்துகையில், பிளேஸ்ஹோல்டர் படத்தைக் குறிக்க எங்களுக்கு இன்னும் ஒரு மாதிரி தேவை, இது பிளிக்கர் இமேஜ்களின் தொகுப்பையும், தேர்ந்தெடுக்கப்பட்ட தற்போதைய பிளிக்கர்இமேஜையும் கொண்டிருக்கும். இந்த மாதிரியை FlickrBombImage என்று அழைப்போம்.
var localStorage = (support_local_storage ())? புதிய ஸ்டோர் ("flickrBombImages"): பூஜ்யம்; var FlickrBombImage = Backbone.Model.extend ({localStorage: localStorage, initialize: function () {_.bindAll (இது, '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') === வரையறுக்கப்படவில்லை) {this.set ({src: this.flickrImages. முதல் (). image_url ()});}}});
பக்க சுமைகளுக்கு இடையில் தற்போது தேர்ந்தெடுக்கப்பட்ட படத்தைக் கண்காணிக்க இந்த மாதிரி பொறுப்பு என்பதால், எந்த உள்ளூர் ஸ்டோர்ஜ் ஸ்டோர் பயன்படுத்த வேண்டும் என்பதை இது அறிந்து கொள்ள வேண்டும்.முதல் வரியில் உள்ளூர் ஸ்டோரேஜுக்கு ஆதரவு இருப்பதை உறுதிசெய்து, பின்னர் தேர்ந்தெடுக்கப்பட்ட படத்தைத் தொடர நாங்கள் பயன்படுத்தும் கடையை உருவாக்குவோம்.
மாதிரியின் ஒரு நிகழ்வு உருவாக்கப்படும்போது அழைக்கப்படும் .initialize () செயல்பாட்டை வரையறுக்க முதுகெலும்பு அனுமதிக்கிறது. பிளிக்கர் இமேஜஸ் சேகரிப்பின் புதிய நிகழ்வை உருவாக்க, இந்த படத்திற்கு பயன்படுத்தப்படும் முக்கிய வார்த்தைகளை கடந்து, பின்னர் பிளிக்கரில் இருந்து படங்களை எடுக்க FlickrBombImage இல் இந்த செயல்பாட்டைப் பயன்படுத்துகிறோம்.
பிளிக்கரில் இருந்து படங்கள் ஏற்றப்பட்டதும் இயக்க .loadFirstImage () செயல்பாடு ஒரு கால்பேக்காக அனுப்பப்பட்டுள்ளது. நீங்கள் யூகிக்கக்கூடியது போல, இந்த செயல்பாடு தற்போதைய படத்தை பிளிக்கரிடமிருந்து சேகரிப்பில் முதல் படமாக அமைக்கிறது. தற்போதைய படம் ஏற்கனவே அமைக்கப்பட்டிருந்தால் இது செய்யாது.
இந்த மாதிரியின் src பண்புக்கூறு மாறும்போது எங்கள் .changeSrc () செயல்பாட்டை நீக்குவதற்கு முதுகெலும்பின் பண்புக்கூறு கால்பேக்குகளையும் பயன்படுத்தப் போகிறோம். இந்த அழைப்பு அனைத்தும் அழைப்பு .சேவ் (), ஒரு முதுகெலும்பு மாதிரி செயல்பாடு, இது எந்த கடை அடுக்கு செயல்படுத்தப்பட்டாலும் மாதிரியின் பண்புகளை தொடர்கிறது (எங்கள் விஷயத்தில் உள்ளூர் கடை). இந்த வழியில், தேர்ந்தெடுக்கப்பட்ட படம் மாற்றப்படும் போதெல்லாம், அது உடனடியாக நீடிக்கிறது.
பார்வை அடுக்கு
இப்போது எல்லா பின்தளத்தில் (நன்றாக, முன்பக்க பின்தளத்தில்) குறியீடும் எழுதப்பட்டிருப்பதால், காட்சிகளை ஒன்றாக இணைக்கலாம். முதுகெலும்பில் உள்ள காட்சிகள் சற்று வித்தியாசமானவை, பின்னர் பிற பாரம்பரிய எம்.வி.சி கட்டமைப்புகளில் காட்சிகள். ஒரு பார்வை பொதுவாக விளக்கக்காட்சியில் மட்டுமே அக்கறை செலுத்துகிறது, ஒரு முதுகெலும்பு பார்வை நடத்தைக்கும் பொறுப்பாகும். அதாவது, உங்கள் பார்வை ஏதாவது தோற்றத்தை எவ்வாறு வரையறுக்கிறது என்பது மட்டுமல்லாமல், தொடர்பு கொள்ளும்போது என்ன செய்ய வேண்டும் என்பதையும் வரையறுக்கிறது.
ஒரு பார்வை பொதுவாக சில தரவுகளுடன் பிணைக்கப்பட்டுள்ளது, ஆனால் அந்த தரவிலிருந்து விளக்கக்காட்சி மார்க்அப்பை உருவாக்க மூன்று கட்டங்கள் வழியாக செல்கிறது:
1. பார்வை பொருள் துவக்கப்பட்டது, மற்றும் ஒரு வெற்று உறுப்பு உருவாக்கப்படுகிறது.
2. ரெண்டர் செயல்பாடு அழைக்கப்படுகிறது, இது முந்தைய கட்டத்தில் உருவாக்கப்பட்ட உறுப்புக்குள் செருகுவதன் மூலம் பார்வைக்கு மார்க்அப்பை உருவாக்குகிறது.
3. உறுப்பு DOM உடன் இணைக்கப்பட்டுள்ளது.
சில மார்க்அப்பை உருவாக்குவதற்கு இது நிறைய வேலைகள் போல் தோன்றலாம், மேலும் நாங்கள் இன்னும் பார்வையின் நடத்தை பகுதிக்கு கூட வரவில்லை, ஆனால் இது முக்கியமானது, அதற்கான காரணம் இங்கே. ஒவ்வொரு முறையும் நீங்கள் DOM இல் உள்ள கூறுகளை மாற்றும்போது, உலாவி ரிஃப்ளோ எனப்படும் ஒன்றைத் தூண்டுகிறீர்கள். மறுபிரதி என்பது உலாவி என்பது பக்கத்தில் உள்ள ஒவ்வொரு விஷயமும் எவ்வாறு நிலைநிறுத்தப்படுகிறது என்பதை மீண்டும் கணக்கிடுகிறது. ஒரு இழுத்தல் அல்லது மறுஅளவிடல் நிகழ்வுக்குள் அழைத்தால் உலாவி மறுபயன்பாடுகள் செயல்திறனுக்கு மோசமாக இருக்கும், அது மிகக் குறுகிய இடைவெளியில் சுடும், ஆனால் மோசமாக, அவை மெதுவாகத் தோன்றும். சிக்கலான பக்க கையாளுதலுடன், உறுப்புகள் பக்கத்தில் சேர்க்கப்படுவதை நீங்கள் உண்மையில் காணலாம், மேலும் பயனுள்ள கூறுகள் இடமாற்றம் செய்யப்படுகின்றன. முதுகெலும்பின் துவக்க முறை, வழங்கல் மற்றும் இணைத்தல் ஆகியவற்றைப் பின்பற்றி, ஒற்றை மறு நிரப்புதலுக்கு நீங்கள் உத்தரவாதம் அளிக்கிறீர்கள், மேலும் உறுப்பு கையாளுதலின் சிக்கலைப் பொருட்படுத்தாமல், பக்கத்தின் மாற்றங்கள் புலனுணர்வுடன் உடனடியாக இருக்கும்.
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 keywords = options. img.attr ('src'). இடமாற்றம் ('flickr: //', ''); இது. $ el = $ (this.el); this.image = new FlickrBombImage ({keywords: keywords, id: options. img.attr ('id')}); this.image.flickrImages.bind ('சேர்', this.addImage); this.image.bind ('change: src', this.updateSrc);}, நிகழ்வுகள்: { . render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); இதைத் திருப்பி விடுங்கள்;}, ...});
இந்த பார்வையின் செயல்பாடுகள் சுருக்கத்திற்காக தவிர்க்கப்பட்டுள்ளன, மூலக் குறியீடு முழுவதுமாக கிட்ஹப்பில் கிடைக்கிறது: github.com/zurb/flickrbomb
பார்வையின் மேலே, எங்களிடம் ஒரு ஜோடி முதுகெலும்பு குறிப்பிட்ட பண்புக்கூறுகள் உள்ளன. இந்த பார்வையின் உறுப்புக்கு பயன்படுத்தப்படும் குறிச்சொல் மற்றும் வகுப்பை வரையறுக்க tagName மற்றும் className பயன்படுத்தப்படுகின்றன. காட்சி உருவாக்கத்தின் ஒரு படி ஒரு பொருளை உருவாக்குகிறது என்பதை நினைவில் கொள்ளுங்கள், மேலும் அந்த உருவாக்கம் முதுகெலும்பால் கையாளப்படுவதால், உறுப்பு மற்றும் வகுப்பை நாம் குறிப்பிட வேண்டும். முதுகெலும்பில் விவேகமான இயல்புநிலைகள் உள்ளன என்பதை நினைவில் கொள்க; இந்த பண்புகளை நாங்கள் தவிர்த்துவிட்டால், முன்னிருப்பாக ஒரு div பயன்படுத்தப்படுகிறது, மேலும் நீங்கள் ஒன்றைக் குறிப்பிடாவிட்டால் எந்த வகுப்பும் பயன்படுத்தப்படாது.
வார்ப்புரு பண்பு ஒரு மாநாடு, ஆனால் தேவையில்லை. இந்த பார்வைக்கு எங்கள் மார்க்அப்பை உருவாக்க நாங்கள் பயன்படுத்தும் ஜாவாஸ்கிரிப்ட் டெம்ப்ளேட் செயல்பாட்டைக் குறிப்பிட இதை இங்கே பயன்படுத்துகிறோம். Underscore.js இல் சேர்க்கப்பட்டுள்ள _.template () செயல்பாட்டை நாங்கள் பயன்படுத்துகிறோம், ஆனால் நீங்கள் விரும்பும் எந்த வார்ப்புரு இயந்திரத்தையும் நீங்கள் பயன்படுத்தலாம், நாங்கள் உங்களை தீர்மானிக்க மாட்டோம்.
எங்கள் .initialize () செயல்பாட்டில், படக் குறிச்சொல்லிலிருந்து முக்கியச் சொற்களை வெளியே இழுக்கிறோம், பின்னர் அந்தச் சொற்களைப் பயன்படுத்தி ஒரு FlickrBombImage மாதிரியை உருவாக்குகிறோம். FlickrImage சேகரிப்பில் ஒரு FlickrImage சேர்க்கப்படும் போது இயக்கப்பட வேண்டிய .addImage () செயல்பாட்டை நாங்கள் பிணைக்கிறோம். இந்த செயல்பாடு புதிதாக சேர்க்கப்பட்ட FlickrImage ஐ எங்கள் படத் தேர்வாளர் ஃப்ளைஅவுட்டில் சேர்க்கும். கடைசியாக தேர்ந்தெடுக்கப்பட்ட பிளிக்கர்இமேஜ் மாற்றப்படும்போது .updateSrc () செயல்பாட்டை நெருப்புடன் பிணைப்பது கடைசி மற்றும் மிக முக்கியமான வரி. மாதிரியில் தற்போதைய படம் மாற்றப்படும்போது, இந்த செயல்பாடு இயங்கும், பட உறுப்புக்கான src பண்புக்கூறு புதுப்பிக்கப்படும், மேலும் CSS பயனரால் குறிப்பிடப்பட்ட பட பரிமாணங்களுக்குள் பொருந்தும்படி படத்தை மறுஅளவிடுதல் மற்றும் செதுக்குதல்.
நிகழ்வுகள்:. "}
தொடர்ந்து .initialize () பார்வையின் நடத்தை பகுதி எங்களிடம் உள்ளது. நிகழ்வுகள் பொருளைப் பயன்படுத்தி நிகழ்வுகளை பிணைக்க முதுகெலும்பு ஒரு வசதியான வழியை வழங்குகிறது. நிகழ்வுகள் பொருள் காட்சி உறுப்புடன் உண்மையான பிணைப்பைச் செய்ய jQuery .delegate () முறையைப் பயன்படுத்துகிறது, இதனால் பார்வைக்குள் உள்ள உறுப்புக்கு நீங்கள் என்ன கையாளுதலைப் பொருட்படுத்தாமல், உங்கள் கட்டுப்பட்ட நிகழ்வுகள் அனைத்தும் இன்னும் செயல்படும். இது jQuery .live () போலவே செயல்படுகிறது, தவிர முழு ஆவணத்திற்கும் நிகழ்வுகளை பிணைப்பதற்கு பதிலாக, அவற்றை எந்த உறுப்புகளின் எல்லைக்குள் பிணைக்க முடியும். நிகழ்வுகள் பொருளின் ஒவ்வொரு இடுகையின் திறவுகோல் நிகழ்வு மற்றும் தேர்வாளரைக் கொண்டுள்ளது, மதிப்பு அந்த நிகழ்வுக்கு கட்டுப்பட வேண்டிய செயல்பாட்டைக் குறிக்கிறது. சமர்ப்பித்தல் போன்ற சில நிகழ்வுகளுடன் .டெலிகேட் () வேலை செய்யாது என்பதை நினைவில் கொள்க, ஆதரிக்கப்பட்ட நிகழ்வுகளின் முழுமையான பட்டியலுக்கு jQuery. லைவ் () ஆவணங்களைப் பார்க்கவும்.
render: function () {$ (this.el) .html (this.template ()); this.image.fetch (); this.resize (); இதைத் திருப்பி விடுங்கள்;}
கடைசியாக, எங்கள் மார்க்அப்பை உருவாக்குவதற்கும், பார்வை உறுப்புக்கு காட்சி மார்க்அப் சேர்க்கப்படும் வரை செய்ய முடியாத கூடுதல் வேலைகளைச் செய்வதற்கும் பொறுப்பான .render () செயல்பாடு எங்களிடம் உள்ளது. எங்கள் வார்ப்புருவை வழங்கிய பிறகு, எங்கள் FlickrBombImage இல் .fetch () ஐ அழைக்க வேண்டும். .fetch () என்பது ஒரு முதுகெலும்பு செயல்பாடு, இது மாதிரியின் சமீபத்திய நகலை நிலைத்த அடுக்கிலிருந்து பெறுகிறது. இந்த மாதிரியை நாங்கள் முன்பு சேமித்திருந்தால், .fetch () இப்போது அந்தத் தரவை மீட்டெடுக்கும். படத்தைப் பெற்ற பிறகு, அதை சரியாக நிலைநிறுத்த மறுஅளவை அழைக்க வேண்டும்.
வீட்டு நீட்சி
எல்லா பகுதிகளிலும், இப்போது நாம் செய்ய வேண்டியது, பக்கத்தில் உள்ள ஒதுக்கிட படங்களை கண்டுபிடித்து அவற்றை காண்பிக்கப்பட்ட FlickrBombImage காட்சிகளுடன் மாற்றவும்.
$ ("img [src ^ = 'flickr: //']") .ஒவ்வொரு (செயல்பாடு () {var img = $ (இது), flickrBombImageView = புதிய FlickrBombImageView ({img: img}); img.replaceWith (flickrBombImageView. render (). el);});
இந்த சிறிய ஸ்னிப் பக்கத்தின் அடிப்பகுதியில் அல்லது ஒரு ஆவணத்திற்குத் திரும்ப அழைப்பில் இயக்கப்பட வேண்டும், அது மாற்றியமைக்கும் ஒதுக்கிட படங்களை அது கண்டுபிடிக்க முடியும் என்பதை உறுதிப்படுத்த. ஒரு படக் குறிச்சொல்லின் src பண்புக்கூறில் Flickr: // [KEYWORD] ஐக் குறிப்பிடுவதற்கான மாநாட்டைப் பயன்படுத்துகிறோம், இது Flickr இலிருந்து வரும் படங்களுடன் இருக்க வேண்டும் என்பதைக் குறிக்கிறது. பொருந்தக்கூடிய src பண்புடன் படக் கூறுகளைக் கண்டறிந்து, புதிய FlickrBombImageView ஐ உருவாக்கி, பின்னர் படத்தை நம்முடையதாக மாற்றுவோம். அசல் படத்தின் நகலைப் பிடித்து அதை எங்கள் FlickrBombView க்கு அனுப்புகிறோம், இதன்மூலம் உறுப்பில் குறிப்பிடப்பட்டுள்ள சில கூடுதல் உள்ளமைவு விருப்பங்களை இழுக்க முடியும்.
அந்த கடின உழைப்பின் இறுதி முடிவு நூலகத்தைப் பயன்படுத்தும் நபர்களுக்கு மிகவும் எளிமையான ஏபிஐ ஆகும். அவர்கள் பிளிக்கர்: // மாநாட்டைப் பயன்படுத்தி படக் குறிச்சொற்களை வரையறுக்கலாம், பிளிக்கர்பாம்ப் குறியீட்டை தங்கள் பக்கத்தின் கீழே கைவிடலாம், மற்றும் பாம், பிளிக்கரிடமிருந்து அவர்களுக்கு ஒதுக்கிட படங்கள் கிடைத்துள்ளன.
பெரிய ஓல் வலை பயன்பாடுகளிலும் சிறப்பாக செயல்படுகிறது
எங்களிடம் குறிப்பிடத்தக்க ஒரு பெரிய வலை வலை பயன்பாடு உள்ளது, இது உள்ளடக்க கிளையன்ட் பக்கத்தை உருவாக்குவதில் அக்கறை இல்லாமல் எழுதப்பட்டது. உள்ளடக்க கிளையன்ட் பக்கத்தை உருவாக்குவதன் மூலம் சார்ஜ் செய்யப்பட்ட பயன்பாட்டு டர்போவின் பிரிவுகளை உருவாக்க நாங்கள் விரும்பியபோது, நாங்கள் முதுகெலும்பைத் தேர்ந்தெடுத்தோம். காரணங்கள் ஒரே மாதிரியாக இருந்தன: குறியீட்டை ஒழுங்கமைக்க உதவுவதற்கு இலகுரக கட்டமைப்பை நாங்கள் விரும்பினோம், ஆனால் முழு பயன்பாட்டையும் மறுபரிசீலனை செய்யும்படி கட்டாயப்படுத்தவில்லை.
இந்த ஆண்டின் தொடக்கத்தில் நாங்கள் பெரிய வெற்றிகளைத் தொடங்கினோம், அன்றிலிருந்து முதுகெலும்புகளைப் புகழ்ந்து பாடுகிறோம்.
கூடுதல் ஆதாரங்கள்
இந்த கட்டுரையில் நான் விவரித்ததை விட முதுகெலும்புக்கு நிறைய இருக்கிறது, தொடக்கக்காரர்களுக்கான எம்.வி.சியின் சி (கட்டுப்படுத்தி) பகுதி (மாடல் வியூ கன்ட்ரோலர்), இது உண்மையில் சமீபத்திய பதிப்பில் ஆர் (திசைவி) ஆகும். இவை அனைத்தும் முதுகெலும்பு ஆவணத்தில் விவரிக்கப்பட்டுள்ளன, சனிக்கிழமை காலை ஒரு ஒளி வாசிப்பு:
documentcloud.github.com/backbone/
மேலும் பாரம்பரிய பயிற்சிகள் உங்கள் விஷயமாக இருந்தால், முதுகெலும்பில் எழுதப்பட்ட இந்த டோடோ பயன்பாட்டின் நன்கு ஆவணப்படுத்தப்பட்ட குறியீட்டைப் பாருங்கள்:
documentcloud.github.com/backbone/docs/todos.html
