Czy można używać selektorów jQuery / manipulacji DOM po stronie serwera przy użyciu Node.js?

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

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

W momencie pisania jest również utrzymane Cheerio .

Szybka, elastyczna i oszczędna implementacja podstawowego jQuery zaprojektowanego specjalnie dla serwera.

Za pomocą jsdom możesz teraz. Wystarczy spojrzeć na ich przykład jquery w katalogu przykładów.

Prosty robot wykorzystujący Cheerio

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

Kodowanie

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

Poniższe linki

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

Wykorzystane biblioteki

• żądanie
• iconv-lite
• cheerio
• asynchronizacja

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.

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

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

Musisz otworzyć okno za pomocą nowego API JSDOM.

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

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

Mój działający kod to:

npm install jquery

i wtedy:

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

lub jeśli okno jest obecne, to:

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

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.

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

Żadne z tych rozwiązań nie pomogło mi w mojej aplikacji Electron.

Moje rozwiązanie (obejście):

npm install jquery

W twoim index.jspliku:

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

W swoich .jsplikach napisz swoje funkcje jQuery w następujący sposób:

jQuery(document).ready(function() {

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.