Secara pribadi, saya pikir Anda perlu memahami mekanisme operasi AngularJS dengan baik sehingga Anda dapat menghindari jatuh ke dalam lubang sebanyak mungkin. Dalam artikel ini, saya akan membuat analisis yang lebih jelas dan terperinci tentang apa yang telah dilakukan AngularJS setelah memulai berdasarkan informasi online dan pemahaman saya sendiri.
Pertama, mari kita lihat apa yang telah dilakukan Angular langkah demi langkah.
<! Doctype html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <png-init = "name = 'world'"> halo {{name}}! </p> </body> </html>Saat Anda menggunakan browser Anda untuk mengakses index.html, browser melakukan hal -hal berikut pada gilirannya:
Seluruh proses dapat diwakili oleh gambar ini:
OK, melalui contoh di atas, kita dapat memahami bagaimana AngularJS membuat halaman langkah demi langkah. Jadi bagaimana cara berinteraksi dengan loop acara browser? Atau bagaimana Anda berinteraksi dengan pengguna? Secara singkat, ini terutama dibagi menjadi tiga tahap:
1. Loop acara browser sedang menunggu acara dipicu, termasuk interaksi pengguna, acara waktu atau acara jaringan (seperti respons server, dll.);
2. Setelah suatu peristiwa dipicu, ia akan memasuki konteks JavaScript, dan DOM umumnya dimodifikasi melalui fungsi callback;
3. Setelah fungsi callback dieksekusi, browser membuat halaman baru sesuai dengan DOM baru.
Seperti yang ditunjukkan pada gambar di bawah ini, proses interaksi terutama terdiri dari beberapa siklus:
AngularJS memodifikasi alur kerja JavaScript umum dan menyediakan mekanisme penanganan acara sendiri. Ini memisahkan konteks JavaScript menjadi dua bagian, satu adalah konteks JavaScript asli, dan yang lainnya adalah konteks AngularJS. Hanya operasi dalam konteks AngularJS yang dapat menikmati pengikatan data sudut, penanganan pengecualian, menonton properti dan layanan lainnya. Namun, Angular tidak diabaikan untuk orang luar (seperti operasi JavaScript asli, panggilan balik acara yang disesuaikan, pustaka pihak ketiga, dll.). Anda dapat menggunakan fungsi $ Apply () yang disediakan oleh AngularJS untuk membungkus orang luar ini ke dalam konteks AngularJS, sehingga Angular dapat merasakan perubahan yang telah mereka buat.
Selanjutnya, mari kita lihat bagaimana siklus ini bekerja selama proses interaksi?
1. Pertama -tama, browser akan berada dalam keadaan mendengarkan. Setelah acara dipicu, itu akan ditambahkan ke antrian acara, dan acara dalam antrian acara akan dieksekusi satu per satu.
2. Jika acara dalam antrian acara dibungkus dengan $ apply (), itu akan memasuki konteks AngularJS. FN () di sini adalah fungsi yang ingin kami jalankan dalam konteks AngularJS.
3. AngularJs akan menjalankan fungsi fn (). Biasanya, fungsi ini akan mengubah beberapa status aplikasi.
4. Kemudian AngularJS akan memasukkan loop $ digest yang terdiri dari dua loop kecil. Satu loop digunakan untuk memproses antrian $ evalasync (digunakan untuk menjadwalkan beberapa operasi yang perlu diproses sebelum memberikan tampilan, biasanya diimplementasikan melalui SetTimeout (0), yang akan lebih lambat dan dapat menyebabkan tampilan jitter). Satu loop digunakan untuk memproses daftar $ watch (koleksi beberapa ekspresi. Setelah perubahan terjadi, fungsi $ watch akan dipanggil). Loop $ Digest akan terus berulang ketika tahu bahwa antrian $ evalasync kosong dan daftar $ watch juga kosong, yaitu, model tidak akan lagi berubah.
5. Setelah loop $ Digest dari AngularJS berakhir, seluruh eksekusi akan meninggalkan konteks AngularJS dan JavaScript, dan kemudian browser akan merender kembali tampilan setelah data diubah.
Selanjutnya, mari kita analisis dalam kombinasi dengan kode:
<! Doctype html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <input ng-model = "name"> <p> Halo {{name}}! </p> </body> </html>Satu -satunya perbedaan antara kode ini dan kode sebelumnya adalah bahwa ada input untuk menerima input pengguna. Saat mengakses file HTML ini dengan browser, arahan NG-Model pada input akan mengikat acara Keydown ke input, dan akan merekomendasikan $ Watch ke variabel nama untuk menerima pemberitahuan perubahan nilai variabel. Selama fase interaktif, serangkaian peristiwa berikut terutama terjadi:
1. Ketika pengguna menekan tombol pada keyboard (misalnya, a), acara Keydown pada input dipicu;
2. Instruksi pada input mendeteksi perubahan nilai dalam input dan panggilan $ aplikasikan ("name = 'a'") untuk memperbarui model dalam konteks AngularJS;
3. AngularJS menetapkan 'a' untuk menyebutkan;
4. Loop $ Digest dimulai, daftar $ Watch mendeteksi perubahan nilai nama, dan kemudian memberi tahu {{name}} ekspresi untuk memperbarui DOM;
5. Keluar dari konteks AngularJS, dan kemudian keluar dari peristiwa Keydown dalam konteks JavaScript;
6. Browser menata kembali tampilan.
Di atas adalah kumpulan informasi tentang prinsip kerja AngularJS. Kami akan terus menambahkan informasi yang relevan di masa mendatang. Terima kasih atas dukungan Anda untuk situs ini!