Node.js를 사용하여 서버 측에서 jQuery 선택기 / DOM 조작을 사용할 수 있습니까?
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 팀은 마침내 jquery
npm 에서 패키지 관리를 인수했습니다 .
npm install jquery
그때:
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
예, 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);
, express = Express.createServer();
그리고 TypeError: Express.createServer is not a function
어떤 아이디어?
npm install --save express
명령 프롬프트에서 시도하십시오 .
글을 쓰는 시점에 유지되는 Cheerio도 있습니다.
서버를 위해 특별히 설계된 핵심 jQuery를 빠르고 유연하며 간결하게 구현합니다.
:gt(1)
jsdom 을 사용 하면 이제 할 수 있습니다. 예제 디렉토리에서 jquery 예제를 살펴보십시오.
이것은 Node.js에서 간단한 크롤러를 만드는 공식입니다. 서버 측에서 DOM 조작을 수행하려는 주된 이유이며 아마도 여기에있는 이유 일 것입니다.
먼저 request
구문 분석 할 페이지를 다운로드하는 데 사용하십시오. 다운로드가 완료되면 cheerio
jQuery를 사용하는 것처럼 처리하고 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에서도 작동합니다.
var $ = require("jquery"); $.ajax // undefined
(당분간 공감).
npm install jquery
먼저 한 확신 합니까?
> console.log(require("jquery").toString());
나에게 공장 기능을 제공합니다 : function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }
나는 jsdom와 위의 대답은 사용했다 : stackoverflow.com/a/4129032/539490
나는 이것에 대한 대답이 이제 그렇다고 믿는다.
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
npm install jquery --save
#note 모두 소문자
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);
});
jQuery 모듈은 다음을 사용하여 설치할 수 있습니다.
npm install jquery
예:
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);
});
});
Node.js에서 jQuery에 대한 참조 ** :
새로운 JSDOM API를 사용하여 창을 가져와야합니다.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
HTML5 지원을 위해 .JSDOM ( )은 .JSDOM ( "<! DOCTYPE html>")이어야합니까?
경고
같은 언급이 솔루션, GOLO 로덴은 하지 않습니다 올바른 . 사람들이 Node 앱 구조를 사용하여 실제 jQuery 코드를 실행하는 데 도움이되는 빠른 수정 사항이지만 jQuery는 여전히 서버 측이 아닌 클라이언트 측에서 실행되므로 노드 철학이 아닙니다. 답이 잘못되어 죄송합니다.
노드로 Jade를 렌더링하고 jQuery 코드를 내부에 넣을 수도 있습니다. jade 파일의 코드는 다음과 같습니다.
!!! 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();
});
jsdom v10부터 .env () 함수는 더 이상 사용되지 않습니다. 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);
이것이 귀 하나 이러한 유형의 문제에 직면 한 모든 사람에게 도움이되기를 바랍니다.
TypeError: JSDOM is not a constructor
$.each
. 방금 이러한 줄을 포함시킨 다음 아래와 같이했습니다. $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); });
희망이 있습니다 !!
우선 설치
npm install jquery -S
설치 후 아래와 같이 사용할 수 있습니다
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7에서 작성한 전체 자습서를 확인할 수 있습니다.
예, jQuery
와 함께 사용할 수 있습니다 Node.js
.
노드 프로젝트에 jQuery를 포함시키는 단계 :-
npm i jquery --save
코드에 jquery 포함
import jQuery from 'jquery';
const $ = jQuery;
크롬 확장 프로그램의 프로젝트에서 항상 node.js 프로젝트에서 jquery를 사용합니다.
예 : https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
아니요. 브라우저 환경을 노드로 이식하는 데 큰 노력이 필요합니다.
현재 단위 테스트를 위해 조사하고있는 또 다른 방법은 선택기가 호출 될 때마다 콜백을 제공하는 "Mock"버전의 jQuery를 만드는 것입니다.
이렇게하면 실제로 DOM이 없어도 jQuery 플러그인을 단위 테스트 할 수 있습니다. 코드가 제대로 작동하는지 확인하려면 실제 브라우저에서 테스트해야하지만 브라우저 관련 문제를 발견하면 단위 테스트에서 쉽게 "모의"할 수 있습니다.
보여줄 준비가되면 github.com/felixge에 뭔가를 넣겠습니다.
내가 아는 한에서는 아니다. DOM은 클라이언트 측입니다 (jQuery는 HTML을 파싱하지 않지만 DOM).
다음은 현재 Node.js 프로젝트입니다.
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
그리고 SimonW의 장고 는 정말 멋지다 ...
대안은 Underscore.js 를 사용하는 것입니다 . JQuery에서 서버 측에 원하는 것을 제공해야합니다.