4 cara untuk melaksanakan corak pengaturcaraan tak segerak dalam kemahiran JavaScript_javascript

Anda mungkin tahu bahawa persekitaran pelaksanaan bahasa Javascript ialah "utas tunggal".

Apa yang dipanggil "benang tunggal" bermakna hanya satu tugasan boleh diselesaikan pada satu masa. Jika terdapat berbilang tugasan, tugasan tersebut mesti beratur Selepas tugasan sebelumnya selesai, tugasan seterusnya akan dilaksanakan, dan seterusnya.

Kelebihan mod ini ialah ia agak mudah untuk dilaksanakan dan persekitaran pelaksanaannya agak mudah ialah selagi satu tugasan mengambil masa yang lama, tugasan berikutnya mesti beratur, yang akan melambatkan pelaksanaan; daripada keseluruhan program. Ketidaktindak balas penyemak imbas biasa (kematian yang digantung) selalunya disebabkan oleh sekeping kod Javascript tertentu yang berjalan untuk masa yang lama (seperti gelung tak terhingga), menyebabkan keseluruhan halaman tersekat di tempat ini dan tugas lain tidak dapat dilakukan.

Untuk menyelesaikan masalah ini, bahasa Javascript membahagikan mod pelaksanaan tugas kepada dua jenis: segerak (Segerak) dan tak segerak (Asynchronous).

"Mod segerak" ialah mod dalam perenggan sebelumnya. Tugasan terakhir menunggu tugasan sebelumnya tamat sebelum melaksanakannya berbeza sama sekali. Setiap tugas mempunyai satu atau lebih fungsi panggil balik (panggilan balik) Selepas tugasan sebelumnya tamat, tugasan seterusnya tidak dilaksanakan, tetapi fungsi panggil balik dilaksanakan tanpa menunggu tugasan sebelumnya tamat pelaksanaan program Susunan tidak konsisten dan tidak segerak dengan susunan tugas.

"Mod tak segerak" adalah sangat penting. Di sisi penyemak imbas, operasi yang berjalan lama harus dilakukan secara tidak segerak untuk mengelakkan penyemak imbas menjadi tidak bertindak balas Contoh terbaik ialah operasi Ajax. Di sisi pelayan, "mod tak segerak" adalah satu-satunya mod, kerana persekitaran pelaksanaan adalah satu-benang Jika semua permintaan http dibenarkan untuk dilaksanakan secara serentak, prestasi pelayan akan menurun secara mendadak dan ia akan kehilangan respons.

Artikel ini meringkaskan 4 kaedah pengaturcaraan "mod tak segerak" Memahaminya akan membolehkan anda menulis program Javascript dengan struktur yang lebih munasabah, prestasi yang lebih baik dan penyelenggaraan yang lebih mudah.

1. Fungsi panggil balik

Ini adalah kaedah paling asas untuk pengaturcaraan tak segerak.

Andaikan terdapat dua fungsi f1 dan f2, dan fungsi kedua menunggu hasil pelaksanaan yang pertama.

Salin kod Kod adalah seperti berikut:

f1();
f2();

Jika f1 adalah tugas yang memakan masa, anda boleh mempertimbangkan untuk menulis semula f1 dan menulis f2 sebagai fungsi panggil balik f1.

Salin kod Kod adalah seperti berikut:

fungsi f1(panggilan balik){

tetapkanMasa tamat(fungsi () {

// Kod tugas f1

panggil balik();

　　}, 1000);

　}

Kod yang dilaksanakan akan menjadi seperti berikut:

Salin kod Kod adalah seperti berikut:

f1(f2);

Menggunakan kaedah ini, kami menukar operasi segerak kepada operasi tak segerak F1 tidak akan menyekat perjalanan program ini bersamaan dengan melaksanakan logik utama program terlebih dahulu dan menangguhkan pelaksanaan operasi yang memakan masa.

Kelebihan fungsi panggil balik ialah ia mudah, mudah difahami dan digunakan Kelemahannya ialah ia tidak kondusif untuk membaca dan mengekalkan kod Pelbagai bahagian sangat digabungkan (Gandingan), prosesnya sangat mengelirukan, dan setiap tugas hanya boleh menentukan satu fungsi panggil balik.

2. Pemantauan acara

Cara pemikiran lain ialah menggunakan model dipacu peristiwa. Pelaksanaan tugas tidak bergantung pada susunan kod, tetapi pada sama ada peristiwa berlaku.

Mari kita ambil f1 dan f2 sebagai contoh. Pertama, ikat acara ke f1 (jQuery digunakan di sini).

Salin kod Kod adalah seperti berikut:

f1.on('selesai', f2);

Maksud baris kod di atas ialah apabila peristiwa yang dilakukan berlaku dalam f1, f2 akan dilaksanakan. Kemudian, tulis semula f1:

Salin kod Kod adalah seperti berikut:

fungsi f1(){

tetapkanMasa tamat(fungsi () {

// Kod tugas f1

　　f1.trigger('selesai');

　　}, 1000);

　}

f1.trigger('done') bedeutet, dass nach Abschluss der Ausführung das Done-Ereignis sofort ausgelöst wird, um mit der Ausführung von f2 zu beginnen.

Der Vorteil dieser Methode besteht darin, dass sie relativ einfach zu verstehen ist, mehrere Ereignisse binden kann, jedes Ereignis mehrere Rückruffunktionen angeben kann und „entkoppelt“ werden kann, was der Modularisierung förderlich ist. Der Nachteil besteht darin, dass das gesamte Programm ereignisgesteuert werden muss und der laufende Prozess sehr unklar wird.

3. Veröffentlichen/Abonnieren

Das „Ereignis“ im vorherigen Abschnitt kann als „Signal“ verstanden werden.

Wir gehen davon aus, dass es ein „Signalzentrum“ gibt. Wenn eine bestimmte Aufgabe ausgeführt wird, „veröffentlicht“ sie ein Signal an das Signalzentrum, um zu erfahren, was Sie tun können Fangen Sie an, es selbst auszuführen. Dies wird als „Publish-Subscribe-Muster“ (Publish-Subscribe-Muster) oder auch als „Observer-Muster“ (Observer-Muster) bezeichnet.

Es gibt viele Implementierungen dieses Musters. Die unten verwendete ist Ben Almans Tiny Pub/Sub, ein Plug-in für jQuery.

Zuerst abonniert f2 das „Fertig“-Signal von der „Signal Center“-jQuery.

Code kopieren Der Code lautet wie folgt:

jQuery.subscribe("done", f2);

Dann wird f1 wie folgt umgeschrieben:

Code kopieren Der Code lautet wie folgt:

Funktion f1(){

setTimeout(function () {

// Aufgabencode von f1

jQuery.publish("done");

　　}, 1000);

　}

jQuery.publish ("done") bedeutet, dass nach Abschluss der Ausführung von f1 das Signal "Fertig" an das "Signalzentrum" von jQuery weitergeleitet wird, wodurch die Ausführung von f2 ausgelöst wird.

Darüber hinaus können Sie sich auch abmelden, nachdem f2 die Ausführung abgeschlossen hat.

Code kopieren Der Code lautet wie folgt:

jQuery.unsubscribe("done", f2);

Die Art dieser Methode ähnelt dem „Event Listening“, ist jedoch deutlich besser als letzteres. Denn wir können den Betrieb des Programms überwachen, indem wir im „Message Center“ nachsehen, wie viele Signale vorhanden sind und wie viele Abonnenten jedes Signal hat.

4. Versprechensobjekt

Das Promises-Objekt ist eine von der CommonJS-Arbeitsgruppe vorgeschlagene Spezifikation, um eine einheitliche Schnittstelle für die asynchrone Programmierung bereitzustellen.

Einfach ausgedrückt besteht die Idee darin, dass jede asynchrone Aufgabe ein Promise-Objekt zurückgibt, das über eine then-Methode verfügt, die die Angabe einer Rückruffunktion ermöglicht. Beispielsweise kann die Rückruffunktion f2 von f1 wie folgt geschrieben werden:

Code kopieren Der Code lautet wie folgt:

f1().then(f2);

f1 muss wie folgt umgeschrieben werden (hier wird die jQuery-Implementierung verwendet):

Code kopieren Der Code lautet wie folgt:

Funktion f1(){

　var dfd = $.Deferred();

setTimeout(function () {

// Aufgabencode von f1

　dfd.resolve();

　　}, 500);

Rückgabe von dfd.promise;

　}

Der Vorteil dieser Schreibweise besteht darin, dass die Rückruffunktion zu einer Kettenschreibmethode wird, der Programmablauf klar erkennbar ist und ein vollständiger Satz unterstützender Methoden vorhanden ist, mit denen viele leistungsstarke Funktionen realisiert werden können.

Geben Sie beispielsweise mehrere Rückruffunktionen an:

Code kopieren Der Code lautet wie folgt:

f1().then(f2).then(f3);

Geben Sie als weiteres Beispiel die Rückruffunktion an, wenn ein Fehler auftritt:

Code kopieren Der Code lautet wie folgt:

f1().then(f2).fail(f3);

Darüber hinaus hat es einen Vorteil, den die vorherigen drei Methoden nicht haben: Wenn eine Aufgabe abgeschlossen ist und eine Callback-Funktion hinzugefügt wird, wird die Callback-Funktion sofort ausgeführt. Sie müssen sich also keine Sorgen machen, ein Ereignis oder Signal zu verpassen. Der Nachteil dieser Methode besteht darin, dass sie relativ schwer zu schreiben und zu verstehen ist.