Ini adalah rumus saya untuk membuat crawler sederhana di Node.js. Ini adalah alasan utama ingin memanipulasi DOM di sisi server dan mungkin alasan Anda berada di sini.

Pertama gunakan permintaan untuk memuat halaman yang akan diurai. Setelah pemuatan selesai, tangani dengan cheerio dan mulailah memanipulasi DOM seperti yang Anda lakukan dengan jQuery.

Contoh kerja:

Var permintaan = memerlukan("permintaan"), cheerio = memerlukan("cheerio"); fungsi parse(url) ( permintaan(url, fungsi (kesalahan, respons, isi) ( var $ = cheerio.load(body); $(".question-summary .question-hyperlink").each(function () ( konsol .info($(ini).teks()); )) ) parse("http://stackoverflow.com/");

Contoh ini akan menampilkan di konsol semua pertanyaan teratas yang ditampilkan halaman rumah JADI. Inilah mengapa saya menyukai Node.js dan komunitasnya. Ini sangat mudah :-)

Instal dependensi:

npm meminta untuk menginstal cheerio

Dan jalankan (jika script diatas pada file crawler.js):

Pengkodean

Beberapa halaman akan memiliki konten non-Inggris dalam pengkodean tertentu dan Anda perlu mendekodekannya ke UTF-8. Misalnya, halaman dalam bahasa Portugis Brasil (atau bahasa asal Latin lainnya) kemungkinan besar akan dikodekan dalam ISO-8859-1 (alias "latin1"). Ketika decoding diperlukan, saya menyarankan agar permintaan tersebut tidak menafsirkan konten dengan cara apa pun dan sebagai gantinya menggunakan iconv-lite untuk melakukan pekerjaan itu.

Contoh kerja:

Var permintaan = memerlukan("permintaan"), iconv = memerlukan("iconv-lite"), cheerio = memerlukan("cheerio"); var PAGE_ENCODING = "utf-8"; // ubah agar fungsi pengkodean halaman cocok parse(url) ( permintaan(( url: url, pengkodean: null // belum menafsirkan konten ), fungsi (kesalahan, respons, isi) ( var $ = cheerio.load(iconv. decode(body, PAGE_ENCODING)); $(".question-summary .question-hyperlink").each(function () ( console.info($(this).text()); )) ) parse( "http: //stackoverflow.com/");

Sebelum memulai, instal dependensi:

npm meminta untuk menginstal iconv-lite cheerio

Dan akhirnya:

Tautan berikut

Langkah selanjutnya adalah mengikuti tautannya. Katakanlah Anda ingin membuat daftar semua poster dari setiap pertanyaan teratas di SO. Pertama-tama Anda harus membuat daftar semua pertanyaan teratas (contoh di atas) dan kemudian memasukkan setiap tautan, menguraikan setiap halaman pertanyaan untuk mendapatkan daftar pengguna yang terlibat.

Saat Anda mulai mengikuti tautan, panggilan balik akan dimulai. Untuk menghindari hal ini, Anda harus menggunakan semacam janji, masa depan, atau yang lainnya. Saya selalu menyimpan async di kotak peralatan saya. Jadi, inilah contoh crawler lengkap menggunakan async:

Var url = memerlukan("url"), permintaan = memerlukan("permintaan"), async = memerlukan("async"), cheerio = memerlukan("cheerio"); var baseUrl = "http://stackoverflow.com/"; // Mendapatkan halaman dan mengembalikan callback dengan objek $ function getPage(url, parseFn) ( request(( url: url ), function (error, respon, body) ( parseFn(cheerio.load(body)) )); ) getPage(baseUrl, function ($) ( var pertanyaan; // Dapatkan daftar pertanyaan pertanyaan = $(".question-summary .question-hyperlink").map(function () ( return ( title: $(this). text(), url: url.resolve(baseUrl, $(this).attr("href")) )).get().slice(0, 5); // batasi hingga 5 pertanyaan teratas // Untuk setiap pertanyaan pertanyaan async.map(pertanyaan, fungsi (pertanyaan, pertanyaanSelesai) ( getPage(question.url, function ($$) ( // Dapatkan daftar pengguna question.users = $$(".post-signature .user-details a" ).map(function () ( return $$(this).text(); )).get(); questionDone(null, question ) ), function (err, questionWithPosters) ( // Fungsi ini adalah dipanggil oleh async ketika semua pertanyaan telah diuraikan questionWithPosters.forEach(function (question) ( // Mencetak setiap pertanyaan beserta daftar penggunanya console.info(question.title); question.users.forEach(fungsi (pengguna) ( console.info("\t%s", pengguna); )); )); )); ));

jQuery UI adalah sekelompok plugin jQuery yang memudahkan pembuatan antarmuka aplikasi web.

$(dokumen).siap(fungsi())( $("#drag").draggable(); $("#sortable").sortable(); $("#sortable").disableSelection(); $( " #datepicker").datepicker(( nama bulan: ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober " ,"November","Desember"], dayNamesMin: ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu", "Minggu"]));

Menghubungkan jQuery UI

Untuk memanfaatkan kekuatan plugin jQuery UI, plugin tersebut harus terhubung terlebih dahulu ke halaman tempat plugin tersebut akan digunakan.

Ada dua opsi untuk menghubungkan jQuery UI:

Koneksi lokal jQuery UI

Di situs web resmi Anda dapat mengunduh paket jQuery UI standar atau membuatnya sendiri.

UI jQuery standar mencakup semua plugin yang ada dan memiliki tema standar. Untuk mengunduh paket standar, cukup buka situs web jQuery UI dan klik tombol Unduh.

Jika Anda ingin membuat paket jQuery UI Anda sendiri, Anda perlu mengunjungi situs web jQuery UI dan ikuti langkah-langkah yang tercantum di bawah ini ( lewati langkah-langkah ini jika Anda mengunduh paket standar):

Langkah 1: Pilih komponen yang diperlukan

Secara default, semua plugin yang ada disertakan dalam file unduhan. Jika beberapa di antaranya tidak diperlukan, Anda dapat menghapus centang pada namanya dan dengan demikian mengurangi ukuran file akhir ( paket jQuery UI standar memiliki ukuran ~1MB).

Harap dicatat: Ukuran file perpustakaan mempengaruhi kecepatan memuat halaman, jadi ukuran yang lebih kecil selalu lebih baik.

Langkah 2: Pilih desain

Pilih salah satu tema plugin jQuery UI standar di bidang Tema atau buat tema Anda sendiri menggunakan themeroller.

Langkah 3: Pilih versi

Pilih versi jQuery UI di bidang Versi.

Langkah 4: Unduh jQuery UI

Klik tombol Unduh dan simpan file ke lokasi yang nyaman di hard drive Anda.

Sekarang ( terlepas dari apakah Anda mengunduh paket standar atau merakitnya sendiri) Anda perlu menghubungkan jQuery UI ke skrip. Untuk melakukan ini, Anda perlu membongkar file yang diunduh dan menentukan jalur ke file tersebut jquery-ui-version.custom.css Dan jquery-ui-version.custom.min.js di bagian kepala naskah.

Sintaksis:

koneksi jarak jauh jQuery UI

Dalam opsi koneksi ini, Anda tidak dapat menyesuaikan paket jQuery UI dan hanya dapat menggunakan versi standarnya.

Untuk menghubungkan perpustakaan dari jarak jauh, Anda perlu menambahkan baris berikut ke bagian kepala halaman Anda:

Sintaksis:

Lakukan sendiri

Tugas 1: Hubungkan perpustakaan jQuery UI dari jarak jauh agar kode dari latihan berfungsi.

Pertanyaan pertama yang muncul ketika mulai bekerja dengan perpustakaan jQuery adalah bagaimana cara menghubungkannya? Aneh rasanya saya tidak menulis tentang ini sebelumnya dan sekarang saya memutuskan untuk mengisi kekosongan ini.

Pada artikel ini saya akan memberi tahu Anda cara menambahkan jQuery dengan benar di situs web html biasa dan di mesin populer.

Menghubungkan jQuery dari halaman situs web Anda

Cara paling umum untuk menghubungkan perpustakaan. Pertama, Anda perlu mengunduh versi terbaru dari situs web pengembang. Halaman unduhan menyajikan beberapa opsi perpustakaan, misalnya, sekarang menawarkan untuk mengunduh “Terkompresi, produksi jQuery 3.1.1” dan “Tidak terkompresi, pengembangan jQuery 3.1.1”. Opsi pertama adalah versi perpustakaan terkompresi, semua komentar telah dihapus darinya, dalam hal ini perpustakaan memakan lebih sedikit ruang, sehingga halaman yang akan dihubungkan akan dimuat lebih cepat. Pilihan kedua adalah, secara kasar, sumber perpustakaan, ini disusun dalam bentuk yang mudah dibaca dengan komentar, dan ditujukan terutama untuk pengembang. Oleh karena itu, saya sarankan menggunakan versi perpustakaan yang terkompresi.

Setelah perpustakaan diunduh, Anda perlu meletakkannya di server tempat file situs berada. Saya biasanya membuat folder "js" di root situs tempat saya menyalin perpustakaan yang diperlukan dan menempatkan file dengan fungsi saya di sana.

Sekarang Anda bisa langsung menuju koneksi jQuery. Struktur halaman web tempat Anda menghubungkan jQuery mungkin berbeda. Tapi harus mengandung tag HTML, HEAD dan BODY. Jadi, untuk menghubungkan jQuery, Anda perlu menambahkan tag SCRIPT dengan link ke perpustakaan di dalam tag HEAD.

Judul situs

Dalam beberapa kasus, perpustakaan disertakan sebelum tag body penutup, yang terkait dengan urutan pemrosesan halaman html peramban. Karena browser membaca baris secara berurutan, saat menghubungkan jQuery di akhir file, browser akan menampilkan situs terlebih dahulu, dan kemudian menghubungkan dinamika. Dengan koneksi yang lambat, pendekatan ini memastikan peningkatan kecepatan memuat situs, dan hanya kemudian kerja penggeser dan sisanya. Kode untuk koneksi ini terlihat seperti ini:

Judul situs

Perhatian! Disarankan untuk tidak mengubah nama file perpustakaan jQuery (sering diubah menjadi jquery.js), karena di masa depan menyimpan nama file resmi akan membantu Anda melihat versi perpustakaan apa yang Anda gunakan (dalam contoh saya, versi 3.1 .1 digunakan).

Menghubungkan jQuery ke halaman situs web Anda dari sumber eksternal

Metode ini bagus karena perpustakaan terhubung dari situs web dan tidak ada di hard drive Anda. Hal ini terutama berlaku ketika jumlah besar proyek kecil dan untuk pembelajaran.

Metode koneksi ini disebut “Menghubungkan dengan CDN”. Jaringan pengiriman konten, atau lebih sering disebut CDN (Content Delivery Network), adalah jaringan server di seluruh dunia. Mereka membantu meningkatkan kinerja server web Anda dan mengurangi beban lalu lintas Anda.

CDN paling populer untuk menghubungkan jQuery:

Saya biasanya menggunakan koneksi dari Google Developers. Beberapa cuplikan telah disiapkan untuk kita di halaman proyek; cukup salin baris yang kita perlukan dan sertakan dalam file. Dengan metode koneksi ini, kodenya akan terlihat seperti ini:

Judul situs

< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title >Judul situs< / title > < / head > < body > < / body > < / html >

Keuntungan dari metode ini adalah banyak situs yang menghubungkan jQuery melalui Google API, yang berarti kemungkinan besar perpustakaan ini sudah ada di cache browser pengguna, dan tidak akan dimuat untuk kedua kalinya sama sekali.

Menghubungkan jQuery ke WordPress

jQuery disertakan secara otomatis di WordPress, jadi tidak perlu menyertakan pustaka dari versi lain secara manual. Ini terjadi pada template menggunakan kode php:

Ini akan menghasilkan string koneksi jQuery di dalam tag HEAD.

Pada saat penulisan, WordPress dikirimkan dengan jQuery v1.12.4 Namun, seperti yang Anda lihat, versi perpustakaannya sangat berbeda dari yang disertakan dalam contoh di atas. Dimungkinkan untuk menghubungkan perpustakaan versi terbaru, tetapi ada kemungkinan konflik.

Untuk menghindari konflik, namun tetap menggunakan versi perpustakaan yang diperlukan, Anda perlu menggunakan cara yang benar untuk memasukkan jQuery dalam file fungsi.php:

Artikel ini ditujukan untuk pengguna yang baru mulai bekerja dengan jQuery UI dan ingin mengenal perpustakaan ini dalam praktiknya.
Antarmuka jendela ini mengasumsikan properti dasar seperti keberadaan jendela, kemampuan untuk menyeretnya, kemampuan untuk mengubah ukuran jendela, meminimalkan/memaksimalkannya, dll. Inilah yang seharusnya terjadi pada akhirnya.
Jadi, kami ingin membuat contoh antarmuka web berjendela interaktif dan kemampuan untuk menggunakan jQuery UI untuk tujuan ini - selamat datang di cat.

Pengenalan singkat Bagi yang masih belum mengetahui apa itu jQuery UI, dapat membaca lebih lanjut dalam bahasa Rusia dengan mengikuti tautan berikut. Kemunculan terjemahan bahasa Rusia dari dokumentasi perpustakaan tersebut telah disebutkan di Habré .1 Stage. – Persiapan. Pertama, unduh perpustakaan dari situs resmi http://jqueryui.com. Antarmuka memiliki banyak pilihan untuk penyesuaian, sebagai contoh kita memerlukan semua komponen dan tema Flick.
Setelah mengunduh dan mengekstrak komponen yang diunduh ke komputer Anda, Anda akan mendapatkan struktur file berikut:

Semuanya jelas dengan folder css dan js, tapi kami akan menulis template untuk index.html seperti ini: