varför så mycket upprepning i koden?

Citera flera Citera

2022-12-14 12:39

SweDragon

Medlem ★

Plats: Lund
Registrerad: Sep 2015

●

Om replace funkar som så att den returnerar ett resultat med ändringen men inte ändrar på sin input så måste du göra så för att faktiskt ändra i "innerHTML". Annars görs ändringen på en kopia som slängs direkt.

Citera flera Citera (1)

2022-12-14 12:39

adzer

Medlem ★

Registrerad: Dec 2002

●

Funktionen replace returnerar den nya strängen och måste därför tilldelas innerHTML. Du kan förenkla det enligt följande:

const el = document.querySelector('.entry-title');
el.innerHTML = el.innerHTML.replace("Protected: ", "");

Citera flera Citera (2)

2022-12-14 13:12

Airikr

Medlem ★

Plats: Värmland
Registrerad: Jan 2004

●

Skrivet av guermantes:

Det kanske är ett grundläggande tankefel jag gör då jag inte är utbildad programmerare utan mest knåpar javascript i hobbyprojekt, men... varför är det så mycket upprepning?

Dagens exempel:
Om man lösenordsskyddar en sida i wordpress så läggs strängen "Protected: " automatiskt till i h1.entry-title. Den ville jag ta bort. Efter mycket googlande fick jag det att funka med:

let text = document.querySelector('.entry-title').innerHTML; 
document.querySelector('.entry-title').innerHTML = text.replace("Protected: ", "");

Men varför detta upprepande?

Först gör man en variabel text av document.querySelector('.entry-title').innerHTML
Sen inleder man rad två med exakt samma sak som man stoppat i variabeln
Sen efter likamedtecknet åkallar man variabeln som ju återigen innehåller samma sak och så kör man replacemetoden på det

Det kanske är en dum fråga, men varför inte bara:

document.querySelector('.entry-title').innerHTML.replace("Protected: ", "");

Det du är ute efter går att göra i jQuery och då väldigt mycket kortare.

$('.entry-title').html().replace('Protected: ', '');

Den där kodsnutten gör exakt samma sak som vad du är ute efter, fast är betydligt mycket kortare och även lättare att komma ihåg. Du måste dock inkludera jQuery för att kunna använda det. https://developers.google.com/speed/libraries/#jquery

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me. Andra projekt: Keizai, Koroth & Serenum.

Citera flera Citera (1)

2022-12-14 15:05

swesen

Medlem ★

Plats: Norrköping
Registrerad: Jul 2011

●

För att ".innerHTML" är en sträng, ".replace()" är en function som tillhör "string" typen som returnerar den nya strängen med i det här fallet "Protected: " ersat med "".

t.ex.

let text = "Protected: user info";
let unprotectedText = text.replace('Protected: ', '');

console.log(text);
console.log(unprotectedText);

Console:

 Protected: user info
 user info

Det som gör att @adzer svar fungerar är att "el" är ett objekt och objekt är alltid via referens vilket betyder att orginalet modifieras när "el" modifieras.

Citera flera Citera

2022-12-14 18:10

zaibuf

Medlem ★

Registrerad: Aug 2013

●

Skrivet av Airikr:

Det du är ute efter går att göra i jQuery och då väldigt mycket kortare.

$('.entry-title').html().replace('Protected: ', '');

Den där kodsnutten gör exakt samma sak som vad du är ute efter, fast är betydligt mycket kortare och även lättare att komma ihåg. Du måste dock inkludera jQuery för att kunna använda det. https://developers.google.com/speed/libraries/#jquery

Och gör inte det för jQuery är föråldrat och leder till spaghettikod.

Citera flera Citera (6)

2022-12-14 18:37

Airikr

Medlem ★

Plats: Värmland
Registrerad: Jan 2004

●

Skrivet av zaibuf:

Och gör inte det för jQuery är föråldrat och leder till spaghettikod.

