JavaScript – objektorientering och bibliotek – Inlämningsuppgift

Hela uppgiften samt beskrivning och kriterier finns också direkt i detta arkiv:

JavaScript – objektorientering och bibliotek – Inlämningsuppgift 30 YHp

 

JavaScript – objektorientering och bibliotek – Inlämningsuppgift 30 YHp

Beskrivning:

Du får en färdig WordPress-installation med har ett inbyggt REST-gränssnitt vilket ger tillbaka olika entiteter/resurser (poster, sidor, menyer, kategorier, kommentarer) som färdiga JSON-formaterade svar.

Din uppgift är att använda JavaScript för att ”klassificera” dessa resurser som olika typer av JavaScript-objekt. Och att jobba OOP-orienterat med de råa rest-resurerna, dvs. göra om dem till JS-objekt av en specifik typ.

Till din hjälp har du vårt lilla mönster för ”extend”:

var Base = {
 extend: function(props){
   // A new object with this object as its prototype
   var obj = Object.create(this);
   // Assign properties to the new object
   Object.assign(obj,props);
   return obj;
 }
};

 

Utöka Base-klassen med en render-metod som kan skriva ut JSON-data väldigt rått. [Tänk pre-taggar och JSON-stringify(obj,””,”  ”) för ett basal formatering av JSON…]

Render-klassen ska ta emot ett argument. Ett jQuery-objekt och/eller sträng-baserad selektor som blir ett jQuery-objekt. Det är till detta jQuery-objekt som en html-baserad rendering av hur du vill presentera ett objekt ska läggas till (”appendas”).

Skapa  underklasser/objekt för med hjälp av Base.extend för Poster (Posts), Sidor (Pages) och kommentarer (Comments).

Du ska kunna kontakta REST-gränssnittet och hämta rå JSON-data som du sedan omvandlar till arrayer av objekt med baserade på olika underklasser i JavaScript.

När du har lyckats med detta skriver du egna render-metoder för varje ”underklass” som på ett bra sätt  visar upp dessa som HTML. (Alla render-metoder ska fortfarande ta emot samma argument som vi beskrivit ovan.)

Låt även dina render-klassen lägga till ”click-events” som låter dig studera ett visst objekt i större detalj. (Dvs. att t.ex. klicka på en post som kanske bara renderar börjar av innehållet ger dig en detaljvy av hela texten.) Hur löser du detta objektorienterat?

Tänk på att du ofta kommer att ta emot arrayer av objekt från REST-gränssnittet. Klassificera dessa objekt in i en ny array och kör sedan render-metoden för varje objekt i arrayen…

 

Inlämning:

Ska ske senast Tisdag 22/3 kl 12.00 (OBS Tidpunkten mitt på dagen!)

För inlämningsuppgift bedöms även förmågan att hålla en deadline.

Packa den färdiga inlämningen med WordPress samt databas i en zip-fil.

Viktigt! Namnge wordpress-mappen och databasen på samma sätt, med ditt namn, exempel:

   wpREST_fornamnefternamn både som namn på mappen och på databasen.

 

Betygskriterier:

G-krav

  • Skriv en applikation i JavaScript som tar emot REST-resurser över AJAX/XHR och omvandlar dem till arrayer av “klassificerade” JS-objekt.
  • Se till att varje sådan ”klass” du skapar har en render-metod.
  • Render-metoden ska köras när du har tagit emot nya REST-resurser.
  • Vid behov: Nollställ/töm DOM vid varje REST-anrop (så att det renderade innehållet alltid är “aktuellt”)
  • Låt användaren navigera till olika vyer med en meny.

VG-krav

  • Använd ett click-event för att göra en utökad visning av innehållet i ett objekt.
  • Du behöver ha skapat välfungerande responsiv LESS/CSS för alla olika render-metoder.
  • En välfungerande SPA (Single Page Application). Dvs. saker tas bort/läggs till i DOM vid rätt tillfällen – det visade innehållet speglar korrekt aktuella resurser ifrån REST.
  • Det finns alltid något att klicka på för att komma tillbaka till eller utöka en vy.
  • Använd local storage för att minnas användarens senaste vy
0 votes