È possibile utilizzare i selettori jQuery / manipolazione DOM sul lato server utilizzando Node.js?
È possibile utilizzare i selettori jQuery / manipolazione DOM sul lato server utilizzando Node.js?
Risposte:
Aggiornamento (27-giu-18) : sembra che ci sia stato un aggiornamento importante jsdom
che fa sì che la risposta originale non funzioni più. Ho trovato questa risposta che spiega come usare jsdom
ora. Ho copiato il codice pertinente di seguito.
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 il fatto che sarà necessario installare jsdom anche usandonpm install jsdom
Aggiornamento (fine 2013) : il team ufficiale di jQuery ha finalmente assunto la gestione del jquery
pacchetto su npm:
npm install jquery
Poi:
require("jsdom").env("", function (err, window) {
if (err) {
console.error(err);
return;
}
var $ = require("jquery")(window);
});
require("...").env is not a function
.
TypeError: require(...).env is not a function
Sì, puoi, usando una libreria che ho creato chiamato 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 type="text" />');
$('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);
, express = Express.createServer();
e TypeError: Express.createServer is not a function
qualche idea?
npm install --save express
nel prompt dei comandi.
Al momento della stesura c'è anche il mantenuto Cheerio .
Implementazione veloce, flessibile e snella di core jQuery progettata appositamente per il server.
:gt(1)
Usando jsdom ora puoi. Guarda il loro esempio jquery nella directory degli esempi.
Questa è la mia formula per creare un semplice crawler in Node.js. È il motivo principale per voler fare manipolazione DOM sul lato server e probabilmente è il motivo per cui sei arrivato qui.
Innanzitutto, utilizzare request
per scaricare la pagina da analizzare. Quando il download è completo, gestiscilo cheerio
e inizia la manipolazione del DOM proprio come usando jQuery.
Esempio funzionante:
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/');
In questo esempio verranno stampate sulla console tutte le domande principali visualizzate nella home page di SO. Questo è il motivo per cui adoro Node.js e la sua community. Non potrebbe essere più facile di così :-)
Installa dipendenze:
npm installa richiesta cheerio
Ed esegui (supponendo che lo script sopra sia nel file crawler.js
):
nodo crawler.js
Alcune pagine avranno contenuti non inglesi in una determinata codifica e dovrai decodificarle UTF-8
. Ad esempio, una pagina in portoghese brasiliano (o in qualsiasi altra lingua di origine latina) verrà probabilmente codificata ISO-8859-1
(alias "latin1"). Quando è necessaria la decodifica, dico di request
non interpretare il contenuto in alcun modo e invece di usarlo iconv-lite
per fare il lavoro.
Esempio funzionante:
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, installare le dipendenze:
npm installa richiesta iconv-lite cheerio
E poi finalmente:
nodo crawler.js
Il prossimo passo sarebbe seguire i link. Supponi di voler elencare tutti i poster di ogni domanda principale su SO. Devi prima elencare tutte le domande principali (esempio sopra) e quindi inserire ciascun collegamento, analizzando la pagina di ciascuna domanda per ottenere l'elenco degli utenti coinvolti.
Quando inizi a seguire i collegamenti, può iniziare un inferno di richiamata . Per evitarlo, dovresti usare una sorta di promesse, futuri o altro. Tengo sempre asincrono nella cintura degli attrezzi. Quindi, ecco un esempio completo di un crawler che usa 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 campione:
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 questa è la base che dovresti sapere per iniziare a creare i tuoi crawler :-)
nel 2016 le cose sono molto più facili. installa jquery su node.js con la tua console:
npm install jquery
associarlo alla variabile $
(ad esempio - ci sono abituato) nel codice node.js:
var $ = require("jquery");
fare cose:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
funziona anche per gulp in quanto si basa su node.js.
var $ = require("jquery"); $.ajax // undefined
(Downvoted per il momento).
npm install jquery
primo?
> console.log(require("jquery").toString());
mi dà la funzione di fabbrica: function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }
ho dovuto usare la risposta di cui sopra con jsdom: stackoverflow.com/a/4129032/539490
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);
npm install jquery --save
#note TUTTO BASSO
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 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 **:
Devi ottenere la finestra usando la nuova API JSDOM.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) dovrebbe essere .JSDOM ("<! DOCTYPE html>") per il supporto HTML5?
AVVERTIMENTO
Questa soluzione, come menzionato da Golo Roden, non è corretta . È solo una soluzione rapida per aiutare le persone a far funzionare il proprio codice jQuery utilizzando una struttura dell'app Node, ma non è la filosofia Node perché jQuery è ancora in esecuzione sul lato client anziché sul lato server. Mi dispiace per aver dato una risposta sbagliata.
Puoi anche rendere 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 cose funky sul loro lato server, ti suggerisco di eseguirle nel loro contesto:
vm.runInContext
Quindi cose come require
/ CommonJS
sul posto non faranno esplodere il processo Node stesso.
Puoi trovare la documentazione qui . Saluti!
A partire da jsdom v10, la funzione .env () è obsoleta. L'ho fatto come di seguito dopo aver provato molte cose per 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);
Spero che questo aiuti te o chiunque abbia affrontato questo tipo di problemi.
TypeError: JSDOM is not a constructor
$.each
. Ho appena incluso queste righe e poi l'ho fatto come di seguito: $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); });
spero che questo aiuti !!
Prima di tutto installalo
npm install jquery -S
Dopo averlo installato, puoi usarlo come di seguito
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
Puoi dare un'occhiata a un tutorial completo che ho scritto qui: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
Nessuna di queste soluzioni mi ha aiutato nella mia app Electron.
La mia soluzione (soluzione alternativa):
npm install jquery
Nel tuo index.js
file:
var jQuery = $ = require('jquery');
Nei tuoi .js
file scrivi le tue funzioni jQuery in questo modo:
jQuery(document).ready(function() {
Sì, jQuery
può essere utilizzato con Node.js
.
Passaggi per includere jQuery nel progetto nodo: -
npm i jquery --save
Includi jquery nei codici
import jQuery from 'jquery';
const $ = jQuery;
Uso jquery nei progetti node.js sempre nello specifico nel progetto dell'estensione di Chrome.
ad es. https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
No. Sarà un grande sforzo per trasferire un ambiente browser sul nodo.
Un altro approccio, che sto attualmente indagando per i test unitari, è quello di creare la versione "Mock" di jQuery che fornisce i callback ogni volta che viene chiamato un selettore.
In questo modo potresti testare l'unità dei tuoi plugin jQuery senza avere effettivamente un DOM. Dovrai comunque testare nei browser reali per vedere se il tuo codice funziona in modo selvaggio, ma se scopri problemi specifici del browser, puoi facilmente "deridere" anche quelli nei tuoi test unitari.
Spingerò qualcosa su github.com/felixge una volta che è pronto per essere mostrato.
È possibile utilizzare Electron , consente browserjs ibridi e nodejs.
Prima, ho provato ad usare canvas2d in nodejs, ma alla fine ho rinunciato. Non è supportato per impostazione predefinita da nodejs e troppo difficile da installarlo (molti molti ... dipendenti). Fino a quando non utilizzo Electron, posso facilmente utilizzare tutto il mio precedente codice browserjs, anche WebGL, e passare il valore del risultato (ad es. I dati immagine 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 attuali:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
E il djangode di SimonW è dannatamente bello ...
Un'alternativa è usare Underscore.js . Dovrebbe fornire ciò che avresti potuto desiderare sul lato server da JQuery.