Αυτός είναι ο τύπος μου για να φτιάξω έναν απλό ανιχνευτή στο Node.js. Αυτός είναι ο κύριος λόγος για τον οποίο θέλετε να χειριστείτε το DOM από την πλευρά του διακομιστή και πιθανώς είναι ο λόγος που βρίσκεστε εδώ.

Χρησιμοποιήστε πρώτα το αίτημα για να φορτώσετε τη σελίδα που πρόκειται να αναλυθεί. Μόλις ολοκληρωθεί η φόρτωση, χειριστείτε το με cheerio και αρχίστε να χειρίζεστε το DOM όπως ακριβώς θα κάνατε με το jQuery.

Παράδειγμα εργασίας:

Var request = απαιτώ ("αίτημα"), cheerio = απαιτώ ("cheerio"); συνάρτηση parse(url) ( request(url, function (σφάλμα, απάντηση, σώμα) ( var $ = cheerio.load(body); $(".question-summary .question-hyperlink").each(function () ( κονσόλα .info($(this).text()); )); )) ) parse("http://stackoverflow.com/");

Αυτό το παράδειγμα θα εμφανίσει στην κονσόλα όλες τις κορυφαίες ερωτήσεις που εμφανίζονται στην αρχική σελίδα του SO. Αυτός είναι ο λόγος που αγαπώ το Node.js και την κοινότητά του. Δεν θα μπορούσε να είναι πιο εύκολο :-)

Εγκατάσταση εξαρτήσεων:

npm αίτημα για εγκατάσταση του cheerio

Και εκτελέστε (αν το σενάριο βρίσκεται παραπάνω στο αρχείο crawler.js):

Κωδικοποίηση

Ορισμένες σελίδες θα έχουν μη αγγλικό περιεχόμενο σε μια συγκεκριμένη κωδικοποίηση και θα πρέπει να το αποκωδικοποιήσετε σε UTF-8. Για παράδειγμα, μια σελίδα στα Πορτογαλικά Βραζιλίας (ή σε οποιαδήποτε άλλη γλώσσα λατινικής προέλευσης) πιθανότατα θα κωδικοποιηθεί στο ISO-8859-1 (γνωστός και ως "latin1"). Όταν απαιτείται αποκωδικοποίηση, προτείνω αυτό το αίτημα να μην ερμηνεύει το περιεχόμενο με οποιονδήποτε τρόπο και να χρησιμοποιεί το iconv-lite για να κάνει τη δουλειά.

Παράδειγμα εργασίας:

Var request = απαιτώ ("αίτημα"), iconv = απαιτώ ("iconv-lite"), cheerio = απαιτώ ("cheerio"); var PAGE_ENCODING = "utf-8"; // αλλαγή σε αντιστοίχιση συνάρτηση κωδικοποίησης σελίδας parse(url) ( request(( url: url, encoding: null // δεν ερμηνεύεται ακόμα το περιεχόμενο ), συνάρτηση (σφάλμα, απάντηση, σώμα) ( 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 cheerio

Και τελικά:

Ακολουθώντας συνδέσμους

Το επόμενο βήμα είναι να ακολουθήσετε τους συνδέσμους. Ας υποθέσουμε ότι θέλετε να καταχωρίσετε όλες τις αφίσες από κάθε κορυφαία ερώτηση στο SO. Θα πρέπει πρώτα να απαριθμήσετε όλες τις κορυφαίες ερωτήσεις (παράδειγμα παραπάνω) και στη συνέχεια να εισαγάγετε κάθε σύνδεσμο, αναλύοντας κάθε σελίδα ερωτήσεων για να λάβετε μια λίστα με τους χρήστες που συμμετέχουν.

Όταν αρχίσετε να ακολουθείτε τους συνδέσμους, θα ξεκινήσει η κόλαση της επανάκλησης. Για να το αποφύγετε αυτό θα πρέπει να χρησιμοποιήσετε κάποιου είδους υποσχέσεις, συμβόλαια μελλοντικής εκπλήρωσης ή κάτι άλλο. Διατηρώ πάντα ασύγχρονο στην εργαλειοθήκη μου. Ακολουθεί λοιπόν ένα πλήρες παράδειγμα προγράμματος ανίχνευσης με χρήση async:

