Artikel: En Single Page Application me-app

  • Författare
  • Meddelande
Användarvisningsbild

efo

dbwebb

  • Inlägg: 402
  • Blev medlem: 15 aug 2016, 11:58
  • Ort: Rödeby

Artikel: En Single Page Application me-app

Inlägg15 feb 2018, 11:10

En artikel om att En Single Page Application me-app.

Ställ frågor om artikeln eller bidra med tips.
Användarvisningsbild

annettekusma

sql-guru

  • Inlägg: 102
  • Blev medlem: 11 aug 2017, 10:16
  • Ort: Eskilstuna

Re: Artikel: En Single Page Application me-app

Inlägg09 apr 2018, 17:41

Jag buntade ihop vyerna i views.js istället för att ha fyra olika .js-filer. Sedan använde jag hs-minor-mode i emacs, så kan man på knapptryckning fälla ut/in en hel funktion i taget (finns säkert motsvarande i Atom). Det gör det lättare att behålla överblicken, framförallt i parentesskogen... {(])}]}[}];{[}];;{][...

Grundkonstruktionen för en modul är alltså

Kod: Markera allt
var modulNamn = (   function () {}   ) (modulNamn);

inne i {} kan man sedan deklarera variabler som i sin tur benämner en hel funktion var.

Kod: Markera allt
{
var funkEtt_goerHipp = (function () {});
var funkTvå_goerHapp = (function () {});
var funkTre_hoppMinusHeppHupp = (function () {});
return {};
}

Varje sån variabeldeklaration är ett statement och efter dessa lägger man till ett return-statement och exporterar därigenom dessa deklarationer som en dictionary (förlåt pythonspråket).

Kod: Markera allt
return { hipp: funkEtt_goerHipp,
            happ: funkTvaa_goerHapp,
            hopp: funkTre_hoppMinusHeppHupp };

Det sista () gör att funktionen vi deklarerar i modulNamn nr. ett blir utförd när den deklareras, dvs variablerna blir exporterade, redo att användas i global object. Man kan passa på att exportera enkla namn men döpa själva variablerna till något som berättar mer exakt vad funktionen gör, man anropar
modulNamn.hopp() till exempel.

Men jag har inte förstått varför det ska stå modulNamn i den sista parentesen igen:

Vi har alltså filnamnet, det kanske vi kan döpa till blipp.js, bara vi laddar in blipp.js i index.html, så spelar det nog ingen roll vad för variabelnamn vi deklarerar där inne, antar jag. Men varför denna dublering, modulNamn nr. två blir langad som argument till den självexekverande funktionen? Var nånstans i denna självexekverande funktion hamnar den? Dokumentationshänvisning? Hittar inte...
Användarvisningsbild

efo

dbwebb

  • Inlägg: 402
  • Blev medlem: 15 aug 2016, 11:58
  • Ort: Rödeby

Re: Artikel: En Single Page Application me-app

Inlägg10 apr 2018, 08:16

Bra och intressant frågeställning. I kmom01 utgår vi från kursen javascript1 och hur vi använder module pattern i den sammanhang. Tanken med kmom01 är delvis repetition av DOM-hanteringen i javascript1 med introduktion av fetch och XMLHttpRequest. Vi kommer senare i kursen se att koden vi skriver i kmom01 inte är helt optimal på alla sätt.

Då vi i de flesta fallen aldrig använder variabeln modulNamn i själva modulen kommer valideringen klaga på att vi definierar en variabel utan att använda den. För att komma förbi detta använder moduleNamn som parameter till funktionen utan att ta emot den. I kmom02 ser vi hur vi explicit kan importera en modul och då kommer vi runt denna lite konstiga konstruktion.

Man kan dock använda detta sättet på riktigt om man till exempel vill döpa om en "global" variabel till ett annat namn inuti funktionskontexten.

Kod: Markera allt
(function(w, e) {
    // Då kan vi använda w som window, e som element
    // och skapa egna variabler window och element
    // inuti funktionen utan att påverka de "globala" variablerna

    var window = "hej"; // påverkar inte w
   

})(window, element);

RichardNilsson

css-hackare

  • Inlägg: 20
  • Blev medlem: 28 aug 2018, 14:41

Re: Artikel: En Single Page Application me-app

Inlägg21 mar 2020, 00:33

Hej,

Jag får inte rätt på att skicka in variablen och sen inte använda den för att klara valideringen.

Jag får följande fel:
Kod: Markera allt
WARNING eslint failed: ./me/redovisa/about.js

/home/saxon/students/20142/pene14/dbwebb-kurser/webapp/me/redovisa/about.js
  3:7  error  about is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

.

WARNING eslint failed: ./me/redovisa/github.js

/home/saxon/students/20142/pene14/dbwebb-kurser/webapp/me/redovisa/github.js
  4:7  error  github is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

.

WARNING eslint failed: ./me/redovisa/home.js

/home/saxon/students/20142/pene14/dbwebb-kurser/webapp/me/redovisa/home.js
  4:7  error  home is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

..

WARNING eslint failed: ./me/redovisa/menu.js

/home/saxon/students/20142/pene14/dbwebb-kurser/webapp/me/redovisa/menu.js
  4:7  error  menu is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

.

WARNING eslint failed: ./me/redovisa/presentations.js

/home/saxon/students/20142/pene14/dbwebb-kurser/webapp/me/redovisa/presentations.js
  3:7  error  presentations is assigned a value but never used  no-unused-vars



Exempel home.js:
Kod: Markera allt
/* global menu */
"use strict";

const home = (() => {
    const showHome = () => {
      ...
    return {
        showHome: showHome
    };
})(home);


Detta ger mig:
Kod: Markera allt
ReferenceError: can't access lexical declaration `home' before initialization home.js:42:1
ReferenceError: can't access lexical declaration `home' before initialization main.js:11:5


Hur gör man för att det ska fungera?

Edit:
Man måste använda var för variabeldeklarationen. Det fungerar inte med varken const eller let.

Anders Johansson

html-kodare

  • Inlägg: 13
  • Blev medlem: 05 sep 2019, 17:57

Re: Artikel: En Single Page Application me-app

Inlägg11 apr 2020, 14:32

Jag får inte redovisningen att funka, den är inte klickbar i menyn alls.
console.log(element); ger att nav inte är definierat.

Kod: Markera allt

/* global menu   */
"use strict";

var md = window.markdownit();

var report = (function () {
    var showReport = function () {
        window.mainContainer.innerHTML = "";

        var title = document.createElement("h1");

        title.className = "title";
        title.textContent = "Redovisning";

        window.mainContainer.appendChild(title);

        fetch("markdown/kmom01.md")
            .then(function(response) {
                return response.text();
            })
            .then(function(result) {
                window.mainContainer.innerHTML = md.render(result);
            });

        window.rootElement.appendChild(window.mainContainer);
        menu.showMenu("people");

};

    return {
        showReport: showReport
    };
})(report);






Kod: Markera allt

/* global home, about, github, report */

var menu = (function () {
    var showMenu = function (selected) {
        window.navigation.innerHTML = "";

        var navElements = [
            {name: "Me", class: "home", nav: home.showHome},
            {name: "Om", class: "free_breakfast", nav: about.showAbout},
            {name: "Github", class: "folder", nav: github.showGithub},
            {name: "Redovisning", class: "people", nav: report.report}];

        navElements.forEach(function (element) {
            var navElement = document.createElement("a");

            if (selected === element.class) {
                navElement.className = "active";
            }

            navElement.addEventListener("click", element.nav);

            var icon = document.createElement("i");

            icon.className = "material-icons";
            icon.textContent = element.class;
            navElement.appendChild(icon);

            var text = document.createElement("span");

            text.className = "icon-text";
            text.textContent = element.name;
            navElement.appendChild(text);

            window.navigation.appendChild(navElement);
        });

        window.rootElement.appendChild(window.navigation);
    };

    return {
        showMenu: showMenu
    };
})(menu);

Senast redigerad av Anders Johansson 11 apr 2020, 16:09, redigerad totalt 1 gång.
Användarvisningsbild

efo

dbwebb

  • Inlägg: 402
  • Blev medlem: 15 aug 2016, 11:58
  • Ort: Rödeby

Re: Artikel: En Single Page Application me-app

Inlägg11 apr 2020, 15:51

Vad jag kan se heter din funktion report.showReport. Testa med det istället

Wim4rk

html-kodare

  • Inlägg: 11
  • Blev medlem: 26 aug 2019, 12:38

Re: Artikel: En Single Page Application me-app

Inlägg11 apr 2020, 16:00

Jag har ett tips.

Efter att ha spenderat mycket tid under kursmomentet på att få markdownit att rendera html-taggar skulle jag vilja att ni lägger till några inställningar.

Kod: Markera allt
var md = window.markdownit();

// enable html tags from markdown.
md.set({html: true});


Jag fick läsa manualen på både längden och tvären för att hitta den sista lilla kodraden. Manualen handlar mest om hur man använder markdownit i nodejs, och man sätter inställningarna direkt i request-satsen då.

Vilka är online

Användare som besöker denna kategori: Inga registrerade användare och 15 gäster