É possível usar a seleção de jQuery / manipulação DOM no lado do servidor usando o Node.js.
É possível usar a seleção de jQuery / manipulação DOM no lado do servidor usando o Node.js.
Respostas:
Atualização (27-jun-18) : Parece que houve uma grande atualização jsdom
que faz com que a resposta original não funcione mais. Encontrei esta resposta que explica como usar jsdom
agora. Copiei o código relevante abaixo.
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: A resposta original não menciona que você precisará instalar o jsdom também usandonpm install jsdom
Atualização (final de 2013) : A equipe oficial do jQuery finalmente assumiu o gerenciamento do jquery
pacote no npm:
npm install jquery
Então:
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
Sim, você pode, usando uma biblioteca que criei chamada 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
alguma idéia?
npm install --save express
no seu prompt de comando.
No momento em que escrevo, também existe o Cheerio mantido .
Implementação rápida, flexível e enxuta do jQuery principal, projetado especificamente para o servidor.
:gt(1)
Esta é minha fórmula para criar um rastreador simples no Node.js. É o principal motivo para querer manipular o DOM no servidor e, provavelmente, é o motivo pelo qual você chegou aqui.
Primeiro, use request
para baixar a página a ser analisada. Quando o download estiver concluído, manipule-o cheerio
e inicie a manipulação do DOM, assim como o jQuery.
Exemplo de trabalho:
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/');
Este exemplo imprimirá no console todas as principais perguntas exibidas na home page do SO. É por isso que eu amo o Node.js e sua comunidade. Não poderia ficar mais fácil do que isso :-)
Instale dependências:
solicitação de instalação npm cheerio
E execute (assumindo que o script acima esteja no arquivo crawler.js
):
nó crawler.js
Algumas páginas terão conteúdo em inglês em uma determinada codificação e você precisará decodificá-lo UTF-8
. Por exemplo, uma página em português do Brasil (ou qualquer outro idioma de origem latina) provavelmente será codificada em ISO-8859-1
(aka "latin1"). Quando a decodificação é necessária, digo request
para não interpretar o conteúdo de nenhuma maneira e, em vez disso, uso iconv-lite
para fazer o trabalho.
Exemplo de trabalho:
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/');
Antes de executar, instale dependências:
solicitação de instalação do npm iconv-lite cheerio
E finalmente:
nó crawler.js
O próximo passo seria seguir os links. Digamos que você queira listar todos os pôsteres de cada pergunta principal no SO. Você deve primeiro listar todas as perguntas principais (exemplo acima) e depois inserir cada link, analisando a página de cada pergunta para obter a lista de usuários envolvidos.
Quando você começa a seguir os links, um inferno de retorno de chamada pode começar. Para evitar isso, você deve usar algum tipo de promessas, futuros ou o que for. Eu sempre assíncrono no meu cinto de ferramentas. Então, aqui está um exemplo completo de um rastreador usando assíncrono:
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);
});
});
});
});
Antes de executar:
solicitação de instalação npm assíncrona cheerio
Execute um teste:
nó crawler.js
Saída de amostra:
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 esse é o básico que você deve saber para começar a criar seus próprios rastreadores :-)
em 2016 as coisas são muito mais fáceis. instale o jquery no node.js com seu console:
npm install jquery
vincule-o à variável $
(por exemplo - eu estou acostumado) no código node.js:
var $ = require("jquery");
Fazer coisas:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
também funciona para o gulp, pois é baseado no node.js.
var $ = require("jquery"); $.ajax // undefined
(com voto negativo no momento).
npm install jquery
primeiro?
> console.log(require("jquery").toString());
dá-me a função de fábrica: function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }
eu tive que usar a resposta acima com jsdom: stackoverflow.com/a/4129032/539490
Eu acredito que a resposta para isso é agora sim.
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
npm install jquery --save
#note TUDO EM BAIXO
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);
});
O módulo jQuery pode ser instalado usando:
npm install jquery
Exemplo:
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);
});
});
Referências do jQuery no Node.js **:
Você deve obter a janela usando a nova API JSDOM.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) deve ser .JSDOM ("<! DOCTYPE html>") para suporte ao HTML5?
ATENÇÃO
Esta solução, como mencionado por Golo Roden, não está correta . É apenas uma solução rápida para ajudar as pessoas a executar o código jQuery real usando uma estrutura de aplicativo Node, mas não é a filosofia do Node porque o jQuery ainda está sendo executado no lado do cliente e não no lado do servidor. Sinto muito por dar uma resposta errada.
Você também pode renderizar o Jade com o nó e inserir seu código jQuery. Aqui está o código do arquivo 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();
});
O módulo jsdom é uma ótima ferramenta. Mas se você deseja avaliar páginas inteiras e fazer algumas coisas divertidas no lado do servidor, sugiro executá-las em seu próprio contexto:
vm.runInContext
Portanto, coisas como require
/ CommonJS
no site não afetarão o processo do Node.
Você pode encontrar documentação aqui . Felicidades!
A partir do jsdom v10, a função .env () está obsoleta. Fiz isso como abaixo, depois de tentar várias coisas para exigir o 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);
Espero que isso ajude você ou qualquer pessoa que esteja enfrentando esse tipo de problema.
TypeError: JSDOM is not a constructor
$.each
. Eu apenas incluí estas linhas e depois fiz o seguinte: $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); });
Espero que ajude !!
Antes de tudo, instale-o
npm install jquery -S
Após a instalação, você pode usá-lo como abaixo
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
Você pode conferir um tutorial completo que escrevi aqui: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
Sim, jQuery
pode ser usado com Node.js
.
Etapas para incluir o jQuery no projeto do nó: -
npm i jquery --save
Incluir jquery nos códigos
import jQuery from 'jquery';
const $ = jQuery;
Eu uso jquery em projetos node.js o tempo todo, especificamente no projeto da extensão chrome.
por exemplo, https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
Não. Será um grande esforço portar um ambiente de navegador para o nó.
Outra abordagem, que estou investigando atualmente para testes de unidade, é criar a versão "Mock" do jQuery que fornece retornos de chamada sempre que um seletor é chamado.
Dessa forma, você poderia testar seus plugins jQuery sem realmente ter um DOM. Você ainda precisará testar em navegadores reais para ver se seu código funciona de maneira natural, mas se descobrir problemas específicos do navegador, poderá facilmente "zombar" daqueles dos testes de unidade.
Vou empurrar algo para o github.com/felixge assim que estiver pronto para ser exibido.
Você pode usar o Electron , ele permite que o navegador híbridojs e nodejs.
Antes, tentei usar o canvas2d no nodejs, mas finalmente desisti. Não é suportado pelo padrão nodejs, e é muito difícil de instalá-lo (muitos ... dependentes). Até usar o Electron, posso facilmente usar todo o meu código anterior do navegadorjs, até o WebGL, e passar o valor do resultado (por exemplo, dados da imagem do resultado base64) para o código do nodejs.
Não que eu saiba. O DOM é uma coisa do lado do cliente (o jQuery não analisa o HTML, mas o DOM).
Aqui estão alguns projetos atuais do Node.js.
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
E o djangode do SimonW é bem legal ...
Uma alternativa é usar Underscore.js . Ele deve fornecer o que você poderia querer do lado do servidor do JQuery.