😘 🧝🏽 💖 Spine.js के साथ जटिल इंटरफेस लिखना 📙 👦🏿 👩🏾‍🏫

Spine.js का परिचय

स्पाइन एक छोटा ढांचा है जो आपको एमवीसी योजना पर काम करने की अनुमति देता है, सीधे जावास्क्रिप्ट भाषा में एप्लिकेशन बनाता है, जो कक्षाओं और एक्सटेंशन के माध्यम से तार्किक कोड पृथक्करण, मॉडल वंशानुक्रम प्रदान करता है। इसके अलावा, यह उपकरण काफी हद तक Backbone.js एपीआई पर आधारित है, इसलिए जो डेवलपर्स इस ढांचे से निपटते हैं, वे आसानी से स्पाइन को समझेंगे (हालांकि, कई महत्वपूर्ण अंतर हैं)। Spine.js HTML5 और अतुल्यकालिक सर्वर अनुरोधों के साथ मिलकर काम कर सकता है।

हर दिन जावास्क्रिप्ट चौखटे अधिक से अधिक दिखाई देते हैं। तो क्या Spine.js इतना खास है?

सरल नियंत्रक कार्यान्वयन (बैकबोन एपीआई पर आधारित)
Ajax और HTML5 लोकल स्टोरेज के लिए सपोर्ट
अतुल्यकालिक सर्वर संचार
सभी आधुनिक ब्राउज़रों में काम करता है (Chrome, Safari, Firefox, IE> = 7)
स्पाइन मोबाइल एक्सटेंशन
सरल और आसान
अच्छा प्रलेखन

नमूना आवेदन के स्रोत कोड पर एक नज़र डालें और अपने लिए निर्णय लें।

स्पाइन क्लासेस, मॉडल्स, और व्यूज़

आधिकारिक स्पाइन प्रलेखन में सबसे व्यापक गाइड है जो मैंने कभी देखा है। इसमें बहुत सी चीजें शामिल हैं: सत्यापन, क्रमांकन और चिप्स का एक पूरा गुच्छा के साथ काम करना। हालांकि, इस पाठ का उद्देश्य तीन सबसे बड़ी विशेषताओं से परिचित होना है: कक्षाएं , मॉडल और विचार ।

कक्षाएं

स्पाइन के बहुत दिल में, Object.create का अनुकरण यह सुनिश्चित करने के लिए किया जाता है कि ऑब्जेक्ट्स गतिशील रूप से बनाए जाते हैं और स्क्रिप्ट के चलने के दौरान इसका उपयोग किया जा सकता है। इस तरह के वर्गों का उपयोग निम्नलिखित उदाहरण में देखा जा सकता है:

var twitterClient = Spine.Class.create(); //or var twitterClientWithArgs = Spine.Class.create({ testMessage: "If it weren't for WebMD I would have never known what symptoms to mimic so I could get all these prescriptions from my doctor." });

कक्षाओं को प्रारंभ करने के लिए, init () विधि का उपयोग किया जाता है। स्पाइन डेवलपर्स ने कंस्ट्रक्टर फ़ंक्शन का उपयोग नहीं करने का फैसला किया, क्योंकि "तत्काल" कीवर्ड का उपयोग करने से क्लास को इंस्टेंट करते समय कुछ समस्याएं हो सकती हैं।

 var twitterClient = Spine.Class.create({ testMessage: "Hello world" }); var myclient = twitterClient.init();

सभी पैरामीटर जो आप ऑब्जेक्ट को इनिशियलाइज़ करते समय उपयोग करना चाहते हैं उन्हें init () विधि से पास करना चाहिए। एक उदाहरण:

 var twitterClient = Spine.Class.create({ init:function(testMessage){ this.testMessage = testMessage; } });

आदर्श

स्पाइन में, मॉडल का उपयोग एप्लिकेशन डेटा को संग्रहीत करने के लिए किया जाता है, साथ ही इस डेटा से जुड़े किसी अन्य तर्क के लिए भी। आप इस विचार से चिपके रहें, जैसा कि यह MVC पर बनने वाले एप्लिकेशन में आवश्यकताओं में से एक है। मॉडल से संबंधित डेटा को Model.records रिकॉर्ड में संग्रहीत किया जाता है, और इसे स्पाइन सेटअप () फ़ंक्शन का उपयोग करके बनाया जा सकता है।

निम्न उदाहरण सेट करने के लिए मॉडल का नाम और विशेषताओं का सेट () विधि सेट करता है:

 var Tweets = Spine.Model.setup("Tweet", ["username","tweet_message"]);

