Могу ли я использовать jQuery с Node.js?
Можно ли использовать селекторы jQuery / манипулирование DOM на стороне сервера с помощью Node.js?
22 ответа
Обновление (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 install jquery
Затем:
require("jsdom").env("", function (err, window) {
if (err) {
console.error(err);
return;
}
var $ = require("jquery")(window);
});
Да, вы можете, используя созданную мной библиотеку под названием nodeQuery https://github.com/tblobaum/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);
На момент написания статьи также поддерживается Cheerio.
Быстрая, гибкая и бережная реализация ядра jQuery, разработанного специально для сервера.
Используя jsdom, вы теперь можете. Просто посмотрите на их пример jquery в каталоге примеров.
Простой сканер, использующий Cheerio
Это моя формула сделать простой сканер в 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://stackru.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://stackru.com/');
Перед запуском установите зависимости:
npm установить запрос iconv-lite cheerio
И вот наконец:
узел crawler.js
Следующие ссылки
Следующим шагом будет переход по ссылкам. Скажем, вы хотите перечислить все постеры с каждого главного вопроса на SO. Вы должны сначала перечислить все главные вопросы (пример выше), а затем ввести каждую ссылку, анализируя страницу каждого вопроса, чтобы получить список вовлеченных пользователей.
Когда вы начинаете переходить по ссылкам, может начаться обратный вызов. Чтобы избежать этого, вы должны использовать какие-то обещания, фьючерсы или что-то еще. Я всегда держу асинхронный в своем инструментальном поясе. Итак, вот полный пример сканера, использующего async:
var
url = require('url'),
request = require('request'),
async = require('async'),
cheerio = require('cheerio');
var
baseUrl = 'http://stackru.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.
Я считаю, что ответ на этот вопрос теперь да.
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
npm install jquery --save #note ALL 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 **:
Вы должны получить окно, используя новый API JSDOM.
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
Мой рабочий код:
npm install jquery
а потом:
global.jQuery = require('jquery');
global.$ = global.jQuery;
или если окно присутствует, то:
typeof window !== "undefined" ? window : this;
window.jQuery = require('jquery');
window.$ = window.jQuery;
Ни одно из этих решений не помогло мне в моем приложении Electron.
Мое решение (обходной путь):
npm install jquery
В вашем index.js файл:
var jQuery = $ = require('jquery');
В вашем .js файлы пишут ваши функции jQuery таким образом:
jQuery(document).ready(function() {
ПРЕДУПРЕЖДЕНИЕ
Это решение, как упомянул Golo Roden, не является правильным. Это просто быстрое решение, помогающее людям запускать свой реальный код 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();
});
Модуль 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);Надеюсь, что это поможет вам или всем, кто сталкивался с такими проблемами.
Да, 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
Я сделал это вручную простым способом без каких-либо дополнительных пакетов или кода.
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>
И это сработает. ПРОВЕРЬ ЭТО
Обратите внимание , что копирование/вставка файла не является идеальной вещью, вы можете включить файл как статический файл, включив его как статическую страницу, чтобы expressJS мог его прочитать. Но мне проще просто скопировать его в статический публичный каталог.
Нет. Это будет довольно большое усилие для переноса среды браузера на узел.
Другой подход, который я сейчас изучаю для модульного тестирования, заключается в создании "пробной" версии jQuery, которая обеспечивает обратные вызовы при каждом вызове селектора.
Таким образом, вы можете тестировать свои плагины jQuery, не имея DOM. Вам по-прежнему придется тестировать в реальных браузерах, чтобы увидеть, работает ли ваш код на свободе, но если вы обнаружите специфичные для браузера проблемы, вы также можете легко "насмехаться" над ними в своих модульных тестах.
Я добавлю что-нибудь на github.com/felixge, как только он будет готов к показу.
Вы можете использовать Electron, он допускает гибридные browserjs и nodejs.
Раньше я пытался использовать canvas2d в nodejs, но в конце концов я сдался. Он не поддерживается по умолчанию для nodejs, и его слишком сложно установить (много-много... зависимостей). Пока я не использую Electron, я могу легко использовать весь мой предыдущий код browserjs, даже WebGL, и передавать значение результата (например, данные изображения base64) в код nodejs.
Не то, что я знаю из. DOM - это вещь на стороне клиента (jQuery анализирует не HTML, а DOM).
Вот некоторые текущие проекты Node.js:
http://wiki.github.com/ry/node
А djangode у SimonW чертовски крутой...
Альтернативой является использование http://underscorejs.org/. Он должен предоставить то, что вы, возможно, хотели на стороне сервера от JQuery.