node.js에서 jQuery를 사용할 수 있습니까?
서버측에서 Node.js를 사용하여 jQuery selectors/DOM 조작을 사용할 수 있습니까?
업데이트 (6월 27일) :에 중대한 업데이트가 있었던 것 같습니다.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 :
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);
글을 쓸 때 유지되는 치어리더도 있다.
서버 전용으로 설계된 코어 jQuery의 빠르고 유연하며 린한 구현.
치어리더를 사용한 심플 크롤러
이것이 Node.js에서 간단한 크롤러를 만드는 제 공식입니다.이것이 서버측에서 DOM 조작을 실시하는 주된 이유이며, 아마 이것이 당신이 여기에 온 이유일 것입니다.
먼저 해석할 페이지를 다운로드하기 위해 사용합니다.다운로드가 완료되면 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 설치 요청 응원
가 파일 )crawler.js
노드 크롤러.접속
부호화
가 포함되어 , '영어 이외의 콘텐츠'로 만들어야 .UTF-8는, 「 」로 됩니다.ISO-8859-1('1').때, 는 '복호화'라고 .request어떤 식으로든 내용을 해석하지 않고 대신 작업을 수행하는 데 사용합니다.
작업 예:
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 설치 요청 아이콘v-lite cheerio
그리고 마지막으로:
노드 크롤러.접속
다음 링크
다음 단계는 링크를 따르는 것입니다.SO에 대한 각 주요 질문의 모든 포스터를 나열한다고 가정해 보십시오.먼저 모든 주요 질문(위의 예)을 나열한 후 각 링크를 입력하고 각 질문 페이지를 구문 분석하여 관련된 사용자 목록을 가져와야 합니다.
링크 팔로잉을 시작하면 콜백헬이 시작될 수 있어요그것을 피하려면 당신은 약속이나 선물 같은 것을 사용해야 한다.나는 항상 공구 벨트에 비동기 상태를 유지한다.다음은 비동기 기능을 사용하는 크롤러의 전체 예입니다.
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 설치 요청 비동기 응원
테스트 실행:
노드 크롤러.접속
샘플 출력:
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년은 더 쉬울 것 같아요.콘솔과 함께 node.displaces에 jquery를 설치합니다.
npm install jquery
.$: (-) node.discode:
var $ = require("jquery");
작업:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
또한 node.debug를 기반으로 하기 때문에 gulp에서도 동작합니다.
이 질문에 대한 답은 이제 '그렇다'라고 생각합니다.
https://github.com/tmpvar/jsdomhttps.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
npm install jquery --save #모두 소문자
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 참조:
- http://quaintous.com/2015/07/31/jqery-node-mystery/
- http://www.hacksparrow.com/jquery-with-node-js.html
새로운 JSDOM API를 사용하여 창을 표시해야 합니다.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
우선 설치
npm install jquery -S
설치 후 아래와 같이 사용할 수 있습니다.
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
여기서 제가 쓴 튜토리얼 전체를 확인하실 수 있습니다.https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
경고
Golo Roden이 언급한 이 솔루션은 올바르지 않습니다.이는 노드 앱 구조를 사용하여 실제 jQuery 코드를 실행할 수 있도록 도와주는 간단한 수정일 뿐이지만, jQuery는 여전히 서버 측이 아닌 클라이언트 측에서 실행되고 있기 때문에 노드 철학이 아닙니다.틀린 대답을 해서 죄송합니다.
노드를 사용하여 Jade를 렌더링하고 jQuery 코드를 넣을 수도 있습니다.다음은 제이드 파일의 코드입니다.
!!! 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();
});
작업 코드는 다음과 같습니다.
npm install jquery
그 후:
global.jQuery = require('jquery');
global.$ = global.jQuery;
또는 창이 있는 경우:
typeof window !== "undefined" ? window : this;
window.jQuery = require('jquery');
window.$ = window.jQuery;
전자 앱에서는 이러한 솔루션 중 어느 것도 도움이 되지 않았습니다.
솔루션(회피책):
npm install jquery
고객님의 고객명index.js 삭제:
var jQuery = $ = require('jquery');
고객님의 고객명.js 함수를 합니다.files 는 、 jQuery 함 。
jQuery(document).ready(function() {
모듈 jsdom은 훌륭한 도구입니다.다만, 페이지 전체를 평가해, 서버측에서 펑키한 작업을 실시하는 경우는, 독자적인 컨텍스트로 실행하는 것을 추천합니다.
vm.runInContext
★★★★★★★★★★★…requireCommonJS노드 프로세스 자체를 파괴하지 않습니다.
여기서 문서를 찾을 수 있습니다.건배!
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);이것이 귀하 또는 이러한 유형의 문제에 직면한 모든 사람에게 도움이 되기를 바랍니다.
네.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
추가 패키지나 코드 없이 수작업으로 쉽게 할 수 있었습니다.
npm i jquery
그 다음에 복사한다.jquery.min.js에서 줄서다.node_modules/jquery/dist로의 디렉토리.public/js
<script type='text/javascript' src='/js/jquery.min.js'></script>
<script>
$(document).ready(function() { console.log( "ready!" ); });
</script>
그리고 효과가 있을 거야IT 테스트
파일을 복사/붙여넣는 것이 이상적이지 않습니다.파일을 스태틱으로 유효하게 하면, 파일을 스태틱 파일로 유효하게 할 수 있습니다.따라서 expressJS가 읽을 수 있어요.하지만 정적 공용 디렉토리에 복사하는 것이 더 쉽습니다.
아니요. 브라우저 환경을 노드로 이식하려면 상당한 노력이 필요합니다.
현재 유닛 테스트를 위해 조사하고 있는 또 다른 접근법은 셀렉터가 호출될 때마다 콜백을 제공하는 jQuery의 "Mock" 버전을 작성하는 것입니다.
이렇게 하면 실제로 DOM을 사용하지 않고도 jQuery 플러그인을 유닛으로 테스트할 수 있습니다.코드가 야생에서 작동하는지 확인하려면 실제 브라우저에서 테스트해야 하지만 브라우저 고유의 문제를 발견하면 장치 테스트에서도 쉽게 "매킹"할 수 있습니다.
표시할 준비가 되면 github.com/felixge에 푸시하겠습니다.
Electron을 사용하면 하이브리드 브라우저j와 nodej를 사용할 수 있습니다.
이전에 nodejs에서 canvas2d를 사용하려고 했지만 결국 포기했습니다.nodejs 디폴트에서는 지원되지 않기 때문에 설치가 너무 어렵습니다(많은 ...의존).Electron을 사용할 때까지는 WebGL을 포함하여 모든 이전 브라우저js 코드를 쉽게 사용할 수 있으며 결과값(예를 들어 result base64 image data)을 nodejs 코드에 전달할 수 있습니다.
아는 바 없는데요.DOM은 클라이언트 측입니다(jQuery는 HTML을 구문 분석하는 것이 아니라 DOM).
현재 Node.js 프로젝트는 다음과 같습니다.
https://github.com/ry/node/wiki (https://github.com/nodejs/node) )
그리고 사이먼W의 장고데는 꽤 멋있어
또는 Underscore.js를 사용하는 방법도 있습니다.JQuery에서 원하는 서버측을 제공합니다.
언급URL : https://stackoverflow.com/questions/1801160/can-i-use-jquery-with-node-js
'programing' 카테고리의 다른 글
| InnoDB가 테이블/테이블의 외부 키를 다시 확인하도록 강제하시겠습니까? (0) | 2022.09.12 |
|---|---|
| php는 백그라운드 프로세스를 실행합니다. (0) | 2022.09.12 |
| PHP에서 mysql_* 함수를 사용하면 안 되는 이유는 무엇입니까? (0) | 2022.09.12 |
| 초기 렌더링 시 리액트 useEffect 후크를 실행하지 않도록 설정 (0) | 2022.09.12 |
| JOIN 쿼리 vs 여러 쿼리 (0) | 2022.09.12 |