Posso usare jQuery con Node.js?

È ansible utilizzare i selettori jQuery / manipolazione DOM sul lato server usando Node.js?

Aggiornamento (27-Jun-18) : Sembra che ci sia stato un aggiornamento importante di jsdom che ha causato il jsdom della risposta originale. Ho trovato questa risposta che spiega come usare jsdom ora. Ho copiato il codice pertinente qui sotto.

 var jsdom = require("jsdom"); const { JSDOM } = jsdom; const { window } = new JSDOM(); const { document } = (new JSDOM('')).window; global.document = document; var $ = jQuery = require('jquery')(window); 

Nota: la risposta originale non menziona che sarà necessario installare jsdom usando npm install jsdom

Aggiornamento (fine 2013) : il team jQuery ufficiale ha finalmente assunto la gestione del pacchetto jquery su npm:

 npm install jquery 

Poi:

 require("jsdom").env("", function (err, window) { if (err) { console.error(err); return; } var $ = require("jquery")(window); }); 

Sì, puoi, usando una libreria che ho creato chiamata nodeQuery https://github.com/tblobaum/nodeQuery

 var Express = require('express') , dnode = require('dnode') , nQuery = require('nodeQuery') , express = Express.createServer(); var app = function ($) { $.on('ready', function () { // do some stuff to the dom in real-time $('body').append('Hello World'); $('body').append(''); $('input').live('click', function () { console.log('input clicked'); // ... }); }); }; nQuery .use(app); express .use(nQuery.middleware) .use(Express.static(__dirname + '/public')) .listen(3000); dnode(nQuery.middleware).listen(express); 

Al momento della scrittura c’è anche il Cheerio mantenuto.

Implementazione rapida, flessibile e snella del core jQuery progettato specificamente per il server.

Usando jsdom puoi farlo ora. Basta guardare il loro esempio di jquery nella directory degli esempi.

Un semplice crawler che utilizza Cheerio

Questa è la mia formula per creare un semplice crawler in Node.js. È la ragione principale per voler fare manipolazioni DOM sul lato server e probabilmente è il motivo per cui sei arrivato qui.

Innanzitutto, utilizzare la request per scaricare la pagina da analizzare. Una volta completato il download, cheerio in cheerio e inizia la manipolazione del DOM come con jQuery.

Esempio di lavoro:

 var request = require('request'), cheerio = require('cheerio'); function parse(url) { request(url, function (error, response, body) { var $ = cheerio.load(body); $('.question-summary .question-hyperlink').each(function () { console.info($(this).text()); }); }) } parse('http://stackoverflow.com/'); 

Questo esempio stamperà sulla console tutte le domande principali mostrate sulla home page SO. Questo è il motivo per cui amo Node.js e la sua comunità. Non potrebbe essere più facile di così 🙂

Installa le dipendenze:

npm install request cheerio

Ed esegui (assumendo che lo script sopra sia in file crawler.js ):

nodo crawler.js


Codifica

Alcune pagine avranno contenuto non inglese in una determinata codifica e sarà necessario decodificarlo in UTF-8 . Ad esempio, una pagina in portoghese brasiliano (o qualsiasi altra lingua di origine latina) verrà probabilmente codificata in ISO-8859-1 (ovvero “latin1”). Quando è necessaria la decodifica, dico alla request non interpretare il contenuto in alcun modo e invece di usare iconv-lite per fare il lavoro.

Esempio di lavoro:

 var request = require('request'), iconv = require('iconv-lite'), cheerio = require('cheerio'); var PAGE_ENCODING = 'utf-8'; // change to match page encoding function parse(url) { request({ url: url, encoding: null // do not interpret content yet }, function (error, response, body) { var $ = cheerio.load(iconv.decode(body, PAGE_ENCODING)); $('.question-summary .question-hyperlink').each(function () { console.info($(this).text()); }); }) } parse('http://stackoverflow.com/'); 

Prima di eseguire, installa le dipendenze:

richiesta di installazione di npm iconv-lite cheerio

E poi finalmente:

nodo crawler.js


Seguenti collegamenti

Il prossimo passo sarebbe seguire i collegamenti. Supponi di voler elencare tutti i poster di ciascuna domanda principale su SO. Devi prima elencare tutte le domande principali (esempio sopra) e poi inserire ciascun link, analizzando la pagina di ogni domanda per ottenere l’elenco degli utenti coinvolti.

Quando inizi a seguire i link, può iniziare un inferno di callback . Per evitare ciò, dovresti usare qualche tipo di promise, futuro o altro. Tengo sempre asincrono nel mio cinturone. Quindi, ecco un esempio completo di crawler che utilizza async:

 var url = require('url'), request = require('request'), async = require('async'), cheerio = require('cheerio'); var baseUrl = 'http://stackoverflow.com/'; // Gets a page and returns a callback with a $ object function getPage(url, parseFn) { request({ url: url }, function (error, response, body) { parseFn(cheerio.load(body)) }); } getPage(baseUrl, function ($) { var questions; // Get list of questions questions = $('.question-summary .question-hyperlink').map(function () { return { title: $(this).text(), url: url.resolve(baseUrl, $(this).attr('href')) }; }).get().slice(0, 5); // limit to the top 5 questions // For each question async.map(questions, function (question, questionDone) { getPage(question.url, function ($$) { // Get list of users question.users = $$('.post-signature .user-details a').map(function () { return $$(this).text(); }).get(); questionDone(null, question); }); }, function (err, questionsWithPosters) { // This function is called by async when all questions have been parsed questionsWithPosters.forEach(function (question) { // Prints each question along with its user list console.info(question.title); question.users.forEach(function (user) { console.info('\t%s', user); }); }); }); }); 

Prima di correre:

npm install request async cheerio

Esegui un test:

nodo crawler.js

Uscita di esempio:

 Is it possible to pause a Docker image build? conradk Thomasleveil PHP Image Crop Issue Elyor Houston Molinar Add two object in rails user1670773 Makoto max Asymmetric encryption discrepancy - Android vs Java Cookie Monster Wand Maker Objective-C: Adding 10 seconds to timer in SpriteKit Christian K Rider 

E questo è l’essenziale che dovresti sapere per iniziare a creare i tuoi crawler 🙂


Librerie usate

  • richiesta
  • iconv-lite
  • ciao
  • async

nel 2016 le cose sono molto più facili. installa jquery su node.js con la tua console:

 npm install jquery 

associalo alla variabile $ (ad esempio – sono abituato ad esso) nel tuo codice node.js:

 var $ = require("jquery"); 

fare cose:

 $.ajax({ url: 'gimme_json.php', dataType: 'json', method: 'GET', data: { "now" : true } }); 

funziona anche per Gulp poiché si basa su node.js.

Credo che la risposta a questo sia ora sì.
https://github.com/tmpvar/jsdom

 var navigator = { userAgent: "node-js" }; var jQuery = require("./node-jquery").jQueryInit(window, navigator); 

Il modulo jQuery può essere installato utilizzando:

 npm install jquery 

Esempio:

 var $ = require('jquery'); var http = require('http'); var options = { host: 'jquery.com', port: 80, path: '/' }; var html = ''; http.get(options, function(res) { res.on('data', function(data) { // collect the data chunks to the variable named "html" html += data; }).on('end', function() { // the whole of webpage data has been collected. parsing time! var title = $(html).find('title').text(); console.log(title); }); }); 

Riferimenti di jQuery in Node.js **:

npm install jquery --save #note ALL LOWERCASE

npm install jsdom --save

 const jsdom = require("jsdom"); const dom = new jsdom.JSDOM(`< !DOCTYPE html>`); var $ = require("jquery")(dom.window); $.getJSON('https://api.github.com/users/nhambayi',function(data) { console.log(data); }); 

Il mio codice di lavoro è:

 npm install jquery 

e poi:

 global.jQuery = require('jquery'); global.$ = global.jQuery; 

o se la finestra è presente, allora:

 typeof window !== "undefined" ? window : this; window.jQuery = require('jquery'); window.$ = window.jQuery; 

Devi ottenere la finestra usando la nuova API JSDOM.

 const jsdom = require("jsdom"); const { window } = new jsdom.JSDOM(`...`); var $ = require("jquery")(window); 

AVVERTIMENTO

Questa soluzione, come citato da Golo Roden non è corretta . È solo una soluzione rapida per aiutare le persone a far funzionare il loro codice jQuery effettivo usando una struttura dell’app Node, ma non è una filosofia Nodo perché jQuery è ancora in esecuzione sul lato client invece che sul lato server. Mi dispiace per aver dato una risposta sbagliata.


Puoi anche eseguire il rendering di Jade con il nodo e inserire il tuo codice jQuery. Ecco il codice del file jade:

 !!! 5 html(lang="en") head title Holamundo! script(type='text/javascript', src='http://code.jquery.com/jquery-1.9.1.js') body h1#headTitle Hello, World p#content This is an example of Jade. script $('#headTitle').click(function() { $(this).hide(); }); $('#content').click(function() { $(this).hide(); }); 

Il modulo jsdom è un ottimo strumento. Ma se vuoi valutare intere pagine e fare qualcosa di funky sul lato server, ti suggerisco di eseguirle nel loro contesto:

 vm.runInContext 

Quindi cose come require / CommonJS sul sito non faranno esplodere il processo del Node stesso.

Puoi trovare la documentazione qui . Saluti!

A partire da jsdom v10, la funzione .env () è deprecata. L’ho fatto come dopo aver provato un sacco di cose da richiedere jquery:

 var jsdom = require('jsdom'); const { JSDOM } = jsdom; const { window } = new JSDOM(); const { document } = (new JSDOM('')).window; global.document = document; var $ = jQuery = require('jquery')(window); 

No. Sarà un grosso sforzo per portare un ambiente browser al nodo.

Un altro approccio, che sto attualmente studiando per il test delle unità, è quello di creare la versione “Mock” di jQuery che fornisce i callback ogni volta che viene chiamato un selettore.

In questo modo puoi testare i tuoi plugin jQuery senza realmente avere un DOM. Dovrai comunque provare nei browser reali per vedere se il tuo codice funziona in modo naturale, ma se scopri problemi specifici del browser, puoi facilmente “deridere” anche quelli nei tuoi test unitari.

Spingerò qualcosa su github.com/felixge una volta pronto per essere mostrato.

È ansible utilizzare Electron , consente browserjog e nodejs ibridi.

Prima, ho provato a usare canvas2d in nodejs, ma alla fine ho rinunciato. Non è supportato da default di nodejs e troppo difficile da installare (molti molti … dipendenti). Finché non utilizzo Electron, posso facilmente utilizzare tutto il mio precedente codice browserjs, anche WebGL, e passare il valore del risultato (ad esempio, i dati dell’immagine di base64 del risultato) al codice nodejs.

Non che io sappia. Il DOM è una cosa lato client (jQuery non analizza l’HTML, ma il DOM).

Ecco alcuni progetti Node.js correnti:

http://wiki.github.com/ry/node

E il djangode di SimonW è dannatamente bello …

Un’alternativa è usare Underscore.js . Dovrebbe fornire ciò che si potrebbe desiderare lato server da JQuery.