Ist es möglich, jQuery-Selektoren / DOM-Manipulationen auf der Serverseite mit Node.js zu verwenden?

Update (27.06.18) : Es sieht so aus, als ob es ein größeres Update gab, jsdomdas dazu führt, dass die ursprüngliche Antwort nicht mehr funktioniert. Ich habe diese Antwort gefunden, die erklärt, wie man sie jsdomjetzt 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 jqueryPakets auf npm:

npm install jquery

Dann:

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

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

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.

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

Ein einfacher Crawler mit Cheerio

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

Codierung

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 requestauf, 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

Folgende Links

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

Verwendete Bibliotheken

• Anfrage
• iconv-lite
• Cheerio
• asynchron

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.

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

• http://quaintous.com/2015/07/31/jqery-node-mystery/
• http://www.hacksparrow.com/jquery-with-node-js.html

Sie müssen das Fenster mit der neuen JSDOM-API abrufen.

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

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

Mein Arbeitscode lautet:

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;

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/ CommonJSvor 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.

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.jsDatei:

var jQuery = $ = require('jquery');

.jsSchreiben Sie Ihre jQuery-Funktionen in Ihre Dateien folgendermaßen:

jQuery(document).ready(function() {

Ja, jQuerykann 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.