[javascript] Node.js와 함께 jQuery를 사용할 수 있습니까?

Node.js를 사용하여 서버 측에서 jQuery 선택기 / DOM 조작을 사용할 수 있습니까?



답변

업데이트 (27-Jun-18) : jsdom원래 답변이 더 이상 작동하지 않는 주요 업데이트가있는 것 같습니다 . 지금 사용하는 방법을 설명하는 답변을 찾았습니다 jsdom. 아래 관련 코드를 복사했습니다.

var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

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

참고 : 원래 답변은 jsdom을 설치하고 사용해야한다고 언급하지 못했습니다.npm install jsdom

업데이트 (2013 년 말) : 공식 jQuery 팀은 마침내 jquerynpm 에서 패키지 관리를 인수했습니다 .

npm install jquery


그때:

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


답변

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


답변

글을 쓰는 시점에 유지되는 Cheerio도 있습니다.

서버를 위해 특별히 설계된 핵심 jQuery를 빠르고 유연하며 간결하게 구현합니다.


답변

jsdom 을 사용 하면 이제 할 수 있습니다. 예제 디렉토리에서 jquery 예제를 살펴보십시오.


답변

Cheerio를 사용하는 간단한 크롤러

이것은 Node.js에서 간단한 크롤러를 만드는 공식입니다. 서버 측에서 DOM 조작을 수행하려는 주된 이유이며 아마도 여기에있는 이유 일 것입니다.

먼저 request구문 분석 할 페이지를 다운로드하는 데 사용하십시오. 다운로드가 완료되면 cheeriojQuery를 사용하는 것처럼 처리하고 DOM 조작을 시작하십시오.

작업 예 :

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

이 예제는 SO 홈 페이지에 표시된 모든 주요 질문을 콘솔에 인쇄합니다. 이것이 Node.js와 커뮤니티를 좋아하는 이유입니다. 그것보다 쉬울 수 없었습니다 🙂

종속성을 설치하십시오.

npm 설치 요청 cheerio

그리고 실행하십시오 (위의 스크립트가 파일에 있다고 가정 crawler.js).

노드 crawler.js


부호화

일부 페이지는 특정 인코딩으로 영어가 아닌 내용을 포함하므로이 페이지를로 디코딩해야합니다 UTF-8. 예를 들어, 브라질 포르투갈어 (또는 다른 라틴어 언어)의 페이지는 ISO-8859-1( “latin1”) 로 인코딩 될 수 있습니다 . 디코딩이 필요한 request경우 내용을 해석 iconv-lite하지 말고 대신 작업을 수행 하도록 지시합니다.

작업 예 :

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

실행하기 전에 종속성을 설치하십시오.

npm 설치 요청 iconv-lite cheerio

그리고 마지막으로 :

노드 crawler.js


다음 링크

다음 단계는 링크를 따르는 것입니다. SO에 대한 각 주요 질문의 모든 포스터를 나열하고 싶다고 가정 해보십시오. 먼저 모든 주요 질문 (위의 예)을 나열한 다음 각 링크를 입력하여 각 질문의 페이지를 구문 분석하여 관련 사용자 목록을 가져와야합니다.

링크를 따라 가면 콜백 지옥 이 시작될 수 있습니다. 이를 피하려면 어떤 약속, 선물 등을 사용해야합니다. 나는 항상 툴 벨트에서 비동기 상태를 유지 합니다. 다음은 async를 사용하는 크롤러의 전체 예입니다.

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

실행하기 전에 :

npm 설치 요청 비동기 cheerio

테스트를 실행하십시오.

노드 crawler.js

샘플 출력 :

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

그리고 그것은 당신이 자신의 크롤러를 만들기 시작해야 할 기본입니다 🙂


사용 된 라이브러리


답변

2016 년에는 훨씬 쉬워졌습니다. 콘솔을 사용하여 jquery를 node.js에 설치하십시오.

npm install jquery

$node.js 코드 의 변수에 바인딩하십시오 (예 : 익숙합니다).

var $ = require("jquery");

물건을 :

$.ajax({
    url: 'gimme_json.php',
    dataType: 'json',
    method: 'GET',
    data: { "now" : true }
});

node.js를 기반으로하므로 gulp에서도 작동합니다.


답변

나는 이것에 대한 대답이 이제 그렇다고 믿는다.
https://github.com/tmpvar/jsdom

var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);