{"id":230015,"date":"2022-11-30T19:33:00","date_gmt":"2022-11-30T16:33:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230015"},"modified":"2022-11-09T19:43:35","modified_gmt":"2022-11-09T16:43:35","slug":"ett-objektorienterat-saett-att-arbeta-med-modeller-och-webbapplikationer","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/ett-objektorienterat-saett-att-arbeta-med-modeller-och-webbapplikationer\/","title":{"rendered":"Ett objektorienterat s\u00e4tt att arbeta med modeller och webbapplikationer"},"content":{"rendered":"\n<p>N\u00e4r vi pratar om konceptet Modeller i objektorienterad programmering syftar vi vanligtvis p\u00e5 en klass som \u00e4r en representation av data som lagras i databasen.<\/p>\n<p>Det vill s\u00e4ga n\u00e4r information lagras i rader och kolumner fyller vi i en klass, dess attribut och s\u00e5 vidare med den informationen s\u00e5 att vi kan skicka den runt i applikationen, manipulera den efter behov och sedan eventuellt serialisera data tillbaka till databasen.<\/p>\n<p>Men i en webbapplikation \u00e4r det rimligt att anta att modellen kan beh\u00f6va vara m\u00f6jlig till front-end f\u00f6r att anv\u00e4ndas. Det vill s\u00e4ga, f\u00f6rest\u00e4ll dig att en front-end-beg\u00e4ran ringer servern, beg\u00e4r en modell (eller en samling modeller) och sedan renderar dem p\u00e5 front-end.<\/p>\n<p>\u00c4ven om det h\u00e4r inl\u00e4gget inte \u00e4r kodorienterat, tycker jag \u00e4nd\u00e5 att det \u00e4r v\u00e4rt att t\u00e4nka igenom processen att \u00f6vers\u00e4tta en modell fr\u00e5n servern och sedan rendera den p\u00e5 webbapplikationens front-end.<\/p>\n<h2>Arbeta med modeller och webbapplikationer<\/h2>\n<p>F\u00f6rest\u00e4ll dig f\u00f6r ett \u00f6gonblick att din ans\u00f6kan har en anst\u00e4lld modell. Den h\u00e4r modellen kan inneh\u00e5lla en m\u00e4ngd olika attribut, men det \u00e4r s\u00e4kert att anta att alla anst\u00e4llda skulle ha:<\/p>\n<ul>\n<li>ett f\u00f6rnamn,<\/li>\n<li>ett efternamn,<\/li>\n<li>ett anst\u00e4llds-ID,<\/li>\n<li>och en e-postadress<\/li>\n<\/ul>\n<p>Hur denna information lagras i databasen \u00e4r inte helt irrelevant, men det \u00e4r inte s\u00e5 viktigt f\u00f6r den h\u00e4r diskussionen.<\/p>\n<p>Till exempel kanske det finns en enda post som inneh\u00e5ller all denna information lagrad i en JSON-str\u00e4ng. \u00c5 andra sidan kanske det finns en anst\u00e4lldstabell d\u00e4r varje rad representerar en anst\u00e4lld, och sedan representerar varje kolumn ett attribut.<\/p>\n<p>Detaljerna hur informationen \u00f6vers\u00e4tts fr\u00e5n databasen (eller, mer allm\u00e4nt, datalagret) till klassen \u00e4r inte lika viktigt.<\/p>\n<p>Vanligtvis kommer vi dock att se n\u00e5got s\u00e5nt h\u00e4r:<\/p>\n<ol>\n<li>Det finns en klass som beg\u00e4r informationen,<\/li>\n<li>Informationen skickas till en <strong>enkel fabrik<\/strong> ,<\/li>\n<li>The <strong>Simple Factory<\/strong> instansierar <strong>modellen<\/strong> ,<\/li>\n<li>Modellen <strong>skickas<\/strong> sedan till den tredje parts klass som beg\u00e4rde den.<\/li>\n<\/ol>\n<p>Ur bildsynpunkt kan du se det s\u00e5 h\u00e4r:<\/p>\n<p>Fr\u00e5n denna punkt passerar <strong>modellen<\/strong> genom hela applikationen. Men det \u00e4r h\u00e4r den f\u00f6rsta po\u00e4ngen med det h\u00e4r inl\u00e4gget kommer in i bilden: Hur skickar vi en instans av <strong>modellen<\/strong> (eller en samling <strong>modeller<\/strong>) till applikationens front-end?<\/p>\n<h2>Webbapplikationens fl\u00f6de<\/h2>\n<p>F\u00f6r att h\u00e5lla det enkelt, l\u00e5t oss anta att vi kommer att anv\u00e4nda en enda modell och sedan, om jag \u00e5terv\u00e4nder till detta koncept fr\u00e5n en kodsynpunkt, kan vi dyka in lite mer.<\/p>\n<p>Det allm\u00e4nna fl\u00f6det f\u00f6r en webbapplikation kommer dock att vara ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n<ol>\n<li>En anv\u00e4ndare utl\u00f6ser en \u00e5tg\u00e4rd som beg\u00e4r en instans av modellen,<\/li>\n<li>Front-end ringer till en slutpunkt p\u00e5 servern,<\/li>\n<li>Servern l\u00e4ser f\u00f6rfr\u00e5gningarna och verifierar att den \u00e4r giltig,<\/li>\n<li>Skickar sedan en representation av modellen till front-end.<\/li>\n<\/ol>\n<p>Andra utvecklare kanske inte h\u00e5ller med (vilket alltid \u00e4r v\u00e4lkommet och v\u00e4rt att diskutera, enligt min mening), men jag har funnit att serialisering av modellens instans till JSON g\u00f6r det mycket l\u00e4ttare att arbeta med i front-end p\u00e5 grund av JavaScript-funktionalitet eftersom det relaterar till, ahem, JSON.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-163595-61e75570192c9.png\" data-rel=\"lightbox\" ><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-163595-61e75570192c9.png\" alt=\"Ett objektorienterat s\u00e4tt att arbeta med modeller och webbapplikationer\" ><\/a><\/p>\n<p>Med andra ord:<\/p>\n<ol>\n<li>vi tar modellen,<\/li>\n<li>serialisera den till JSON,<\/li>\n<li>skicka den \u00f6ver tr\u00e5den,<\/li>\n<li>avserialisera det sedan p\u00e5 front-end till en JavaScript-representation av sig sj\u00e4lv.<\/li>\n<\/ol>\n<p>Detta till\u00e5ter oss att manipulera det p\u00e5 samma s\u00e4tt som vi skulle g\u00f6ra p\u00e5 serversidan; vi har dock att g\u00f6ra med ett JavaScript-objekt. Dessutom till\u00e5ter det oss att \u00e4ven g\u00f6ra vissa \u00e4ndringar och skicka tillbaka informationen till servern i ett annat tillst\u00e5nd fr\u00e5n vilket den skickades.<\/p>\n<p>I slut\u00e4ndan till\u00e5ter detta oss att spara data tillbaka till databasen.<\/p>\n<h2>Ett perspektiv p\u00e5 h\u00f6g niv\u00e5<\/h2>\n<p>Och det \u00e4r livscykeln p\u00e5 h\u00f6g niv\u00e5 f\u00f6r att \u00f6verf\u00f6ra information fr\u00e5n en databas till en modell till front-end och tillbaka igen.<\/p>\n<p>Ofta hj\u00e4lper det dock att se detta i kod, s\u00e5 kanske i ett framtida inl\u00e4gg kommer jag att ge en serie artiklar som kan g\u00e5 igenom hur man g\u00f6r detta.<\/p>\n<p>Under tiden b\u00f6r det dock inte vara sv\u00e5rt att \u00f6vers\u00e4tta dina implementeringar till arbetsfl\u00f6det Model-Serialization-Request-Send som beskrivs i det h\u00e4r inl\u00e4gget.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>F\u00f6rst\u00e5 hur man t\u00e4nker igenom processen att arbeta med modeller p\u00e5 serversidan och webbapplikationer via modeller, fabriker och mer.<\/p>\n","protected":false},"author":1,"featured_media":224094,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[734,724],"tags":[1173],"class_list":["post-230015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript-9","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=230015"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/230015\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224094"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=230015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=230015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=230015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}