Apakah mungkin untuk menggunakan penyeleksi jQuery / manipulasi DOM di sisi server menggunakan Node.js?
Apakah mungkin untuk menggunakan penyeleksi jQuery / manipulasi DOM di sisi server menggunakan Node.js?
Jawaban:
Pembaruan (27-Juni-18) : Sepertinya ada pembaruan besar jsdom
yang menyebabkan jawaban asli tidak lagi berfungsi. Saya menemukan jawaban ini yang menjelaskan cara menggunakan jsdom
sekarang. Saya telah menyalin kode yang relevan di bawah ini.
var jsdom = require("jsdom");
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
var $ = jQuery = require('jquery')(window);
Catatan: Jawaban awal gagal menyebutkan bahwa Anda perlu menginstal jsdom juganpm install jsdom
Pembaruan (akhir 2013) : Tim jQuery resmi akhirnya mengambil alih pengelolaan jquery
paket pada npm:
npm install jquery
Kemudian:
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
Ya Anda bisa, menggunakan perpustakaan yang saya buat bernama 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();
dan TypeError: Express.createServer is not a function
ada ide?
npm install --save express
di command prompt Anda.
Pada saat penulisan juga ada Cheerio yang dipelihara .
Implementasi inti jQuery cepat, fleksibel, dan ramping yang dirancang khusus untuk server.
:gt(1)
Menggunakan jsdom sekarang Anda bisa. Lihat saja contoh jquery mereka di direktori contoh.
Ini adalah rumus saya untuk membuat perayap sederhana di Node.js. Ini adalah alasan utama untuk ingin melakukan manipulasi DOM di sisi server dan mungkin itulah alasan mengapa Anda sampai di sini.
Pertama, gunakan request
untuk mengunduh halaman yang akan diuraikan. Saat unduhan selesai, tangani untukcheerio
dan mulai manipulasi DOM seperti menggunakan jQuery.
Contoh kerja:
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/');
Contoh ini akan mencetak ke konsol semua pertanyaan teratas yang ditampilkan di halaman beranda SO. Inilah sebabnya saya suka Node.js dan komunitasnya. Tidak bisa lebih mudah dari itu :-)
Instal dependensi:
npm instal permintaan cheerio
Dan jalankan (dengan asumsi skrip di atas ada dalam file crawler.js
):
node crawler.js
Beberapa halaman akan memiliki konten non-Inggris dalam penyandian tertentu dan Anda harus mendekodekannya UTF-8
. Misalnya, halaman dalam bahasa Portugis Brasil (atau bahasa latin lainnya) kemungkinan akan dikodekan dalam ISO-8859-1
(alias "latin1"). Ketika decoding diperlukan, saya katakan request
untuk tidak menafsirkan konten dengan cara apa pun dan alih-alih menggunakannyaiconv-lite
untuk melakukan pekerjaan itu.
Contoh kerja:
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/');
Sebelum berjalan, instal dependensi:
npm instal request iconv-lite cheerio
Dan akhirnya:
node crawler.js
Langkah selanjutnya adalah mengikuti tautan. Katakanlah Anda ingin mendaftar semua poster dari setiap pertanyaan teratas di SO. Anda harus terlebih dahulu mendaftar semua pertanyaan teratas (contoh di atas) dan kemudian memasukkan setiap tautan, mem-parsing setiap halaman pertanyaan untuk mendapatkan daftar pengguna yang terlibat.
Ketika Anda mulai mengikuti tautan, neraka panggilan balik dapat dimulai. Untuk menghindarinya, Anda harus menggunakan semacam janji, masa depan atau apa pun. Saya selalu menyimpan async di sabuk alat saya. Jadi, berikut adalah contoh lengkap perayap menggunakan 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);
});
});
});
});
Sebelum berjalan:
npm instal request async cheerio
Jalankan tes:
node crawler.js
Output sampel:
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
Dan itulah dasar yang harus Anda ketahui untuk mulai membuat crawler Anda sendiri :-)
di 2016 segalanya lebih mudah. instal jquery ke node.js dengan konsol Anda:
npm install jquery
ikat ke variabel $
(misalnya - saya sudah terbiasa) dalam kode node.js Anda:
var $ = require("jquery");
lakukan hal-hal:
$.ajax({
url: 'gimme_json.php',
dataType: 'json',
method: 'GET',
data: { "now" : true }
});
juga bekerja untuk tegukan karena didasarkan pada node.js.
var $ = require("jquery"); $.ajax // undefined
(Diturunkan untuk saat ini).
npm install jquery
terlebih dahulu?
> console.log(require("jquery").toString());
memberi saya fungsi pabrik: function ( w ) { if ( !w.document ) { throw new Error( "jQuery requires a window with a document" ); } return factory( w ); }
Saya harus menggunakan jawaban di atas dengan jsdom: stackoverflow.com/a/4129032/539490
Saya yakin jawabannya sekarang ya.
https://github.com/tmpvar/jsdom
var navigator = { userAgent: "node-js" };
var jQuery = require("./node-jquery").jQueryInit(window, navigator);
npm install jquery --save
#catat SEMUA RENDAH KASUS
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);
});
Modul jQuery dapat diinstal menggunakan:
npm install jquery
Contoh:
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);
});
});
Referensi jQuery di Node.js **:
Anda harus mendapatkan jendela menggunakan API JSDOM baru.
const jsdom = require("jsdom");
const { window } = new jsdom.JSDOM(`...`);
var $ = require("jquery")(window);
...
) harus .JSDOM ("<! DOCTYPE html>") untuk dukungan HTML5?
PERINGATAN
Solusi ini, seperti yang disebutkan oleh Golo Roden tidak benar . Ini hanya perbaikan cepat untuk membantu orang agar kode jQuery mereka yang sebenarnya berjalan menggunakan struktur aplikasi Node, tetapi itu bukan filosofi Node karena jQuery masih berjalan di sisi klien alih-alih di sisi server. Saya minta maaf karena memberikan jawaban yang salah.
Anda juga dapat membuat Jade dengan simpul dan memasukkan kode jQuery Anda di dalamnya. Ini adalah kode dari file 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();
});
Modul jsdom adalah alat yang hebat. Tetapi jika Anda ingin mengevaluasi seluruh halaman dan melakukan beberapa hal funky di sisi server saya sarankan menjalankannya dalam konteks mereka sendiri:
vm.runInContext
Jadi hal-hal seperti require
/ CommonJS
di situs tidak akan meledakkan proses Node Anda sendiri.
Anda dapat menemukan dokumentasi di sini . Bersulang!
Pada jsdom v10, fungsi .env () sudah tidak digunakan lagi. Saya melakukannya seperti di bawah ini setelah mencoba banyak hal yang memerlukan 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);
Semoga ini bisa membantu Anda atau siapa saja yang pernah menghadapi masalah seperti ini.
TypeError: JSDOM is not a constructor
$.each
. Saya baru saja memasukkan baris-baris ini dan kemudian melakukannya seperti di bawah ini: $.each(errors, function (ind,error) { res.send(error.msg);console.log(error.msg); });
Semoga ini bisa membantu !!
Pertama-tama instal
npm install jquery -S
Setelah menginstalnya, Anda dapat menggunakannya seperti di bawah ini
import $ from 'jquery';
window.jQuery = window.$ = $;
$(selector).hide();
Anda dapat melihat tutorial lengkap yang saya tulis di sini: https://medium.com/fbdevclagos/how-to-use-jquery-on-node-df731bd6abc7
Tidak satu pun dari solusi ini yang membantu saya dalam Aplikasi Elektron saya.
Solusi saya (solusi):
npm install jquery
Dalam index.js
file Anda :
var jQuery = $ = require('jquery');
Dalam .js
file Anda, tuliskan fungsi jQuery Anda dengan cara ini:
jQuery(document).ready(function() {
Ya, jQuery
bisa digunakan bersamaNode.js
.
Langkah-langkah untuk memasukkan jQuery dalam proyek simpul: -
npm i jquery --save
Sertakan jquery dalam kode
import jQuery from 'jquery';
const $ = jQuery;
Saya menggunakan jquery di proyek node.js sepanjang waktu khususnya di proyek ekstensi chrome.
mis. https://github.com/fxnoob/gesture-control-chrome-extension/blob/master/src/default_plugins/tab.js
Tidak. Ini akan menjadi upaya yang cukup besar untuk port lingkungan browser ke node.
Pendekatan lain, yang saya sedang selidiki untuk pengujian unit, adalah membuat versi "Mock" dari jQuery yang menyediakan panggilan balik setiap kali seorang pemilih dipanggil.
Dengan cara ini Anda dapat menguji unit plugin jQuery Anda tanpa benar-benar memiliki DOM. Anda masih harus menguji di peramban nyata untuk melihat apakah kode Anda berfungsi di alam bebas, tetapi jika Anda menemukan masalah khusus peramban, Anda dapat dengan mudah "mengejek" yang ada di unit test Anda juga.
Saya akan mendorong sesuatu ke github.com/felixge setelah siap untuk ditampilkan.
Anda dapat menggunakan Electron , ini memungkinkan browser hybrid dan node.
Sebelumnya, saya mencoba menggunakan canvas2d di nodejs, tetapi akhirnya saya menyerah. Ini tidak didukung oleh nodejs default, dan terlalu sulit untuk menginstalnya (banyak banyak ... dependeces). Sampai saya menggunakan Electron, saya dapat dengan mudah menggunakan semua kode browserjs saya sebelumnya, bahkan WebGL, dan meneruskan nilai hasil (mis. Data base64 hasil gambar) ke kode nodejs.
Tidak yang saya tahu. DOM adalah hal sisi klien (jQuery tidak mem-parsing HTML, tetapi DOM).
Berikut adalah beberapa proyek Node.js saat ini:
https://github.com/ry/node/wiki ( https://github.com/nodejs/node )
Dan djangode SimonW sangat keren ...
Alternatifnya adalah menggunakan Underscore.js . Itu harus memberikan apa yang Anda inginkan dari sisi server dari JQuery.