[JQUERY] 나는 Node.js를 함께 jQuery를 사용할 수 있습니까?

나는 Node.js를 함께 jQuery를 사용할 수 있습니까?

해결법

1. ---

   1.업데이트 (27 ~ 6 월-18) : 더 이상 작동 원래 대답을 유발 jsdom에 대한 주요 업데이트가 있었다 것 같습니다. 지금 jsdom 사용하는 방법에 대해 설명이 답을 발견했다. 나는 아래의 관련 코드를 복사했습니다.

   업데이트 (27 ~ 6 월-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 사용뿐만 아니라 jsdom 설치해야합니다 언급하지

   업데이트 (2013 년 말) : 공식 jQuery를 팀은 마지막으로 NPM에 JQuery와 패키지의 관리를 인수 :

   npm install jquery
   

   그때:

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

2. ---

   2.예 내가 nodeQuery라고 만든 라이브러리를 사용하여 수

   예 내가 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);
   

3. ---

   3.도 쓰는 시점에서 유지 힘내라입니다.

   도 쓰는 시점에서 유지 힘내라입니다.

4. ---

   4.당신이 지금 할 수있는 jsdom 사용. 그냥 예제 디렉토리에 자신의 JQuery와 예를 살펴.

   당신이 지금 할 수있는 jsdom 사용. 그냥 예제 디렉토리에 자신의 JQuery와 예를 살펴.

5. ---

   5.이 Node.js.에서 간단한 크롤러를 만들어 내 공식이다 그것은 서버 측에서 DOM 조작을하고 아마 당신이 여기있어 이유가 있어요하고자하는 주된 이유입니다.

   이 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를하고 지역 사회를 사랑하는 이유입니다. 그것은보다 쉽게 ​​얻을 수 없었다 :-)

   종속성을 설치합니다 :

   그리고 실행 (파일 crawler.js에 위의 스크립트를 가정)

   일부 페이지는 특정 인코딩에서 영어 이외의 콘텐츠를하고 당신은 UTF-8로 디코딩해야합니다. 예를 들어, 포르투갈어 (브라질)의 페이지 (또는 라틴어 기원의 다른 언어) 가능성이 ISO-8859-1 (일명, "라틴")으로 인코딩됩니다. 디코딩이 필요할 때, 나는 요청 어떤 방식으로 내용을 해석하고 대신 일을 할의 iconv 라이트를 사용하지 말.

   예를 들어 작업 :

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

   실행하기 전에 종속성을 설치합니다 :

   그리고 마지막으로 :

   다음 단계는 링크를 따라하는 것입니다. 당신이 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);
               });
           });
       });
   });
   

   실행하기 전에 :

   테스트를 실행합니다 :

   샘플 출력 :

   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
   

   그리고 기본입니다 당신은 당신의 자신의 크롤러를 만들기 시작 알고 있어야합니다 :-)

6. ---

   6.2016 년 가지 방법이 쉽다. 콘솔과 Node.js를에 JQuery와 설치 :

   2016 년 가지 방법이 쉽다. 콘솔과 Node.js를에 JQuery와 설치 :

   npm install jquery
   

   바인드 그것은 변수 $에 - 당신의 Node.js를 코드 (예를 들어, 나는 그것에 익숙해) :

   var $ = require("jquery");
   

   물건을 할 :

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

   이 node.js.을 기반으로도 꿀꺽 작동

7. ---

   7.나는이에 대한 대답은 '예 이제 믿습니다. https://github.com/tmpvar/jsdom

   나는이에 대한 대답은 '예 이제 믿습니다. https://github.com/tmpvar/jsdom

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

8. ---

   8.NPM 설치 JQuery와 --save #note 소문자

   NPM 설치 JQuery와 --save #note 소문자

   해발 설치 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);
   });
   

9. ---

   9.jQuery를 모듈을 사용하여 설치할 수 있습니다 :

   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에의 참조 ** :

10. ---

    10.당신은 새로운 JSDOM API를 사용하여 창을 얻을 수 있습니다.

    당신은 새로운 JSDOM API를 사용하여 창을 얻을 수 있습니다.

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

11. ---

    11.경고

    경고

    같은 GOLO Roden의 언급이 솔루션은 올바르지 않습니다. 이 노드 응용 프로그램 구조를 사용하여 실행 실제 jQuery 코드를 가지고 도움 사람들에게 그냥 빨리 수정이지만, jQuery를 여전히 클라이언트 측에서 대신 서버 측에서 실행되고 있기 때문에 노드 철학이 아니다. 내가 잘못된 답을주는 죄송합니다.

    또한 노드와 옥을 렌더링하고 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();
          });
    

12. ---

    12.내 작업 코드는 다음과 같습니다

    내 작업 코드는 다음과 같습니다

    npm install jquery
    

    그리고:

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

    또는 윈도우는, 존재하는 경우 :

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

13. ---

    13.모듈 jsdom는 훌륭한 도구입니다. 하지만 전체 페이지를 평가하고 나는 자신의 맥락에서이를 실행하는 것이 좋습니다 그들을 서버 측에서 일부 펑키 물건을 수행하려는 경우 :

    모듈 jsdom는 훌륭한 도구입니다. 하지만 전체 페이지를 평가하고 나는 자신의 맥락에서이를 실행하는 것이 좋습니다 그들을 서버 측에서 일부 펑키 물건을 수행하려는 경우 :

    vm.runInContext
    

    일이 필요 같은 / 사이트 CommonJS는 노드 프로세스 자체를 날려하지 않습니다.

    현재 문서를 찾을 수 있습니다. 건배!

