Artikel: En Single Page Application me-app

  • Författare
  • Meddelande
Användarvisningsbild

efo

dbwebb

  • Inlägg: 377
  • 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: 377
  • 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);

Vilka är online

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