Penjelasan terperinci tentang kaedah $apply() dalam angularJS_AngularJS

Bagi saya, seorang pemula yang lengkap di bahagian hadapan, saya masih tahu sedikit tentang Javascript Jika saya ingin memulakan JS sudut secara langsung, saya menghadapi banyak rintangan. Walau bagaimanapun, saya percaya bahawa selagi kita bekerja keras, walaupun reka bentuk anti-manusia tidak akan menjadi masalah besar.

Okay, jangan cakap kosong lagi. Untuk memahami apa itu JS sudut, saya mulakan dengan Skop. Jadi apakah Skop? Meminjam petikan daripada dokumen rasmi:

Salin kod Kod adalah seperti berikut:

"skop ialah objek yang merujuk kepada model aplikasi. Ia adalah konteks pelaksanaan untuk ekspresi. Skop disusun dalam struktur hierarki yang meniru struktur DOM aplikasi. Skop boleh menonton ekspresi dan menyebarkan peristiwa."

Selepas membaca ini, dengan analogi kepada bahasa pengaturcaraan lain, saya merasakan bahawa Skop adalah seperti skop Model Data, menyediakan konteks untuk pelaksanaan Ungkapan Mari kita fahami dengan cara ini buat masa ini.

Ciri Skop

Seterusnya, mari lihat apakah ciri Skop?

Skop menyediakan kaedah $watch untuk memantau perubahan Model.
Skop menyediakan kaedah $apply untuk menyebarkan perubahan Model.
Skop boleh diwarisi untuk mengasingkan komponen aplikasi dan kebenaran akses harta yang berbeza.
Skop menyediakan konteks untuk penilaian Ungkapan.

Berkenaan dengan empat ciri ini, kerana saya telah mempelajari ActionScript, C, dan Java sebelum ini, point pertama, ketiga dan keempat tidaklah sukar untuk difahami, tetapi point kedua terasa agak kurang jelas. Selaras dengan prinsip meminta jawapan, saya masih menemui beberapa perkara melalui Google. Untuk veteran yang berpengalaman, sila ketik pada batu bata!

Javaskrip Asal

Pertama sekali, pada pandangan pertama, scope.apply() nampaknya kaedah biasa untuk mengemas kini binding. Tetapi fikirkan sedikit lagi, mengapa kita memerlukannya? Bilakah ia biasanya digunakan? Untuk memahami kedua-dua isu ini, kita perlu bermula dengan Javascript. Dalam kod Javascript, ia dilaksanakan dalam susunan tertentu Apabila tiba giliran serpihan kod untuk dilaksanakan, penyemak imbas hanya akan melaksanakan serpihan semasa dan tidak akan melakukan apa-apa lagi. Jadi kadang-kadang beberapa halaman web yang tidak dibuat dengan baik akan tersekat selepas mengklik pada sesuatu Cara Javascript berfungsi adalah salah satu sebab fenomena ini! Di bawah ini kami mempunyai sekeping kod untuk merasakannya:

Salin kod Kod adalah seperti berikut:

butang var = document.getElementById('clickMe');
butang fungsi Diklik () {
alert('butang telah diklik');
}
button.addEventListener('klik', butangClicked);
pemasa fungsiLengkap () {
makluman('pemasa selesai');
}
setTimeout(timerComplete, 5000);

Apabila memuatkan kod Javascript, mula-mula cari butang dengan ID yang dipanggil "clickMe", kemudian tambahkan pendengar, dan kemudian tetapkan tamat masa. Tunggu 5 saat dan kotak dialog akan muncul. Jika anda memuat semula halaman dan klik butang clickMe dengan serta-merta, kotak dialog akan muncul Jika anda tidak mengklik OK, fungsi timerComplete tidak akan mempunyai peluang untuk melaksanakan.

Cara mengemas kini pengikatan

