MVC को कई स्थानों पर कवर किया गया है, इसलिए यहाँ पुन: पुनरावृति के लिए बहुत कुछ नहीं होना चाहिए। अनिवार्य रूप से आप अपने ऑब्जेक्ट ग्राफ, हेल्पर्स और लॉजिक को मॉडल टियर में शामिल करना चाहते हैं। दृश्य वे स्क्रीन होंगे जो पृष्ठ के गतिशील भाग को भरने के लिए बाहर धकेले जाते हैं (और इनमें तर्क और सहायकों की हल्की मात्रा हो सकती है)। और नियंत्रक, जो ऑब्जेक्ट ग्राफ़, हेल्पर्स और लॉजिक से उपलब्ध स्क्रीन के आधार पर स्क्रीन को परोसने के लिए एक हल्का कार्यान्वयन है।
नमूना
यह वह जगह होनी चाहिए जहां आवेदन का मांस बैठता है। इसे एक सर्विस लेयर, एक लॉजिक लेयर और एक एंटिटी लेयर में बांधा जा सकता है। आपके उदाहरण के लिए इसका क्या मतलब है?
इकाई परत
यह आपके खेल के मॉडल और आंतरिक व्यवहार की परिभाषाओं को घर में रखना चाहिए। उदाहरण के लिए, यदि आपके पास खानों के लिए एक खेल है, तो यह वह जगह होगी जहां बोर्ड और वर्ग परिभाषाएं थीं कि वे अपनी आंतरिक स्थिति को कैसे बदलते हैं।
function Location(x,y){
this.x = x;
this.y = y;
}
function MineTile(x,y){
this.flagged = false;
this.hasMine = false;
this.pristine = true;
this.location = new Location(x,y);
}
MineTile.prototype.expose = function(){
if( this.hasMine ) return false;
this.pristine = false;
return this.location;
};
तो माइनटाइल को इसकी आंतरिक स्थिति का पता चल जाएगा, जैसे कि यह दिखा रहा है या जांच की गई है ( this.pristine), अगर यह उन खानों में से एक है जिसमें एक खदान है ( this.hasMine) है, लेकिन यह निर्धारित नहीं करेगा कि यह खदान होना चाहिए था या नहीं। यह तर्क परत तक होगा। (OOP में और भी आगे जाने के लिए, MineTile एक जेनेरिक टाइल से विरासत में मिली)।
तर्क परत
यह उन जटिल तरीकों को शामिल करता है जो एप्लिकेशन को बदलते मोड, राज्य को ध्यान में रखते हुए, आदि के साथ बातचीत करेगा, इसलिए यह वह जगह होगी जहां वर्तमान खेल की स्थिति को बनाए रखने के लिए एक मध्यस्थ पैटर्न लागू किया जाएगा। यह वह जगह होगी जहां गेम लॉजिक यह निर्धारित करने के लिए रहता है कि गेम के दौरान क्या होता है, उदाहरण के लिए या माइनटाइल्स की स्थापना के लिए मेरा क्या होगा। यह तार्किक रूप से निर्धारित मापदंडों के आधार पर त्वरित स्तर प्राप्त करने के लिए इकाई परत में कॉल करेगा।
var MineSweeperLogic = {
construct: function(x,y,difficulty){
var mineSet = [];
var bombs = 7;
if( difficulty === "expert" ) bombs = 15;
for( var i = 0; i < x; i++ ){
for( var j = 0; i j < y; j++ ){
var mineTile = new MineTile(i,j);
mineTile.hasMine = bombs-- > 0;
mineSet.push(mineTile);
}
}
return mineSet;
},
mineAt: function(x,y,mineSet){
for( var i = 0; i < mineSet.length; i++ )
if( mineSet[i].x === x && mineSet[i].y === y ) return mineSet[i];
}
};
सेवा परत
यह वह जगह होगी जहां नियंत्रक की पहुंच है। इसमें खेलों के निर्माण के लिए तर्क परत तक पहुंच होगी। एक उच्च स्तर की कॉल सेवा परत में हो सकती है ताकि पूरी तरह से त्वरित खेल या एक संशोधित खेल स्थिति को पुनः प्राप्त किया जा सके।
function MineSweeper(x,y,difficulty){
this.x = x;
thix.y = y;
this.difficulty = difficulty;
this.mineSet = MineSweeperLogic.construct(x,y,difficulty);
}
MineSweeper.prototype.expose = function(x,y){
return MineSweeperLogic.mineAt(x,y,this.mineSet).expose();
}
नियंत्रक
नियंत्रकों को हल्का वजन होना चाहिए, अनिवार्य रूप से यही वह है जो मॉडल के ग्राहक के रूप में उजागर होता है। कई नियंत्रक होंगे, इसलिए उन्हें संरचित करना महत्वपूर्ण हो जाएगा। नियंत्रक फ़ंक्शन कॉल वह होगा जो UI ईवेंट के आधार पर जावास्क्रिप्ट कॉल हिट करता है। इन्हें सर्विस लेयर में उपलब्ध व्यवहार को उजागर करना चाहिए और फिर पॉप्युलेट करना चाहिए या इस मामले में क्लाइंट के लिए विचारों को संशोधित करना चाहिए।
function MineSweeperController(ctx){
var this.context = ctx;
}
MineSweeperController.prototype.Start = function(x,y,difficulty){
this.game = new MineSweeper(x,y,difficulty);
this.view = new MineSweeperGameView(this.context,this.game.x,this.game.y,this.game.mineSet);
this.view.Update();
};
MineSweeperController.prototype.Select = function(x,y){
var result = this.game.expose(x,y);
if( result === false ) this.GameOver();
this.view.Select(result);
};
MineSweeperController.prototype.GameOver = function(){
this.view.Summary(this.game.FinalScore());
};
राय
विचारों को नियंत्रक के व्यवहारों के सापेक्ष व्यवस्थित किया जाना चाहिए। संभवतः यह आपके आवेदन का सबसे गहन हिस्सा होगा क्योंकि यह कैनवासिंग से संबंधित है।
function MineSweeperGameView(ctx,x,y,mineSet){
this.x = x;
this.y = y;
this.mineSet = mineSet;
this.context = ctx;
}
MineSweeperGameView.prototype.Update = function(){
//todo: heavy canvas modification
for(var mine in this.mineSet){}
this.context.fill();
}
तो अब आपके पास इस एक गेम के लिए आपका पूरा MVC सेटअप है। या कम से कम, एक नंगे हड्डियों का उदाहरण, पूरे खेल को लिखना अत्यधिक होता।
एक बार यह सब हो जाने के बाद, कहीं न कहीं आवेदन के लिए एक वैश्विक गुंजाइश की आवश्यकता होगी। यह आपके वर्तमान नियंत्रक के जीवनकाल को धारण करेगा, जो इस परिदृश्य में एमवीसी स्टैक के सभी के लिए प्रवेश द्वार है।
var currentGame;
var context = document.getElementById("masterCanvas").getContext('2d');
startMineSweeper.click = function(){
currentGame = new MineSweeperController(context);
currentGame.Start(25,25,"expert");
};
MVC पैटर्न का उपयोग करना बहुत शक्तिशाली है, लेकिन उनमें से प्रत्येक की बारीकियों का पालन करने के बारे में बहुत ज्यादा चिंता न करें। अंत में, यह खेल का अनुभव है जो निर्धारित करेगा कि क्या आवेदन एक सफलता है :)
विचार के लिए: जोएल स्पोल्स्की द्वारा आर्किटेक्चर एस्ट्रोनॉट्स डराओ मत