Selvom jQuery primært er kendt for sin evne til at manipulere og animere DOM'en i browsere, kan det også vise sig at være et nyttigt værktøj i visse server-side scenarier med Node.js. Dette kan være særligt relevant, når man arbejder med opgaver som web scraping, automatiserede tests, eller når man skal behandle HTML-struktur på serveren, før det sendes til klienten. Denne guide vil udforske, hvordan du kan integrere og anvende jQuery i dit Node.js-miljø.

Hvorfor bruge jQuery i Node.js?

Den primære årsag til at overveje jQuery i Node.js er dets kraftfulde selektor- og traverseringsfunktioner. Når du skal parse eller manipulere HTML-indhold på serveren, kan jQuery tilbyde en velkendt og effektiv måde at gøre det på. Forestil dig, at du henter indhold fra en ekstern hjemmeside og skal udtrække specifikke data baseret på HTML-struktur. jQuery's DOM-manipulationsevner, som vi kender fra frontend, kan her være en stor hjælp.

Desuden, hvis du eller dit team allerede er dybt fortrolige med jQuery fra frontend-udvikling, kan brugen af det på serveren reducere indlæringskurven og tillade en mere ensartet kodestil på tværs af hele applikationen.

Installation af jQuery til Node.js

At komme i gang med jQuery i Node.js er ligetil. Du skal blot installere det via npm, Node.js's pakkehåndtering:

npm install jquery

Efter installationen kan du inkludere jQuery i dine Node.js-filer ved hjælp af CommonJS-modulsystemet, som er standarden i Node.js:

var $ = require("jquery"); // Nu kan du bruge jQuery-funktioner som normalt

Hvis du arbejder i et projekt, der bruger ECMAScript-moduler (ESM), kan du importere det således:

import $ from "jquery";

Udfordringen: Manglen på en DOM i Node.js

Den største forskel mellem at køre jQuery i en browser og i Node.js er fraværet af en indbygget Document Object Model (DOM) i Node.js-miljøet. Browsere leverer en DOM, som jQuery kan interagere med. Node.js kører på serveren og har ikke direkte adgang til browserens DOM.

For at overkomme dette problem, skal vi simulere et browserlignende miljø i Node.js. Her kommer værktøjer som jsdom ind i billedet.

Brug af jsdom til at skabe en DOM

Jsdom er et populært Node.js-bibliotek, der implementerer en DOM og HTML-standard, så du kan køre JavaScript i et Node.js-miljø. Med jsdom kan du parse HTML-strenge og oprette en DOM-struktur, som jQuery derefter kan manipulere.

Installation af jsdom

Installer jsdom med npm:

npm install jsdom

Grundlæggende brug af jsdom med jQuery

Lad os se på et simpelt eksempel, hvor vi bruger jsdom til at oprette en DOM og derefter bruger jQuery til at finde et element og ændre dets indhold.

const jsdom = require("jsdom"); const { JSDOM } = jsdom; // Indsæt den HTML-struktur, du vil arbejde med const html = "
Hej fra Node.js med jQuery!
Dette er et eksempel.
"; // Opret en JSDOM-instans const dom = new JSDOM(html); // Gør DOM'en globalt tilgængelig (ligesom i en browser) // Dette trin er vigtigt, da jQuery forventer 'window' og 'document' at være globale global.window = dom.window; global.document = dom.window.document; // Inkluder jQuery (efter at have sat globale objekter) const $ = require("jquery"); // Nu kan du bruge jQuery til at manipulere DOM'en console.log("Oprindelig titel:", $("h1").text()); $("h1").text("Opdateret titel!"); console.log("Opdateret titel:", $("h1").text()); console.log("Indhold af p-tag:", $("p").text()); // Du kan også tilføje nye elementer $("body").append("
Et nyt afsnit tilføjet med jQuery.
"); // For at se den endelige HTML-struktur: // console.log(dom.window.document.body.innerHTML); 

Forklaring af eksemplet:

1. Vi importerer jsdom og destrurerer JSDOM klassen.
2. Vi definerer en simpel HTML-streng, der skal simuleres.
3. new JSDOM(html) opretter en DOM-struktur baseret på vores HTML.
4. Vi sætter global.window og global.document. Dette er kritisk, da jQuery forventer disse objekter at være tilgængelige i det globale scope. Hvis du ikke gør dette, vil jQuery fejle, fordi den ikke kan finde DOM'en.
5. Vi inkluderer jQuery ved hjælp af require("jquery"). Det er vigtigt at gøre dette efter at have sat de globale objekter, så jQuery kan initialisere korrekt.
6. Vi bruger derefter jQuery-funktioner som $("h1").text() og $("h1").text("...") til at læse og ændre indholdet af HTML-elementer.
7. $("body").append(...) demonstrerer, hvordan man tilføjer nye elementer til DOM'en.

Avancerede Anvendelser

Web Scraping

jQuery i Node.js er et fremragende værktøj til web scraping. Du kan bruge biblioteker som axios eller node-fetch til at hente HTML-indhold fra en URL, og derefter bruge jsdom og jQuery til at parse og udtrække de ønskede data.

Her er et konceptuelt eksempel:

const axios = require('axios'); const jsdom = require('jsdom'); const { JSDOM } = jsdom; async function scrapeData(url) { try { const response = await axios.get(url); const html = response.data; const dom = new JSDOM(html); global.window = dom.window; global.document = dom.window.document; const $ = require("jquery"); // Eksempel: Find alle links på siden const links = []; $("a").each(function() { links.push({ text: $(this).text(), href: $(this).attr('href') }); }); console.log("Fundne links:", links); return links; } catch (error) { console.error("Fejl under scraping:", error); } } // Erstat med en reel URL, du vil scrape // scrapeData('https://eksempel.com'); 

Automatiserede Tests

Hvis du skriver tests for frontend-kode, der bruger jQuery, kan du måske finde det nyttigt at køre disse tests i et Node.js-miljø ved hjælp af værktøjer som Jest eller Mocha, kombineret med jsdom. Dette giver dig mulighed for at teste din JavaScript-logik uden at skulle køre en fuld browser-instans for hver testkørsel.

Server-Side Rendering (SSR) af HTML

I nogle komplekse scenarier, hvor du skal generere HTML på serveren dynamisk, kan jQuery bruges til at konstruere HTML-strukturen, før den sendes til klienten. Dette kan forbedre den indledende sideindlæsningstid.

Sammenligning: jQuery i Browser vs. Node.js

For at opsummere de væsentligste forskelle og ligheder:

Hvis du vil læse andre artikler, der ligner jQuery i Node.js: En brugbar guide, kan du besøge kategorien Teknologi.