While working on my front-end skills I wanted to see what implementing the MVC pattern could look like in a simple vanilla Javascript app. It’s a good way to get comfortable with a language, without the help of any framework, you end up pushing yourself to come up with conventions and a structure of your own so the result isn’t just a bunch of functions and classes glued together without much order. What is MVC? MVC is a software design pattern that divides an application into three separated components: A , which holds the business logic, a which manages how the information is displayed and receives user interaction, and finally a , which glues the other two together while keeping each of their roles separated. Model View Controller The event class For this implementation I’m going to make use of an auxiliary Event class, both the model and the view will have events that can be triggered at any point. The event class looks like this: { () { .listeners = [];
  }

  addListener(listener) { .listeners.push(listener);
  }

  trigger(params) { .listeners.forEach( { listener(params); });
  }
} Event; class Event constructor this this this => listener export default Pretty straightforward: For any given event, you can to it (in the form of a callback) that will be called whenever the event is . add a listener triggered The model As I mentioned before, this should contain all the necessary logic, and while it wouldn’t be very user friendly, we should be able to play a game of TicTacToe by using only this class without relying on any external logic. My implementation of the model is the following: Event ; { () { .board = ( ).fill(); .currentPlayer = ; .finished = ; .updateCellEvent = Event(); .victoryEvent = Event(); .drawEvent = Event();
  }

  play(move) { ( .finished || move < || move > || .board[move]) { ; } .board[move] = .currentPlayer; .updateCellEvent.trigger({ move, : .currentPlayer }); .finished = .victory() || .draw(); (! .finished) { .switchPlayer(); } ;
  }

  victory() { lines = [
      [ , , ],
      [ , , ],
      [ , , ],
      [ , , ],
      [ , , ],
      [ , , ],
      [ , , ],
      [ , , ],
    ]; victory = lines.some( .board[l[ ]]
      && .board[l[ ]] === .board[l[ ]]
      && .board[l[ ]] === .board[l[ ]]); (victory) { .victoryEvent.trigger( .currentPlayer);
    } victory;
  }

  draw() { draw = .board.every( i); (draw) { .drawEvent.trigger();
    } draw;
  }

  switchPlayer() { .currentPlayer = .currentPlayer === ? : ;
  }
} TicTacToe; import from './event' class TicTacToe constructor this Array 9 this 'X' this false this new this new this new if this 0 8 this return false this this this player this this this this if this this return true const 0 1 2 3 4 5 6 7 8 0 3 6 1 4 7 2 5 8 0 4 8 2 4 6 const => l this 0 this 0 this 1 this 1 this 2 if this this return const this => i if this return this this 'X' 'O' 'X' export default Beyond the specific implementation details, the model has a method to make a player move and it can trigger 3 different events: play i. : This event is triggered when the content of a cell in the board changes, the event sends the cell number and its new content. updateCellEvent ii. : This event is triggered whenever a player wins, the event will send the symbol of the winning player. victoryEvent iii. : This event is triggered whenever the game ends in a draw, the event sends no parameters. drawEvent The view Event ; { () { .playEvent = Event();
  }

  render() { board = .createElement( );
    board.className = ; .cells = ( ).fill().map( { cell = .createElement( );
      cell.className = ;

      cell.addEventListener( , () => { .playEvent.trigger(i);
      });

      board.appendChild(cell); cell;
    }); .message = .createElement( ); .message.className = ; .body.appendChild(board); .body.appendChild( .message);
  }

  updateCell(data) { .cells[data.move].innerHTML = data.player;
  }

  victory(winner) { .message.innerHTML = ;
  }

  draw() { .message.innerHTML = ;
  }
} View; import from './event' class View constructor this new const document 'div' 'board' this Array 9 ( ) => _, i const document 'div' 'cell' 'click' this return this document 'div' this 'message' document document this this this ` wins!` ${winner} this "It's a draw!" export default In this case, the view will only have a single event ( ) which is triggered whenever a cell of the board is clicked, and this event will send the number of the cell clicked. playEvent The view also has three other methods: and updateCell, victory draw. The name of the methods are pretty self-explanatory, and each corresponds to an event triggered by the model, the communication between the two will be handled by the controller. The Controller We’ve arrived at the place where we connect everything, as mentioned before, the role of the controller is to glue both the view and the model together while keeping their roles separated. We will achieve this by creating instances of the view and the model inside the controller. Then for each event of both the model and the view, we will create a handler that connects it to the corresponding method. The code for the controller is the following: TicTacToe ; View ; { () { .model = TicTacToe(); .view = View(); .view.playEvent.addListener( { .model.play(move); }); .model.updateCellEvent.addListener( { .view.updateCell(data); }); .model.victoryEvent.addListener( { .view.victory(winner); }); .model.drawEvent.addListener( { .view.draw(); });
  }

  run() { .view.render();
  }
} Controller; import from './model' import from './view' class Controller constructor this new this new this => move this this => data this this => winner this this => () this this export default Finally, to run our game, we instantiate a controller object: Controller ; app = Controller();

app.run(); import from './controller' const new And that’s it! You can check a and the to see how everything fits together in the final product. live demo here full source here One of the advantages of this pattern is testing since the model and the view do not reference each other directly, we can easily test each class in isolation, which makes the tests a lot simpler to write. Of course, MVC isn’t the only way you can split logic between models and views, modern javascript frameworks like React use other patterns, but for simple applications and especially to get familiar with a new language, implementing MVC it’s a great choice to get started.

Writing a Simple MVC (Model, View, Controller) App in Vanilla Javascript

Too Long; Didn't Read

Companies Mentioned

@elshaka

RELATED STORIES