Design Patterns

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

Problem: Jag repeterar min kod ofta

Lösning: försök göra en funktion av den repetitiva koden och ändra de värden som behöver ändras med argument och parametrar som skickas med till funktionen.

Problem: Jag behöver gruppera en samling kod som hör ihop

Lösning: använd en funktion för att namnge och gruppera denna kod

Problem: Jag har svinmånga funktioner nu och jag behöver gruppera dessa funktioner

Lösning: använd ett objekt för att gruppera funktioner som hör samma. Minskar också risken för att du definierar samma funktionsnamn två gånger av misstag.

modul [modu´l] substantiv ~en ~er

enhetsmått; kombinerbar och ut­bytbar del el. komponent

Model-View-* (MV*)

Module Pattern: implementeras i JavaScript mha ett objekt

const ModuleName = {
  moduleFunction: function(){
    console.log('I am a function inside of an object, nothing more.');
  }
}

ModuleName.moduleFunction(); //I am a function inside of an object, nothing more.

Visar tillhörighet och gör det enklare att veta var koden ligger och var koden ligger ifrån.

Tänk på jQuery t.ex.

$.animate();
$.css();

Vi vet att .animate() tillhör biblioteket jQuery för att det har "namnet" $

Vi kan utan problem skapa en egen funktion som också heter animate() utan att den krockar med jQuerys funktion.

Ett mer äkta Module Pattern

const ModuleName = (function(){
  return {
    moduleFunction: function(){
      console.log('I am a function inside of an object, nothing more.');
    }
  }
})();

ModuleName.moduleFunction();

Immediately Invoked Function Expression (IIFE)

Module Pattern använder sig av en IIFE för att direkt returnera ett objekt, resultatet blir NÄSTAN detsamma som förut.

En IIFE är en anonym funktion som kallar på sig själv 🙃🤔🙇‍♀️🙇‍

(function(){
  console.log("Hello darkness my old friend")
}();

• Gruppera kod
• Göra funktioner och variabler "privata"
• Privata variabler och funktioner kan inte kommas åt hur som helst, vi måste göra de tillgängliga för kod som ligger utanför modulen.

Eftermiddag

Finns övning: 12_module_pattern.md

Handlar om att bygga en miniräknare med Module Pattern och enligt Model-View mönstret