Design Patterns

...a software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design.

Jag kommer att behandla ett antal mönster

samt ett antal principer

Området är enormt, jag kommer bara ta upp de mest viktiga delarna som rör JavaScript

const list = document.getElementById('list');
for(let singleItem of listOfThings){
  let listItem = document.createElement('li');
  listItem.innerText = singleItem;
  list.appendChild(listItem);
}

function displayList(listOfThings){
  const list = document.getElementById('list');
    for(let singleItem of listOfThings){
      let listItem = document.createElement('li');
      listItem.innerText = singleItem;
      list.appendChild(listItem);
    }
}

Model-View-* (MV*)

Objekt literals kan användas

const View = {}
const Model = {}

Controllern behöver inte användas i vårat fall. MVC behöver inte följas strikt.

const view = {
  displayList(listOfThings){
    const list = document.getElementById('list');
    for(let singleItem of listOfThings){
      let listItem = document.createElement('li');
      listItem.innerText = singleItem;
      list.appendChild(listItem);
    }
  }
}

Separation of Concerns

Concerns are the different aspects of software functionality. For instance, the "business logic" of software is a concern, and the interface through which a person uses this logic is another.

Den här koden är för busy, gör för mycket

const list = document.getElementById('list');
for(let singleItem of listOfThings){
  if(singleItem === "Quokka"){
    let listItem = document.createElement('li');
    listItem.innerText = singleItem;
    list.appendChild(listItem);
  }
}

const listOfThings = [];
const filteredList = ["Quokka", "Not Quokka", "Elephant"];
const list = document.getElementById('list');

for(let item of listOfThings){
  if(item === "Quokka"){
    filteredList.push(item);
  }
}

for(let singleItem of filteredList){
    let listItem = document.createElement('li');
    listItem.innerText = singleItem;
    list.appendChild(listItem);
}

Principle of Least Privilege

requires that in a particular abstraction layer of a computing environment, every module (such as a process, a user, or a program, depending on the subject) must be able to access only the information and resources that are necessary for its legitimate purpose

En stor anledning till att vi använder funktioner och objekt

Inkapsling och begränsa tillgång

Har inte koden användning av en vissa variabel ska den inte ens veta att den finns.

Dessa två namn kan inte råka komma åt varandra, eller råka skriva över varandra. De känner inte ens till varandra.

function printName(){
  let name = "Jesper";
  console.log(name);
}

function printName2(){
  let name = "Agneta";
  console.log(name);
}

Här har vi en global variabel som skrivs över i var och en av dessa funktioner. Det kräver mer av oss att hålla koll på vilka variabler som är säkra och vilka variabler som faktiskt används. Vi kan också råka skriva över värden.

let name = "Globala Göran";
function printName(){
  let name = "Jesper";
  console.log(name);
}

function printName2(){
  let name = "Agneta";
  console.log(name);
}

Eftermiddagen

Individuell presentation av inlämning

Resterande jobbar med övning: 11_separation_of_concerns.md