NodeJS menggunakan pemilih jQuery untuk mengendalikan DOM_jquery

Nota* Ini ialah projek "lama" selama lebih daripada dua tahun, yang membolehkan anda menggunakan pemilih jQuery dalam NodeJS untuk mengendalikan HTML/XML bahagian belakang seperti DOM bahagian hadapan Selepas mengalih keluar kod berkaitan keserasian penyemak imbas , Operasi adalah 8 kali lebih pantas daripada JSDOM Kami telah menyebut sebelum ini bahawa JSDOM mempunyai masalah prestasi yang serius: Nyahpepijat Node.JS: Bagaimana kami mencari kebocoran memori dan gelung tak terhingga

ceria

Pantas, fleksibel, menggunakan jQuery di bahagian pelayan.

Pengenalan

Uji HTML bahagian pelayan anda:

Salin kod Kod adalah seperti berikut:

var cheerio = memerlukan('cheerio'),
$ = cheerio.load('

Hello world

');
$('h2.title').text('Hello!');
$('h2').addClass('selamat datang');
$.html();
//=>

Hello!

Pasang

npm pasang cheerio

Fungsi

❤ Sintaks biasa: Cheerio melaksanakan subset jQuery teras. Cheerio mengalih keluar semua ketidakkonsistenan DOM dan sokongan keserasian penyemak imbas daripada perpustakaan jQuery, mempersembahkan APInya yang benar-benar cantik.

ϟ Sangat pantas: Cheerio menggunakan model DOM yang sangat mudah dan konsisten. Ini menghasilkan keuntungan prestasi yang luar biasa untuk menghurai, memanipulasi dan membuat persembahan. Penanda aras hujung ke hujung awal menunjukkan bahawa Cheerio adalah lebih kurang 8 kali lebih pantas daripada JSDOM.

❁Fleksibiliti yang luar biasa: Serasi dengan htmlparser2API. Cheerio boleh menghuraikan hampir semua dokumen HTML atau XML.

Bagaimana dengan JSDOM?

Saya menulis Cheerio kerana saya semakin kecewa dengan JSOM. Bagi saya, terdapat tiga masalah utama yang saya hadapi berulang kali:

• Penghurai terbina dalam JSDOM terlalu ketat: Penghurai HTML yang digabungkan dengan JSDOM pada masa ini tidak dapat mengendalikan banyak tapak web popular.

•JSDOM terlalu perlahan: Apabila menghuraikan tapak web yang besar, JSDOM mempunyai kelewatan yang jelas.

•JSDOM terasa terlalu berat: Tujuan JSDOM adalah untuk menyediakan persekitaran DOM yang sama seperti yang kita lihat dalam penyemak imbas (nota * JavaScript boleh laku). Saya tidak pernah benar-benar memerlukan mana-mana perkara ini, saya hanya mahukan cara yang mudah dan biasa untuk melakukan manipulasi HTML.

Bila hendak menggunakan JSDOM

Cheerio tidak dapat menyelesaikan semua masalah anda. Jika saya perlu bekerja dalam persekitaran seperti penyemak imbas, saya masih akan menggunakan JSDOM, terutamanya jika saya ingin melakukan ujian fungsi automatik pada pelayan.

API

Contoh kod HTML yang akan kami gunakan:

Salin kod Kod adalah seperti berikut:

• Apple


• Oren


• Pear

Memuatkan

Pertama, anda perlu memuatkan HTML. Langkah ini dilakukan secara automatik dalam jQuery kerana jQuery berjalan dalam persekitaran DOM masa nyata. Kita perlu menghantar dokumen HTML ke Cheerio.

Ini adalah kaedah pilihan:

Salin kod Kod adalah seperti berikut:

var cheerio = memerlukan('cheerio'),
$ = cheerio.load('

...

');

Sebagai alternatif, anda boleh memasukkan HTML sebagai parameter rentetan:

Salin kod Kod adalah seperti berikut:

$ = memerlukan('cheerio');
$('ul', '

...

');

atau sebagai nod akar

Salin kod Kod adalah seperti berikut:

$ = memerlukan('cheerio');
$('li', 'ul', '

...

');

Anda juga boleh memuatkan pilihan penghuraian lalai yang perlu anda ubah suai melalui .load():

tambahan

Salin kod Kod adalah seperti berikut:

$ = cheerio.load('

...

', {
NormalizeWhitespace: benar,
xmlMode: benar
});

Pilihan penghuraian ini dipinjam terus daripada htmlparser2, jadi sebarang parameter yang boleh digunakan dalam htmlparser2 juga sah dalam cheerio. Pilihan lalai ialah:

Salin kod Kod adalah seperti berikut:

{
NormalizeWhitespace: palsu,
xmlMode: palsu,
decodeEntities: benar
}

Pemilih

Pemilih Cheerio hampir sama dengan jQuery, jadi API sangat serupa.

Salin kod Kod adalah seperti berikut:

$( pemilih, [konteks], [akar] )

Pemilih memilih elemen dalam susunan: akar[akar, pilihan]->Konteks[konteks, pilihan]->pemilih. Pemilih dan konteks boleh menjadi ungkapan rentetan, elemen DOM atau tatasusunan elemen DOM. Root biasanya dokumen ialah elemen akar dokumen HTML.

Seperti jQuery, kaedah pemilihan ini merentasi dan memanipulasi dokumen dari titik permulaan. Ia adalah cara utama untuk memilih elemen daripada dokumen, tetapi tidak dibina seperti perpustakaan CSSSelect jQuery (pemilih Sizzle).

Salin kod Kod adalah seperti berikut:

$('.apple', '#fruits').text()
//=> Apple
$('ul .pear').attr('class')
//=> pir
$('li[class=oren]').html()
//=>

Oren

Atribut

Kaedah untuk mendapatkan dan mengubah suai sifat.

.attr( nama, nilai )

Kaedah untuk mendapatkan dan menetapkan sifat. Hanya mendapat nilai atribut elemen padanan pertama. Jika nilai harta yang ditetapkan ditetapkan kepada nol, harta itu dialih keluar. Anda juga boleh lulus dalam peta dan berfungsi seperti jQuery.

Salin kod Kod adalah seperti berikut:

$('ul').attr('id')
//=> buah-buahan
$('.apple').attr('id', 'favorite').html()
//=>

Apple

.data( nama, nilai )

Kaedah untuk mendapatkan dan menetapkan sifat data. Mendapat atau menetapkan hanya elemen pertama perlawanan.

Salin kod Kod adalah seperti berikut:

$('

').data()
//=> { appleColor: 'merah' }
$('

').data('data-apple-color')
//=> 'merah'
var apple = $('.apple').data('kind', 'mac')
apple.data('jenis')
//=> 'mac'
.val( [nilai] )

Kaedah untuk mendapatkan dan menetapkan input, pilih dan nilai kawasan teks. Nota: peta disokong, fungsi belum ditambah lagi.

Salin kod Kod adalah seperti berikut:

$('input[type="text"]').val()
//=> input_text
$('input[type="text"]').val('test').html()
//=>

Untuk lebih banyak API, sila lawati tapak web rasmi