{"id":19413,"date":"2021-07-05T18:37:55","date_gmt":"2021-07-05T16:37:55","guid":{"rendered":"https:\/\/www.software-developer-india.com\/vad-ar-vanilj-javascript\/"},"modified":"2021-07-05T18:37:56","modified_gmt":"2021-07-05T16:37:56","slug":"vad-ar-vanilj-javascript","status":"publish","type":"post","link":"https:\/\/www.software-developer-india.com\/sv\/vad-ar-vanilj-javascript\/","title":{"rendered":"Vad \u00e4r vanilj JavaScript?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Vad \u00e4r vanilj JavaScript?<\/h2>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/07\/Web-Development.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"400\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/07\/Web-Development.jpg\" alt=\"\" class=\"wp-image-19364\" srcset=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/07\/Web-Development.jpg 575w, https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/07\/Web-Development-300x209.jpg 300w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/a><\/figure><\/div>\n\n<p>N\u00e4r webbplatser f\u00f6rst uppstod var de statiska, och det var bra d\u00e5. Och med introduktionen av Vanilla Javascript \u00e4ndrade det hur webbplatserna b\u00f6rjade se ut och k\u00e4nnas. Webbplatser blev revolutionerande, interaktiva och dynamiska. <\/p>\n\n<p>Vanilla JS \u00e4r helt enkelt JS, s\u00e5 det \u00e4r ett textbaserat programmeringsspr\u00e5k b\u00e5de p\u00e5 serversidan och klientsidan. Ramverket skapades 2012 av Eric Wastl, och \u00e4ven om det inte var han som myntade termen, populariserade hans webbplats den. S\u00e5 kort sagt, Vanilla Js \u00e4r helt enkelt Javascript utan ytterligare ramverk eller bibliotek. <\/p>\n\n<p>Sedan kom jQuery, ett bibliotek med verktyg gjorda med Javascript, till. jQuery var l\u00e4tt och mycket l\u00e4tt att anv\u00e4nda eftersom det hj\u00e4lpte till att skapa komplexa funktioner med minimal kodning.<\/p>\n\n<p>Du hittar Vanilla JS i<strong> Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, LinkedIn, eBay, Microsoft, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow<\/strong> och ett antal andra popul\u00e4ra webbplatser och plattformar. <\/p>\n\n<p>S\u00e5ledes \u00e4r alla Javascript-ramar och bibliotek baserade p\u00e5 dess vaniljk\u00e4rna. Alla de olika ramarna baseras ofta p\u00e5 en eller annan Javascript-princip. Ofta anv\u00e4nder utvecklare vanligt Javascript utan att anv\u00e4nda ytterligare JS-ramar eller bibliotek.<\/p>\n\n<p>Intressant \u00e4r att Vanilla JS-ramverk n\u00e4stan p\u00e5minner oss om vaniljglass, eftersom ramverket \u00e4r omodifierat och du anv\u00e4nder basprodukten som den \u00e4r, utan att l\u00e4gga till n\u00e5got till den. <\/p>\n\n<p>Allt du g\u00f6r \u00e4r att du anv\u00e4nder ramverket med de mest grundl\u00e4ggande API-funktionerna f\u00f6r JS-tolk. Naturligtvis m\u00e5ste varje webbplats som inte anv\u00e4nder ett ramverk automatiskt anv\u00e4nda VanillaJs, och \u00e4ven om de inte anv\u00e4nder ett ramverk anv\u00e4nder de vissa funktioner och algoritmer f\u00f6r VanillaJS. Ramverket ger dig ocks\u00e5 full frihet att implementera vilken arkitektur du vill. Du kan ocks\u00e5 integrera detta med din aff\u00e4rslogik, DOM-manipulationslogik, alla andra verktyg du vill ansluta. <\/p>\n\n<p>Varje utvecklare b\u00f6r ha full kunskap om rent Javascript och alla utvecklare som du anst\u00e4ller ska ha kunskap om Vanilla JS, s\u00e4rskilt om han arbetar fr\u00e4mst i Javascript-ekosystemet.<\/p>\n\n<p>Bild: J\u00e4mf\u00f6r<\/p>\n\n<h3 class=\"wp-block-heading\"><strong>H\u00e4r tittar du p\u00e5 Vanilla JS med ett par andra spr\u00e5k <\/strong><\/h3>\n\n<p><strong>Vanilla JS Vs React: n\u00e4r du kan anv\u00e4nda vad<\/strong><\/p>\n\n<p>Vanilla JS hj\u00e4lper dig att bygga kraftfulla plattformsapplikationer och s\u00e5 vidare React, det \u00e4r ett av de mest popul\u00e4ra JS-biblioteken tack vare dess flexibilitet och prestandakvalitet. React kan bryta ner anv\u00e4ndargr\u00e4nssnittet i mindre, \u00e5teranv\u00e4ndbara komponenter som kan flyttas mot varandra. Och det \u00e4r den h\u00e4r funktionen som fungerar som en vinnande f\u00f6rdel j\u00e4mf\u00f6rt med VanillaJS. F\u00f6r JS blir det mycket sv\u00e5rt att beh\u00e5lla koden om applikationen \u00e4r stor. I s\u00e5dana fall m\u00e5ste anv\u00e4ndargr\u00e4nssnittet uppdateras regelbundet. <\/p>\n\n<p>Och det \u00e4r inte allt. F\u00f6r att \u00e4ndra UI-elementet m\u00e5ste du f\u00f6rst hitta elementet i DOM och f\u00f6rst sedan uppdatera det. Detta kan vara tr\u00e5kigt n\u00e4r du bara beh\u00f6ver \u00e4ndra ett enda element. React har en virtuell DOM och hj\u00e4lper till att kringg\u00e5 den manuella uppgiften. Kort sagt, med Vanilla JS kan det vara sv\u00e5rt och noggrant att h\u00e5lla gr\u00e4nssnittet synkroniserat. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Vanilj JS Vs jQuery<\/strong><\/h3>\n\n<p>Som f\u00f6rklarats tidigare med utvecklingen av Vanilla JS kunde utvecklare skapa dynamiska webbplatser. N\u00e4r jQuery kom in kom ocks\u00e5 ett antal verktyg med Javascript. jQuery \u00e4r l\u00e4tt och med sitt l\u00e4ttanv\u00e4nda JS-bibliotek \u00e4r det enkelt att skapa komplexa funktioner med f\u00e5 kodrader. Det f\u00f6renklar en hel del saker f\u00f6r utvecklaren som att hantera JSON-data fr\u00e5n servern, l\u00e4gga till animationseffekter som g\u00f6m, visa etc, hj\u00e4lper till med CSS-manipulation, g\u00f6ra AJAX-f\u00f6rfr\u00e5gningar och mer. <\/p>\n\n<p>Med jQuery kan m\u00e5nga saker vara enklare f\u00f6r nyb\u00f6rjaren, men det finns ingen regel som s\u00e4ger var man ska anv\u00e4nda Vanilla JS och var man ska anv\u00e4nda jQuery. IQuery \u00e4r dock en enorm tidsbesparing eftersom den levereras med flera f\u00f6rskrivna funktioner f\u00f6r vilka endast n\u00f6dv\u00e4ndiga \u00e4ndringar beh\u00f6ver g\u00f6ras.<\/p>\n\n<p>Och jQuery kr\u00e4ver bara mindre kodning, men f\u00f6r Javascript kr\u00e4vs en l\u00e5ng rad kodning, kanske till och med spaghettikoder. F\u00f6r JS beh\u00f6vs inga ytterligare plugins, men de beh\u00f6ver inte l\u00e4gga till n\u00e5gra extra plugins ocks\u00e5. F\u00f6r jQuery m\u00e5ste biblioteksskriptl\u00e4nken inkluderas i huvudtaggen p\u00e5 webbsidan. <\/p>\n\n<p>Om du tittar p\u00e5 kompatibilitet med flera webbl\u00e4sare kan det h\u00e4nda att webbl\u00e4sarrelaterade fel intr\u00e4ffar med JS. Men med jQuery \u00e4r detta inte ett problem eftersom det fungerar med alla typer av webbl\u00e4sare; det kommer inte att finnas n\u00e5gra kompatibilitetsproblem. <\/p>\n\n<p>Egentligen finns det ingen s\u00e4rskild regel f\u00f6r att anv\u00e4nda Javascript och jQuery. Men utvecklare s\u00e4ger att jQuery \u00e4r b\u00e4ttre f\u00f6r DOM-manipulation j\u00e4mf\u00f6rt med Javascript. Pluspunkten med Vanilla JS \u00e4r dock mycket snabbare \u00e4n jQuery. \u00c4nd\u00e5 kan nyb\u00f6rjare utvecklare ha sv\u00e5rt att skriva komplexa funktioner med Vanilla JS. <\/p>\n\n<p>F\u00f6r JS m\u00e5ste all kodning g\u00f6ras fr\u00e5n grunden, och nyb\u00f6rjare kan hitta det sv\u00e5rt och tidskr\u00e4vande. jQuery \u00e5 andra sidan har flera f\u00f6rskrivna funktioner, och n\u00e4r n\u00f6dv\u00e4ndiga \u00e4ndringar ska g\u00f6ras kan det definitivt spara tid. <\/p>\n\n<p>N\u00e4r du j\u00e4mf\u00f6r de tv\u00e5 \u00e4r Vanilla JS mycket snabbare \u00e4n jQuery, och beroende p\u00e5 operation kan det till och med vara 10 till 25 g\u00e5nger snabbare. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Vanilj JS Vs Vinkel JS<\/strong><\/h3>\n\n<p>Angular JS \u00e4r ett verktyg i Javascript MVC, medan Vanilla kommer under Javascript UI Libraries. Vissa utvecklare s\u00e4ger att Vanilla JS \u00e4r \u00f6verl\u00e4gsen n\u00e4r man t\u00e4nker p\u00e5 den ursprungliga belastningen och prestandan, s\u00e5 om du vill utveckla en app med prestandafaktorn som prioritet kan du v\u00e4lja Vanilla JS. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Slutsats<\/strong><\/h3>\n\n<p>Vanilla JS \u00e4r j\u00e4ttebra och till och med l\u00e5ter dig skapa dynamiska webbsidor. Men n\u00e4r du letar efter en enorm och komplicerad applikation med komplexa funktioner och har tusentals sidor, \u00e4r det b\u00e4ttre att g\u00e5 efter moderna Javascript-ramar. <\/p>\n\n<p>S\u00e5 \u00e5terigen kommer valet du g\u00f6r att vara beroende av kravet. Om du t\u00e4nker bli en frontend eller en full stack webbutvecklare, \u00e4r det viktigt att du k\u00e4nner till Vanilla JS. Basen f\u00f6r alla ramar kommer alltid att vara JS, bibliotek och ramar kommer och g\u00e5r, men JS \u00e4r h\u00e4r f\u00f6r att stanna. <\/p>\n\n<p>Kunskap med Vanilla JS g\u00f6r det alltid l\u00e4ttare att byta till jQuery, \u00e4ven om omkopplaren kanske inte \u00e4r s\u00e5 smidig. <\/p>\n\n<p>Intressanta l\u00e4nkar:<\/p>\n\n<p><a href=\"https:\/\/stackoverflow.com\/questions\/20435653\/what-is-vanillajs\">Mer information om Vanilla JS<\/a><\/p>\n\n<p><a href=\"http:\/\/vanilla-js.com\/\">Varf\u00f6r Vanilla JS?<\/a><\/p>\n\n<p>Bilder: Canva<\/p>\n\n<hr class=\"wp-block-separator\"\/>\n\n<div class=\"wp-block-image\"><figure class=\"alignleft\"><img decoding=\"async\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2015\/02\/1.jpg\" alt=\"\" class=\"wp-image-229\"\/><\/figure><\/div>\n\n<p>F\u00f6rfattaren: Sascha Thattil arbetar p\u00e5 Software-Developer-India.com som \u00e4r en del av YUHIRO Group. YUHIRO \u00e4r ett tysk-indiskt f\u00f6retag som tillhandah\u00e5ller programmerare till IT-f\u00f6retag, byr\u00e5er och IT-avdelningar.<\/p>\n<div class=\"shariff\"><ul class=\"shariff-buttons theme-default orientation-horizontal buttonsize-medium\"><li class=\"shariff-button twitter shariff-nocustomcolor\" style=\"background-color:#595959\"><a href=\"https:\/\/twitter.com\/share?url=https%3A%2F%2Fwww.software-developer-india.com%2Fsv%2Fvad-ar-vanilj-javascript%2F&text=Vad%20%C3%A4r%20vanilj%20JavaScript%3F\" title=\"Dela p\u00e5 X\" aria-label=\"Dela p\u00e5 X\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#000; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"#000\" d=\"M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0\"\/><\/svg><\/span><span class=\"shariff-text\">dela<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button facebook shariff-nocustomcolor\" style=\"background-color:#4273c8\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.software-developer-india.com%2Fsv%2Fvad-ar-vanilj-javascript%2F\" title=\"Dela p\u00e5 Facebook\" aria-label=\"Dela p\u00e5 Facebook\" role=\"button\" rel=\"nofollow\" class=\"shariff-link\" style=\"; background-color:#3b5998; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 18 32\"><path fill=\"#3b5998\" d=\"M17.1 0.2v4.7h-2.8q-1.5 0-2.1 0.6t-0.5 1.9v3.4h5.2l-0.7 5.3h-4.5v13.6h-5.5v-13.6h-4.5v-5.3h4.5v-3.9q0-3.3 1.9-5.2t5-1.8q2.6 0 4.1 0.2z\"\/><\/svg><\/span><span class=\"shariff-text\">dela<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button linkedin shariff-nocustomcolor\" style=\"background-color:#1488bf\"><a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fwww.software-developer-india.com%2Fsv%2Fvad-ar-vanilj-javascript%2F\" title=\"Dela p\u00e5 LinkedIn\" aria-label=\"Dela p\u00e5 LinkedIn\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#0077b5; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 27 32\"><path fill=\"#0077b5\" d=\"M6.2 11.2v17.7h-5.9v-17.7h5.9zM6.6 5.7q0 1.3-0.9 2.2t-2.4 0.9h0q-1.5 0-2.4-0.9t-0.9-2.2 0.9-2.2 2.4-0.9 2.4 0.9 0.9 2.2zM27.4 18.7v10.1h-5.9v-9.5q0-1.9-0.7-2.9t-2.3-1.1q-1.1 0-1.9 0.6t-1.2 1.5q-0.2 0.5-0.2 1.4v9.9h-5.9q0-7.1 0-11.6t0-5.3l0-0.9h5.9v2.6h0q0.4-0.6 0.7-1t1-0.9 1.6-0.8 2-0.3q3 0 4.9 2t1.9 6z\"\/><\/svg><\/span><span class=\"shariff-text\">dela<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button xing shariff-nocustomcolor\" style=\"background-color:#29888a\"><a href=\"https:\/\/www.xing.com\/spi\/shares\/new?url=https%3A%2F%2Fwww.software-developer-india.com%2Fsv%2Fvad-ar-vanilj-javascript%2F\" title=\"Dela p\u00e5 XING\" aria-label=\"Dela p\u00e5 XING\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#126567; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 25 32\"><path fill=\"#126567\" d=\"M10.7 11.9q-0.2 0.3-4.6 8.2-0.5 0.8-1.2 0.8h-4.3q-0.4 0-0.5-0.3t0-0.6l4.5-8q0 0 0 0l-2.9-5q-0.2-0.4 0-0.7 0.2-0.3 0.5-0.3h4.3q0.7 0 1.2 0.8zM25.1 0.4q0.2 0.3 0 0.7l-9.4 16.7 6 11q0.2 0.4 0 0.6-0.2 0.3-0.6 0.3h-4.3q-0.7 0-1.2-0.8l-6-11.1q0.3-0.6 9.5-16.8 0.4-0.8 1.2-0.8h4.3q0.4 0 0.5 0.3z\"\/><\/svg><\/span><span class=\"shariff-text\">dela<\/span>&nbsp;<\/a><\/li><\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>Vad \u00e4r vanilj JavaScript? N\u00e4r webbplatser f\u00f6rst uppstod var de statiska, och det var bra d\u00e5. Och med introduktionen av Vanilla Javascript \u00e4ndrade det hur &#8230; <a title=\"Vad \u00e4r vanilj JavaScript?\" class=\"read-more\" href=\"https:\/\/www.software-developer-india.com\/sv\/vad-ar-vanilj-javascript\/\" aria-label=\"L\u00e4s mer om Vad \u00e4r vanilj JavaScript?\">L\u00e4s mer<\/a><\/p>\n","protected":false},"author":1,"featured_media":19372,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[180,222],"tags":[],"class_list":["post-19413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-utveckling","category-webb"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/posts\/19413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/comments?post=19413"}],"version-history":[{"count":1,"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/posts\/19413\/revisions"}],"predecessor-version":[{"id":19414,"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/posts\/19413\/revisions\/19414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/media\/19372"}],"wp:attachment":[{"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/media?parent=19413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/categories?post=19413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.software-developer-india.com\/sv\/wp-json\/wp\/v2\/tags?post=19413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}