MVC

Szerző: Sallai András
Copyright © Sallai András, 2013, 2014, 2015, 2025
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

Történet

Az első leírást 1979-ben Trygve Reenskaug készítette amikor a Xerox PARC-nál dolgozott Smalltalkon.

Az első MVC Smalltalk-80 nyelven lett implementálva 1980-ban.

Előny

Az MVC

A Model View Controller szavakból alkotott betűszó. A szoftverfejlesztésben használatos szerkezeti minta. Azt jelenti, szétválasztjuk a megjelenésérét felelős kódrészeket, az adatokért és a vezérlésért felelős kódrészektől.

Az ilyen módon több részre osztott alkalmazásokat, kliens-szerver megvalósításban hívjuk többrétegű alkalmazásnak.

Model - üzleti logika, tárolás
View - megjelenés, Swing komponensek
Controller - vezérlés, eseménykezelés

Skálázhatóság

Az MVC skálázható ha az egyes részeket újabb részekre bontjuk.

MVC alkalmazása weben

A web erősen támaszkodik a HTTP protokollra, amely állapotmentes. Ez azt jelenti, hogy nincs folytonos kapcsolat a böngésző és a webszerver között. Minden kérés egy újabb kapcsolatot hoz létre. Ha böngésző megkapta a választ, zárja a kapcsolatot. Ez egy olyan helyzet, amelyre nem gondoltak eredeti MVC fejlesztői.

MVC konkrét nyelveken

JavaScript MVC példa

A példa elérhető itt is:

https://github.com/oktat/mvcexamplejs.git

app01/
  |-controller.js
  |-index.js
  |-model.js
  |-package.json
  `-view.js

controllers.js

// controller.js
class WalletController {
  constructor(model, view) {
    this.model = model;
    this.view = view;
  }
 
  async start() {
    let running = true;
    while (running) {
      this.view.displayBalance(this.model.getBalance());
      this.view.displayMenu();
 
      const choice = await this.view.getChoice();
      switch (choice) {
        case '1':
          const addAmount = await this.view.getAmount();
          this.model.addMoney(addAmount);
          break;
        case '2':
          const subtractAmount = await this.view.getAmount();
          this.model.subtractMoney(subtractAmount);
          break;
        case '3':
          running = false;
          this.view.close();
          break;
        default:
          console.log('Érvénytelen választás, próbálja újra.');
          break;
      }
    }
    console.log('Viszlát!');
  }
}
 
module.exports = WalletController;

index.js

// index.js (a fő program)
const Wallet = require('./model');
const WalletView = require('./view');
const WalletController = require('./controller');
 
const wallet = new Wallet(1000); // Kezdeti egyenleg
const view = new WalletView();
const controller = new WalletController(wallet, view);
 
controller.start();

model.js

// model.js
class Wallet {
  constructor(initialBalance) {
    this.balance = initialBalance;
  }
 
  addMoney(amount) {
    if (amount > 0) {
      this.balance += amount;
    }
  }
 
  subtractMoney(amount) {
    if (amount > 0 && this.balance >= amount) {
      this.balance -= amount;
    }
  }
 
  getBalance() {
    return this.balance;
  }
}
 
module.exports = Wallet;

view.js

// view.js
const readline = require('readline');
 
class WalletView {
  constructor() {
    this.rl = readline.createInterface({
      input: process.stdin,
      output: process.stdout,
    });
  }
 
  displayBalance(balance) {
    console.log(`\nJelenlegi egyenleg: ${balance.toFixed(2)} Ft`);
  }
 
  displayMenu() {
    console.log('\nKérem válasszon egy műveletet:');
    console.log('1. Pénz hozzáadása');
    console.log('2. Pénz levonása');
    console.log('3. Kilépés');
  }
 
  getChoice() {
    return new Promise(resolve => {
      this.rl.question('Válasszon: ', choice => {
        resolve(choice);
      });
    });
  }
 
  getAmount() {
    return new Promise(resolve => {
      const askAmount = () => {
        this.rl.question('Adja meg az összeget: ', amount => {
          const parsedAmount = parseFloat(amount);
          if (isNaN(parsedAmount) || parsedAmount <= 0) {
            console.log('Érvénytelen összeg, próbálja újra.');
            askAmount();
          } else {
            resolve(parsedAmount);
          }
        });
      };
      askAmount();
    });
  }
 
  close() {
    this.rl.close();
  }
}
 
module.exports = WalletView;

package.json

{
  "name": "app01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs"
}

Tartalomjegyzék

MVC