क्या Node.js का उपयोग करके सर्वर-साइड पर jQuery चयनकर्ताओं / DOM हेरफेर का उपयोग करना संभव है?
क्या Node.js का उपयोग करके सर्वर-साइड पर jQuery चयनकर्ताओं / DOM हेरफेर का उपयोग करना संभव है?
जवाबों:
अद्यतन (२ there-जून -१:) : ऐसा लगता है 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
हाँ, आप एक पुस्तकालय का उपयोग कर सकते हैं, जिसे मैंने नोडविक् क कहा है
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
अपने कमांड प्रॉम्प्ट में प्रयास करें ।
लेखन के समय भी बनाए हुए चेरियो है ।
विशेष रूप से सर्वर के लिए डिज़ाइन किया गया कोर jQuery का तेज, लचीला और दुबला कार्यान्वयन।
:gt(1)
अब आप कर सकते हैं jsdom का उपयोग करना । उदाहरण निर्देशिका में उनके jquery उदाहरण देखें।
Node.js. में एक सरल क्रॉलर बनाने के लिए यह मेरा सूत्र है यह सर्वर साइड पर DOM मैनिपुलेशन करने का मुख्य कारण है और शायद यही कारण है कि आप यहां आए।
सबसे पहले, request
पृष्ठ को पार्स करने के लिए डाउनलोड करने के लिए उपयोग करें। जब डाउनलोड पूरा हो जाता है, तो इसे हैंडल करें cheerio
और जैसे कि 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 स्थापित अनुरोध चीयरियो
और चला (ऊपर की स्क्रिप्ट फ़ाइल में है crawler.js
)
नोड क्रॉलर.जेएस
कुछ पृष्ठों में एक निश्चित एन्कोडिंग में गैर-अंग्रेजी सामग्री होगी और आपको इसे डिकोड करना होगा UTF-8
। उदाहरण के लिए, ब्राज़ीलियाई पुर्तगाली में एक पेज (या लैटिन मूल की कोई अन्य भाषा) संभवतः ISO-8859-1
(उर्फ " लैटिन 1 ") में एन्कोड किया जाएगा । जब डिकोडिंग की आवश्यकता होती है, तो मैं 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 स्थापित अनुरोध आइकनव-लाइट चीयरियो
और फिर अंत में:
नोड क्रॉलर.जेएस
अगला कदम लिंक का पालन करना होगा। मान लें कि आप 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 चीयरियो अनुरोध
एक परीक्षण चलाएँ:
नोड क्रॉलर.जेएस
नमूना उत्पादन:
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 स्थापित करें:
npm install jquery
इसे चर $
में बाँधें (उदाहरण के लिए - मैं इसका उपयोग करता हूँ) अपने नोड.जेएस कोड में:
var $ = require("jquery");
कार्य करना:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
यह gulp के लिए भी काम करता है क्योंकि यह नोड पर आधारित है।
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
# नोट सभी लोअरकेस
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);
});
});
Node.js ** में jQuery के संदर्भ **
आपको नई JSDOM API का उपयोग करके विंडो प्राप्त करनी होगी।
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) होना चाहिए .JSDOM ("<! DOCTYPE html>")?
चेतावनी
यह समाधान, जैसा कि गोलो रोडेन ने उल्लेख किया है, सही नहीं है । लोगों को उनके वास्तविक jQuery कोड को नोड ऐप संरचना का उपयोग करके चलाने में मदद करने के लिए यह केवल एक त्वरित समाधान है, लेकिन यह नोड दर्शन नहीं है क्योंकि jQuery अभी भी सर्वर साइड पर क्लाइंट पक्ष पर चल रहा है। मुझे गलत उत्तर देने के लिए खेद है।
आप जेड को नोड के साथ भी प्रस्तुत कर सकते हैं और अपना 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 का उपयोग करता हूं।
जैसे https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
नहीं, यह एक ब्राउज़र वातावरण को नोड में पोर्ट करने के लिए काफी बड़ा प्रयास है।
एक अन्य दृष्टिकोण, जो मैं वर्तमान में इकाई परीक्षण के लिए जांच कर रहा हूं, वह है jQuery का "मॉक" संस्करण बनाना जो कॉलबैक प्रदान करता है जब भी एक चयनकर्ता को बुलाया जाता है।
इस तरह से आप वास्तव में एक डोम होने के बिना अपने jQuery प्लगइन्स का परीक्षण कर सकते हैं। आपको अभी भी वास्तविक ब्राउज़रों में परीक्षण करना होगा कि आपका कोड जंगल में काम करता है या नहीं, लेकिन यदि आप ब्राउज़र विशिष्ट मुद्दों की खोज करते हैं, तो आप आसानी से अपने यूनिट परीक्षणों में उन लोगों को "मॉक" कर सकते हैं।
एक बार दिखाने के लिए तैयार होने के बाद मैं कुछ को github.com/felixge पर धकेलूंगा।
आप इलेक्ट्रॉन का उपयोग कर सकते हैं , यह हाइब्रिड ब्राउज़रज और नोडज की अनुमति देता है।
इससे पहले, मैंने नोडज में कैनवस 2 डी का उपयोग करने की कोशिश की, लेकिन आखिरकार मैंने हार मान ली। यह नोडज डिफ़ॉल्ट रूप से समर्थित नहीं है, और इसे स्थापित करने के लिए बहुत मुश्किल है (कई ... निर्भरताएं)। जब तक मैं इलेक्ट्रॉन का उपयोग करता हूं, तब तक मैं आसानी से अपने सभी पिछले ब्राउज़रज कोड, यहां तक कि वेबजीएल का उपयोग कर सकता हूं, और परिणाम मान (जैसे। परिणाम 6464 छवि डेटा) को नोडज कोड में भेज सकता हूं।
मेरी जानकारी में नहीं। DOM एक क्लाइंट साइड चीज़ है (jQuery HTML को पार्स नहीं करता है, लेकिन DOM)।
यहाँ कुछ वर्तमान Node.js परियोजनाएँ हैं:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
और शमौन के djangode बहुत अच्छा शांत है ...
एक विकल्प अंडरस्कोर.जे का उपयोग करना है । यह प्रदान करना चाहिए कि आपको JQuery से सर्वर-साइड क्या चाहिए था।