Var url = απαιτώ ("url"), request = απαιτώ ("αίτημα"), async = απαιτώ ("async"), cheerio = απαιτώ ("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Λαμβάνει μια σελίδα και επιστρέφει μια επιστροφή κλήσης με μια συνάρτηση αντικειμένου $ getPage(url, parseFn) ( request(( url: url ), function (σφάλμα, απάντηση, σώμα) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, συνάρτηση ($) ( var ερωτήσεις; // Λήψη λίστας ερωτήσεων = $(".question-summary .question-hyperlink").map(function () ( return ( title: $(this). text(), url: url.resolve(baseUrl, $(this).attr("href"))); )).get().slice(0, 5); // όριο στις 5 κορυφαίες ερωτήσεις // Για κάθε ερώτηση async.map(questions, function (question, questionDone) ( getPage(question.url, function ($$) ( // Λήψη λίστας χρηστών question.users = $$(".post-signature .user-details a").map(function () ( return $$(this).text(); )).get(); questionDone(null, question); )); ), function (err, questionWithPosters) ( // Αυτό Η συνάρτηση καλείται από async όταν έχουν αναλυθεί όλες οι ερωτήσεις ερωτήσειςWithPosters.forEach(function (question) ( // Εκτυπώνει κάθε ερώτηση μαζί με τη λίστα χρηστών console.info(question.title); question.users.forEach(function (user) ( console.info("\t%s", user); )); )); )); ));

Το jQuery UI είναι μια ομάδα προσθηκών jQuery που διευκολύνουν τη δημιουργία διεπαφών εφαρμογών ιστού.

$(document).ready(function())( $("#drag").draggable(); $("# sortable"). sortable(); $("# sortable").disableSelection(); $( " #datepicker").datepicker(( monthNames: ["Ιανουάριος","Φεβρουάριος","Μάρτιος","Απρίλιος","Μάιος","Ιούνιος","Ιούλιος","Αύγουστος", "Σεπτέμβριος","Οκτώβριος " ,"Νοέμβριος","Δεκέμβριος"], dayNamesMin: ["Δευτέρα", "Τρί", "Τετ", "Πέμ", "Παρασκευή", "Σάββατο", "Κυρ"])); ));

Σύνδεση jQuery UI

Για να επωφεληθείτε από τη ισχύ των πρόσθετων διεπαφής χρήστη jQuery, πρέπει πρώτα να συνδεθούν στη σελίδα στην οποία θα χρησιμοποιηθούν.

Υπάρχουν δύο επιλογές για τη σύνδεση του jQuery UI:

Τοπική σύνδεση jQuery UI

Στον επίσημο ιστότοπο μπορείτε είτε να κατεβάσετε το τυπικό πακέτο διεπαφής χρήστη jQuery είτε να δημιουργήσετε το δικό σας.

Η τυπική διεπαφή χρήστη jQuery περιλαμβάνει όλα τα υπάρχοντα πρόσθετα και έχει ένα τυπικό θέμα. Για να πραγματοποιήσετε λήψη του τυπικού πακέτου, απλώς μεταβείτε στον ιστότοπο του jQuery UI και κάντε κλικ στο κουμπί Λήψη.

Εάν θέλετε να δημιουργήσετε το δικό σας πακέτο jQuery UI, πρέπει να μεταβείτε στον ιστότοπο του jQuery UI και να ακολουθήσετε τα βήματα που αναφέρονται παρακάτω ( παραλείψτε αυτά τα βήματα εάν κατεβάσατε το τυπικό πακέτο):

Βήμα 1: Επιλέξτε τα απαιτούμενα εξαρτήματα

Από προεπιλογή, όλα τα υπάρχοντα πρόσθετα περιλαμβάνονται στο αρχείο λήψης. Εάν μερικά από αυτά δεν χρειάζονται, μπορείτε να καταργήσετε την επιλογή των ονομάτων τους και έτσι να μειώσετε το μέγεθος του τελικού αρχείου ( το τυπικό πακέτο διεπαφής χρήστη jQuery έχει μέγεθος ~1MB).

