Analisis mendalam zone.js dalam Angular dan cara ia berfungsi

Artikel ini akan membawa anda melalui zone.js dalam Angular, menunjukkan keupayaan zone.js melalui contoh dan menganalisis secara ringkas prinsip kerja di belakangnya. Saya harap ia akan membantu semua orang.

Mungkin anda pernah mendengar bahawa Angular menggunakan zone.js, tetapi mengapakah Angular menggunakan zone.js dan apakah fungsi yang disediakannya? Hari ini kita akan menulis artikel berasingan untuk dibincangkan tentang zone.js, dan peranannya dalam rangka kerja Sudut akan dibincangkan dalam artikel seterusnya. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

Apakah itu Zon? Dokumen rasmi menerangkannya dengan cara ini: Zon ialah konteks pelaksanaan yang merangkumi berbilang tugas tak segerak. Secara ringkasnya, Zon mempunyai keupayaan yang sangat berkuasa untuk memintas atau menjejaki tugas tak segerak. Di bawah ini kami akan menggunakan contoh untuk menunjukkan keupayaannya dan menganalisis secara ringkas prinsip kerja di belakangnya.

<button id="b1">Bind Error</button>
<button id="b2">Cause Error</button>
<script>
  function main() {
    b1.addEventListener(&#39;click&#39;, bindSecondButton);
  }
  function bindSecondButton() {
    b2.addEventListener(&#39;click&#39;, throwError);
  }
  function throwError() {
    throw new Error(&#39;aw shucks&#39;);
  }
  main();
</script>

Ini adalah halaman HTML yang ringkas. Apabila halaman dimuatkan, acara klik akan ditambahkan pada butang pertama Fungsi fungsi acara kliknya adalah untuk menambah acara klik pada butang kedua, dan fungsi fungsi acara klik pada butang kedua adalah untuk membuang satu. pengecualian. Kami mengklik butang pertama dan butang kedua secara bergilir-gilir, dan konsol dipaparkan seperti berikut:

（索引）:26 Uncaught Error: aw shucks
    at HTMLButtonElement.throwError (（索引）:26:13)

Tetapi jika kita mula menjalankan kod melalui zone.js, apakah perbezaan dalam output konsol? Mari kita laraskannya dahulu Kod permulaan:

  Zone.current.fork(
      {
        name: 'error',
        onHandleError: function (parentZoneDelegate, currentZone, targetZone, error) {
          console.log(error.stack);
        }
      }
    ).fork(Zone.longStackTraceZoneSpec).run(main);

Pada masa ini output konsol adalah seperti berikut:

Error: aw shucks
    at HTMLButtonElement.throwError (（索引）:26:13)
    at ZoneDelegate.invokeTask (zone.js:406:31)
    at Zone.runTask (zone.js:178:47)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:34)
    at invokeTask (zone.js:1600:14)
    at HTMLButtonElement.globalZoneAwareCallback (zone.js:1626:17)
    at ____________________Elapsed_571_ms__At__Mon_Jan_31_2022_20_09_09_GMT_0800_________ (localhost)
    at Object.onScheduleTask (long-stack-trace-zone.js:105:22)
    at ZoneDelegate.scheduleTask (zone.js:386:51)
    at Zone.scheduleTask (zone.js:221:43)
    at Zone.scheduleEventTask (zone.js:247:25)
    at HTMLButtonElement.addEventListener (zone.js:1907:35)
    at HTMLButtonElement.bindSecondButton (（索引）:23:10)
    at ZoneDelegate.invokeTask (zone.js:406:31)
    at Zone.runTask (zone.js:178:47)
    at ____________________Elapsed_2508_ms__At__Mon_Jan_31_2022_20_09_06_GMT_0800_________ (localhost)
    at Object.onScheduleTask (long-stack-trace-zone.js:105:22)
    at ZoneDelegate.scheduleTask (zone.js:386:51)
    at Zone.scheduleTask (zone.js:221:43)
    at Zone.scheduleEventTask (zone.js:247:25)
    at HTMLButtonElement.addEventListener (zone.js:1907:35)
    at main (（索引）:20:10)
    at ZoneDelegate.invoke (zone.js:372:26)
    at Zone.run (zone.js:134:43)

Sebagai perbandingan kita tahu: apabila zone.js tidak diperkenalkan, kita boleh hanya mengetahui pengecualian melalui timbunan panggilan ralat Dilemparkan oleh fungsi klik butang 2. Selepas memperkenalkan zone.js, kita bukan sahaja tahu bahawa pengecualian dilemparkan oleh fungsi klik butang 2, tetapi juga tahu bahawa fungsi kliknya terikat oleh fungsi klik butang 1. Kita juga boleh tahu bahawa permulaan aplikasi awal adalah mainPencetus fungsi. Keupayaan untuk menjejak berbilang tugas tak segerak secara berterusan ini amat penting dalam projek yang besar dan kompleks Sekarang mari lihat bagaimana zone.js melakukannya.

zone.js mengambil alih API tak segerak yang disediakan oleh penyemak imbas, seperti acara klik, pemasa, dsb. Justru kerana inilah ia boleh mempunyai keupayaan kawalan dan campur tangan yang lebih kukuh untuk operasi tak segerak dan menyediakan lebih banyak keupayaan. Sekarang mari kita ambil acara klik sebagai contoh dan lihat bagaimana ia dilakukan.

proto[ADD_EVENT_LISTENER] = makeAddListener(nativeAddEventListener,..)

Dalam kod di atas, proto merujuk kepada EventTarget.prototype, yang bermaksud bahawa baris kod ini mentakrifkan semula fungsi addEventListener. Mari teruskan dan lihat fungsi makeAddListener.

function makeAddListener() {
  ......
  // 关键代码1
  nativeListener.apply(this, arguments);
  ......
  // 关键代码2
  const task = zone.scheduleEventTask(source, ...)
  ......
}

Fungsi ini terutamanya melakukan dua perkara Satu adalah untuk melaksanakan fungsi addEventListener yang disediakan oleh penyemak imbas itu sendiri dalam fungsi tersuai juga merupakan faktor penting dalam zone.js mempunyai keupayaan campur tangan yang kukuh dalam API tak segerak.

Sekarang mari kita kembali kepada contoh pada permulaan artikel ini dan lihat mengapa konsol boleh mengeluarkan timbunan panggilan fungsi yang lengkap. Kami baru sahaja menganalisis fungsi makeAddListener, yang menyebut bahawa ia mengatur tugas acara untuk setiap fungsi klik, iaitu pelaksanaan fungsi zone.scheduleEventTask. Fungsi tugas acara jadual ini sebenarnya melaksanakan output tindanan panggilan fungsi lengkap oleh konsol pada permulaan artikel onScheduleTask:

onScheduleTask: function (..., task) {
  const currentTask = Zone.currentTask;
  let trace = currentTask && currentTask.data && currentTask.data[creationTrace] || [];
  trace = [new LongStackTrace()].concat(trace);
  task.data[creationTrace] = trace;
}

, yang disimpan dalam currentTask.data[creationTrace], yang merupakan contoh LongStackTrace Tatasusunan terdiri daripada. Setiap kali tugas tak segerak berlaku, fungsi onScheduleTask merekodkan timbunan panggilan fungsi semasa Mari kita lihat pembina kelas LongStackTrace untuk mengetahui:

class LongStackTrace {
    constructor() {
        this.error = getStacktrace();
        this.timestamp = new Date();
    }
}
function getStacktraceWithUncaughtError() {
    return new Error(ERROR_TAG);
}

this.error disimpan Ia adalah fungsi. timbunan panggilan. Fungsi getStacktrace biasanya memanggil fungsi getStacktraceWithUncaughtError Apabila kita melihat new Error, kita mungkin boleh mengetahui bagaimana keseluruhan timbunan panggilan diperoleh.

Artikel ini menganalisis hanya contoh keupayaan zone.js Jika anda ingin mengetahui lebih banyak fungsi, anda boleh merujuk kepada dokumentasi rasmi. Melalui contoh ini, saya berharap pembaca dapat memahami secara umum zone.js, kerana ia juga merupakan asas penting dalam pengesanan perubahan Sudut. Saya akan menerangkan aspek ini dalam artikel seterusnya.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Analisis mendalam zone.js dalam Angular dan cara ia berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!