14. ---

    14.jsdom의 V10로, .env의 () 함수는 중단된다. 나는 jQuery를 요구하는 많은 것들을 시도 후 아래와 같이했다 :

    jsdom의 V10로, .env의 () 함수는 중단된다. 나는 jQuery를 요구하는 많은 것들을 시도 후 아래와 같이했다 :

    var에 jsdom의 =은 ( 'jsdom')을 필요로; CONST JSDOM {} = jsdom; CONST 창 {}를 새로운 JSDOM () =; CONST {문서} = (새 JSDOM ( '')) 창.; global.document = 문서; VAR $ = jQuery를 =는 ( 'JQuery와') (창)가 필요합니다;

    이것은 당신 또는 이러한 유형의 문제에 직면하고있다 사람을 도움이되기를 바랍니다.

15. ---

    15.이러한 솔루션 중 어느 것도 내 전자 앱에서 저를 도왔습니다.

    이러한 솔루션 중 어느 것도 내 전자 앱에서 저를 도왔습니다.

    내 솔루션 (해결 방법) :

    npm install jquery
    

    당신의하는 index.js 파일에서 :

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

    당신의 .js에서 파일이 방법으로 당신 jQuery를 함수를 작성 :

    jQuery(document).ready(function() {
    

16. ---

    16.우선 설치

    우선 설치

    npm install jquery -S
    

    를 설치 한 후에는 다음과 같이 사용할 수 있습니다

    import $ from 'jquery';
    window.jQuery = window.$ = $;
    $(selector).hide();
    

    https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7 : 당신은 내가 여기에 쓴 전체 자습서를 확인하실 수 있습니다

17. ---

    17.예, jQuery를이 Node.js. 사용할 수 있습니다

    예, jQuery를이 Node.js. 사용할 수 있습니다

    단계 노드 프로젝트에 jQuery를 포함합니다 : -

    NPM 나는 JQuery와 --save 코드에서 jQuery를 포함

    import jQuery from 'jquery';
    
    const $ = jQuery;
    
    

    나는 크롬 확장의 프로젝트에 특별히 Node.js를 프로젝트에 모든 시간을 사용 jQuery를 않습니다.

    EG HTTPS : //github.tsum/fksnub/gesture-tsontrol-chrome-ekstension/blob/master/srts/default_plugins/tab.is

18. ---

    18.아뇨 노드에 브라우저 환경 포트에 매우 큰 노력을 할 것입니다.

    아뇨 노드에 브라우저 환경 포트에 매우 큰 노력을 할 것입니다.

    또 다른 방법은, 나는 현재 단위 테스트에 대해 조사하고있어 것으로, 셀렉터가 호출 될 때마다 콜백을 제공하는 jQuery를의 "모의"버전을 만드는 것입니다.

    이 방법 당신은 실제로 DOM을하지 않고 단위 테스트 당신의 jQuery 플러그인 할 수 있었다. 당신은 여전히 ​​당신의 코드가 야생에서 작동하는지 확인하기 위해 실제 브라우저에서 테스트해야하지만거야 당신이 브라우저 특정 문제를 발견 할 경우 쉽게 "모의"단위 테스트에서 그뿐만 아니라.

    이 보여줄 준비가되면 나는 github.com/felixge에 뭔가를 밀어 것입니다.

19. ---

    19.당신은 전자를 사용할 수 있습니다, 그것은 하이브리드 browserjs와 nodejs 수 있습니다.

    당신은 전자를 사용할 수 있습니다, 그것은 하이브리드 browserjs와 nodejs 수 있습니다.

    전에, 나는 nodejs에서 canvas2d 사용하려고하지만, 결국 나는 포기했다. 그것은 nodejs 기본적으로 지원되지 않는, 너무 열심히 (많은 많은 ... dependeces)를 설치. 나는 전자를 사용할 때까지, 난 쉽게 모든 내 이전 browserjs 코드, 심지어 WebGL을을 사용하고 nodejs 코드에 결과 값 (예. 결과 base64로 이미지 데이터)를 전달할 수 있습니다.

20. ---

    20.내가 아는 한에서는 아니다. DOM은 (JQuery와 HTML을 구문 분석하지만, DOM하지 않는) 클라이언트 측의 것입니다.

    내가 아는 한에서는 아니다. DOM은 (JQuery와 HTML을 구문 분석하지만, DOM하지 않는) 클라이언트 측의 것입니다.

    여기에 몇 가지 현재 Node.js를 프로젝트는 다음과 같습니다

    https://github.com/ry/node/wiki (https://github.com/nodejs/node)

    그리고 SimonW의 djangode는 굉장히 멋지다는 ...

21. ---

    21.대안은 Underscore.js를 사용하는 것입니다. 그것은 당신이 JQuery와에서 원하는 서버 측이있을 수 있습니다 무엇을 제공해야한다.

    대안은 Underscore.js를 사용하는 것입니다. 그것은 당신이 JQuery와에서 원하는 서버 측이있을 수 있습니다 무엇을 제공해야한다.

from https://stackoverflow.com/questions/1801160/can-i-use-jquery-with-node-js by cc-by-sa and MIT license