एक विशेष वर्ग के गुणों का उपयोग करके मॉडल की कार्यक्षमता का विस्तार किया जा सकता है:

 Tweets.include({ toTweetString: function(){ return("@" + this.username + " " + this.tweet_message); } });

एक मॉडल बनाना अभी भी एक ही सरल है .init () विधि:

 var mytweets = Tweets.init({username: "addyosmani", tweet_message: "hai twitter"});

स्पाइन और बैकबोन के पास टेम्प्लेट रेंडर करने और DOM मॉडल में उन्हें एम्बेड करने के लिए विभिन्न विकल्प हैं।

नियंत्रकों

स्पाइन कंट्रोलर Spine.Class का विस्तार करते हैं, और इसके सभी गुणों को भी प्राप्त करते हैं। स्पाइन में कंट्रोलर बनाने का एक उदाहरण:

 var TweetController = Spine.Controller.create({ init:function(){ //initial logic on instantiation } })

नियंत्रकों का आरंभ इस प्रकार है:

 var myTweetController = TweetController.init();

प्रत्येक नियंत्रक में एक विशेष तत्व होता है जिसे 'एल' कहा जाता है, जिसे एक उदाहरण संपत्ति के माध्यम से पारित किया जा सकता है। एक उदाहरण:

 var myTweetController = TweetController.init({el: $('#tweets')});

प्रलेखन

आप स्पाइन डॉक्यूमेंटेशन में कक्षाओं , मॉडलों और नियंत्रकों के बारे में अधिक पढ़ सकते हैं।

रीढ़ और रीढ़ की हड्डी के बीच महत्वपूर्ण अंतर

डेवलपर्स जो पहले मिनट में बैकबोन और स्पाइन के लिए दस्तावेज़ीकरण पढ़ते हैं, वे मूलभूत अंतरों को खोजने में सक्षम नहीं होंगे। हालांकि, एक वास्तविक परियोजना में, ये अंतर स्वयं द्वारा प्रकट हो सकते हैं।

1. बैकबोन अभ्यावेदन उनके अनुप्रयोग में पारंपरिक नियंत्रकों की तरह अधिक होते हैं, और URL रूटिंग को संभालने के लिए बैकबोन नियंत्रक अधिक जिम्मेदार होते हैं। स्पाइन में, रूटिंग समर्थन हाल ही में जोड़ा गया था (क्योंकि यह एक बहुत ही आवश्यक तत्व है), और नियंत्रक बैकबोन में विचारों के समान हैं।

2. बैकबोन कंस्ट्रक्टर फ़ंक्शन और प्रोटोटाइप का उपयोग करता है, जबकि स्पाइन Object.create के अनुकरण संस्करण और एक सिम्युलेटेड क्लास सिस्टम का उपयोग करता है - जो आपको एक ही विरासत प्रभाव प्राप्त करने की अनुमति देता है और वास्तव में एक बहुत ही दिलचस्प चाल है। यह बैकबोन के मूलभूत अंतरों में से एक है। दोनों दृष्टिकोणों को अस्तित्व का अधिकार है।

3. बहुत सारे डेवलपर्स एक या दूसरे पुस्तकालय के फ़ाइल आकार के अंतर पर ध्यान देते हैं: इस संबंध में, हम इस तथ्य पर ध्यान दे सकते हैं कि स्पाइन में मैपिंग, फ़िल्टरिंग और बैकबोन में शामिल कई अन्य फ़ंक्शन शामिल नहीं हैं। यदि आकार आपके लिए मायने रखता है, तो आपको निश्चित रूप से स्पाइन चुनने की आवश्यकता है, क्योंकि इस संबंध में, वह हर तरह से जीतता है।

अभ्यास में रीढ़

उदाहरण: Bit.ly ग्राहक

जब आप एसपीए पर काम करते हैं, तो बाहरी डेटा के साथ काम करने और बातचीत करने में बहुत समय लगता है (यह आपका अपना डेटा या अन्य एपीआई से प्राप्त डेटा हो सकता है)। आप रूटिंग का भी उपयोग करना चाहेंगे ताकि आप एप्लिकेशन की स्थिति को संरक्षित कर सकें। ऐसा करने के लिए, आपको स्थानीयस्टोरेज का उपयोग करना पड़ सकता है, साथ ही ajax अनुरोधों को संसाधित करना होगा।

उपरोक्त सभी को देखते हुए, हम एक बिट बनाने जा रहे हैं। ग्राहक जो आपको अनुमति देगा:

अपने ब्राउज़र से सीधे आकर्षक URL बनाएँ
अपने bit.ly URL को संग्रहीत करें ताकि आप किसी भी समय उन्हें आसानी से एक्सेस कर सकें।
क्लिक आँकड़े प्रदान करना (यह रूटिंग प्रदर्शित करने के लिए एक अतिरिक्त 'दृश्य' के माध्यम से लागू किया जाएगा)।

आवश्यक शर्तें

एक bit.ly प्लगइन बनाना

शुरू करने से पहले, हमें bit.ly सेवाओं तक पहुँचने का एक अच्छा तरीका खोजने की आवश्यकता है: 1. छोटा URL और 2. आँकड़े क्लिक करें। सामान्य जावास्क्रिप्ट के साथ पीड़ित होने के बजाय, हम ajax अनुरोधों के साथ अधिक सुविधाजनक और तेज़ तरीके से काम करने के लिए jQuery का उपयोग करेंगे। यह दृष्टिकोण हमें एक अधिक पठनीय और समझने योग्य एप्लिकेशन लिखने की भी अनुमति देगा।

Store.js के लिए अतिरिक्त सहायता

डिफ़ॉल्ट रूप से, स्पाइन आधुनिक ब्राउज़रों पर केंद्रित है, और इस कारण से लोकलस्टोरेज जैसी चीजें सभी ब्राउज़रों में समान रूप से काम नहीं करेंगी, इसलिए यदि आपको क्रॉस-ब्राउज़र संगतता की आवश्यकता है, तो आपको पुराने टूल का उपयोग करना चाहिए।

हालाँकि, इस समस्या को store.js (और यह किस पर आधारित है: json2.js) का उपयोग करके हल किया जा सकता है। नीचे spine.model.local.js फ़ाइल की सामग्री दी गई है, जिसे आप नीचे दी गई लाइनों पर टिप्पणी करके और उन्हें अपने स्थान पर प्रतिस्थापित करके रिपॉजिटरी का उपयोग करने के लिए अपडेट कर सकते हैं।

 Spine.Model.Local = { extended: function(){ this.sync(this.proxy(this.saveLocal)); this.fetch(this.proxy(this.loadLocal)); }, saveLocal: function(){ var result = JSON.stringify(this); //localStorage[this.name] = result; store.set(this.name, result); }, loadLocal: function(){ //var result = localStorage[this.name]; var result = store.get(this.name); if ( !result ) return; var result = JSON.parse(result); this.refresh(result); } };

प्रसंस्करण jQuery टेम्पलेट

स्पाइन और बैकबोन फ्रेमवर्क कई तरीकों (माइक्रो-टेम्प्लेट प्रोसेसिंग, मूंछ.जे और इतने पर) के साथ बातचीत कर सकते हैं। कौन सा उपयोग करना है, आप चुनते हैं। उदाहरण ने हमारी छोटी URL प्रविष्टियों को प्रस्तुत करने के लिए jQuery tmpl प्लगइन का उपयोग किया और टेम्पलेट्स का उपयोग करके आंकड़े क्लिक करें।

डिज़ाइन

क्या लागू किया जाना चाहिए, इसकी सूची:

प्रत्येक संक्षिप्त URL (यूआरएल मॉडल) में निहित डेटा को दर्शाने के लिए मॉडल;
व्यक्तिगत रिकॉर्ड और कार्यों को प्रस्तुत करने के लिए एक नियंत्रक जो अनुप्रयोग द्वारा किया जा सकता है (Export.URL);
एक नया बिट दर्ज करने के लिए जिम्मेदार दृश्य प्रदर्शित करने के लिए एक नियंत्रक। निर्यात (यूरालसिस्ट);
नियंत्रक, किसी विशेष रिकॉर्ड (निर्यात.सैट) पर क्लिक के आंकड़ों के लिए जिम्मेदार दृश्य को प्रदर्शित करने के लिए;
एक सार्वभौमिक नियंत्रक जो एप्लिकेशन रूटिंग (निर्यात। UrlApp) को संभाल लेगा।

उदाहरण jQuery का उपयोग करता है क्योंकि यह एक टेम्पलेट और एक प्लगइन के साथ काम करने के लिए आदर्श है, लेकिन स्पाइन Zepto या अन्य जावास्क्रिप्ट लाइब्रेरी के साथ भी काम कर सकता है। अब हमारे एप्लिकेशन के कोड को देखें:

प्रारंभिक कैशिंग

 var exports = this;

सरल jQuery प्लगइन

 $.fn.toggleDisplay = function(bool){ if ( typeof bool == "undefined" ) { bool = !$(this).filter(":first:visible")[0]; } return $(this)[bool ? "show" : "hide"](); };

यूआरएल मॉडल:

 var Url = Spine.Model.setup("Url", ["short_url", "long_url", "stats"]); Url.extend(Spine.Model.Local); Url.include({ validate: function(){ if ( !this.long_url ) return "long_url required" if ( !this.long_url.match(/:\/\//)) this.long_url = "http://" + this.long_url }, fetchUrl: function(){ if ( !this.short_url ) $.bitly(this.long_url, this.proxy(function(result){ this.updateAttributes({short_url: result}); })); }, fetchStats: function(){ if ( !this.short_url ) return; $.bitly.stats(this.short_url, this.proxy(function(result){ this.updateAttributes({stats: result}); })); } }); Url.bind("create", function(rec){ rec.fetchUrl(); });

Export.Urls नियंत्रक:

 exports.Urls = Spine.Controller.create({ events: { "click .destroy": "destroy", "click .toggleStats": "toggleStats" }, proxied: ["render", "remove"], template: function(items){ return $("#urlTemplate").tmpl(items); }, init: function(){ this.item.bind("update", this.render); this.item.bind("destroy", this.remove); }, render: function(){ this.el.html(this.template(this.item)); return this; }, toggleStats: function(){ this.navigate("/stats", this.item.id, true); }, remove: function(){ this.el.remove(); }, destroy: function(){ this.item.destroy(); } });

Export.UrlsList नियंत्रक:

 exports.UrlsList = Spine.Controller.create({ elements: { ".items": "items", "form": "form", "input": "input" }, events: { "submit form": "create", }, proxied: ["render", "addAll", "addOne"], init: function(){ Url.bind("create", this.addOne); Url.bind("refresh", this.addAll); }, addOne: function(url){ var view = Urls.init({item: url}); this.items.append(view.render().el); }, addAll: function(){ Url.each(this.addOne); }, create: function(e){ e.preventDefault(); var value = this.input.val(); if (value) Url.create({long_url: value}); this.input.val(""); this.input.focus(); } });

नियंत्रक निर्यात करता है।

 exports.Stats = Spine.Controller.create({ events: { "click .back": "back" }, proxied: ["change", "render"], init: function(){ Url.bind("update", this.render); }, template: function(items){ return $("#statsTemplate").tmpl(items); }, render: function(){ if ( !this.item ) return; this.el.html(this.template(this.item)); }, change: function(item){ this.item = item; this.navigate("/stats", item.id); this.item.fetchStats(); this.render(); this.active(); }, back: function(){ this.navigate("/list", true); } });

Export.UrlApp नियंत्रक:

 exports.UrlApp = Spine.Controller.create({ el: $("body"), elements: { "#urls": "urlsEl", "#stats": "statsEl" }, init: function(){ this.list = UrlsList.init({el: this.urlsEl}); this.stats = Stats.init({el: this.statsEl}); this.manager = Spine.Controller.Manager.init(); this.manager.addAll(this.list, this.stats); this.routes({ "": function(){ this.list.active() }, "/list": function(){ this.list.active() }, "/stats/:id": function(id){ this.stats.change(Url.find(id)) } }); Url.fetch(); Spine.Route.setup(); } });

अंत में, हमारे नियंत्रक 'ऐप' के आरंभ को पूरा करने के लिए:

 exports.App = UrlApp.init();

URL कटौती के लिए कोड और Bit.ly के लिए सांख्यिकी क्लिक करें

 (function($){ var defaults = { version: "3.0", login: "legacye", apiKey: "R_32f60d09cccde1f266bcba8c242bfb5a", history: "0", format: "json" }; $.bitly = function( url, callback, params ) { if ( !url || !callback ) throw("url and callback required"); var params = $.extend( defaults, params ); params.longUrl = url; return $.getJSON("http://api.bit.ly/shorten?callback=?", params, function(data, status, xhr){ callback(data.results[params.longUrl].shortUrl, data.results[params.longUrl], data); }); }; $.bitly.stats = function( url, callback, params ) { if ( !url || !callback ) throw("url and callback required"); var params = $.extend( defaults, params ); params.shortUrl = url; return $.getJSON("http://api.bitly.com/v3/clicks?callback=?", params, function(data, status, xhr){ callback(data.data.clicks[0], data); }); }; })(jQuery);

एप्लिकेशन इंडेक्स / HTML:

LABjs का उपयोग एप्लिकेशन को नियंत्रित करने के लिए किया जाता है, हालाँकि आप इसे आसानी से बदल सकते हैं कि आप किसके साथ काम करने के आदी हैं।

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/application.css" type="text/css" charset="utf-8"> <script src="lib/LAB.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $LAB .script("lib/json.js") .script("lib/jquery.js") .script("lib/jquery.tmpl.js") .script("lib/jquery.bitly.js") .script("lib/store.min.js") .script("lib/spine.js") .script("lib/spine.model.local.js") .script("lib/spine.controller.manager.js") .script("lib/spine.route.js") .script("app/models/url.js") .script("app/application.js"); </script> <script type="text/x-jquery-tmpl" id="urlTemplate"> <div class="item"> <div class="show"> <span class="short"> ${long_url} </span> <span class="long"> {{if short_url}} <a href="${short_url}">${short_url}</a> {{else}} Generating... {{/if}} </span> <a class="toggleStats"></a> <a class="destroy"></a> </div> </div> </script> <script type="text/x-jquery-tmpl" id="statsTemplate"> <div class="stats"> <a class="back">Back</a> <h1>Click Statistics</h1> <h1 class="longUrl">${long_url}</h1> <p>Short URL: {{if short_url}} <a href="${short_url}">${short_url}</a> {{else}} Generating... {{/if}} </p> {{if stats}} <p>Global clicks: ${stats.global_clicks}</p> <p>User clicks: ${stats.user_clicks}</p> {{else}} Fetching... {{/if}} </div> </script> </head> <body> <div id="views"> <div id="urls"> <h1>Bit.ly Client</h1> <form> <input type="text" placeholder="Enter a URL"> </form> <div class="items"></div> </div> <div id="stats"> </div> </div> </body> </html>

नोट:

क्रॉस-ब्राउज़र संगतता के लिए, यह उदाहरण एक लाइव या स्थानीय वेब सर्वर पर चलाया जाना चाहिए। यदि आवश्यक हो तो MAMP / WAMP का उपयोग करें;
क्लिक आंकड़ों की जांच करने के लिए, मैं उन साइटों के URL का उपयोग करने की सलाह देता हूं जो सबसे लोकप्रिय हैं। उदाहरण के लिए, www.google.com के बारे में जानकारी Bit.ly डेटाबेस में होने की संभावना है;
डेमो उदाहरण मेरी खुद की Bit.ly एपीआई कुंजियों का उपयोग करता है, जिसे बदलने की आवश्यकता होती है।
Google चार्ट API का उपयोग करके पाई चार्ट तैयार किए जाते हैं। आपके लिए इतना नया है कि दृष्टिकोण को जटिल नहीं करने के लिए, मैंने खुद ही आरेख की छवि को बदलने के लिए चुना, लेकिन आप किसी भी समय विज़ुअलाइज़ेशन एपीआई पर आसानी से स्विच कर सकते हैं;
आवेदन निर्देशिका संरचना पूरी तरह से आप पर निर्भर है। कुछ डेवलपर्स सामान्य संरचना - मॉडल / दृश्य / नियंत्रक को पसंद करते हैं, जबकि अन्य एक सार्वभौमिक एप्लिकेशन फ़ोल्डर रखना पसंद करते हैं, जहां सब कुछ एक एकल फ़ाइल में निहित है। उदाहरण उस फ़ोल्डर संरचना का उपयोग करता है जिसका मैं उपयोग कर रहा हूं।
यदि आप सामग्री के लिए अद्वितीय "दृश्य" रखना चाहते हैं (उदाहरण के लिए, # ui / डैशबोर्ड के लिए एक दृश्य, और # ui / आँकड़े के लिए दूसरा), तो आपको spine.controller.manager.js के कार्य को पार्स करने की आवश्यकता है, क्योंकि इस फ़ाइल में इस समस्या का समाधान है।

वह सब है!

परिणाम
स्रोत कोड

निष्कर्ष

रीढ़ रीढ़ की हड्डी के लिए एक अच्छा विकल्प है। प्रलेखन अपने दम पर जारी रखने के लिए बहुत अच्छा है।

प्रयुक्त सामग्री:

Spine.js के साथ जटिल इंटरफेस लिखना