javascript - هل يمكنني استخدام jQuery مع Node.js؟




(16)

هل من الممكن استخدام jQuery selectors / DOM التلاعب على جانب الخادم باستخدام Node.js؟


Answers

يجب أن تحصل على الإطار باستخدام واجهة برمجة تطبيقات JSDOM الجديدة.

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

كلا ، ستكون مجهودًا كبيرًا لتهيئة بيئة متصفح للعقدة.

هناك أسلوب آخر ، أقوم حاليًا بالتحقق منه في اختبار الوحدة ، وهو إنشاء إصدار "Mock" من jQuery الذي يقدم طلبات الاستدعاء عندما يتم استدعاء المحدد.

بهذه الطريقة ، يمكنك اختبار الوحدة الإضافية لمكوّنات jQuery بدون وجود DOM. سيظل عليك الاختبار في المتصفحات الحقيقية لمعرفة ما إذا كانت شفرتك تعمل في الحياة البرية ، ولكن إذا اكتشفت مشكلات خاصة بالمتصفح ، فيمكنك بسهولة "استهزاء" بتلك الموجودة في اختبارات الوحدة أيضًا.

سأدفع شيئًا إلى github.com/felixge عندما يصبح جاهزًا للعرض.


ليس هذا ما أعلمه عن. DOM هو شيء جانب العميل (jQuery لا يقوم بتحليل HTML ، ولكن DOM).

فيما يلي بعض المشاريع Node.js الحالية:

http://wiki.github.com/ry/node

و djangode djangode هو بارد جدا لعنة ...


يمكن تثبيت وحدة 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 **:


نعم ، يمكنك استخدام مكتبة أنشأتها تسمى 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);

تحذير

هذا الحل ، كما ذكر غولو رودن غير صحيح . إنه مجرد حل سريع لمساعدة الأشخاص على تشغيل شفرة jQuery الفعلية الخاصة بهم باستخدام بنية تطبيق عقدة ، ولكنها ليست فلسفة عقدة لأن 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();
      });

في عام 2016 الأمور هي أسهل طريقة. تثبيت jquery إلى node.js باستخدام وحدة التحكم الخاصة بك:

npm install jquery

ربط المتغير $ (على سبيل المثال - أنا معتاد على ذلك) في رمز node.js الخاص بك:

var $ = require("jquery");

افعل اشياء:

$.ajax({
    url: 'gimme_json.php',
    dataType: 'json',
    method: 'GET',
    data: { "now" : true }
});

يعمل أيضا لالجرعة كما هو مبني على node.js.


باستخدام jsdom يمكنك الآن. ما عليك سوى الاطلاع على مثال مسجها في دليل الأمثلة.


تحديث : (أواخر 2013) استلم فريق jQuery الرسمي إدارة حزمة jquery على npm:

npm install jquery

ثم:

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }

    var $ = require("jquery")(window);
});

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

في وقت كتابة هذا المقال ، يوجد أيضًا " Cheerio .

تنفيذ سريع ، مرن ، وعجاف لـ jQuery الأساسي المصمم خصيصًا للخادم.


رمز العمل الخاص بي هو:

npm install jquery

وثم:

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

أو إذا كانت النافذة موجودة ، ثم:

typeof window !== "undefined" ? window : this;
window.jQuery   = require('jquery');
window.$        = window.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://.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://.com/');

قبل تشغيل ، قم بتثبيت التبعيات:

طلب تثبيت npm iconv-lite cheerio

ثم أخيرا:

العقدة crawler.js

بعد الروابط

الخطوة التالية هي اتباع الروابط. لنفترض أنك تريد إدراج جميع الملصقات من كل سؤال في SO. يجب عليك أولاً سرد جميع الأسئلة الرئيسية (المثال أعلاه) ثم إدخال كل رابط ، تحليل صفحة كل سؤال للحصول على قائمة بالمستخدمين المشاركين.

عندما تبدأ باتباع الارتباطات ، يمكن أن تبدأ الجحيم رد الاتصال . لتجنب ذلك ، يجب عليك استخدام نوع من الوعود والعقود الآجلة أو أيا كان. أنا دائما تبقي async في بلدي toolbelt. لذلك ، إليك مثال كامل على برنامج الزاحف باستخدام async:

var
    url = require('url'),
    request = require('request'),
    async = require('async'),
    cheerio = require('cheerio');

var
    baseUrl = 'http://.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 تثبيت طلب متزامن 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

وهذا هو الأساس الذي يجب أن تعرفه لبدء صنع برامج الزحف الخاصة بك :-)

المكتبات المستخدمة

  • request
  • iconv-lite
  • cheerio
  • async

بديل هو استخدام Underscore.js . يجب أن توفر ما كنت قد ترغب في جانب الخادم من JQuery.


يمكنك استخدام Electron ، فإنه يسمح للمتصفحات الهجينة و nodejs.

قبل ، حاولت استخدام canvas2d في nodejs ، ولكن في النهاية استسلمت. غير مدعوم من قبل nodejs الافتراضي ، ومن الصعب جدًا تثبيته (العديد من ... dependeces). حتى أتمكن من استخدام Electron ، يمكنني بسهولة استخدام كل شفرات المتصفح السابقة ، حتى WebGL ، وتمرير قيمة النتيجة (على سبيل المثال ، بيانات صورة base64) إلى رمز nodejs.


ويمكن استخدامه فيها

  • التطبيقات التي يتم تشغيلها بشكل كبير & I بكثرة
  • تطبيقات معالجة عدد كبير من الاتصالات لأنظمة أخرى
  • تطبيقات في الوقت الحقيقي (تم تصميم Node.js من الألف إلى الياء في الوقت الحقيقي ولسهولة الاستخدام.)
  • التطبيقات التي تقوم بتوصيل مجموعات من المعلومات المتدفقة من وإلى مصادر أخرى
  • حركة عالية ، تطبيقات قابلة للتطوير
  • تطبيقات الجوال التي تتطلب التحدث إلى واجهة برمجة التطبيقات وقاعدة البيانات للنظام الأساسي ، دون الحاجة إلى إجراء الكثير من تحليلات البيانات
  • بناء تطبيقات شبكية
  • التطبيقات التي تحتاج إلى التحدث إلى النهاية الخلفية في كثير من الأحيان

على الجوال ، اعتمدت الشركات التي تعمل في وقت الذروة على Node.js لحلولها الجوالة. تحقق من لماذا؟

LinkedIn هو مستخدم بارز. تم إنشاء مكدس الجوّال بأكمله على Node.js. ذهبوا من تشغيل 15 خوادم مع 15 حالة على كل جهاز مادي ، إلى 4 حالات فقط - يمكن أن تتعامل مع ضعف حركة المرور!

أطلقت eBay ql.io ، وهي لغة استعلام ويب لواجهات HTTP API ، والتي تستخدم Node.js كمجموعة وقت التشغيل. كانوا قادرين على ضبط محطة عمل Ubuntu ذات جودة مطورة منتظمة للتعامل مع أكثر من 120،000 اتصال نشط لكل عملية node.js ، مع كل اتصال يستهلك حوالي 2kB الذاكرة!

أعاد Walmart تصميم تطبيقه للجوّال لاستخدام Node.js ودفع معالجة جافا سكريبت إلى الخادم.

اقرأ المزيد على: http://www.pixelatingbits.com/a-closer-look-at-mobile-app-development-with-node-js/





javascript jquery node.js