Länka gärna till källan för detta påstående 🙂

Berätta gärna även vad spaghettikod är.

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me. Andra projekt: Keizai, Koroth & Serenum.

Citera flera Citera

2022-12-14 21:31

pine-orange

Medlem ★

Registrerad: Aug 2019

●

Skrivet av zaibuf:

Och gör inte det för jQuery är föråldrat och leder till spaghettikod.

De släppte en ny version av jQuery igår, så föråldrat är det inte

Citera flera Citera

2022-12-14 21:41

zaibuf

Medlem ★

Registrerad: Aug 2013

●

Skrivet av Airikr:

Länka gärna till källan för detta påstående 🙂

Berätta gärna även vad spaghettikod är.

https://youmightnotneedjquery.com/

Allt som gjorde jQuery bra stöds i vanlig modern JavaScript idag, det finns inget argument till varför du skulle vilja använda jQuery mer än att det är det du alltid gjort de senaste 15 åren. ECMAScript har sett till att standardisera JavaScript som ska stödjas för alla browsers och Microsoft har dödat Internet Explorer, som varit ett av problemen som jQuery löste.

Har du ett stort behov av mycket interaktion av användarna så är det bättre att välja ett SPA som t.ex. React, Vue eller Svelte i kombination med TypeScript. Annars kan du köra ett mer slimmat lib som HTMX eller AlpineJs om du ändå vill köra traditionell serverrenderad html men få SPA-känsla.

Citat:

Berätta gärna även vad spaghettikod är.

Spaghettikod är kod som är svår att underhålla. jQuery bygger på att chaina massa funktionsanrop med väldigt mycket magiska strängar och inget av det du skriver är typat, lägger du in ett nytt element i htmln kan du pajja hela din jquery kod. Detta är något du kommer märka om du får ett legacy system i knät som har flera olika filer med jQuery. Jag hoppas också att inte någon drar in ett paket på 80kb för att skriva 20 rader kod.

Senast redigerat 2022-12-14 21:51

Citera flera Citera (8)

2022-12-14 22:07

https://youmightnotneedjquery.com/

Airikr

Medlem ★

Plats: Värmland
Registrerad: Jan 2004

●

Skrivet av zaibuf:

Allt som gjorde jQuery bra stöds i vanlig modern JavaScript idag, det finns inget argument till varför du skulle vilja använda jQuery mer än att det är det du alltid gjort de senaste 15 åren. ECMAScript har sett till att standardisera JavaScript som ska stödjas för alla browsers och Microsoft har dödat Internet Explorer, som varit ett av problemen som jQuery löste.

Har du ett stort behov av mycket interaktion av användarna så är det bättre att välja ett SPA som t.ex. React, Vue eller Svelte i kombination med TypeScript. Annars kan du köra ett mer slimmat lib som HTMX eller AlpineJs om du ändå vill köra traditionell serverrenderad html men få SPA-känsla.

Spaghettikod är kod som är svår att underhålla. jQuery bygger på att chaina massa funktionsanrop med väldigt mycket magiska strängar och inget av det du skriver är typat, lägger du in ett nytt element i htmln kan du pajja hela din jquery kod. Detta är något du kommer märka om du får ett legacy system i knät som har flera olika filer med jQuery. Jag hoppas också att inte någon drar in ett paket på 80kb för att skriva 20 rader kod.

Ok. Tack för källan och förklaringen.

Jodå, jag har haft problem med jQuery tidigare, men några av mina projekt använder sig av jQuery och de funkar klockrent än så länge. Det finns en slimmad version av jQuery som gör den filen mindre. Inte mycket, men fortfarande mindre (16,7 Kb mindre).

Om man vill vara modern och även ha lätt för och lära sig nya saker, så ska man såklart gå all-in på till exempel React. Annars kan man fortsätta använda det man kan (som för mig, jQuery)

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me. Andra projekt: Keizai, Koroth & Serenum.