Ist es möglich, jQuery-Selektoren / DOM-Manipulationen auf der Serverseite mit Node.js zu verwenden?
Ist es möglich, jQuery-Selektoren / DOM-Manipulationen auf der Serverseite mit Node.js zu verwenden?
Antworten:
Update (27.06.18) : Es sieht so aus, als ob es ein größeres Update gab, jsdom
das dazu führt, dass die ursprüngliche Antwort nicht mehr funktioniert. Ich habe diese Antwort gefunden, die erklärt, wie man sie jsdom
jetzt benutzt. Ich habe den entsprechenden Code unten kopiert.
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
Hinweis: In der ursprünglichen Antwort wird nicht erwähnt, dass Sie jsdom ebenfalls mit installieren müssennpm install jsdom
Update (Ende 2013) : Das offizielle jQuery-Team übernahm schließlich die Verwaltung des jquery
Pakets auf npm:
npm install jquery
Dann:
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
Ja, Sie können eine von mir erstellte Bibliothek namens nodeQuery verwenden
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();
und TypeError: Express.createServer is not a function
eine Idee?
npm install --save express
in Ihrer Eingabeaufforderung.
Zum Zeitpunkt des Schreibens gibt es auch das gepflegte Cheerio .
Schnelle, flexible und schlanke Implementierung von Core-jQuery, das speziell für den Server entwickelt wurde.
:gt(1)
Mit jsdom können Sie jetzt. Schauen Sie sich einfach das jquery-Beispiel im Beispielverzeichnis an.
Dies ist meine Formel, um einen einfachen Crawler in Node.js zu erstellen. Dies ist der Hauptgrund für die DOM-Manipulation auf der Serverseite und wahrscheinlich der Grund, warum Sie hierher gekommen sind.
Verwenden Sie zunächst request
, um die zu analysierende Seite herunterzuladen. Wenn der Download abgeschlossen ist, gehen Sie zucheerio
und beginnen mit der DOM-Manipulation, genau wie mit jQuery.
Arbeitsbeispiel:
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 diesem Beispiel werden alle wichtigen Fragen, die auf der SO-Homepage angezeigt werden, auf der Konsole gedruckt. Deshalb liebe ich Node.js und seine Community. Einfacher geht es nicht :-)
Abhängigkeiten installieren:
npm Installationsanfrage Cheerio
Und führen Sie aus (vorausgesetzt, das obige Skript befindet sich in der Datei crawler.js
):
Knoten crawler.js
Einige Seiten enthalten nicht englischen Inhalt in einer bestimmten Codierung, und Sie müssen ihn dekodieren UTF-8
. Beispielsweise wird eine Seite in brasilianischem Portugiesisch (oder einer anderen Sprache lateinischen Ursprungs) wahrscheinlich in ISO-8859-1
(auch bekannt als "latin1") codiert . Wenn eine Dekodierung erforderlich ist, fordere ich Sie request
auf, den Inhalt in keiner Weise zu interpretieren und stattdessen zu verwendeniconv-lite
für die Arbeit zu verwenden.
Arbeitsbeispiel:
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/');
Installieren Sie vor dem Ausführen Abhängigkeiten:
npm install request iconv-lite cheerio
Und dann endlich:
Knoten crawler.js
Der nächste Schritt wäre, Links zu folgen. Angenommen, Sie möchten alle Poster aus jeder Top-Frage auf SO auflisten. Sie müssen zuerst alle Top-Fragen auflisten (Beispiel oben) und dann jeden Link eingeben und die Seite jeder Frage analysieren, um die Liste der beteiligten Benutzer zu erhalten.
Wenn Sie Links folgen, kann eine Rückruf-Hölle beginnen. Um dies zu vermeiden, sollten Sie Versprechen, Futures oder was auch immer verwenden. Ich halte immer asynchron in meinem Werkzeuggürtel. Hier ist ein vollständiges Beispiel für einen Crawler, der Async verwendet:
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);
});
});
});
});
Vor dem Laufen:
npm install request async cheerio
Führen Sie einen Test durch:
Knoten crawler.js
Beispielausgabe:
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
Und das ist die Grundvoraussetzung, die Sie kennen sollten, um Ihre eigenen Crawler zu erstellen :-)
2016 ist es viel einfacher. Installieren Sie jquery auf node.js mit Ihrer Konsole:
npm install jquery
Binden Sie es an die Variable $
(zum Beispiel - ich bin daran gewöhnt) in Ihrem node.js-Code:
var $ = require("jquery");
Sachen machen:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
funktioniert auch für gulp, da es auf node.js basiert.
var $ = require("jquery"); $.ajax // undefined
(momentan heruntergestimmt).
npm install jquery
zuerst getan hast ?
> console.log(require("jquery").toString());
gibt mir die Factory-Funktion: function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }
Ich musste die obige Antwort mit jsdom verwenden: stackoverflow.com/a/4129032/539490
Ich glaube, die Antwort darauf lautet jetzt ja.
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
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);
});
Das jQuery-Modul kann installiert werden mit:
npm install jquery
Beispiel:
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);
});
});
Referenzen von jQuery in Node.js **:
Sie müssen das Fenster mit der neuen JSDOM-API abrufen.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) sollte für die HTML5-Unterstützung .JSDOM ("<! DOCTYPE html>") sein.
WARNUNG
Diese von Golo Roden erwähnte Lösung ist nicht korrekt . Es ist nur eine schnelle Lösung, um den Benutzern zu helfen, ihren tatsächlichen jQuery-Code mithilfe einer Node-App-Struktur auszuführen. Es handelt sich jedoch nicht um eine Node-Philosophie, da die jQuery weiterhin auf der Clientseite und nicht auf der Serverseite ausgeführt wird. Es tut mir leid, dass ich eine falsche Antwort gegeben habe.
Sie können Jade auch mit Knoten rendern und Ihren jQuery-Code einfügen. Hier ist der Code der Jade-Datei:
!!! 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();
});
Das Modul jsdom ist ein großartiges Werkzeug. Aber wenn Sie ganze Seiten auswerten und auf der Serverseite ein paar funky Sachen machen möchten, schlage ich vor, sie in ihrem eigenen Kontext auszuführen:
vm.runInContext
Dinge wie require
/ CommonJS
vor Ort werden also Ihren Knotenprozess selbst nicht in die Luft jagen.
Dokumentation finden Sie hier . Prost!
Ab jsdom v10 ist die Funktion .env () veraltet. Ich habe es wie unten beschrieben gemacht, nachdem ich viele Dinge ausprobiert hatte, um eine Abfrage zu erfordern:
var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
Ich hoffe, dies hilft Ihnen oder allen, die mit solchen Problemen konfrontiert waren.
TypeError: JSDOM is not a constructor
$.each
. Ich habe gerade diese Zeilen eingefügt und es dann wie folgt gemacht: $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); });
Hoffe das hilft !!
Installieren Sie es zuerst
npm install jquery -S
Nach der Installation können Sie es wie folgt verwenden
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
Sie können sich ein vollständiges Tutorial ansehen, das ich hier geschrieben habe: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
Keine dieser Lösungen hat mir in meiner Electron App geholfen.
Meine Lösung (Problemumgehung):
npm install jquery
In Ihrer index.js
Datei:
var jQuery = $ = require('jquery');
.js
Schreiben Sie Ihre jQuery-Funktionen in Ihre Dateien folgendermaßen:
jQuery(document).ready(function() {
Ja, jQuery
kann mit verwendet werden Node.js
.
Schritte zum Einfügen von jQuery in das Knotenprojekt: -
npm i jquery --save
Fügen Sie jquery in Codes ein
import jQuery from 'jquery';
const $ = jQuery;
Ich verwende jquery die ganze Zeit in node.js-Projekten, speziell im Projekt der Chrome-Erweiterung.
zB https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
Nein. Es wird eine ziemlich große Anstrengung sein, eine Browserumgebung auf den Knoten zu portieren.
Ein anderer Ansatz, den ich derzeit für Unit-Tests untersuche, besteht darin, eine "Mock" -Version von jQuery zu erstellen, die bei jedem Aufruf eines Selektors Rückrufe bereitstellt.
Auf diese Weise können Sie Ihre jQuery-Plugins ohne DOM testen. Sie müssen immer noch in echten Browsern testen, um festzustellen, ob Ihr Code in freier Wildbahn funktioniert. Wenn Sie jedoch browserspezifische Probleme entdecken, können Sie diese auch in Ihren Komponententests leicht "verspotten".
Ich werde etwas an github.com/felixge senden, sobald es fertig ist.
Sie können Electron verwenden , es erlaubt hybride Browser und Knoten.
Früher habe ich versucht, canvas2d in nodejs zu verwenden, aber schließlich habe ich aufgegeben. Es wird von NodeJS Standard nicht unterstützt und ist zu schwer zu installieren (viele, viele ... Abhängigkeiten). Bis ich Electron verwende, kann ich problemlos meinen gesamten vorherigen Browser-Code, sogar WebGL, verwenden und den Ergebniswert (z. B. Ergebnis-Base64-Bilddaten) an den Knoten-Code übergeben.
Nicht, dass ich davon Wüste. Das DOM ist eine clientseitige Sache (jQuery analysiert nicht den HTML-Code, sondern das DOM).
Hier sind einige aktuelle Node.js-Projekte:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
Und SimonWs Djangode ist verdammt cool ...
Eine Alternative ist die Verwendung von Underscore.js . Es sollte das bereitstellen, was Sie sich von JQuery für den Server gewünscht haben.