Czy można używać selektorów jQuery / manipulacji DOM po stronie serwera przy użyciu Node.js?
Czy można używać selektorów jQuery / manipulacji DOM po stronie serwera przy użyciu Node.js?
Odpowiedzi:
Aktualizacja (27 czerwca-18) : Wygląda na to, że nastąpiła poważna aktualizacja, jsdomktóra powoduje, że pierwotna odpowiedź nie działa. Znalazłem tę odpowiedź, która wyjaśnia, jak korzystać jsdomteraz. Skopiowałem odpowiedni kod poniżej.
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
Uwaga: Oryginalna odpowiedź nie wspomina, że będziesz musiał zainstalować jsdom również za pomocąnpm install jsdom
Aktualizacja (pod koniec 2013 r.) : Oficjalny zespół jQuery ostatecznie przejął zarządzanie jquerypakietem na npm:
npm install jquery
Następnie:
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
Tak, możesz, korzystając z utworzonej przeze mnie biblioteki o nazwie 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();i TypeError: Express.createServer is not a functionjakiś pomysł?
npm install --save expressw wierszu polecenia.
W momencie pisania jest również utrzymane Cheerio .
Szybka, elastyczna i oszczędna implementacja podstawowego jQuery zaprojektowanego specjalnie dla serwera.
:gt(1)
Za pomocą jsdom możesz teraz. Wystarczy spojrzeć na ich przykład jquery w katalogu przykładów.
To jest moja formuła na stworzenie prostego robota w Node.js. Jest to główny powód, dla którego chcesz wykonywać manipulacje DOM po stronie serwera i prawdopodobnie jest to powód, dla którego tu trafiłeś.
Najpierw użyj, requestaby pobrać stronę do przeanalizowania. Po zakończeniu pobierania obsłuż go cheerioi rozpocznij manipulację DOM, tak jak przy użyciu jQuery.
Przykład roboczy:
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/');
Ten przykład wydrukuje w konsoli wszystkie najważniejsze pytania wyświetlane na stronie głównej SO. Właśnie dlatego uwielbiam Node.js i jego społeczność. Nie może być łatwiej :-)
Zainstaluj zależności:
npm cheerio żądanie instalacji
I uruchom (zakładając, że powyższy skrypt znajduje się w pliku crawler.js ):
węzeł crawler.js
Niektóre strony będą zawierać treści w języku innym niż angielski w pewnym kodowaniu i konieczne będzie ich odkodowanie UTF-8. Na przykład strona w portugalskim języku brazylijskim (lub innym języku pochodzenia łacińskiego) prawdopodobnie będzie zakodowana w ISO-8859-1(inaczej „latin1”). Kiedy potrzebne jest dekodowanie, mówię, requestaby nie interpretować treści w żaden sposób i zamiast tego używaćiconv-lite do wykonania zadania.
Przykład roboczy:
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/');
Przed uruchomieniem zainstaluj zależności:
npm żądanie instalacji iconv-lite cheerio
A potem w końcu:
węzeł crawler.js
Następnym krokiem będzie skorzystanie z linków. Powiedz, że chcesz wyświetlić listę wszystkich plakatów z każdego górnego pytania w SO. Najpierw musisz wymienić wszystkie najważniejsze pytania (przykład powyżej), a następnie wprowadzić każdy link, analizując stronę każdego pytania, aby uzyskać listę zaangażowanych użytkowników.
Kiedy zaczniesz podążać za linkami, możesz zacząć piekło zwrotne . Aby tego uniknąć, powinieneś użyć obietnic, przyszłości lub cokolwiek innego. Zawsze trzymam asynchronię w pasku narzędzi. Oto pełny przykład robota używającego asynchronizacji:
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);
});
});
});
});
Przed uruchomieniem:
npm żądanie instalacji asynchroniczne cheerio
Uruchom test:
węzeł crawler.js
Przykładowe dane wyjściowe:
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
I to jest podstawa, którą powinieneś wiedzieć, aby zacząć tworzyć własne roboty :-)
w 2016 roku sprawy są znacznie łatwiejsze. zainstaluj jquery w node.js za pomocą konsoli:
npm install jquery
powiąż go ze zmienną $(na przykład - jestem do tego przyzwyczajony) w kodzie node.js:
var $ = require("jquery");
robić coś:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
działa również dla gulp, ponieważ jest oparty na node.js.
var $ = require("jquery"); $.ajax // undefined (Na razie głosowanie negatywne).
npm install jquerypierwszy?
> console.log(require("jquery").toString());daje mi funkcję fabryczną: function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); } musiałem użyć powyższej odpowiedzi z jsdom: stackoverflow.com/a/4129032/539490
Uważam, że odpowiedź na to pytanie brzmi: tak.
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
npm install jquery --save # Uwaga WSZYSTKIE DOLNE
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);
});
Moduł jQuery można zainstalować za pomocą:
npm install jquery
Przykład:
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);
});
});
Referencje jQuery w Node.js **:
Musisz otworzyć okno za pomocą nowego API JSDOM.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...) powinien być .JSDOM („<! DOCTYPE html>”) dla obsługi HTML5?
OSTRZEŻENIE
To rozwiązanie, o którym wspomniał Golo Roden, jest nieprawidłowe . Jest to tylko szybka poprawka, aby pomóc ludziom uruchomić ich rzeczywisty kod jQuery za pomocą struktury aplikacji Node, ale nie jest to filozofia Node, ponieważ jQuery nadal działa po stronie klienta, a nie po stronie serwera. Przepraszam za udzielenie złej odpowiedzi.
Możesz także wyrenderować Jade z węzłem i umieścić w nim swój kod jQuery. Oto kod pliku jadeit:
!!! 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();
});
Moduł jsdom jest doskonałym narzędziem. Ale jeśli chcesz ocenić całe strony i zrobić trochę funky po stronie serwera, sugeruję uruchomienie ich we własnym kontekście:
vm.runInContext
Tak więc rzeczy takie jak require/ CommonJSon site nie wysadzą samego procesu węzła.
Dokumentację można znaleźć tutaj . Twoje zdrowie!
Począwszy od jsdom v10, funkcja .env () jest przestarzała. Zrobiłem to jak poniżej po wypróbowaniu wielu rzeczy, które wymagają 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);
Mam nadzieję, że pomoże to Tobie lub każdemu, kto napotkał tego rodzaju problemy.
TypeError: JSDOM is not a constructor
$.each. Właśnie zamieściłem te linie, a potem zrobiłem to tak: $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); }); Mam nadzieję, że to pomaga !!
Przede wszystkim zainstaluj
npm install jquery -S
Po zainstalowaniu możesz użyć go jak poniżej
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
Możesz sprawdzić pełny samouczek, który napisałem tutaj: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
Tak, jQuerymożna go używać z Node.js.
Kroki włączenia jQuery do projektu węzła: -
npm i jquery --save
Uwzględnij jquery w kodach
import jQuery from 'jquery';
const $ = jQuery;
Używam jquery w projektach node.js cały czas, a konkretnie w projekcie rozszerzenia chrome.
np. https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
Nie. Przeniesienie środowiska przeglądarki do węzła będzie dość dużym wysiłkiem.
Innym podejściem, które obecnie badam pod kątem testów jednostkowych, jest stworzenie „próbnej” wersji jQuery, która zapewnia wywołania zwrotne przy każdym wywołaniu selektora.
W ten sposób możesz jednostkowo przetestować wtyczki jQuery bez posiadania DOM. Nadal będziesz musiał przetestować w prawdziwych przeglądarkach, aby sprawdzić, czy Twój kod działa na wolności, ale jeśli odkryjesz specyficzne problemy z przeglądarką, możesz łatwo „wyśmiewać” je w testach jednostkowych.
Pchnę coś na github.com/felixge, gdy będzie gotowe do pokazania.
Możesz użyć Electron , pozwala on na hybrydowe przeglądarki i nodejs.
Wcześniej próbowałem używać canvas2d w nodejs, ale w końcu się poddałem. Nie jest obsługiwany przez domyślny nodejs i jest zbyt trudny do zainstalowania (wiele wielu ... zależności). Dopóki nie użyję Electron, mogę z łatwością używać całego mojego poprzedniego kodu przeglądarki, nawet WebGL, i przekazać wartość wyniku (np. Wynik obrazu base64 obrazu) do kodu nodejs.
Nie żebym o tym wiedział. DOM jest sprawą po stronie klienta (jQuery nie analizuje HTML, ale DOM).
Oto niektóre bieżące projekty Node.js:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
A djangode SimonW jest całkiem fajny ...
Alternatywą jest użycie Underscore.js . Powinien dostarczać to, czego mogłeś chcieć po stronie serwera od JQuery.