Simple JavaScript MVC

Please find all source code in my GitHub Repo.

Introduction

The Model-View-Controller design pattern is very popular because of its effectiveness. It has gain particular prominence in web applications and spawned a number of variations including MVVM (Model-View-ViewModel) and MVP (Model-View-Presenter).

Is implementation employs the passive form that retains separation of the View from the Model courtesy of the Controller. The View manager administrates all communication between the End-User and the User Interaction; in both directions. Input events are captured by the View manager, forwarded to the Controller, where the appropriate course of action is decided. In many cases, this will involve sending data on to the Model for capture.

Changes to data held in the Model can result in a message being sent to the Controller. The Controller will decide on the appropriate course of action, which could be; to send the information up to a web server, update other data items, or notify other system components such as the View manager: which is often the case.

JavaScript MVC – implementation

My GitHub repo contains 4 source code files;

  • MVC Sampler.htm: This test harness loads the Model, View and Controller objects and presents a User Interface. The active controls (1 input box, type text, and 1 output Div) are assigned id’s, which are used by the View manager, but no other encoding is employed.
  • Model.js: The data Model is instantiated by the Controller, which is the only object Model communicates with. Following creation, the Controller issues a setController message containing an object of functions that represent the Controller’s API with the Model. In this sampler the API is limited to a single method called ‘test’, which passes data from the Model to the Controller.
  • View.js: The View manager is instantiated by the Controller, which is the only object View communicates with. Following creation, the Controller issues a setController message containing an object of functions that represent the Controller’s API with the View, which will be different to the one presented to the Model. In this sampler the API is limited to a single method called ‘test’, which passes data from the View to the Controller.
  • Controller.js: The Controller is instantiated through an iife (immediately-invoked function expression), which is supplied with two parameters. The parameters are the result of calling the Model and View objects, respectively, that contains the API they support with the Controller. The API is retained within the Controller and a setController call issued to both objects. This call carries the API the Controller supports for the respective object.

Update: 6th January 2016

  1. The exchange of the interfaces between components has been streamlines. This removes the need for the setController methods.
  2. The Model now retains valid input and uses it to looks up a response.

Limitations and Observations

  1. The View manager makes no attempt to derive what on-screen components exists, as these as a template for the View. Consequently the HTML code is completely unaware of the existence of the MVC components but more application-specific code exists in the View object that is desirable [M].
  2. The Model makes no attempt to preserve data between executions within a session [S], and/or between browser sessions [C].
  3. The Model provides no support for configuring the data structure it maintains. It also fails to generate appropriate getter/setter functions for its API with the Controller [S].
  4. The Model does not support the recording of a history of the data it retains. This is not expected behaviour but is a potential enhancement [W].

Future editions of this MVC sampler will address some of the above issues in MoSCoW priority order [as indicated].


Please find all source code in my GitHub Repo.

The source code is self-contained, requires no additional frameworks or libraries and adopts as near a Vanilla JS approach as possible. The code has not been extensively tested but is made available under the same terms as this site (CC-BY-NC-SA) should you feel inclined to use it in your project.

The source code is offered without warranty or support, but should you consider using this my source code (or a variation), please notify me and I will be pleased to provide any assistance I can.