เป็นไปได้หรือไม่ที่จะใช้ตัวเลือก jQuery / การจัดการ DOM บนฝั่งเซิร์ฟเวอร์โดยใช้ Node.js
เป็นไปได้หรือไม่ที่จะใช้ตัวเลือก jQuery / การจัดการ DOM บนฝั่งเซิร์ฟเวอร์โดยใช้ Node.js
คำตอบ:
Update (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
แพคเกจในเวลา 17.00 น.:
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บำรุงรักษาอยู่
การปรับใช้ core jQuery ที่รวดเร็วยืดหยุ่นและแบบลีนออกแบบมาสำหรับเซิร์ฟเวอร์โดยเฉพาะ
:gt(1)
ใช้jsdomตอนนี้คุณสามารถ เพียงแค่ดูตัวอย่าง jquery ในไดเรกทอรีตัวอย่าง
นี่เป็นสูตรของฉันในการสร้างโปรแกรมรวบรวมข้อมูลอย่างง่าย ๆ ใน Node.js นี่เป็นเหตุผลหลักที่ทำให้คุณต้องการจัดการ DOM บนฝั่งเซิร์ฟเวอร์และอาจเป็นสาเหตุที่คุณมาที่นี่
ก่อนอื่นให้ใช้ request
เพื่อดาวน์โหลดหน้าเพื่อแยกวิเคราะห์ เมื่อการดาวน์โหลดเสร็จสิ้นให้จัดการcheerio
และเริ่มการจัดการ DOM เช่นเดียวกับการใช้ jQuery
ตัวอย่างการทำงาน:
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/');
ตัวอย่างนี้จะพิมพ์ไปยังคอนโซลคำถามยอดนิยมทั้งหมดที่แสดงในหน้าแรกดังนั้น นี่คือเหตุผลที่ฉันรัก Node.js และชุมชน มันไม่ง่ายไปกว่านั้น :-)
ติดตั้งการพึ่งพา:
ขอติดตั้ง NPM เชียร์
และเรียกใช้ (สมมติว่าสคริปต์ด้านบนอยู่ในไฟล์ crawler.js
):
node crawler.js
บางหน้าจะมีเนื้อหาที่ไม่ใช่ภาษาอังกฤษในการเข้ารหัสบางอย่างและคุณจะต้องถอดรหัสให้UTF-8
เป็น ตัวอย่างเช่นหน้าในภาษาบราซิลโปรตุเกส (หรือภาษาอื่น ๆ ที่มีต้นกำเนิดละติน) จะถูกเข้ารหัสในISO-8859-1
(aka "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 เชียร์
และในที่สุดก็:
node crawler.js
ขั้นตอนต่อไปคือติดตามลิงก์ สมมติว่าคุณต้องการแสดงรายชื่อผู้โพสต์ทั้งหมดจากคำถามยอดนิยมแต่ละข้อเกี่ยวกับ SO คุณต้องแสดงรายการคำถามยอดนิยมทั้งหมดก่อน (ตัวอย่างข้างต้น) จากนั้นป้อนแต่ละลิงก์แยกวิเคราะห์หน้าคำถามแต่ละข้อเพื่อรับรายการผู้ใช้ที่เกี่ยวข้อง
เมื่อคุณเริ่มติดตามลิงก์นรกโทรกลับสามารถเริ่มต้นได้ เพื่อหลีกเลี่ยงปัญหานี้คุณควรใช้สัญญาบางอย่างฟิวเจอร์สหรืออะไรก็ตาม ฉันมักจะให้asyncในแถบเครื่องมือของฉัน ดังนั้นนี่คือตัวอย่างเต็มรูปแบบของโปรแกรมรวบรวมข้อมูลที่ใช้ 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 ขอให้ติดตั้ง async cheerio
ทำการทดสอบ:
node 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
และนั่นเป็นพื้นฐานที่คุณควรรู้ในการเริ่มสร้างซอฟต์แวร์รวบรวมข้อมูลของคุณเอง :-)
ในปี 2559 สิ่งต่าง ๆ ง่ายขึ้น ติดตั้ง 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
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 LOWERCASE ทั้งหมด
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);
});
});
การอ้างอิงของ jQuery ใน Node.js **:
คุณต้องรับหน้าต่างโดยใช้ JSDOM API ใหม่
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) ควรเป็น. JSDOM ("<! DOCTYPE html>") สำหรับการสนับสนุน HTML5 หรือไม่
คำเตือน
การแก้ปัญหานี้เป็นที่กล่าวถึงโดยGolo โรไม่ถูกต้อง เป็นการแก้ไขด่วนเพื่อช่วยให้ผู้ใช้เรียกใช้รหัส jQuery จริงโดยใช้โครงสร้างแอป Node แต่ไม่ใช่ปรัชญาของ Node เนื่องจาก 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();
});
รหัสการทำงานของฉันคือ:
npm install jquery
แล้ว:
global.jQuery = require('jquery');
global.$ = global.jQuery;
หรือหากมีหน้าต่างอยู่แสดงว่า:
typeof window !== "undefined" ? window : this;
window.jQuery = require('jquery');
window.$ = window.jQuery;
โมดูลjsdomเป็นเครื่องมือที่ยอดเยี่ยม แต่ถ้าคุณต้องการประเมินทั้งหน้าและทำสิ่งที่ขี้ขลาดบนฝั่งเซิร์ฟเวอร์ฉันแนะนำให้ใช้พวกเขาในบริบทของตนเอง:
vm.runInContext
ดังนั้นสิ่งที่ชอบrequire
/CommonJS
บนไซต์จะไม่ทำให้กระบวนการ Node ของคุณเสียเอง
ตั้งแต่ 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
วิธีแก้ปัญหาเหล่านี้ไม่ได้ช่วยฉันในแอพอิเล็กตรอน
โซลูชันของฉัน (วิธีแก้ปัญหา):
npm install jquery
ในindex.js
ไฟล์ของคุณ:
var jQuery = $ = require('jquery');
ใน.js
ไฟล์ของคุณเขียนฟังก์ชั่น jQuery ของคุณด้วยวิธีนี้:
jQuery(document).ready(function() {
ใช่สามารถใช้กับjQuery
Node.js
ขั้นตอนในการรวม jQuery ในโปรเจ็กต์โหนด: -
npm i jquery --save
รวม jquery ในรหัส
import jQuery from 'jquery';
const $ = jQuery;
ฉันใช้ jquery ในโครงการ node.js ตลอดเวลาโดยเฉพาะในโครงการส่วนขยายของ chrome
เช่นhttps://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
ไม่มันเป็นความพยายามอย่างมากในการปรับสภาพแวดล้อมของเบราว์เซอร์ไปยังโหนด
อีกวิธีหนึ่งที่ฉันกำลังตรวจสอบการทดสอบหน่วยคือการสร้าง jQuery เวอร์ชัน "จำลอง" ที่ให้การโทรกลับเมื่อใดก็ตามที่มีการเรียกตัวเลือก
วิธีนี้คุณสามารถทดสอบปลั๊กอิน jQuery ของคุณโดยไม่ต้องมี DOM คุณจะต้องทดสอบในเบราว์เซอร์จริง ๆ เพื่อดูว่ารหัสของคุณใช้งานได้จริงหรือไม่ แต่ถ้าคุณค้นพบปัญหาเฉพาะของเบราว์เซอร์คุณสามารถ "จำลอง" สิ่งเหล่านั้นในการทดสอบหน่วยของคุณ
ฉันจะผลักดันบางสิ่งเพื่อ github.com/felixge เมื่อพร้อมที่จะแสดง
คุณสามารถใช้อิเล็กตรอนมันช่วยให้ลูกผสม browserjs และ nodejs
ก่อนหน้านี้ฉันพยายามใช้ canvas2d ใน nodejs แต่สุดท้ายฉันก็ยอมแพ้ ไม่ได้รับการสนับสนุนโดยค่าดีฟอลต์ของ nodejs และยากเกินกว่าจะติดตั้งได้ จนกว่าฉันจะใช้อิเล็กตรอนฉันสามารถใช้รหัส browserjs ก่อนหน้านี้ทั้งหมดของฉันได้อย่างง่ายดายแม้กระทั่ง WebGL และส่งค่าผลลัพธ์ (เช่นข้อมูลภาพ base64 ผลลัพธ์) ไปยังรหัส nodejs
ไม่ใช่ที่ฉันรู้ DOM คือสิ่งที่ฝั่งไคลเอ็นต์ (jQuery ไม่แยกวิเคราะห์ HTML แต่เป็น DOM)
นี่คือโครงการ Node.js ปัจจุบัน:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
และ djangode ของSimonWนั้นเจ๋งทีเดียว ...