जावास्क्रिप्ट में एक सिंगल पेज क्लाइंट लिखना

यह लेख एक नि: शुल्क अनुवाद है। मूल यहाँ है ।

परिचय

मुझे लगता है कि यह किसी के लिए कोई रहस्य नहीं है कि आधुनिक वेब सेवाओं में क्लाइंट एप्लिकेशन अधिक जटिल हो रहे हैं और उनमें जेएस कोड की संख्या बढ़ रही है। हाल तक तक, क्लाइंट भाग की वास्तुकला, एक नियम के रूप में, खरोंच से विकसित की गई थी और प्रत्येक परियोजना के लिए विशिष्ट थी। आश्चर्य नहीं कि हमें बार-बार विशिष्ट कार्यों से निपटना पड़ा।
हर कोई सर्वर साइड पर MVC फ्रेमवर्क के लिए उपयोग किया जाता है, लेकिन क्लाइंट-साइड JS कोड अक्सर खराब संरचित होता है।

मेरा सुझाव है कि आप backbone.js, underscore.js और jQuery पर आधारित समाधान से खुद को परिचित करते हैं, जो इस समस्या को हल करने में मदद करेगा।

समस्या का बयान

हम अपने आवेदन को कैसे देखना चाहेंगे? यहाँ मुख्य बिंदु हैं जो मेरे लिए महत्वपूर्ण हैं:

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

उदाहरण के रूप में सरल एप्लिकेशन "मूवी कैटलॉग" का उपयोग करके इन समस्याओं को हल करने का प्रयास करें।

उपकरण

हमें आवश्यकता होगी:

• backbone.js
• jQuery
• Underscore.js
• mustache.js
• ICanHaz.js

एक नज़र backbone.js पर

इस ढांचे का कार्य आपको विजेट्स का एक गुच्छा नहीं देना है, और प्रस्तुति का स्तर प्रदान करने के लिए भी नहीं है (देखें)। इसका काम आपको कुछ प्रमुख वस्तुएं देना है जो आपको अपने कोड को बनाने में मदद करेंगे।
हमें मॉडल, संग्रह, दृश्य और नियंत्रक वस्तुओं की आवश्यकता होगी।

आदर्श

पूरी तरह कार्यात्मक मॉडल प्राप्त करने के लिए, बस एक पंक्ति कोड लिखें:

var Movie = Backbone.Model.extend({}); 