Σημείωση: Το μέγεθος του αρχείου της βιβλιοθήκης επηρεάζει την ταχύτητα φόρτωσης της σελίδας, επομένως ένα μικρότερο μέγεθος είναι πάντα προτιμότερο.

Βήμα 2: Επιλέξτε ένα σχέδιο

Επιλέξτε ένα από τα τυπικά θέματα προσθήκης jQuery UI στο πεδίο Θέμα ή δημιουργήστε το δικό σας θέμα χρησιμοποιώντας themeroller.

Βήμα 3: Επιλέξτε έκδοση

Επιλέξτε την έκδοση του jQuery UI στο πεδίο Έκδοση.

Βήμα 4: Λήψη διεπαφής χρήστη jQuery

Κάντε κλικ στο κουμπί Λήψη και αποθηκεύστε το αρχείο σε μια βολική τοποθεσία στον σκληρό σας δίσκο.

Τώρα ( ανεξάρτητα από το αν κατεβάσατε το τυπικό πακέτο ή αν συναρμολογήσατε το δικό σας) πρέπει να συνδέσετε το jQuery UI στο σενάριο. Για να το κάνετε αυτό, πρέπει να αποσυσκευάσετε το ληφθέν αρχείο και να καθορίσετε τις διαδρομές προς τα αρχεία jquery-ui-version.custom.cssΚαι jquery-ui-version.custom.min.jsστο κεφάλι του σεναρίου.

Σύνταξη:

jQuery UI Remote Connection

Σε αυτήν την επιλογή σύνδεσης, δεν μπορείτε να προσαρμόσετε το πακέτο διεπαφής χρήστη jQuery και μπορείτε να χρησιμοποιήσετε μόνο την τυπική του έκδοση.

Για να συνδέσετε τη βιβλιοθήκη από απόσταση, πρέπει να προσθέσετε τις ακόλουθες γραμμές στην ενότητα κεφαλής της σελίδας σας:

Σύνταξη:

Κάντο μόνος σου

Εργασία 1: Συνδέστε τη βιβλιοθήκη του jQuery UI απομακρυσμένα για να λειτουργήσει ο κώδικας από την άσκηση.

Η πρώτη ερώτηση που προκύπτει όταν ξεκινάτε να εργάζεστε με τη βιβλιοθήκη jQuery είναι πώς να τη συνδέσετε; Είναι περίεργο που δεν έγραψα για αυτό νωρίτερα και τώρα αποφάσισα να καλύψω αυτό το κενό.

Σε αυτό το άρθρο θα σας πω πώς να προσθέσετε σωστά το jQuery σε έναν κανονικό ιστότοπο html και σε δημοφιλείς μηχανές.

Σύνδεση του jQuery από τη σελίδα του ιστότοπού σας

Ο πιο συνηθισμένος τρόπος σύνδεσης μιας βιβλιοθήκης. Πρώτα πρέπει να κάνετε λήψη της πιο πρόσφατης έκδοσης από τον ιστότοπο του προγραμματιστή. Η σελίδα λήψης παρουσιάζει πολλές επιλογές βιβλιοθήκης, για παράδειγμα, τώρα προσφέρει τη λήψη των "Compressed, production jQuery 3.1.1" και "Uncompressed, development jQuery 3.1.1". Η πρώτη επιλογή είναι μια συμπιεσμένη έκδοση της βιβλιοθήκης, όλα τα σχόλια έχουν αφαιρεθεί από αυτήν, σε αυτήν την περίπτωση η βιβλιοθήκη καταλαμβάνει πολύ λιγότερο χώρο, επομένως η σελίδα στην οποία θα συνδεθεί θα φορτώσει πιο γρήγορα. Η δεύτερη επιλογή είναι, σε γενικές γραμμές, ο πηγαίος κώδικας της βιβλιοθήκης, είναι δομημένος σε μια ευανάγνωστη μορφή με σχόλια και προορίζεται κυρίως για προγραμματιστές. Επομένως, προτείνω να χρησιμοποιήσετε τη συμπιεσμένη έκδοση της βιβλιοθήκης.

