web-dev-qa-db-de.com

Kann ich jQuery mit Node.js verwenden?

Ist es möglich, jQuery-Selektoren/DOM-Manipulation serverseitig mit Node.js zu verwenden?

524
John

Update (27-Jun-18) : Es sieht so aus, als gäbe es ein großes Update für jsdom, das dazu führt, dass die ursprüngliche Antwort nicht mehr funktioniert . Ich fand diese Antwort, die erklärt, wie man 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 auch jsdom mit npm install jsdom installieren müssen.

Update (Ende 2013) : Das offizielle jQuery-Team hat ab npm die Verwaltung des Pakets jquery übernommen:

npm install jquery

Dann:

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

Ja, Sie können mit einer von mir erstellten Bibliothek namens 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 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);
54
Thomas Blobaum

Zum Zeitpunkt des Schreibens gibt es auch das gepflegte Cheerio .

Schnelle, flexible und schlanke Implementierung von Core jQuery speziell für den Server.

50
Alfred

Mit jsdom können Sie jetzt. Schauen Sie sich das Jquery-Beispiel im Beispielverzeichnis an.

38
Benjamin Coe

Ein einfacher Crawler mit Cheerio

Dies ist meine Formel, um einen einfachen Crawler in Node.js zu erstellen. Dies ist der Hauptgrund dafür, dass Sie DOM-Manipulationen auf der Serverseite durchführen möchten. Dies ist wahrscheinlich der Grund, warum Sie hierher gekommen sind.

Verwenden Sie zuerst request , um die zu analysierende Seite herunterzuladen. Wenn der Download abgeschlossen ist, behandeln Sie ihn mit cheerio und beginnen Sie mit der DOM-Manipulation 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 Fragen, die auf der SO - Startseite angezeigt werden, an die Konsole gedruckt. Deshalb liebe ich Node.js und seine Community. Einfacher geht es nicht :-)

Abhängigkeiten installieren:

npm installierungsanfrage cheerio

Und ausführen (vorausgesetzt, das Skript oben befindet sich in der Datei crawler.js):

knoten crawler.js


Codierung

Einige Seiten enthalten nicht-englischsprachige Inhalte mit einer bestimmten Kodierung, und Sie müssen sie in UTF-8 dekodieren. Beispielsweise wird eine Seite in brasilianischem Portugiesisch (oder einer anderen Sprache lateinischen Ursprungs) wahrscheinlich in ISO-8859-1 (a.k.a. "latin1") codiert. Wenn Dekodierung erforderlich ist, sage ich request, den Inhalt auf keine Weise zu interpretieren, und benutze stattdessen iconv-lite , um die Aufgabe auszuführen.

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 Installationsanfrage iconv-lite cheerio

Und dann endlich:

knoten crawler.js


Folgende Links

Der nächste Schritt wäre, den Links zu folgen. Angenommen, Sie möchten alle Poster zu jeder Top-Frage zu SO auflisten. Sie müssen zunächst alle Top-Fragen auflisten (Beispiel oben) und dann jeden Link eingeben, wobei die Seite der einzelnen Fragen analysiert wird, um die Liste der beteiligten Benutzer anzuzeigen.

Wenn Sie den Links folgen, kann eine callback-Hölle beginnen. Um dies zu vermeiden, sollten Sie eine Art Versprechen, Zukunft oder was auch immer verwenden. Ich halte async immer in meinem Toolbelt. Hier ist ein vollständiges Beispiel eines Crawlers, 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 Installationsanforderung async cheerio

Test durchführen:

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 Basis, die Sie kennen sollten, um Ihre eigenen Crawler zu bauen :-)


Verwendete Bibliotheken

32
Lucio Paiva

2016 ist es viel einfacher. Installieren Sie jquery mit Ihrer Konsole in node.js:

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.

18
low_rents

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);
17
rdzah

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);
});
9
Noah

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 **: 

8
SUNDARRAJAN K

Sie müssen das Fenster mithilfe der neuen JSDOM-API aufrufen.

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

Mein Arbeitscode ist:

npm install jquery

und dann:

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

oder wenn das Fenster vorhanden ist, dann:

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

WARNUNG

Diese Lösung, wie von Golo Roden erwähnt, ist nicht korrekt. Es ist nur eine schnelle Lösung, um den Anwendern zu helfen, ihren jQuery-Code in einer Node-App-Struktur auszuführen. Dies ist jedoch keine Node-Philosophie, da jQuery immer noch auf dem Client und nicht auf dem Server ausgeführt wird. Es tut mir leid für eine falsche Antwort.


Sie können Jade auch mit node 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();
      });
2
Timbergus

Das Modul jsdom ist ein großartiges Werkzeug. Wenn Sie jedoch ganze Seiten auswerten und auf ihrer Serverseite ein paar verrückte Sachen machen möchten, sollten Sie sie in ihrem eigenen Kontext ausführen:

vm.runInContext

Dinge wie require/CommonJS vor Ort werden Ihren Node-Prozess also nicht beeinträchtigen.

Dokumentation finden Sie hier . Prost!

1
Jakub Oboza

Seit jsdom v10 ist die Funktion .env () veraltet. Ich habe es wie unten gemacht, nachdem ich viele Dinge versucht hatte, um Jquery zu verlangen:

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, das hilft Ihnen oder jedem, der mit solchen Problemen konfrontiert ist.

1
Plabon Dutta

Nein. Es wird eine große Anstrengung sein, eine Browserumgebung auf einen Knoten zu portieren.

Ein anderer Ansatz, den ich gerade für Unit-Tests untersuche, ist die Erstellung einer "Mock" -Version von jQuery, die Rückrufe liefert, wenn ein Selektor aufgerufen wird.

Auf diese Weise könnten Sie Ihre jQuery-Plug-Ins testen, ohne ein DOM zu haben. Sie müssen immer noch in echten Browsern testen, um zu sehen, ob Ihr Code in der Wildnis funktioniert. Wenn Sie jedoch browserspezifische Probleme entdecken, können Sie die in Ihren Unit-Tests gemachten Fehler leicht nachmachen.

Ich werde etwas auf github.com/felixge drücken, sobald es bereit ist zu zeigen.

0

Sie können Electron verwenden, es erlaubt Hybrid Browser und Node.

Vorher habe ich versucht, canvas2d in nodejs zu verwenden, aber schließlich habe ich aufgegeben. Es wird nicht von nodejs default unterstützt, und es ist zu schwierig, es zu installieren (viele, viele ... abhängige). Bis ich Electron verwende, kann ich problemlos meinen gesamten Browser-Code verwenden, sogar WebGL, und den Ergebniswert übergeben (z Ergebnis base64-Bilddaten) zum Node-Code.

0
gonnavis

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();

Das vollständige Tutorial finden Sie hier: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7

0
Oyetoke Tobi