Có thể sử dụng các bộ chọn / thao tác DOM trên phía máy chủ bằng Node.js không?
Có thể sử dụng các bộ chọn / thao tác DOM trên phía máy chủ bằng Node.js không?
Câu trả lời:
Cập nhật (27-ngày 18 tháng 6) : Có vẻ như đã có một bản cập nhật lớn jsdom
khiến câu trả lời ban đầu không còn hoạt động. Tôi tìm thấy câu trả lời này giải thích làm thế nào để sử dụng jsdom
bây giờ. Tôi đã sao chép mã có liên quan dưới đây.
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
Lưu ý: Câu trả lời ban đầu không đề cập đến là bạn sẽ cần phải cài đặt jsdom bằng cách sử dụngnpm install jsdom
Cập nhật (cuối năm 2013) : Đội jQuery chính thức cuối cùng đã tiếp quản việc quản lý các jquery
gói trên NPM:
npm install jquery
Sau đó:
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
Có, bạn có thể, sử dụng một thư viện mà tôi đã tạo được gọi là 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();
và TypeError: Express.createServer is not a function
ý tưởng nào?
npm install --save express
trong dấu nhắc lệnh của bạn.
Tại thời điểm viết cũng có Cheerio duy trì .
Việc triển khai nhanh chóng, linh hoạt và tinh gọn của jQuery lõi được thiết kế dành riêng cho máy chủ.
:gt(1)
Sử dụng jsdom bây giờ bạn có thể. Chỉ cần nhìn vào ví dụ jquery của họ trong thư mục ví dụ.
Đây là công thức của tôi để tạo một trình thu thập thông tin đơn giản trong Node.js. Đó là lý do chính cho việc muốn thực hiện thao tác DOM ở phía máy chủ và có lẽ đó là lý do tại sao bạn đến đây.
Đầu tiên, sử dụng request
để tải xuống trang được phân tích cú pháp. Khi quá trình tải xuống hoàn tất, hãy xử lý nó cheerio
và bắt đầu thao tác DOM giống như sử dụng jQuery.
Ví dụ làm việc:
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/');
Ví dụ này sẽ in ra bàn điều khiển tất cả các câu hỏi hàng đầu hiển thị trên trang chủ SO. Đây là lý do tại sao tôi yêu Node.js và cộng đồng của nó. Nó không thể dễ dàng hơn thế :-)
Cài đặt phụ thuộc:
npm cài đặt yêu cầu cổ vũ
Và chạy (giả sử tập lệnh ở trên có trong tệp crawler.js
):
nút crawler.js
Một số trang sẽ có nội dung không phải tiếng Anh trong một mã hóa nhất định và bạn sẽ cần giải mã nó UTF-8
. Ví dụ, một trang bằng tiếng Bồ Đào Nha của Brazil (hoặc bất kỳ ngôn ngữ nào khác có nguồn gốc Latin) có thể sẽ được mã hóa bằng ISO-8859-1
(còn gọi là "latin1"). Khi cần giải mã, tôi bảo request
không diễn giải nội dung theo bất kỳ cách nào và thay vào đó sử dụng iconv-lite
để thực hiện công việc.
Ví dụ làm việc:
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/');
Trước khi chạy, cài đặt phụ thuộc:
npm cài đặt yêu cầu iconv-lite cổ vũ
Và cuối cùng:
nút crawler.js
Bước tiếp theo sẽ là theo liên kết. Giả sử bạn muốn liệt kê tất cả các áp phích từ mỗi câu hỏi hàng đầu trên SO. Trước tiên, bạn phải liệt kê tất cả các câu hỏi hàng đầu (ví dụ ở trên) và sau đó nhập từng liên kết, phân tích từng trang của câu hỏi để có danh sách người dùng liên quan.
Khi bạn bắt đầu theo các liên kết, một địa ngục gọi lại có thể bắt đầu. Để tránh điều đó, bạn nên sử dụng một số loại lời hứa, tương lai hoặc bất cứ điều gì. Tôi luôn giữ async trong toolbelt của mình. Vì vậy, đây là một ví dụ đầy đủ về trình thu thập thông tin bằng cách sử dụng 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);
});
});
});
});
Trước khi chạy:
npm cài đặt yêu cầu async cổ vũ
Chạy thử nghiệm:
nút crawler.js
Đầu ra mẫu:
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
Và đó là điều cơ bản bạn nên biết để bắt đầu tạo trình thu thập thông tin của riêng mình :-)
năm 2016 mọi thứ dễ dàng hơn cài đặt jquery cho node.js bằng bàn điều khiển của bạn:
npm install jquery
liên kết nó với biến $
(ví dụ - tôi đã quen với nó) trong mã node.js của bạn:
var $ = require("jquery");
làm công cụ:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
cũng hoạt động cho gulp vì nó dựa trên node.js.
var $ = require("jquery"); $.ajax // undefined
(Downvote cho thời điểm này).
npm install jquery
trước?
> console.log(require("jquery").toString());
cung cấp cho tôi chức năng của nhà máy: function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }
Tôi đã phải sử dụng câu trả lời ở trên với jsdom: stackoverflow.com/a/4129032/539490
Tôi tin rằng câu trả lời cho điều này bây giờ là có.
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
npm install jquery --save
#note TẤT CẢ CÁC 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);
});
Mô-đun jQuery có thể được cài đặt bằng cách sử dụng:
npm install jquery
Thí dụ:
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);
});
});
Các tham chiếu của jQuery trong Node.js **:
Bạn phải lấy cửa sổ bằng API JSDOM mới.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) phải là .JSDOM ("<! DOCTYPE html>") để hỗ trợ HTML5?
CẢNH BÁO
Giải pháp này, như được đề cập bởi Golo Roden là không chính xác . Đây chỉ là một sửa chữa nhanh để giúp mọi người chạy mã jQuery thực tế của họ bằng cách sử dụng cấu trúc ứng dụng Node, nhưng đó không phải là triết lý của Node vì jQuery vẫn chạy ở phía máy khách thay vì ở phía máy chủ. Tôi xin lỗi vì đã trả lời sai.
Bạn cũng có thể kết xuất Jade với nút và đặt mã jQuery của bạn vào trong. Đây là mã của tập tin ngọc bích:
!!! 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();
});
Các mô-đun jsdom là một công cụ tuyệt vời. Nhưng nếu bạn muốn đánh giá toàn bộ trang và thực hiện một số nội dung thú vị ở phía máy chủ, tôi khuyên bạn nên chạy chúng trong ngữ cảnh của riêng mình:
vm.runInContext
Vì vậy, những thứ như require
/ CommonJS
trên trang web sẽ không thổi quá trình Node của bạn.
Bạn có thể tìm tài liệu ở đây . Chúc mừng!
Kể từ jsdom v10, hàm .env () không được dùng nữa. Tôi đã làm như dưới đây sau khi thử rất nhiều thứ để yêu cầu 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);
Hy vọng điều này sẽ giúp bạn hoặc bất cứ ai đã và đang phải đối mặt với các loại vấn đề này.
TypeError: JSDOM is not a constructor
$.each
. Tôi chỉ bao gồm những dòng này và sau đó đã làm như dưới đây: $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); });
Hy vọng điều này sẽ giúp !!
Trước hết cài đặt nó
npm install jquery -S
Sau khi cài đặt nó, bạn có thể sử dụng nó như dưới đây
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
Bạn có thể xem hướng dẫn đầy đủ mà tôi đã viết ở đây: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
Không có giải pháp nào trong số này giúp tôi trong Ứng dụng điện tử.
Giải pháp của tôi (cách giải quyết):
npm install jquery
Trong index.js
tập tin của bạn :
var jQuery = $ = require('jquery');
Trong các .js
tệp của bạn, hãy viết các hàm jQuery của bạn theo cách này:
jQuery(document).ready(function() {
Có, jQuery
có thể được sử dụng với Node.js
.
Các bước để đưa jQuery vào dự án nút: -
npm i jquery --save
Bao gồm jquery trong mã
import jQuery from 'jquery';
const $ = jQuery;
Tôi luôn sử dụng jquery trong các dự án node.js, đặc biệt là trong dự án của tiện ích chrome.
ví dụ: https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
Không. Sẽ là một nỗ lực khá lớn để chuyển môi trường trình duyệt sang nút.
Một cách tiếp cận khác, hiện tôi đang nghiên cứu để thử nghiệm đơn vị, là tạo phiên bản "Mock" của jQuery cung cấp các cuộc gọi lại bất cứ khi nào một bộ chọn được gọi.
Bằng cách này, bạn có thể đơn vị kiểm tra các trình cắm jQuery của mình mà không cần có DOM. Bạn vẫn sẽ phải kiểm tra trong các trình duyệt thực để xem mã của bạn có hoạt động không, nhưng nếu bạn phát hiện ra các sự cố cụ thể của trình duyệt, bạn cũng có thể dễ dàng "chế nhạo" những người trong bài kiểm tra đơn vị của mình.
Tôi sẽ đẩy thứ gì đó lên github.com/felixge khi nó sẵn sàng hiển thị.
Bạn có thể sử dụng Electron , nó cho phép hybridj trình duyệt và nodejs.
Trước đây, tôi đã thử sử dụng canvas2d trong nodejs, nhưng cuối cùng tôi đã từ bỏ. Nó không được hỗ trợ bởi nodejs mặc định và quá khó để cài đặt nó (nhiều ... phụ thuộc). Cho đến khi tôi sử dụng Electron, tôi có thể dễ dàng sử dụng tất cả mã trình duyệt trước đó, thậm chí WebGL và chuyển giá trị kết quả (ví dụ: dữ liệu hình ảnh base64) cho mã nodejs.
Không phải là tôi biết. DOM là một thứ phía máy khách (jQuery không phân tích cú pháp HTML, nhưng DOM).
Dưới đây là một số dự án Node.js hiện tại:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
Và djangode của SimonW khá tuyệt ...
Một cách khác là sử dụng Underscore.js . Nó sẽ cung cấp những gì bạn có thể muốn phía máy chủ từ JQuery.