JavaScript MVC

MVC är en utvecklings-modell där man delar upp:

Vy: Det man ser (HTML)
Modell: Hur det fungerar (JavaScript)
Kontroller: Bestämmer vilken modell/vy som ska visas (HTTP Server)

Om du har utvecklat en hemsida förut har du troligtvis redan använt denna modell.

Exempel vy i HTML:

<!DOCTYPE html>

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="todo.css">

<script type="text/javascript" src="todo.js"></script>

<div class="todo>

  <h1>Todo-list MVC in vanilla JavaScript</h1>

  <ul id="todoList" ></ul>

  <form id="todoForm" class="todo">
    <label for="todoInputText">Add item:</label>
    <input type="text" id="todoInputText" />
    <button id="todoInputButton">Add #<span id="todoItemCount">1</span></button>
  </form>
</div>

I vyn används "semantiska" element, som varken innehåller data eller styling. Med "semantiska" element menas att namn används för att beskriva elementens innebörd. <ul> talar om att det är en osorterad lista, <form> att det är ett formulär och <button> för knapp etc. Dessa element ingår i HTML-standarden. Man skulle kunna använda <div>:ar till allt, men då skulle semantiken gå förlorad.

För styling används CSS.
Denna vy har ett eget stylesheet (todo.css). Men man kan lika gärna lägga modellens CSS i ett style-element.

Exempel modell i JavaScript

var todoForm = document.getElementById("todoForm");                                      // reference form
todoForm.onsubmit = function todoAdd(event) {                                            // Add event handler for "submit" form
	
	var todoInputText = document.getElementById("todoInputText");                        // reference text-input
	
	var listItem = document.createElement("li");                                         // create new list item
	listItem.appendChild(document.createTextNode(todoInputText.value));                  // Append text from text-input into list element
	
	var todoList = document.getElementById("todoList");                                  // reference todo-list
	todoList.appendChild(listItem);                                                      // Append list item to list
	
	var todoItemCount = document.getElementById("todoItemCount");                        // reference item count (inside Add button)
	
	todoItemCount.removeChild(todoItemCount.firstChild);                                 // Remove old nr
	todoItemCount.appendChild(document.createTextNode(todoList.childNodes.length + 1));  // Append new nr as text
	
	todoInputText.value = "";                                                            // Empty text-input
	
	return false;                                                                        // Prevent default browser action (http get form action)
}

I modellen används vanlig JavaScript. Det kan vara frestande att använda innerHTML eftersom det går snabbare att koda HTML än att bygga upp HTML-elementen med JavaScript.
Att använda JavaScript har dock många fördelar, till exempel omslutningar / closure's som gör det enkelt att hantera "async" händelse-baserad funktionalitet.
Att använda document.createTextNode i stället för innerHTML förhindrar även att skadlig kod injekteras.

Man kan även lägga modellen i ett script-element, så att både vy och modell ligger i samma fil, vilket gör att sidan laddas aningen snabbare.

Kontroller

Fördelen med en statisk webbaserad klient är att appen enkelt går att spara på en web-server, och går att komma åt via en URL (web adress).

Det finns många alternativ på CDN (Content delivery network), webb-hotell och webb-servrar. Min favorit-server är Nginx, men det går lika bra med Apache eller Lighttpd, ja det går till och med att hosta appen i Windows med IIS

Databas

Om datan endast behöver sparas på klienten kan man använda webbläsarens inbyggda funktioner localStorage eller openDatabase

För att skicka data till en server kan man använda Websocket eller XMLHttpRequest.

Written by Johan Zetterberg Oktober 14, 2016.