अब हम वस्तु के उदाहरण प्राप्त कर सकते हैं, सेट कर सकते हैं और मनमाना गुण प्राप्त कर सकते हैं:

 matrix = new Movie(); matrix.set({ title: "The Matrix", format: "dvd' }); matrix.get('title'); 

ऑब्जेक्ट बनाते समय आप सीधे कंस्ट्रक्टर को विशेषता भी दे सकते हैं:

 matrix = new Movie({ title: "The Matrix", format: "dvd' }); 

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

 var Movie = Backbone.Model.extend({ initialize: function (spec) { if (!spec || !spec.title || !spec.format) { throw "InvalidConstructArgs"; } } }); 

आप एक मान्य () विधि को भी परिभाषित कर सकते हैं, यह हर बार जब आप विशेषताओं को सेट करते हैं और विशेषताओं को मान्य करने के लिए उपयोग किया जाता है। यदि यह विधि कुछ भी लौटाती है, तो विशेषता सेट नहीं होती है:

 var Movie = Backbone.Model.extend({ validate: function (attrs) { if (attrs.title) { if (!_.isString(attrs.title) || attrs.title.length === 0 ) { return "    "; } } } }); 

रीढ़ की संभावनाओं के साथ एक अधिक पूर्ण परिचित के लिए, मेरा सुझाव है कि आप प्रलेखन के साथ खुद को परिचित करते हैं।

संग्रह

बैकबोन में संग्रह कुछ प्रकार के मॉडल की एक क्रमबद्ध सूची है। एक नियमित सरणी के विपरीत, संग्रह बहुत अधिक कार्यक्षमता प्रदान करते हैं, जैसे कि, उदाहरण के लिए, तुलनित्र () विधि का उपयोग करके छंटनी नियम स्थापित करना।
संग्रह में मॉडल का प्रकार निर्धारित होने के बाद, वहाँ एक वस्तु जोड़ना अत्यंत सरल दिखता है:

 var MovieList = Backbone.Collection.extend({ model: Movie }); var library = new MovieList(); library.add({ title: "The Big Lebowski", format: "VHS" }); 

की प्रस्तुति

सामान्य शब्दों में, बैकबोन दृश्य किसी ब्राउज़र में मॉडल परिवर्तन प्रदर्शित करने के नियमों को परिभाषित करते हैं।
यह वह जगह है जहाँ डोम हेरफेर शुरू होता है और jQuery खेल में आता है। DOM में मॉडल के शुरुआती लोडिंग के लिए, हमें एक टेम्प्लेट इंजन की आवश्यकता होती है, हम ICanHaz.js + मूंछें.js बंडल का उपयोग करेंगे
यहाँ हमारे आवेदन के लिए एक उदाहरण दृश्य है:

 var MovieView = Backbone.View.extend({ render: function() { var context = _.extend(this.model.toJSON(), {cid: this.model.cid}); this.el = ich.movie(context); return this; } }); 

यह सब एक साथ रखना

अब तक, हमने एप्लिकेशन के विभिन्न हिस्सों के बारे में बात की थी, अब देखते हैं कि उन्हें एक में कैसे संयोजित किया जाए।

नियंत्रक

नियंत्रक में, हम आवेदन के सभी हिस्सों को जोड़ेंगे, और वस्तुओं के हेरफेर के लिए पथ और उनसे जुड़े तरीकों का भी निर्धारण करेंगे।

 var MovieAppController = Backbone.Controller.extend({ initialize: function(params) { this.model = new MovieAppModel(); this.view = new MovieAppView({ model: this.model }); params.append_at.append(this.view.render().el); }, routes: { "movie/add": "add", "movie/remove/:number": "remove", }, add: function() { app.model.movies.add(new Movie({ title: 'The Martix' + Math.floor(Math.random()*11), format: 'dvd' })); //          this.saveLocation(); }, remove: function(cid) { app.model.movies.remove(app.model.movies.getByCid(cid)); this.saveLocation(); } }); 

यहां हम देखते हैं कि एप्लिकेशन मॉडल नियंत्रक में संग्रहीत है, जो अन्य सभी मॉडल और संग्रह को संग्रहीत करेगा, साथ ही आवेदन की प्रस्तुति भी।
हमारे मामले में एप्लिकेशन मॉडल फिल्मों का एक संग्रह संग्रहीत करेगा:

 var MovieAppModel = Backbone.Model.extend({ initialize: function() { this.movies = new MovieList(); } }); 

एप्लिकेशन दृश्य इस तरह दिखाई देगा:

 var MovieAppView = Backbone.View.extend({ initialize: function() { _.bindAll(this, "addMovie", "removeMovie"); this.model.movies.bind('add', this.addMovie); this.model.movies.bind('remove', this.removeMovie); }, render: function() { $(this.el).html(ich.app(this.model.toJSON())); this.movieList = this.$('#movieList'); return this; }, addMovie: function(movie) { var view = new MovieView({model: movie}); this.movieList.append(view.render().el); }, removeMovie: function(movie) { this.$('#movie_' + movie.cid).remove(); } }); 

ठीक है, वास्तव में सभी निर्भरता और टेम्पलेट्स के साथ सूचकांक फ़ाइल:

 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Movie App</title> <!-- libs --> <script src="js/lib/jquery.js"></script> <script src="js/lib/underscore.js"></script> <script src="js/lib/backbone.js"></script> <!-- templating --> <script src="js/lib/mustache.js"></script> <script src="js/lib/ICanHaz.js"></script> <!-- app --> <script src="js/app/Movie.js"></script> <script src="js/app/MovieCollection.js"></script> <script src="js/app/MovieView.js"></script> <script src="js/app/MovieAppModel.js"></script> <script src="js/app/MovieAppView.js"></script> <script src="js/app/MovieAppController.js"></script> <script type="text/javascript"> $(function() { var movieApp = new MovieAppController({append_at: $('body')}); window.app = movieApp; Backbone.history.start(); }); </script> <!-- ich templates --> <script id="app" type="text/html"> <h1>Movie App</h1> <a href="#movie/add">add new movie</a> <ul id="movieList"></ul> </script> <script id="movie" type="text/html"> <li id="movie_{{ cid }}"><span class="title">{{ title }}</span> <span>{{ format }}</span> <a href="#movie/remove/{{ cid }}">x</a></li> </script> </head> <body> </body> </html> 

पूरा आवेदन तैयार है। बेशक, यह संभावनाओं का एक बहुत छोटा हिस्सा है जो ये पुस्तकालय प्रदान करते हैं, लेकिन मुझे लगता है कि यह उदाहरण इन उपकरणों का उपयोग करके विकास के लिए एक स्वाद महसूस करने के लिए पर्याप्त है।