Okay, selepas bercakap tentang beberapa perkara yang kelihatan tidak relevan, mari kita kembali kepada topik. Bagaimanakah JS sudut mengetahui apabila data berubah dan halaman perlu dikemas kini? Kod tersebut perlu mengetahui apabila data telah diubah suai, tetapi pada masa ini tiada cara untuk memberitahu secara langsung bahawa data pada objek telah berubah (walaupun ECMAScript 5 cuba menyelesaikan masalah ini, ia masih dalam peringkat percubaan). Strategi yang lebih arus perdana pada masa ini termasuk dua penyelesaian berikut. Salah satunya ialah menggunakan objek khas supaya semua data hanya boleh ditetapkan dengan memanggil kaedah objek dan bukannya secara langsung menyatakannya melalui harta tersebut. Dengan cara ini, semua pengubahsuaian boleh direkodkan, dan anda akan tahu bila halaman perlu dikemas kini. Kelemahan ini ialah kita mesti mewarisi objek istimewa. Tugasan hanya boleh dilakukan melalui object.set('key', 'value') dan bukannya object.key=value. Dalam rangka kerja, seperti EmberJS dan KnockoutJS melakukan ini (walaupun saya tidak pernah terdedah kepadanya - memalukan). Kaedah yang lain ialah kaedah yang diguna pakai oleh JS sudut, yang menyemak sama ada terdapat sebarang perubahan data selepas setiap urutan pelaksanaan kod Javascript dilaksanakan. Ini nampaknya tidak cekap dan mungkin memberi kesan serius kepada prestasi. Walau bagaimanapun, sudut JS telah menggunakan beberapa kaedah yang bijak untuk menyelesaikan masalah ini (ia belum dikaji lagi, dan ia masih belum jelas). Kelebihan ini ialah kita boleh menggunakan sebarang objek sesuka hati, tiada sekatan pada kaedah tugasan, dan kita juga boleh mengesan perubahan dalam data.
Untuk penyelesaian yang diterima pakai oleh JS sudut ini, perkara yang kami ambil berat ialah apabila data berubah, dan di sinilah scope.apply() berguna. Menyemak sama ada data terikat telah berubah sebenarnya dilakukan oleh scope.digest(), tetapi kami hampir tidak pernah memanggil kaedah ini secara langsung, tetapi memanggil kaedah scope.apply() kerana dalam skop Dalam kaedah .apply(), ia akan memanggil kaedah scope.digest(). Kaedah scope.apply() mengambil fungsi atau ungkapan, melaksanakannya dan akhirnya memanggil kaedah scope.digest() untuk mengemas kini binding atau pemerhati.

Bila hendak menggunakan $apply()

Ia masih soalan yang sama, bilakah kita perlu memanggil kaedah apply()? Situasi ini sangat jarang berlaku, sebenarnya, hampir semua kod kami dibungkus dalam scope.apply(), seperti ng-click, inisialisasi pengawal, fungsi panggil balik http, dsb. Dalam kes ini, kita tidak perlu memanggilnya sendiri Malah, kita tidak boleh memanggilnya sendiri, jika tidak memanggil kaedah apply() dalam kaedah apply() akan menimbulkan ralat. Kita benar-benar perlu menggunakannya jika kita perlu menjalankan kod dalam urutan pelaksanaan baharu, dan jika dan hanya jika urutan pelaksanaan baharu ini tidak dicipta oleh kaedah perpustakaan JS sudut, pada masa ini kita perlu menggunakan skop untuk kod tersebut. apply() dibalut. Mari gunakan contoh untuk menerangkan:

Salin kod Kod adalah seperti berikut:

{{message}}

Salin kod Kod adalah seperti berikut:

functionCtrl($skop) {
$scope.message ="Menunggu 2000ms untuk kemas kini"; setTimeout(fungsi () {
​ $scope.message="Masa tamat dipanggil!";
// AngularJS tidak mengetahui kemas kini kepada $scope
}, 2000); }

Selepas kod di atas dilaksanakan, halaman akan memaparkan: Menunggu 2000ms untuk kemas kini. Nampaknya kemas kini data tidak disedari oleh JS sudut. Seterusnya, kami mengubah suai sedikit kod Javascript dan membungkusnya dengan scope.apply().

Salin kod Kod adalah seperti berikut:

functionCtrl($skop) {

$scope.message ="Menunggu 2000ms untuk kemas kini"; setTimeout(fungsi () {
​$skop.$apply(fungsi () {
​ ​$scope.message="Masa tamat dipanggil!";
});
}, 2000); }

Perbezaan kali ini ialah halaman pertama akan dipaparkan: Menunggu 2000ms untuk kemas kini Selepas menunggu selama 2 saat, kandungan akan ditukar kepada: Tamat masa dipanggil!. Jelas sekali kemas kini data diperhatikan oleh JS sudut.
NOTA: Kita tidak sepatutnya melakukan ini, tetapi gunakan kaedah tamat masa yang disediakan oleh JS sudut, supaya ia akan secara automatik dibalut dengan kaedah apply.

Sains ialah pedang bermata dua
Akhir sekali, mari kita lihat sekali lagi kaedah scope.apply() dan scope.apply(function)! Walaupun sudut JS telah melakukan banyak perkara untuk kami, kami juga telah kehilangan beberapa peluang. Anda boleh mengetahui sepintas lalu daripada pseudokod di bawah:

Salin kod Kod adalah seperti berikut:

function$apply(expr) {
cuba {
​​return$eval(expr);
} tangkap(e) {
​​$exceptionHandler(e);
} akhirnya {
​​$root.$digest();
}
}

Ia akan menangkap semua pengecualian dan tidak akan membuangnya lagi Akhirnya, kaedah $digest() akan dipanggil.

Untuk meringkaskan

Kaedah $apply() boleh melaksanakan ungkapan JS sudut di luar rangka kerja sudut, seperti peristiwa DOM, setTimeout, XHR atau pustaka pihak ketiga yang lain. Ini baru permulaan, air masih sangat dalam, semua orang dialu-alukan untuk menyelam dalam bersama-sama!