Μετά τη λήψη της βιβλιοθήκης, πρέπει να την τοποθετήσετε στον διακομιστή όπου βρίσκονται τα αρχεία του ιστότοπου. Συνήθως δημιουργώ έναν φάκελο "js" στη ρίζα του ιστότοπου στον οποίο αντιγράφω τις απαραίτητες βιβλιοθήκες και τοποθετώ εκεί ένα αρχείο με τις λειτουργίες μου.

Τώρα μπορείτε να μεταβείτε απευθείας στη σύνδεση jQuery. Η δομή της ιστοσελίδας στην οποία συνδέετε το jQuery ενδέχεται να διαφέρει. Πρέπει όμως να περιέχει ετικέτες HTML, HEAD και BODY. Έτσι, για να συνδέσετε το jQuery, πρέπει να προσθέσετε μια ετικέτα SCRIPT με έναν σύνδεσμο στη βιβλιοθήκη μέσα στην ετικέτα HEAD.

Τίτλος Ιστοσελίδας

Σε ορισμένες περιπτώσεις, η βιβλιοθήκη περιλαμβάνεται πριν από την ετικέτα κλεισίματος σώματος, η οποία σχετίζεται με τη σειρά με την οποία το πρόγραμμα περιήγησης επεξεργάζεται τη σελίδα HTML. Δεδομένου ότι το πρόγραμμα περιήγησης διαβάζει γραμμές διαδοχικά, όταν συνδέετε το jQuery στο τέλος του αρχείου, το πρόγραμμα περιήγησης θα εμφανίσει πρώτα τον ιστότοπο και στη συνέχεια θα συνδέσει τη δυναμική. Με μια αργή σύνδεση, αυτή η προσέγγιση εξασφαλίζει αύξηση της ταχύτητας φόρτωσης του ιστότοπου και μόνο τότε η εργασία των ρυθμιστικών και των υπολοίπων. Ο κώδικας για αυτήν τη σύνδεση μοιάζει με αυτό:

Τίτλος Ιστοσελίδας

Προσοχή! Συνιστάται να μην αλλάξετε το όνομα του αρχείου της βιβλιοθήκης jQuery (συχνά αλλάζει σε jquery.js), καθώς στο μέλλον η αποθήκευση του επίσημου ονόματος αρχείου θα σας βοηθήσει να δείτε ποια έκδοση της βιβλιοθήκης χρησιμοποιείτε (στο παράδειγμά μου, έκδοση 3.1 .1 χρησιμοποιείται).

Σύνδεση του jQuery με τις σελίδες του ιστότοπού σας από εξωτερικές πηγές

Αυτή η μέθοδος είναι καλή επειδή η βιβλιοθήκη είναι συνδεδεμένη από τον ιστότοπο και δεν βρίσκεται στον σκληρό σας δίσκο. Αυτό ισχύει ιδιαίτερα για μεγάλο αριθμό μικρών έργων και για εκπαίδευση.

Αυτή η μέθοδος σύνδεσης ονομάζεται "Σύνδεση με CDN". Ένα δίκτυο παράδοσης περιεχομένου, ή όπως αποκαλείται πιο κοινά CDN (Content Delivery Network), είναι ένα δίκτυο διακομιστών σε όλο τον κόσμο. Βοηθούν στη βελτίωση της απόδοσης του διακομιστή ιστού σας και στη μείωση του φόρτου της επισκεψιμότητάς σας.

Τα πιο δημοφιλή CDN για τη σύνδεση jQuery:

Συνήθως χρησιμοποιώ τη σύνδεση από το Google Developers. Πολλά αποσπάσματα έχουν ήδη προετοιμαστεί για εμάς στη σελίδα του έργου, απλώς αντιγράψτε τη γραμμή αυτού που χρειαζόμαστε και συμπεριλάβετέ το στο αρχείο. Με αυτήν τη μέθοδο σύνδεσης, ο κώδικας θα μοιάζει με αυτό:

