IMHO मैं ऊपर "कहा कठपुतली के मॉड्यूल RequireJS के लिए एक सरल विकल्प हो के लिए होती हैं (और अन्य) दृष्टिकोण से अलग करना चाहते: के रूप में विकि में बताया गया है मैं उन्हें एक साथ उपयोग करने की अनुशंसा नहीं होता मॉड्यूल प्रारूप। "
मुझे सी # की असेंबली और नेमस्पेस अवधारणाओं के साथ Requ.js मॉड्यूल और Marionette.js मॉड्यूल के बीच तुलना करना पसंद है। Marionette.js के मॉड्यूल हमें कार्यक्षमता के आधार पर विभिन्न बिल्डिंग ब्लॉक की परिभाषाओं की समूह बनाने में मदद करते हैं, जबकि Requ.js को निर्भरता लोड/इंजेक्ट करने के लिए उपयोग किया जा सकता है।
फिर, यह मेरा विचार/समझ है (डेविड सुल्क के साथ उनकी पुस्तक 'स्ट्रक्चरिंग बैकबोन कोड के साथ स्ट्रक्चरिंग बैकबोन कोड' के साथ चर्चाओं पर आधारित है), जिसने मेरे कार्यान्वयन में मदद की है। एक तरह से हम नीचे वर्णित Marionette.js और Requ.js का उपयोग कर सकते हैं।
नीचे दिया गया उदाहरण एक छोटा पुस्तकालय प्रबंधक ऐप (नमूना) है जो ऑनलाइन @https://github.com/srihari-sridharan/LibraryManagement पाया जा सकता है। नीचे दिया गया कोड (महत्वहीन बिट्स और टुकड़े को छोड़कर) एप्लिकेशन ऑब्जेक्ट बनाता है और प्रारंभिक के बाद पुस्तकों की सूची प्रस्तुत करता है। कृपया इसे यहाँ मिल - https://github.com/srihari-sridharan/LibraryManagement/blob/master/app/js/app.js
define([
'marionette',
'modules/config/marionette/regions/dialog'], function (Marionette) {
// Create the application object
var LibraryManager = new Marionette.Application();
// Add regions to the application object
LibraryManager.addRegions({
//Header
headerRegion: "#header-region",
//Main
mainRegion: "#main-region",
//Footer
footerRegion: "footer-region",
//Overlay Dialog
dialogRegion: Marionette.Region.Dialog.extend({
el:"#dialog-region"
})
});
// Subscribe to Initialize After event.
LibraryManager.on('initialize:after', function() {
if(Backbone.history){
require(['modules/books/booksModule', 'modules/about/aboutModule'], function(){
Backbone.history.start();
if(LibraryManager.getCurrentRoute() === ''){
LibraryManager.trigger("books:list");
}
});
}
});
// Return the application object.
return LibraryManager;
});
अगला हम कार्यक्षमता के आधार पर मॉड्यूल/उप मॉड्यूल परिभाषित करते हैं। इसमें एक मॉड्यूल विशिष्ट राउटर भी होगा और तार नियंत्रक और मार्गों को संभालेगा। नियंत्रकों को कॉल की आवश्यकता नोट करें। इस कोड को https://github.com/srihari-sridharan/LibraryManagement/blob/master/app/js/modules/books/booksModule.js
define(['app'], function (LibraryManager) {
// Define a new module for Books - BooksModule
LibraryManager.module('BooksModule', function (BooksModule, LibraryManager, Backbone, Marionette, $, _) {
BooksModule.startWithParent = false;
BooksModule.onStart = function() {
console.log('Starting BooksModule.');
};
BooksModule.onStop = function() {
console.log('Stopping BooksModule.');
};
});
// Define a new module for a Router specific to BooksModule
LibraryManager.module('Routers.BooksModule', function (BooksModuleRouter, LibraryManager, Backbone, Marionette, $, _) {
BooksModuleRouter.Router = Marionette.AppRouter.extend({
appRoutes: {
'books': 'listBooks',
'books(?filter:=criterion)': 'listBooks',
'books/:id': 'showBook',
'books/:id/edit': 'editBook'
}
});
var executeAction = function (action, arg) {
LibraryManager.startSubModule('BooksModule');
action(arg);
LibraryManager.execute('set:active:header', 'books');
};
var API = {
// This is where we are using/referring to our controller
listBooks: function (criterion) {
require(['modules/books/list/listController'], function (ListController) {
executeAction(ListController.listBooks, criterion);
});
},
showBook: function (id) {
require(['modules/books/show/showController'], function (ShowController){
executeAction(ShowController.showBook, id);
});
},
editBook: function (id) {
require(['modules/books/edit/editController'], function (EditController) {
executeAction(EditController.editBook, id);
});
}
};
// Navigating routes.
LibraryManager.on('books:list', function() {
LibraryManager.navigate('books');
API.listBooks();
});
LibraryManager.on('books:filter', function(criterion) {
if(criterion){
LibraryManager.navigate('books?filter=' + criterion);
}
else{
LibraryManager.navigate('books');
}
});
LibraryManager.on('book:show', function (id) {
LibraryManager.navigate('books/' + id);
API.showBook(id);
});
LibraryManager.on("book:edit", function(id){
LibraryManager.navigate('books/' + id + '/edit');
API.editBook(id);
});
LibraryManager.addInitializer(function() {
new BooksModuleRouter.Router({
controller: API
});
});
});
return LibraryManager.BooksModuleRouter;
});
में मौजूद अंत में हम अपने विचारों, मॉडल और नियंत्रकों के लिए परिभाषाएँ है। ये परिभाषा मॉड्यूल/उप मॉड्यूल ऑब्जेक्ट्स से बंधी जाएगी।
दृश्य कोड नीचे दिखाया गया है। .extend() विधियों को देखें। उन्हें BooksModule.List.View उप मॉड्यूल से जुड़े चर के लिए असाइन किया गया है। https://github.com/srihari-sridharan/LibraryManagement/blob/master/app/js/modules/books/list/listView.js
define(['app',
'tpl!modules/books/list/templates/layout.html',
'tpl!modules/books/list/templates/panel.html',
'tpl!modules/books/list/templates/none.html',
'tpl!modules/books/list/templates/list.html',
'tpl!modules/books/list/templates/listItem.html'],
function (LibraryManager, layoutTemplate, panelTemplate, noneTemplate, listTemplate, listItemTemplate) {
LibraryManager.module('BooksModule.List.View', function(View, LibraryManager, Backbone, Marionette, $, _) {
View.Layout = Marionette.Layout.extend({
template: layoutTemplate,
regions:{
panelRegion: '#panel-region',
booksRegion: '#books-region'
}
});
View.Panel = Marionette.ItemView.extend({
// More code here!
});
View.Book = Marionette.ItemView.extend({
// More code here!
});
var NoBooksView = Marionette.ItemView.extend({
template: noneTemplate,
tagName: "tr",
className: "alert"
});
View.Books = Marionette.CompositeView.extend({
// More code here!
});
});
return LibraryManager.BooksModule.List.View; // Return the definition.
});
नियंत्रक कोड नीचे दिखाया गया है। इसे booksModule.js में कोड से बुलाया जाता है। नियंत्रक परिभाषा BooksModule.List उप मॉड्यूल से जुड़ा हुआ है।
define(['app', 'modules/books/list/listView'], function (LibraryManager, View) {
LibraryManager.module('BooksModule.List', function (List, LibraryManager, Backbone, Marionette, $, _) {
List.Controller = {
listBooks: function (criterion) {
require(['common/views', 'entities/book'], function (CommonViews) {
var loadingView = new CommonViews.Loading();
LibraryManager.mainRegion.show(loadingView);
var fetchingBooks = LibraryManager.request('book:entities');
var booksListLayout = new View.Layout();
var booksListPanel = new View.Panel();
require(['entities/common'], function (FilteredCollection) {
$.when(fetchingBooks).done(function (books) {
// More code here!
});
if(criterion){
filteredBooks.filter(criterion);
booksListPanel.once('show', function() {
booksListPanel.triggerMethod("set:filter:criterion", criterion);
});
}
var booksListView = new View.Books({
collection: filteredBooks
});
booksListPanel.on('books:filter', function (filterCriterion) {
filteredBooks.filter(filterCriterion);
LibraryManager.trigger("books:filter", filterCriterion);
});
booksListLayout.on("show", function(){
booksListLayout.panelRegion.show(booksListPanel);
booksListLayout.booksRegion.show(booksListView);
});
booksListPanel.on('book:new', function() {
require(["modules/books/new/newView"], function (NewView) {
// More code here!
});
LibraryManager.dialogRegion.show(view);
});
});
booksListView.on('itemview:book:show', function (childView, model) {
LibraryManager.trigger("book:show", model.get('id'));
});
booksListView.on('itemview:book:edit', function(childView, model) {
require(['modules/books/edit/editView'], function (EditView) {
// More code here!
LibraryManager.dialogRegion.show(view);
});
});
booksListView.on("itemview:book:delete", function (childView, model) {
model.destroy();
});
LibraryManager.mainRegion.show(booksListLayout);
});
});
});
}
}
});
return LibraryManager.BooksModule.List.Controller; // Return the definition.
});
इस प्रकार आवश्यकताएँ। जेएस मॉड्यूल और मैरियनेट मॉड्यूल एक साथ हो सकते हैं। निम्नलिखित फायदे हैं।
- स्रोत कोड का अधिक क्लीनर संगठन और चिंताओं के स्पष्ट पृथक्करण।
- मॉड्यूल प्रारंभ और रोकें विधियां वस्तुओं को प्रारंभ करने और साफ़ करने के प्रावधान प्रदान करती हैं।
- जब आप मॉड्यूल और उप-मॉड्यूल के रूप में कार्यशीलताओं और उप-कार्यक्षमताओं को मॉडल करते हैं, तो हमारे पास स्मृति में क्या रहता है और क्या नहीं होना चाहिए पर अधिक बारीक नियंत्रण होता है।
- इसके अलावा, मॉड्यूल परिभाषा को कई फाइलों में विभाजित किया जा सकता है।
कृपया अपने विचार पोस्ट करें। पढ़ने के लिए धन्यवाद।
पुनश्च: ऊपर दृष्टिकोण के आधार पर, नीचे अपना उदाहरण में परिवर्तन पाएं:
require([ "jquery", "underscore", "backbone", "marionette" ],
function($, _, Backbone, Marionette) {
App.module("FirstView", function(FirstView, App, Backbone, Marionette, $, _) {
FirstView.View = Marionette.ItemView.extend({
//define view stuff in here
});
return FirstView.View;
});
});
समझ में आता है। धन्यवाद! मैं RequJS का उपयोग करने जा रहा हूं, क्योंकि मुझे लगता है कि मैंने मैरियनेट मॉड्यूल का उपयोग किया है, मुझे बीबीसीएलोनमेल में सिर में स्क्रिप्ट टैग में अपनी सभी एप्लिकेशन फ़ाइलों को चिपकाना होगा, मैं ऐसा करने से बचने की कोशिश कर रहा हूं। –
मैं एकाधिक स्क्रिप्ट टैग का उपयोग करने की अनुशंसा नहीं करता हूं। बीबीसीएलोनमेल सही करने का एक उदाहरण नहीं है। :) असली परियोजनाओं ने कदम उठाए हैं जो संक्षिप्त और संक्षिप्त करते हैं। r.js requjs मॉड्यूल के लिए करता है, या रेलवे एसेट पाइपलाइन या grunt.js, या कई अन्य टूल्स जैसे कई अन्य उपकरणों के साथ किया जा सकता है। –
RequJS के साथ मैरियनेट का उपयोग करने के लिए यहां एक अद्यतन लिंक है। (जिथब रिपोजिटरी चली गई।) Https://github.com/marionettejs/backbone.marionette/wiki/Using-marionette-with-requirejs –