Design af kode generelt

Design i kode

Indrykning af kodelinjer (TAB) skaber hierarki, som får de forskellige kodelinjer til at stå på linje (lodret). Gør det nemmere at se, hvad der hører sammen og skaber samtidig god struktur.
Scope kan direkte sammenlignes med loven om lukkethed fra gestaltlovene. Alt, hvad der står mellem tegnene, { og } er pr. definition et scope, og tegnene kan betragtes som en "ramme" omkring, hvad der nu står indeni. Dette indhold betragtes derfor naturligt som hørende sammen.
White space (eller negativt rum) kan bruges til at adskille kodelinjer, så man grupperer disse kodelinjer og dermed skaber, hvad der ifølge gestaltlovene kaldes loven om nærhed.
Gruppering af kodetyper er også med til at skabe lighed (f.eks. ved at samle variabler ét sted og funktioner et andet sted). Loven om lighed brugt i kode er med til at skabe struktur, som gør det hele nemmere at overskue.
Kommentarer bruges i programmering normalt til kort at forklare, hvad et stykke kode gør, eller hvad en variabel bruges til, men kan også bruges til at skabe lukkethed ved f.eks at "indkapsle" noget kode i kommentarer - I VSCode har man endda indkorporeret en forholdsvis ny feature kaldet regions:
//#region VALGFRI_TITEL og //#endregion VALGFRI_TITEL, hvor man kan kollapse alt indhold mellem disse to kommentarer, givet at de har samme titel.

Prototype:

JavaScript - Funktionelt eksempel
//Deklaration af variabler
let qs = document.querySelector.bind(document);

let btn = qs("#button");

//Initialisering
btn.addEventListener("click", function(){
    buttonClick(this);
})

//Funktioner
function buttonClick(element){
    if (getColor(element) == "rgb(255, 0, 0)") {
        setColor(element, "rgb(0, 0, 255)");
    } else {
        setColor(element, "rgb(255, 0, 0)");
    }
}
function getColor(element){
    return element.style.backgroundColor;
}
function setColor(element, color){
    element.style.backgroundColor = color;
}

JavaScript - Eksekvérbart eksempel
//Simpel JavaScript kode der får knappen til at skifte farve ved hvert klik

Idé, brainstorm

Eksempel på brug af design i kode.
Brug af whitespace.
Brug af lukkethed.
Brug af nærhed.
Brug af Linjer.
Eksempel (pseudo kode) der viser brugen af whitespace, lukkethed, nærhed og linjer.
Evt. et simpelt fungerende eksempel. F.eks. en knap der får et element til at skifte tilstand.

Pseudo mockup

JavaScript - pseudo code
//Objekter
class SomeObject{
    constructor(something, else){
        this.something = something;
        this.else = else;
    }
}

//Efter load af DOM (Document Object Model)
document.addEventListener("DOMContentLoaded", function(){
    //Variabler
    let someVariable;
    let someOtherVariable;
    let aThirdVariable;

    //Initialisering
    window.addEventListener("click", function(e){
        execute.some.code;
    })

    //Funktioner
    function someFunction(){
        execute.some.code;
    }
    function anotherFunction(){
        execute.some.code;
    }
    function someObjectHandling(){
        let someObj = new SomeObject(oneThing, otherThing)
        execute.some.code;
    }
})

Præsentationens JavaScript kode

JavaScript - Præsentationskode
class PaneObj{
    constructor(pane, content){
        this.pane = pane;
        this.content = content;
    }
}

document.addEventListener("DOMContentLoaded", function(){
    //Bindings
    let qs = document.querySelector.bind(document);
    let qsa = document.querySelectorAll.bind(document);
    
    //Panes
    let paneElements = qsa(".pane");
    let panes = [];

    for (let i = 0; i < paneElements.length; i++) {
        addPane(i);
    }

    clearPanes();
    selectPane(panes[0]);

    function addPane(id){
        let newPane = new PaneObj(qs("#pane" + id), qs("#content" + id));
        newPane.pane.addEventListener("click", function(e){            
            e.preventDefault();
            if (newPane.pane.classList.value == "pane disabled") {
                return;
            }
            clearPanes();
            selectPane(newPane);
        })
        panes.push(newPane);
    }
    function clearPanes(){
        panes.forEach(pane => {
            if (pane.pane.classList.value != "pane disabled") {
                if (pane.content) {                    
                    pane.pane.classList.value = "pane";
                    pane.content.classList.value = "content";
                }else{
                    pane.pane.classList.value = "pane disabled";
                }
            }
        });
    }
    function selectPane(pane){
        pane.pane.classList.value = "pane active";
        pane.content.classList.value = "content active";
    }

    //Image popup
    let modals = qsa(".modal");
    let modalBackground = qs("#modal-background");
    let modalTitle = qs("#modal-title");
    let modalContent = qs("#modal-content");
    let modalClose = qs("#close");

    [modalClose, modalBackground].forEach(element => {
        element.addEventListener("click", function(e){
            e.preventDefault();
            modalBackground.style.display = "none";
        })
    })
    window.addEventListener("keydown", function(e){
        if (e.keyCode == 27) {
            modalBackground.style.display = "none";
        }
    })    
    modals.forEach(function(modal){
        modal.addEventListener("click", function(e){
            e.preventDefault();
            let modalImg = this.querySelector("img");
            modalBackground.style.display = "initial";
            modalTitle.textContent = modalImg.alt;
            modalContent.innerHTML = modalImg.outerHTML;
        })
    })
})

Minified JavaScript kode

Det er en god idé at minify sin kode, når det er tid til at launche sit færdige produkt. Det gør filen mindre og skaber derved mindre "indlæsningsomkostninger".
Ved at minify koden fjerner man i princippet alle design elementer.

JavaScript - Minified
class PaneObj{constructor(e,n)
{this.pane=e,this.content=n}}document.addEventListener("DOMContentLoaded",function(){function e(e){let
l=new PaneObj(a("#pane"+e),a("#content"+e));l.pane.addEventListener("click",function(e)
{e.preventDefault(),"pane disabled"!=l.pane.classList.value&&(n(),t(l))}),o.push(l)}function n()
{o.forEach(e=>{"pane disabled"!=e.pane.classList.value&&(e.content?
(e.pane.classList.value="pane",e.content.classList.value="content"):e.pane.classList.value="pane
disabled")})}function t(e){e.pane.classList.value="pane active",e.content.classList.value="content
active"}let a=document.querySelector.bind(document),l=document.querySelectorAll.bind(document),
c=l(".pane"),o=[];for(let n=0;n<c.length;n++)e(n);n(),t(o[0]);let i=l(".modal"),s=a("#modal-background"),
d=a("#modal-title"),u=a("#modal-content"),r=a("#close");[r,s].forEach(e=>{e.addEventListener("click",
function(e){e.preventDefault(),s.style.display="none"})}),window.addEventListener("keydown",function(e)
{27==e.keyCode&&(s.style.display="none")}),i.forEach(function(e){e.addEventListener("click",function(e)
{e.preventDefault();let n=this.querySelector("img");s.style.display="initial",d.textContent=n.alt,
u.innerHTML=n.outerHTML})})});