Τίτλος Ιστοσελίδας

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Τίτλος Ιστοσελίδας< / title > < / head > < body > < / body > < / html >

Το πλεονέκτημα αυτής της μεθόδου είναι ότι πολλοί ιστότοποι συνδέουν το jQuery μέσω του Google API, πράγμα που σημαίνει ότι με μεγάλο βαθμό πιθανότητας αυτή η βιβλιοθήκη υπάρχει ήδη στην προσωρινή μνήμη του προγράμματος περιήγησης του χρήστη και δεν θα φορτωθεί καθόλου για δεύτερη φορά.

Σύνδεση του jQuery με το WordPress

Το jQuery περιλαμβάνεται αυτόματα στο WordPress, επομένως δεν χρειάζεται να συμπεριλάβετε μη αυτόματα βιβλιοθήκες από άλλες εκδόσεις. Αυτό συμβαίνει στο πρότυπο χρησιμοποιώντας κώδικα php:

Αυτό θα έχει ως αποτέλεσμα μια συμβολοσειρά σύνδεσης jQuery μέσα στην ετικέτα HEAD.

Τη στιγμή της γραφής, το WordPress κυκλοφορεί με το jQuery v1.12.4. Όμως, όπως μπορείτε να δείτε, η έκδοση της βιβλιοθήκης είναι πολύ διαφορετική από αυτή που περιλαμβάνεται στα παραπάνω παραδείγματα. Είναι δυνατή η σύνδεση της πιο πρόσφατης έκδοσης της βιβλιοθήκης, αλλά υπάρχει πιθανότητα διένεξης.

Για να αποφύγετε μια σύγκρουση, αλλά εξακολουθείτε να χρησιμοποιείτε την έκδοση της βιβλιοθήκης που απαιτείται, πρέπει να χρησιμοποιήσετε τον σωστό τρόπο για να συμπεριλάβετε το jQuery στο αρχείο functions.php:

Το άρθρο προορίζεται για χρήστες που μόλις αρχίζουν να εργάζονται με το jQuery UI και θέλουν να εξοικειωθούν με αυτήν τη βιβλιοθήκη στην πράξη.
Αυτή η διεπαφή παραθύρου αναλαμβάνει βασικές ιδιότητες όπως η παρουσία παραθύρων, η δυνατότητα μεταφοράς τους, η δυνατότητα αλλαγής μεγέθους των παραθύρων, η ελαχιστοποίηση/επέκτασή τους κ.λπ. Αυτό πρέπει να γίνει στο τέλος.
Θέλουμε, λοιπόν, να δημιουργήσουμε ένα παράδειγμα μιας διαδραστικής διεπαφής ιστού με παράθυρο και τη δυνατότητα χρήσης jQuery UI για αυτόν τον σκοπό - τότε καλώς ήρθατε στο cat.

Σύντομη εισαγωγή Όσοι δεν γνωρίζουν ακόμα τι είναι το jQuery UI μπορούν να διαβάσουν περισσότερα για αυτό στα ρωσικά ακολουθώντας τον παρακάτω σύνδεσμο. Η εμφάνιση μιας ρωσικής μετάφρασης της τεκμηρίωσης της εν λόγω βιβλιοθήκης έχει ήδη αναφερθεί στο Habré .1 Stage. – Προπαρασκευαστική. Πρώτα, κατεβάστε τη βιβλιοθήκη από τον επίσημο ιστότοπο http://jqueryui.com. Η διεπαφή έχει πολλές επιλογές για προσαρμογή, για το παράδειγμά μας θα χρειαστούμε όλα τα στοιχεία και το θέμα Flick.
Μετά τη λήψη και την εξαγωγή των στοιχείων που έχετε λάβει στον υπολογιστή σας, θα έχετε την ακόλουθη δομή αρχείου:

Όλα είναι ξεκάθαρα με τους φακέλους css και js, αλλά θα γράψουμε το πρότυπο για το index.html ως εξής: