Pengenalan kepada objek JQuery ' s

pemaju JavaScript telah lama menggunakan fungsi panggil balik untuk melaksanakan pelbagai tugas. Contoh yang sangat umum ialah menambah panggilan balik melalui fungsi

untuk melakukan pelbagai tindakan apabila peristiwa seperti klik atau kunci dicetuskan. Fungsi panggil balik adalah mudah dan mudah digunakan dan sesuai untuk senario mudah. Walau bagaimanapun, apabila kerumitan laman web meningkat dan banyak operasi tak segerak perlu dilakukan secara selari atau berurutan, fungsi panggilan balik menjadi sukar untuk dikendalikan. addEventListener()

ECMAScript 2015 (juga dikenali sebagai ECMAScript 6) memperkenalkan kaedah asli untuk mengendalikan situasi tersebut: janji. Jika anda tidak tahu tentang janji, anda boleh membaca artikel "Gambaran Keseluruhan JavaScript Promise". JQuery menyediakan dan masih menyediakan versi janji sendiri, yang dipanggil objek tertunda. Beberapa tahun sebelum Janji diperkenalkan ke ECMAScript, objek tertunda telah diperkenalkan ke dalam jQuery. Artikel ini akan membincangkan objek tertunda dan masalah yang mereka cuba selesaikan.

mata utama

Objek tertunda memudahkan pengaturcaraan asynchronous:

objek tertunda JQuery menyediakan cara yang kuat untuk mengurus dan menyelaraskan operasi tak segerak, mengurangkan kerumitan yang berkaitan dengan fungsi panggil balik tradisional.
• Interoperability dengan Janji ECMAScript:
Walaupun pelaksanaannya berbeza, versi 3.x objek tertunda jQuery meningkatkan keserasian dengan janji ECMAScript 2015 asli, meningkatkan kepraktisan web modennya dalam pembangunan.
• Kaedah yang fleksibel:
Objek tertunda menyediakan pelbagai kaedah, seperti
• , , , resolve(), reject(), done() dan fail(), membolehkan pemaju untuk mengawal pemprosesan proses tak segerak. then()
• Elakkan panggilan balik neraka: Dengan menggunakan objek tertunda dan janji, pemaju boleh mengelakkan perangkap umum panggilan balik yang sangat bersarang, dengan itu menulis lebih banyak kod yang boleh dibaca dan dikekalkan. Pengendalian ralat yang dipertingkatkan:
JQuery 3 memperkenalkan kaedah
• objek tertunda, yang konsisten dengan standard ECMAScript dan menyediakan kaedah yang mudah untuk mengendalikan kesilapan dalam rantaian janji. catch()
Sejarah ringkas

Objek tertunda diperkenalkan dalam JQuery 1.5, yang merupakan utiliti yang boleh dipasang di rantai untuk mendaftarkan pelbagai panggilan balik ke dalam giliran panggilan balik, memanggil giliran panggil balik, dan lulus status kejayaan atau kegagalan mana-mana fungsi segerak atau tak segerak. Sejak itu, ia telah menjadi subjek perbincangan, beberapa kritikan dan banyak perubahan. Beberapa contoh kritikan termasuk "anda terlepas titik janji" dan "janji javascript dan mengapa jQuery adalah pelaksanaan yang salah".

bersama -sama dengan objek janji, ditangguhkan mewakili pelaksanaan janji JQuery. Dalam versi jQuery 1.x dan 2.x, objek tertunda mengikuti janji -janji Commonjs/A. Cadangan ini digunakan sebagai asas untuk janji/cadangan, dan janji asli dibina atas cadangan ini. Seperti yang dinyatakan dalam pengenalan, sebab JQuery tidak mengikuti janji/cadangan adalah bahawa ia melaksanakan janji jauh sebelum cadangan itu dicadangkan.

Kerana jQuery adalah perintis, dan terdapat perbezaan cara menggunakan janji dalam JavaScript dan JQuery 1.x dan 2.x disebabkan oleh masalah keserasian mundur. Selain itu, sejak jQuery mengikuti cadangan yang berbeza, perpustakaan tidak sesuai dengan perpustakaan lain yang melaksanakan janji, seperti Q Library.

Interoperability dengan janji asli, seperti yang dilaksanakan dalam ECMAScript 2015, telah diperbaiki dalam JQuery 3 yang akan datang. Tandatangan kaedah utama (then()) masih sedikit berbeza untuk sebab-sebab keserasian mundur, tetapi tingkah laku itu lebih patuh.

fungsi panggil balik dalam jQuery

Untuk memahami mengapa anda mungkin perlu menggunakan objek tertunda, mari kita bincangkan contoh. Apabila menggunakan jQuery, ia sering menggunakan kaedah Ajax untuk melakukan permintaan tidak segerak. Sebagai contoh, katakan anda sedang membangunkan laman web yang menghantar permintaan AJAX ke API GitHub. Matlamat anda adalah untuk mendapatkan senarai repositori pengguna, cari repositori yang baru dikemas kini, cari fail pertama dengan nama "Readme.md", dan akhirnya mengambil kandungan fail. Menurut keterangan ini, setiap permintaan Ajax hanya boleh bermula selepas langkah sebelumnya selesai. Dalam erti kata lain, permintaan mesti dijalankan dalam pesanan.

Tukar keterangan ini ke pseudo-code (perhatikan bahawa saya tidak menggunakan API GitHub sebenar), kami mendapat:

<code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});</code>

Seperti yang anda lihat dalam contoh ini, menggunakan fungsi panggil balik, kita perlu bersarang panggilan untuk melaksanakan permintaan AJAX mengikut urutan yang kita mahu. Ini menjadikan kod kurang dibaca. Terdapat banyak panggilan balik bersarang, atau panggilan balik bebas yang mesti disegerakkan, sering disebut sebagai "neraka panggil balik".

Untuk sedikit penambahbaikan, anda boleh mengekstrak fungsi yang dinamakan dari fungsi inline tanpa nama yang saya buat. Walau bagaimanapun, perubahan ini tidak banyak membantu dan kita masih mendapati diri kita dalam panggilan balik neraka. Objek tertunda dan janji diperlukan pada masa ini.

objek tertunda dan janji

Objek tertunda boleh digunakan semasa melakukan operasi asynchronous seperti permintaan dan animasi Ajax. Dalam jQuery, objek janji dibuat dari objek tertunda atau objek jQuery. Ia mempunyai subset kaedah objek tertunda:

, always(), done(), fail(), state(), dan then(). Saya akan merangkumi kaedah ini dan lain -lain di bahagian seterusnya.

Jika anda datang dari dunia JavaScript asli, anda mungkin keliru dengan kewujudan kedua -dua objek ini. Mengapa terdapat dua objek (tertunda dan janji) apabila JavaScript hanya mempunyai satu (janji)? Untuk menerangkan perbezaan dan kes penggunaannya, saya akan mengambil metafora yang sama yang saya gunakan dalam buku JQuery saya dalam Tindakan, edisi ketiga.

Jika anda menulis fungsi yang mengendalikan operasi tak segerak dan harus mengembalikan nilai (juga boleh menjadi ralat atau tiada nilai sama sekali), anda biasanya menggunakan objek tertunda. Dalam kes ini, fungsi anda adalah pengeluar nilai dan anda ingin menghalang pengguna daripada mengubah keadaan tertunda. Gunakan objek janji apabila anda adalah pengguna fungsi.

Untuk menjelaskan konsep ini, katakan anda ingin melaksanakan fungsi berasaskan janji timeout() (saya akan menunjukkan kepada anda kod untuk contoh ini dalam bahagian berikutnya artikel ini). Anda bertanggungjawab untuk menulis fungsi yang mesti menunggu masa yang diberikan (di mana nilai itu tidak dikembalikan). Ini menjadikan anda pengeluar. Pengguna fungsi anda tidak peduli dengan parsing atau menolaknya. Pengguna hanya perlu menambah fungsi untuk dilaksanakan apabila ditangguhkan selesai, gagal, atau berkembang. Di samping itu, anda ingin memastikan bahawa pengguna tidak dapat menghuraikan atau menolak ditangguhkan sendiri. Untuk mencapai matlamat ini, anda perlu mengembalikan objek Janji Tertunda yang dibuat dalam fungsi timeout(), dan bukannya ditangguhkan sendiri. Dengan melakukan ini, anda boleh memastikan bahawa tiada siapa yang boleh memanggil kaedah timeout() atau resolve() kecuali fungsi reject().

Anda boleh membaca lebih lanjut mengenai perbezaan antara objek tertunda dan janji jQuery dalam soalan StackOverflow ini.

Sekarang anda tahu apa objek ini, mari kita lihat kaedah yang ada.

kaedah tertunda

Objek tertunda sangat fleksibel dan menyediakan cara untuk memenuhi semua keperluan anda. Ia boleh dibuat dengan memanggil kaedah jQuery.Deferred() seperti berikut:

<code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});</code>

atau, gunakan $ pintasan:

<code class="language-javascript">var deferred = jQuery.Deferred();</code>

Selepas membuat, objek tertunda mendedahkan pelbagai kaedah. Abaikan kaedah -kaedah yang tidak ditetapkan atau dipadam, mereka adalah:

• always(callbacks[, callbacks, ..., callbacks]): Tambah pengendali yang akan dipanggil apabila objek tertunda dihuraikan atau ditolak.
• done(callbacks[, callbacks, ..., callbacks]): Tambah pengendali yang akan dipanggil apabila objek tertunda dihuraikan.
• fail(callbacks[, callbacks, ..., callbacks]): Tambah pengendali yang akan dipanggil apabila objek tertunda ditolak.
• notify([argument, ..., argument]): Panggil progressCallbacks objek tertunda dengan parameter yang diberikan.
• notifyWith(context[, argument, ..., argument]): Panggil progressCallbacks objek tertunda dengan konteks dan parameter yang diberikan.
• progress(callbacks[, callbacks, ..., callbacks]): Tambah pengendali yang akan dipanggil apabila objek tertunda menghasilkan pemberitahuan kemajuan.
• promise([target]): Mengembalikan objek Janji Tertunda.
• reject([argument, ..., argument]): Mempertahankan objek tertunda dan memanggil mana -mana failCallbacks dengan parameter yang diberikan.
• rejectWith(context[, argument, ..., argument]): Mempertahankan objek tertunda dan memanggil mana -mana failCallbacks dengan konteks dan parameter yang diberikan.
• resolve([argument, ..., argument]): menghuraikan objek tertunda dan panggil mana -mana doneCallbacks dengan parameter yang diberikan.
• resolveWith(context[, argument, ..., argument]): Parses objek tertunda dan panggilan mana -mana doneCallbacks dengan konteks dan parameter yang diberikan.
• state(): Tentukan keadaan semasa objek tertunda.
• then(resolvedCallback[, rejectedCallback[, progressCallback]]): Tambah pengendali yang akan dipanggil apabila objek tertunda dihuraikan, ditolak, atau masih sedang berjalan.

Keterangan kaedah ini memberi saya peluang untuk menekankan perbezaan antara dokumentasi jQuery dan istilah yang digunakan oleh spesifikasi ECMAScript. Dalam spesifikasi ECMAScript, apabila janji telah selesai atau ditolak, dikatakan bahawa janji telah diselesaikan. Walau bagaimanapun, dalam dokumentasi JQuery, perkataan "diselesaikan" digunakan untuk merujuk kepada keadaan yang dipanggil "dipenuhi" dalam spesifikasi ECMAScript.

Oleh kerana banyak kaedah yang disediakan, semua kaedah tidak dapat diliputi dalam artikel ini. Walau bagaimanapun, dalam bahagian seterusnya, saya akan menunjukkan kepada anda beberapa contoh tertunda dan janji menggunakan. Dalam contoh pertama, kami akan mengatasi coretan kod yang diperiksa dalam bahagian "Panggilan balik dalam JQuery", tetapi kami akan menggunakan objek ini dan bukannya fungsi panggil balik. Dalam contoh kedua, saya akan menjelaskan analogi pengeluar-pengguna yang dibincangkan.

Jalankan permintaan AJAX menggunakan pesanan tertunda

Dalam bahagian ini, saya akan menunjukkan cara menggunakan objek tertunda dan beberapa kaedahnya untuk meningkatkan kebolehbacaan kod yang dibangunkan dalam bahagian "Panggilan balik dalam JQuery". Sebelum kita menggali lebih mendalam, kita mesti memahami kaedah yang kita perlukan.

Berdasarkan keperluan kita dan senarai kaedah yang disediakan, jelas bahawa kita boleh menggunakan kaedah done() atau then() untuk menguruskan situasi yang berjaya. Oleh kerana ramai di antara kamu mungkin terbiasa dengan objek janji JavaScript, dalam contoh ini saya akan menggunakan kaedah then(). Perbezaan penting antara kedua -dua kaedah ini ialah then() dapat mengemukakan nilai parameter yang diterima kepada panggilan lain then(), done(), fail() atau progress() yang ditakrifkan selepas itu.

Hasil akhir adalah seperti berikut:

<code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});</code>

Seperti yang anda lihat, kod itu lebih mudah dibaca, kerana kita dapat memecahkan keseluruhan proses ke beberapa langkah kecil pada tahap yang sama (kira -kira lekukan).

Buat fungsi setTimeout berasaskan janji

seperti yang anda tahu, setTimeout() adalah fungsi yang melaksanakan fungsi panggil balik selepas jumlah masa yang diberikan. Kedua -dua elemen (fungsi panggil balik dan masa) harus disediakan sebagai parameter. Katakan anda mahu log mesej ke konsol dalam satu saat. Dengan menggunakan fungsi setTimeout(), anda boleh mencapai ini dengan kod yang ditunjukkan di bawah:

<code class="language-javascript">var deferred = jQuery.Deferred();</code>

Seperti yang anda lihat, parameter pertama adalah fungsi yang akan dilaksanakan, dan parameter kedua adalah bilangan milisaat untuk menunggu. Fungsi ini telah berfungsi dengan baik selama bertahun -tahun, tetapi bagaimana jika anda perlu memperkenalkan latensi ke dalam rantaian tertunda?

Dalam kod berikut, saya akan menunjukkan kepada anda cara menggunakan objek janji yang disediakan oleh jQuery untuk membangunkan fungsi berasaskan janji setTimeout(). Untuk melakukan ini, saya akan menggunakan kaedah promise() objek tertunda.

Hasil akhir adalah seperti berikut:

<code class="language-javascript">var deferred = $.Deferred();</code>

Dalam senarai ini, saya mentakrifkan fungsi yang dipanggil timeout() yang membungkus fungsi JavaScript setTimeout() asli. Di dalam timeout(), saya membuat objek tertunda baru untuk menguruskan tugas tak segerak yang melibatkan menghuraikan objek tertunda selepas bilangan milisaat yang ditentukan. Dalam kes ini, fungsi timeout() adalah pengeluar nilai, jadi ia mewujudkan objek tertunda dan mengembalikan objek janji. Dengan melakukan ini, saya memastikan bahawa pemanggil (pengguna) fungsi tidak dapat menghuraikan atau menolak objek tertunda pada kehendak. Malah, pemanggil hanya boleh menggunakan kaedah seperti done() dan fail() untuk menambah fungsi yang akan dilaksanakan.

perbezaan antara jQuery 1.x/2.x dan jQuery 3

Dalam contoh pertama menggunakan ditangguhkan, kami membangunkan coretan kod yang mencari fail dengan nama "readme.md", tetapi kami tidak menganggap kes di mana fail tersebut tidak dapat dijumpai. Keadaan ini dapat dilihat sebagai kegagalan. Apabila ini berlaku, kita mungkin mahu memecahkan rantai panggilan dan melompat terus ke hujungnya. Untuk melakukan ini, pengecualian secara semulajadi dibuang dan menangkapnya menggunakan kaedah fail(), seperti kaedah JavaScript catch().

Di perpustakaan yang mematuhi janji/A dan janji/A (contohnya, JQuery 3.x), pengecualian yang dibuang ditukar kepada penolakan dan panggilan balik yang gagal dipanggil (contohnya, ditambah dengan fail()). Ini menerima pengecualian sebagai parameter.

Dalam JQuery 1.x dan 2.x, pengecualian yang tidak diketahui akan menghentikan pelaksanaan program. Versi -versi ini membolehkan pengecualian dilemparkan untuk menggelegak, biasanya mencapai window.onerror. Jika tiada fungsi ditakrifkan untuk mengendalikan pengecualian ini, mesej pengecualian dipaparkan dan pelaksanaan program dibatalkan.

untuk lebih memahami tingkah laku yang berbeza, lihat contoh ini:

<code class="language-javascript">var username = 'testuser';
var fileToSearch = 'README.md';

$.getJSON('https://api.github.com/user/' + username + '/repositories', function(repositories) {
  var lastUpdatedRepository = repositories[0].name;

  $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/files', function(files) {
    var README = null;

    for (var i = 0; i < files.length; i++) {
      if (files[i].name.indexOf(fileToSearch) >= 0) {
        README = files[i].path;

        break;
      }
    }

    $.getJSON('https://api.github.com/user/' + username + '/repository/' + lastUpdatedRepository + '/file/' + README + '/content', function(content) {
      console.log('The content of the file is: ' + content);
    });
  });
});</code>

Dalam JQuery 3.x, kod ini menulis mesej "Fungsi Kegagalan Pertama" dan "Fungsi Kejayaan Kedua" ke konsol. Alasannya ialah, seperti yang saya nyatakan sebelum ini, spesifikasi menyatakan bahawa pengecualian yang dibuang harus ditukar kepada penolakan dan bahawa panggilan balik yang gagal harus dipanggil menggunakan pengecualian. Selain itu, apabila pengecualian diproses (dikendalikan oleh panggilan balik yang gagal diserahkan kepada kedua then() dalam contoh kami), fungsi yang berjaya berikut harus dilaksanakan (dalam hal ini panggilan balik yang berjaya diserahkan kepada then() ketiga dalam kes ini) ).

Dalam jQuery 1.x dan 2.x, tiada fungsi lain dilaksanakan kecuali fungsi pertama (fungsi yang melemparkan ralat), anda hanya akan melihat mesej "Ralat Uncaught: Mesej Ralat".

Untuk meningkatkan keserasiannya dengan ECMAScript 2015, JQuery 3 juga menambah kaedah baru dalam objek tertunda dan janji catch(). Ini adalah cara untuk melaksanakan pengendali apabila objek tertunda ditolak atau objek janjinya berada dalam keadaan yang ditolak. Tandatangannya adalah seperti berikut:

<code class="language-javascript">var deferred = jQuery.Deferred();</code>

Kaedah ini hanya pintasan untuk then(null, rejectedCallback).

Kesimpulan

Dalam artikel ini, saya memperkenalkan anda kepada pelaksanaan janji JQuery. Janji membolehkan anda mengelakkan keperluan untuk menggunakan helah jahat untuk menyegerakkan fungsi asynchronous selari dan panggilan balik bersarang ...

Di samping menunjukkan beberapa contoh, saya juga meliputi bagaimana JQuery 3 meningkatkan kebolehoperasian dengan janji asli. Walaupun menonjolkan perbezaan antara JQuery dan ECMAScript yang lebih tua 2015, ditangguhkan masih merupakan alat yang sangat kuat dalam kotak alat anda. Sebagai pemaju profesional, anda akan mendapati diri anda menggunakannya dengan kerap kerana projek menjadi lebih sukar.

Soalan Lazim untuk JQuery Deferred Objects (FAQ)

(bahagian FAQ ditinggalkan di sini kerana artikel itu terlalu panjang dan tidak ada kaitan dengan tema utama artikel. Jika perlu, anda boleh bertanya soalan FAQ secara berasingan.)

Atas ialah kandungan terperinci Pengenalan kepada objek JQuery ' s. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!