To jest moja formuła na stworzenie prostego robota Node.js. Jest to główny powód, dla którego chcesz manipulować DOM po stronie serwera i prawdopodobnie jest to powód, dla którego tu jesteś.
Najpierw użyj żądania, aby załadować stronę do przeanalizowania. Po zakończeniu pobierania pogratuluj mu i zacznij manipulować DOMem, tak jak w jQuery.
Przykład działania:
Var request = wymagaj("prośba"), cheerio = wymagaj("cheerio"); funkcja parse(url) ( request(url, funkcja (błąd, odpowiedź, treść) ( var $ = cheerio.load(body); $(.question-summary .question-hyperlink").each(function () ( konsola .info($(this).text()); )); )) ) parse("http://stackoverflow.com/");
Ten przykład wyświetli na konsoli wszystkie najważniejsze pytania wyświetlane na stronie głównej SO. Właśnie dlatego kocham Node.js i jego społeczność. To nie mogło być prostsze :-)
Zainstaluj zależności:
npm monit o zainstalowanie cheerio
I uruchom (jeśli skrypt znajduje się powyżej w pliku crawler.js):
KodowanieNiektóre strony będą zawierać treść w języku innym niż angielski w określonym kodowaniu i konieczne będzie zdekodowanie jej do formatu UTF-8. Na przykład strona w języku portugalskim brazylijskim (lub innym języku pochodzenia łacińskiego) będzie prawdopodobnie zakodowana w standardzie ISO-8859-1 (czyli „latin1”). Gdy wymagane jest dekodowanie, sugeruję, aby nie interpretować treści w żaden sposób i zamiast tego użyć iconv-lite do wykonania zadania.
Przykład działania:
Var request = require("request"), iconv = require("iconv-lite"), cheerio = require("cheerio"); var PAGE_ENCODING = "utf-8"; // zmień, aby dopasować funkcję kodowania strony parse(url) ( request(( url: url, encoding: null // jeszcze nie interpretuj treści ), funkcja (błąd, odpowiedź, treść) ( var $ = cheerio.load(iconv. decode(body, PAGE_ENCODING)); $(.podsumowanie pytania .hiperłącze-pytania").each(funkcja () ( console.info($(this).text()); )); )) ) parse( „http://stackoverflow.com/”);
Przed rozpoczęciem zainstaluj zależności:
npm monit o zainstalowanie iconv-lite cheerio
I w końcu:
Następujące linkiNastępnym krokiem jest podążanie za linkami. Załóżmy, że chcesz wyświetlić listę wszystkich plakatów z każdego najważniejszego pytania w SO. Najpierw musisz wyświetlić listę wszystkich najważniejszych pytań (przykład powyżej), a następnie wprowadzić każdy link, analizując każdą stronę z pytaniami, aby uzyskać listę zaangażowanych użytkowników.
Kiedy zaczniesz podążać za linkami, rozpocznie się piekło wywołań zwrotnych. Aby tego uniknąć, musisz użyć jakiegoś rodzaju obietnic, kontraktów futures lub czegoś innego. Zawsze przechowuję asynchronizację w moim zestawie narzędzi. Oto kompletny przykład robota korzystającego z asynchronii:
Var url = require("url"), request = require("request"), async = require("async"), cheerio = require("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Pobiera stronę i zwraca wywołanie zwrotne z funkcją obiektu $ getPage(url, parseFn) ( request(( url: url ), funkcja (błąd, odpowiedź, treść) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, funkcja ($) ( var pytania; // Uzyskaj listę pytań pytania = $(.question-summary .question-hyperlink").map(function () ( return ( title: $(this). tekst(), url: url.resolve(baseUrl, $(this).attr("href")) ); )).get().slice(0, 5); // ogranicz do 5 pierwszych pytań // Dla każdego pytania async.map(questions,function (question, questionDone) ( getPage(question.url,function ($$) ( // Uzyskaj listę użytkowników question.users = $$(.post-signature .user-details a").map(funkcja () ( return $$(this).text(); )).get(); pytanieDone(null, pytanie); )); ), funkcja (err, pytaniaWithPosters) ( // To funkcja jest wywoływana przez async po przeanalizowaniu wszystkich pytań pytaniaWithPosters.forEach(function (pytanie) ( // Drukuje każde pytanie wraz z listą użytkowników console.info(question.title); pytanie.users.forEach(funkcja (użytkownik) ( console.info("\t%s", użytkownik); )); )); )); ));
jQuery UI to grupa wtyczek jQuery, które ułatwiają tworzenie interfejsu aplikacji internetowej.
$(dokument).ready(function()( $("#przeciągnij").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $(" #datepicker").datepicker((Nazwy miesięcy: ["styczeń","luty","marzec","kwiecień","maj","czerwiec","lipiec","sierpień", "wrzesień","październik" ,,Listopad",,,Grudzień"], dayNamesMin: ["Pon", "Wtorek", "Środa", "Czwartek", "Piątek", "Sobota", "Niedziela"])); ));
Podłączanie interfejsu użytkownika jQueryAby skorzystać z wtyczek jQuery UI należy je najpierw połączyć ze stroną, na której będą używane.
Istnieją dwie możliwości podłączenia interfejsu użytkownika jQuery:
Połączenie lokalne jQuery UINa oficjalnej stronie możesz pobrać standardowy pakiet jQuery UI lub zbudować własny.
Domyślny pakiet interfejsu użytkownika jQuery zawiera wszystkie istniejące wtyczki i ma domyślny motyw. Aby pobrać standardowy pakiet, wystarczy wejść na stronę jQuery UI i kliknąć przycisk Pobierz.
Jeśli chcesz zbudować własny pakiet jQuery UI, musisz przejść do witryny jQuery UI i wykonać poniższe kroki ( pomiń te kroki, jeśli pobrałeś pakiet standardowy):
Krok 1: Wybierz niezbędne komponentyDomyślnie wszystkie istniejące wtyczki są zawarte w pliku do pobrania. Jeśli niektóre z nich nie są potrzebne, możesz odznaczyć pole obok ich nazwy i w ten sposób zmniejszyć rozmiar finalnego pliku ( domyślny interfejs użytkownika jQuery ma rozmiar ~ 1 MB).
Należy pamiętać, że rozmiar pliku biblioteki wpływa na szybkość ładowania strony, dlatego zawsze preferowany jest mniejszy rozmiar.
Krok 2: Wybierz projektWybierz jeden ze standardowych motywów wtyczek jQuery UI w polu Motyw lub utwórz własny motyw za pomocą rolki motywów.
Krok 3: Wybierz wersjęW polu Wersja wybierz wersję interfejsu użytkownika jQuery.
Krok 4: Pobierz interfejs jQueryKliknij przycisk Pobierz i zapisz plik w dogodnym miejscu na dysku twardym.
Teraz ( niezależnie od tego, czy pobrałeś pakiet standardowy, czy zbudowałeś własny) musisz połączyć interfejs jQuery ze skryptem. W tym celu należy rozpakować pobrany plik i określić ścieżki do plików jquery-ui-version.custom.css I jquery-ui-version.custom.min.js w sekcji nagłówka skryptu.
Składnia:
Zdalne połączenie jQuery UI
W tej opcji połączenia nie można dostosowywać pakietu interfejsu użytkownika jQuery i można używać tylko jego wersji standardowej.
Aby zdalnie połączyć bibliotekę, musisz dodać następujące linie do sekcji head swojej strony:
Składnia:
Zrób to sam
Zadanie 1 podłącz zdalnie bibliotekę jQuery UI, aby kod z ćwiczenia działał.
Pierwsze pytanie, które pojawia się rozpoczynając pracę z biblioteką jQuery to jak ją uwzględnić? Aż dziwne, że nie pisałem o tym wcześniej, a teraz postanowiłem wypełnić tę lukę.
W tym artykule opowiem Ci jak poprawnie dodać jQuery na zwykłej stronie html i w popularnych wyszukiwarkach.
Łączenie jQuery ze strony w Twojej witrynieNajczęstszy sposób łączenia biblioteki. Najpierw musisz pobrać najnowszą wersję ze strony programisty. Strona pobierania zapewnia kilka opcji biblioteki, na przykład teraz można pobrać „Skompresowane, produkcyjne jQuery 3.1.1” i „Nieskompresowane, rozwojowe jQuery 3.1.1”. Pierwsza opcja to skompresowana wersja biblioteki, usuwane są z niej wszelkie komentarze, w tym przypadku biblioteka zajmuje znacznie mniej miejsca, dlatego strona, z którą będzie połączona, będzie ładować się szybciej. Drugą opcją jest, z grubsza rzecz biorąc, kod źródłowy biblioteki, ma on łatwą do odczytania formę z komentarzami i jest przeznaczony przede wszystkim dla programistów. Dlatego polecam używać skompresowanej wersji biblioteki.
Po załadowaniu biblioteki należy umieścić ją na serwerze, na którym znajdują się pliki serwisu. Zwykle tworzę folder „js” w katalogu głównym witryny, do którego kopiuję niezbędne biblioteki i umieszczam tam plik z moimi funkcjami.
Teraz możesz przejść bezpośrednio do łączenia jQuery. Struktura strony internetowej, na której umieścisz jQuery, może być inna. Musi jednak zawierać znaczniki HTML, HEAD i BODY. Aby więc połączyć się z jQuery, należy w tagu HEAD dodać tag SCRIPT z linkiem do biblioteki.
Nagłówek witryny
W niektórych przypadkach biblioteka jest dołączana przed znacznikiem zamykającym, co jest związane z kolejnością przetwarzania strony HTML przez przeglądarkę. Ponieważ przeglądarka czyta linie sekwencyjnie, podłączając jQuery na końcu pliku, przeglądarka najpierw wyświetli witrynę, a następnie połączy dynamikę. Przy wolnym połączeniu takie podejście zapewnia wzrost szybkości ładowania witryny, a dopiero potem pracę suwaków i reszty. Kod tego połączenia wygląda następująco:
Nagłówek witryny
Uwaga! Wskazane jest, aby nie zmieniać nazwy pliku biblioteki jQuery (często zmienianej na jquery.js), gdyż późniejsze zachowanie oficjalnej nazwy pliku pomoże Ci zobaczyć, jakiej wersji biblioteki używasz (w moim przykładzie wersji 3.1.1 Jest używane).
Podłączenie jQuery do stron Twojej witryny ze źródeł zewnętrznychTa metoda jest dobra, ponieważ biblioteka jest połączona z witryny i nie leży na dysku twardym. Jest to szczególnie prawdziwe w przypadku dużej liczby małych projektów i szkoleń.
Ta metoda połączenia nosi nazwę „Łączenie z CDN”. Content Delivery Network lub jak to się powszechniej nazywa CDN (Content Delivery Network) to sieć serwerów na całym świecie. Pomagają poprawić wydajność Twojego serwera internetowego i zmniejszyć obciążenie ruchu.
Najpopularniejsze sieci CDN do łączenia jQuery:
Zwykle korzystam z połączenia od Google Developers. Na stronie projektu przygotowano już dla nas kilka fragmentów, wystarczy skopiować potrzebną nam linijkę i dołączyć ją do pliku. W przypadku tej metody połączenia kod będzie wyglądał następująco:
Nagłówek witryny
< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Nazwa strony< / title >
< / head > < body > < / body > < / html > |
Zaletą tej metody jest to, że wiele witryn włącza jQuery poprzez API Google, co oznacza, że z dużym prawdopodobieństwem biblioteka ta znajduje się już w pamięci podręcznej przeglądarki użytkownika i w ogóle nie zostanie załadowana po raz drugi.
Łączenie jQuery z WordPressemDołączenie jQuery do WordPressa odbywa się automatycznie, więc nie ma potrzeby ręcznego dołączania bibliotek innych wersji. Dzieje się to w szablonie przy użyciu kodu php:
|
W efekcie wewnątrz znacznika HEAD pojawi się ciąg połączenia jQuery.
W chwili pisania tego tekstu WordPress jest dostarczany z jQuery v1.12.4, jednak jak widać, wersja biblioteki znacznie różni się od tej, która została uwzględniona w powyższych przykładach. Można podłączyć najnowszą wersję biblioteki, ale istnieje ryzyko konfliktu.
Aby uniknąć konfliktów, ale nadal korzystać z potrzebnej wersji biblioteki, musisz zastosować właściwy sposób włączenia jQuery do plikufunctions.php:
Artykuł przeznaczony jest dla użytkowników, którzy dopiero rozpoczynają pracę z jQuery UI i chcą zapoznać się z tą biblioteką w praktyce.
Ten interfejs okna zakłada takie podstawowe właściwości jak - obecność okien, możliwość ich przeciągania, możliwość zmiany rozmiaru okien, ich minimalizowania/maksymalizacji itp. Oto, jaki powinien być efekt końcowy.
Mamy więc chęć stworzenia przykładu interaktywnego okienkowego interfejsu WWW i możliwości wykorzystania w tym celu jQuery UI - w takim razie zapraszamy pod cat.
Po pobraniu i rozpakowaniu pobranych komponentów na komputer uzyskana zostanie następująca struktura plików:
W przypadku folderów css i js wszystko jest jasne, a szablon dla pliku Index.html zostanie zapisany w następujący sposób: