Чи можливо використовувати селектори jQuery / DOM на стороні сервера за допомогою Node.js?
Чи можливо використовувати селектори jQuery / DOM на стороні сервера за допомогою Node.js?
Відповіді:
Оновлення (27 червня-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
та розпочніть маніпуляцію з 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/');
Цей приклад надрукує на консоль усі найпопулярніші запитання, що відображаються на домашній сторінці 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
Наступним кроком буде перехід за посиланнями. Скажіть, що ви хочете перерахувати всі афіші з кожного головного запитання на ТАК. Спочатку потрібно перерахувати всі найпопулярніші запитання (приклад вище), а потім ввести кожне посилання, проаналізувавши сторінку кожного питання, щоб отримати список залучених користувачів.
Коли ви почнете переходити за посиланнями, може початися пекельний зворотний дзвінок . Щоб уникнути цього, вам слід використовувати якісь обіцянки, ф'ючерси чи що завгодно. Я завжди зберігаю асинхронізацію в моєму поясі інструментів. Отже, ось повний приклад сканера, що використовує 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
Проведіть тест:
вузол 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 }
});
також працює для gulp, оскільки він заснований на 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 ВСІ НЕЗАЛЕЖНОСТІ
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 **:
Ви повинні отримати вікно за допомогою нового API JSDOM.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) має бути .JSDOM ("<! DOCTYPE html>") для підтримки HTML5?
УВАГА
Це рішення, як згадував Голо Роден, є невірним . Це просто швидке виправлення, щоб допомогти людям мати власний код jQuery за допомогою структури додатків Node, але це не філософія Node, оскільки 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();
});
Модуль jsdom - чудовий інструмент. Але якщо ви хочете оцінити цілі сторінки та зробити якісь прикольні речі на стороні сервера, я пропоную запустити їх у власному контексті:
vm.runInContext
Тож такі речі, як require
/CommonJS
на сайті, не підірвуть сам процес вашого вузла.
Ви можете знайти тут документацію . Ура!
Станом на 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;
Я завжди використовую jquery в проектах node.js, зокрема в проекті розширення хрому.
наприклад https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
Ні. Це буде досить велике зусилля, щоб перенести середовище браузера для вузла.
Інший підхід, який я зараз досліджую для тестування одиниць, полягає у створенні "Mock" версії jQuery, яка забезпечує зворотні виклики щоразу, коли викликається селектор.
Таким чином, ви можете перевірити свої плагіни jQuery, фактично не маючи DOM. Вам все одно доведеться протестувати в реальних браузерах, щоб побачити, чи працює ваш код у дикій природі, але якщо ви виявите проблеми, пов’язані з веб-переглядачем, ви також можете легко «знущатися над» з ваших тестових модулів.
Щойно я підкажу щось до github.com/felixge, коли воно буде готове до показу.
Ви можете використовувати Electron , він дозволяє гібридні браузери та nodejs.
Раніше я намагався використовувати canvas2d в nodejs, але нарешті я відмовився. Він не підтримується nodejs за замовчуванням, і занадто важко його встановити (багато багатьох ... залежних). Поки я не використовую Electron, я можу легко використовувати весь свій попередній код браузера, навіть WebGL, і передати значення результату (наприклад, зображення зображень результатів base64) в код nodejs.
Не те, що я знаю. DOM - це сторона, що стосується клієнта (jQuery розбирає не HTML, а DOM).
Ось кілька поточних проектів Node.js:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
Альтернативою є використання Underscore.js . Він повинен забезпечити те, що ви могли б хотіти на сервері від JQuery.