我可以使用jQuery与Node.js吗?

是否有可能在服务器端使用Node.js使用jQuery选择器/DOM操作?

414116 次浏览

据我所知没有。DOM是一个客户端的东西(jQuery不解析HTML,但解析DOM)。

下面是一些当前的Node.js项目:

# EYZ0 (# EYZ1)

SimonW的djangode非常酷…

另一种方法是使用Underscore.js。它应该提供您可能需要的JQuery服务器端功能。

不。将浏览器环境移植到节点需要付出很大的努力。

我目前正在研究的另一种用于单元测试的方法是创建jQuery的“Mock”版本,在调用选择器时提供回调。

这样你就可以在没有DOM的情况下对jQuery插件进行单元测试。您仍然需要在真正的浏览器中进行测试,以查看代码是否可以正常工作,但如果您发现了特定于浏览器的问题,您也可以在单元测试中轻松地“模拟”这些问题。

一旦它准备好了,我会把一些东西推送到github.com/felixge。

我相信这个问题的答案是肯定的 # EYZ0 < / p >

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

更新(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

jQuery官方团队终于接管了npm中jquery包的管理:

npm install jquery
< p > <罢工> 然后:< / p >
require("jsdom").env("", function (err, window) {
if (err) {
console.error(err);
return;
}
var $ = require("jquery")(window);
});

> < /罢工

是的,你可以,使用我创建的名为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);

模块jsdom是一个很棒的工具。但如果你想评估整个页面,并在服务器端做一些奇怪的事情,我建议在它们自己的上下文中运行它们:

vm.runInContext

因此,站点上的require / CommonJS之类的事情不会破坏Node进程本身。

您可以找到文档在这里。干杯!

在撰写本文时,还有维护的恭喜恭喜

快速,灵活,精益的实现核心jQuery设计

警告

这个解决方案,正如Golo登所提到的不是正确的。它只是一个快速修复,帮助人们使用Node应用程序结构运行实际的jQuery代码,但它不是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();
});

一个使用Cheerio的简单爬虫程序

这是我在Node.js中制作一个简单爬虫程序的公式。这是想要在服务器端进行DOM操作的主要原因,也可能是这里的原因。

首先,使用request下载要解析的页面。下载完成后,将其处理为cheerio,并像使用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和它的社区。没有比这更容易的了:-)

安装的依赖关系:

NPM安装请求

然后运行(假设上面的脚本在crawler.js文件中):

节点crawler.js


编码

有些页面会有某种编码的非英语内容,您需要解码为UTF-8。例如,巴西葡萄牙语(或任何其他源自拉丁语的语言)的页面可能会被编码为ISO-8859-1 (a.k.a。“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

最后:

节点crawler.js


下面的链接

下一步是跟踪链接。假设你想在SO上列出每个顶级问题的所有海报。您必须首先列出所有主要问题(如上例),然后进入每个链接,解析每个问题的页面以获得涉及的用户列表。

当您开始跟踪链接时,回调地狱可以开始。为了避免这种情况,你应该使用一些承诺,未来或其他东西。我总是把异步放在我的工具带里。下面是一个使用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安装请求异步

运行一个测试:

节点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

这是你应该知道的基本开始制作你自己的爬虫:-)


库的使用

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中的引用**:

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。

# EYZ0 # EYZ1

# EYZ0

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);
});

我的工作代码是:

npm install jquery

然后:

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

或者如果窗口存在,则:

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

你可以使用电子,它允许混合browserjs和nodejs。

之前,我尝试在nodejs中使用canvas2d,但最终我放弃了。它不被nodejs默认支持,并且很难安装它(很多很多…dependeces)。 直到我使用电子,我可以很容易地使用所有我以前的browserjs代码,甚至WebGL,并传递结果值(例如。结果base64图像数据)到nodejs代码

您必须使用新的JSDOM API来获取窗口。

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

从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);

希望这对你或任何面临这类问题的人有所帮助。

首先,安装它

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在节点项目:-

< p > # EYZ0 包含jquery在代码

import jQuery from 'jquery';


const $ = jQuery;


我确实在node.js项目中一直使用jquery,特别是在chrome扩展的项目中。

例如:# EYZ0

我手动简单地做了,没有任何额外的包或代码。

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就可以读取它。但对我来说,把它复制到静态公共目录更容易。