Menguasai $ menonton di AngularJS

mata teras

Fungsi
• dalam AngularJS adalah alat yang kuat untuk memerhatikan perubahan dalam nilai atau ekspresi berubah -ubah. Apabila perubahan dikesan, ia mencetuskan fungsi panggil balik yang dilaksanakan setiap kali perubahan berubah -ubah yang dipantau. $watch
• Gunakan pengendali kesamaan JavaScript (===) untuk perbandingan. Jika nilai baru berbeza dari nilai lama, fungsi panggil balik dicetuskan. Walau bagaimanapun, perlu diperhatikan bahawa secara lalai, $watch hanya memeriksa kesamaan rujukan, yang bermaksud bahawa fungsi panggil balik hanya dicetuskan apabila nilai baru diberikan kepada pemboleh ubah yang dipantau. $watch
AngularJS juga menyediakan
• dan $watchGroup sebagai jalan pintas yang mudah untuk menubuhkan pelbagai monitor atau array pemantauan atau objek dengan fungsi panggil balik yang sama. Walau bagaimanapun, kaedah ini hanya melakukan pemantauan cetek dan bertindak balas hanya kepada perubahan rujukan. $watchCollection
Menggunakan
• , terutamanya pada pelbagai pembolehubah, boleh menjejaskan prestasi kerana perubahan dalam semua pembolehubah yang dipantau perlu diperiksa untuk setiap kitaran ringkasan. Pemaju harus mempertimbangkan menggunakan $watch atau $watchGroup bergantung kepada keadaan, atau mengehadkan bilangan pembolehubah yang dipantau untuk meningkatkan prestasi. $watchCollection

Artikel ini dikaji semula oleh Mark Brown. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk mendapatkan kandungan SitePoint untuk yang terbaik!

AngularJS menawarkan banyak pilihan yang berbeza untuk menggunakan mod subscribe penerbitan melalui tiga kaedah "menonton" yang berbeza. Setiap kaedah mengambil parameter pilihan untuk mengubah suai tingkah lakunya.

Dokumentasi rasmi mengenai

jauh dari lengkap: selepas semua, ini adalah masalah yang mengganggu AngularJS v1 secara keseluruhan. Malah sumber dalam talian yang menerangkan bagaimana untuk meneruskan adalah terfragmentasi paling baik. $watch

Jadi, pada akhirnya, sukar bagi pemaju untuk memilih pendekatan yang tepat untuk situasi tertentu. Ini terutama berlaku untuk pemula di AngularJS! Hasilnya boleh mengejutkan atau tidak dapat diramalkan, yang tidak dapat dielakkan membawa kepada kesilapan.

Dalam artikel ini, saya akan mengandaikan bahawa anda sudah biasa dengan konsep AngularJS. Jika anda rasa anda perlu menyemak, anda mungkin perlu membaca tentang

, pengikat, dan $scope dan $apply. $digest

Periksa pemahaman anda

Sebagai contoh, apakah cara terbaik untuk memantau elemen pertama array? Katakan kami mengisytiharkan array pada skop kami,

;

• Apabila kita menambah elemen ke array, adakah $scope.$watch('letters', function () {...}); akan mencetuskan fungsi panggil baliknya?
• Apabila kita menukar elemen pertamanya, adakah ia akan membakar?
Di manakah
• $scope.$watch('letters[0]', function () {...});? Adakah ia berfungsi dengan cara yang sama, atau lebih baik?
• di atas, elemen array adalah nilai asal: Bagaimana jika kita menggantikan elemen pertama dengan nilai yang sama?
• sekarang menganggap bahawa array mengandungi objek: apa yang berlaku?
Apakah perbezaan antara
• $watch, $watchCollection dan $watchGroup?

Jika anda keliru dengan semua soalan ini, sila teruskan membaca. Matlamat saya adalah untuk membimbing anda melalui proses dengan menerangkan ini dengan jelas mungkin dengan beberapa contoh.

$scope.$watch

mari kita mulakan dengan $scope.$watch. Berikut adalah teras semua ciri Watch: setiap kaedah lain yang akan kita lihat hanyalah pintasan mudah untuk $watch.

menggunakan $watch

Kelebihan sudut adalah bahawa anda boleh menggunakan mekanisme yang sama untuk melaksanakan operasi kompleks yang dicetuskan oleh perubahan data dalam pengawal. Sebagai contoh, anda boleh menyediakan monitor untuk data tertentu yang boleh diubah sebagai tindak balas kepada:

1. timeout
2. ui
3. pengiraan asynchronous kompleks yang dilakukan oleh pekerja web
4. Ajax Call

Anda boleh menyediakan hanya satu pendengar untuk mengendalikan sebarang perubahan data, tidak kira apa sebabnya.

Walau bagaimanapun, untuk melakukan ini, anda perlu memanggil

sendiri. $scope.$watch

Operasi Praktikal

mari kita lihat kod

. $rootscope.watch()

Ini adalah tandatangannya:

. function(watchExp, listener, objectEquality, prettyPrintExpression)

secara terperinci, empat parameternya:

1. Ekspresi yang dipantau. Ia boleh menjadi fungsi atau rentetan, dan ia dinilai dalam setiap kitaran pencernaan. watchExp

   Aspek utama yang perlu diperhatikan di sini ialah

   Jika ungkapan dinilai sebagai fungsi, fungsi perlu menjadi idempotent. Dalam erti kata lain, untuk set input yang sama ia harus sentiasa mengembalikan output yang sama. Jika ini tidak berlaku, Angular akan mengandaikan bahawa data yang dipantau telah diubah. Ini seterusnya bermakna ia akan terus mengesan perbezaan dan memanggil pendengar dalam setiap lelaran kitaran dicerna.

2. Fungsi panggil balik yang dipecat apabila monitor pertama kali ditubuhkan, dan kemudian setiap kali perubahan dalam nilai listener dikesan semasa kitaran ringkasan. Panggilan awal pada tetapan dimaksudkan untuk menyimpan nilai awal untuk ekspresi. watchExp

3. Monitor akan melakukan perbandingan mendalam jika dan hanya jika nilai ini benar. Jika tidak, ia melakukan perbandingan cetek, iaitu rujukan perbandingan sahaja. objectEquality

   mari kita ambil array sebagai contoh:

   ; $scope.fruit = ["banana", "apple"]

   bermaksud bahawa hanya penempatan semula medan

   akan menyebabkan pendengar dipanggil. objectEquality == false

   kita juga perlu menyemak sejauh mana "mendalam" adalah: kita akan membincangkannya kemudian.

4. prettyPrintExpression Jika diluluskan, ia akan mengatasi ekspresi pemantauan. Parameter ini tidak dimaksudkan untuk digunakan dalam panggilan biasa kepada $watch();

   Berhati -hati: Seperti yang anda lihat sendiri, keputusan yang tidak dijangka terdedah kepada hasil yang tidak dijangka apabila parameter keempat diluluskan secara tidak sengaja.

Sekarang kita akan menjawab beberapa soalan dalam pengenalan. Sila lihat contoh bahagian ini:

CODEPEN Contoh

berasa bebas untuk membiasakan diri dengan mereka;

Pemantauan Array

jadi anda perlu memantau array pada skop untuk membuat perubahan, tetapi apakah maksud "perubahan"?

Katakan pengawal anda kelihatan seperti ini:

app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);

Satu pilihan adalah menggunakan panggilan seperti ini:

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});

Dalam panggilan balik di atas, newValue dan oldValue mempunyai makna jelas dan dikemas kini setiap kali kitaran $digest memanggilnya. Makna scope juga intuitif, kerana ia memegang rujukan kepada skop semasa.

Tetapi kunci ialah: Bilakah pendengar ini akan dipanggil? Malah, anda boleh menambah, memadam, menggantikan elemen dalam array tanpa apa -apa yang berlaku. Ini kerana, secara lalai, letters mengandaikan bahawa anda hanya mahu $watch persamaan rujukan , jadi fungsi panggil balik hanya dicetuskan apabila anda memberikan nilai baru kepada . $scope.letters

Jika anda perlu mengambil tindakan terhadap perubahan kepada mana -mana elemen array, anda perlu lulus

sebagai parameter ketiga untuk true (iaitu sebagai nilai parameter pilihan watch yang diterangkan di atas). objectEquality

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
}, true);

Objek pengawasan

Untuk objek, keadaan tidak berubah: Jika

adalah palsu, anda hanya memantau sebarang penugasan semula kepada pembolehubah skop itu, dan jika benar, fungsi panggilan balik akan dicetuskan setiap kali elemen dalam objek diubah. objectEquality

elemen pertama array pemantauan

Perlu diperhatikan bahawa dengan memantau array menggunakan

, setiap kali fungsi panggil balik dicetuskan, objectEquality === true dan newValue akan menjadi nilai lama dan baru keseluruhan array. Oleh itu, anda perlu membandingkannya dengan satu sama lain untuk memahami apa yang sebenarnya berubah. oldValue

Katakan anda hanya berminat dengan perubahan kepada elemen pertama (atau elemen keempat-prinsip yang sama) dalam array. Oleh kerana sudut sangat baik, ia membolehkan anda melakukan ini: anda boleh menyatakannya secara semulajadi dalam ungkapan yang diluluskan kepada

sebagai hujah pertama: $watch

$scope.$watch('letters[4]', function (newValue, oldValue, scope) {
    //...
}, true);

Apa yang berlaku jika array hanya mempunyai 2 elemen? Tiada masalah, fungsi panggil balik anda tidak akan dipecat melainkan anda menambah elemen keempat. Ok ok, secara teknikal ia kebakaran apabila anda menyediakan monitor dan kemudian hanya apabila anda menambah elemen keempat.

Jika anda merakam oldValue, anda akan melihat bahawa dalam kedua -dua kes ia tidak akan ditentukan. Bandingkan ini dengan apa yang berlaku apabila memantau elemen sedia ada: Apabila ditubuhkan, anda masih mempunyai oldValue == undefined. Jadi $watch tidak boleh diproses!

Soalan yang lebih menarik sekarang: Adakah kita perlu lulus objectEquality === true di sini?

Jawapan pendek: Maaf, tidak ada jawapan pendek.

ia benar -benar bergantung pada:

• Dalam contoh ini, kerana kita sedang mengusahakan nilai asal, kita tidak memerlukan perbandingan kedalaman, jadi kita boleh meninggalkan objectEquality.
• Tetapi, katakan kita mempunyai matriks, contohnya $scope.board = [[1, 2, 3], [4, 5, 6]]; Kemudian kami mungkin ingin mendapatkan amaran apabila tugasan seperti $scope.board[0][1] = 7 mengubahnya.

bidang objek pemantauan

mungkin lebih berguna daripada memantau mana -mana elemen dalam array, kita boleh memantau mana -mana bidang dalam objek. Tetapi itu tidak menghairankan, bukan? Lagipun, array dalam JavaScript adalah objek .

app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);

sejauh mana kedalamannya?

Pada ketika ini, kita juga perlu menjelaskan satu terperinci yang terakhir tetapi penting: Apa yang berlaku jika kita perlu memantau objek bersarang kompleks di mana setiap bidang adalah nilai bukan primitif? Sebagai contoh, pokok atau graf, atau hanya beberapa data JSON.

mari kita periksa!

Pertama sekali, kita memerlukan objek untuk memantau:

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});

mari kita sediakan monitor untuk keseluruhan objek: Saya fikir setakat ini jelas bahawa dalam kes ini objectEquality mesti ditetapkan ke true.

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
}, true);

Persoalannya ialah: Jika tugasan seperti $scope.b.bb[1].bb2a = 7; berlaku, adakah sudut akan cukup baik untuk memberitahu kami?

Jawapannya ialah: Ya, bernasib baik, ia akan (lihat dalam demo Codepen sebelumnya).

Kaedah lain

$scope.$watchGroup

Adakah pendekatan yang berbeza? Jawapannya tidak, tidak. $watchGroup()

adalah jalan pintas yang mudah yang membolehkan anda menyediakan pelbagai monitor menggunakan fungsi panggil balik yang sama dan lulus pelbagai $watchGroup(). watchExpressions

Setiap ungkapan lulus akan dipantau menggunakan kaedah standard

. $scope.$watch()

$scope.$watch('letters[4]', function (newValue, oldValue, scope) {
    //...
}, true);

perlu diperhatikan bahawa menggunakan

, $watchGroup dan newValues akan menyimpan senarai nilai ungkapan, termasuk nilai yang telah berubah dan yang telah menyimpan nilai yang sama, dalam Perintah mereka dalam parameter pertama perintah lulus dalam array adalah sama. oldValues

Jika anda menyemak dokumentasi untuk kaedah ini, anda mungkin melihat bahawa ia tidak mengambil pilihan

. Ini kerana ia memantau ekspresi dan hanya bertindak balas terhadap perubahan rujukan. objectEquality

Jika anda menggunakan demo $watchGroup() di bawah, anda mungkin terkejut dengan beberapa kehalusan. Sebagai contoh, unshift akan menyebabkan pendengar dipanggil, sekurang -kurangnya sedikit sebanyak: ini kerana apabila meluluskan senarai ekspresi ke $watchGroup, mana -mana mencetuskan ungkapan yang akan mengakibatkan fungsi panggilan balik pelaksanaan.

CODEPEN Contoh

Juga, ambil perhatian bahawa sebarang perubahan pada mana -mana subfield

tidak akan menghasilkan sebarang kemas kini - kemas kini hanya akan dihasilkan jika nilai baru diberikan kepada medan B itu sendiri. $scope.obj.b

$scope.$watchCollection Ini adalah satu lagi jalan pintas yang mudah untuk memantau tatasusunan atau objek. Untuk tatasusunan, pendengar dipanggil apabila mana -mana elemen diganti, dipadam, atau ditambah. Untuk objek, apabila sebarang sifat diubah. Sekali lagi,

tidak membenarkan

, jadi ia hanya memantau elemen/medan dan tidak bertindak balas terhadap perubahan di subfield mereka. $watchCollection() objectEquality

CODEPEN Contoh

Kesimpulan

Semoga contoh -contoh ini membantu anda menemui kuasa ciri sudut ini dan memahami betapa pentingnya menggunakan pilihan yang tepat.

Jangan ragu untuk menyalin Codepen dan cuba menggunakan kaedah ini dalam konteks yang berbeza dan jangan lupa untuk meninggalkan maklum balas anda di bahagian komen!

Jika anda ingin melihat lebih mendalam beberapa konsep yang dibincangkan dalam artikel ini, berikut adalah beberapa cadangan untuk membaca selanjutnya:

Skop AngularJS

1. Fahami Angular's
dan
2. $apply() $digest() Corak yang muncul dalam pemprosesan acara JavaScript
3. Pewarisan prototaip dalam skop AngularJS
Dokumen
dan lain -lain
5. $watch

FAQS (FAQ)

di AngularJS $watch

Apakah tujuan utama dalam AngularJS? $watch

Fungsi

di AngularJS terutamanya digunakan untuk melihat perubahan dalam nilai pembolehubah atau ungkapan. Ia adalah sebahagian daripada Objek Saluran AngularJS untuk memantau perubahan dalam nilai pembolehubah atau ekspresi. Apabila perubahan dikesan, fungsi $watch mencetuskan fungsi panggil balik yang dilaksanakan setiap kali perubahan berubah -ubah yang dipantau. $watch

Bagaimana ia berfungsi di AngularJS? $watch

fungsi

dalam angularjs berfungsi dengan membandingkan nilai lama dan baru pemboleh ubah atau ekspresi yang dipantau. Ia menggunakan pengendali kesamaan JavaScript (===) untuk perbandingan. Jika nilai baru berbeza dari nilai lama, fungsi $watch akan mencetuskan fungsi panggil balik. $watch

bagaimana saya menggunakan

di AngularJS? $watch

untuk menggunakan

di angularjs, anda perlu memanggil kaedah $watch pada objek skop dan lulus dua parameter: nama pembolehubah atau ungkapan yang akan dipantau, dan berlaku apabila pembolehubah dipantau panggilan balik berfungsi untuk dilaksanakan apabila berubah. Berikut adalah contoh: $watch

app.controller('watchDemoCtrl', ['$scope', function($scope){
    $scope.letters = ['A','B','C'];
}]);

Apakah perbezaan antara

$watch dan $apply dalam AngularJS?

Fungsi

dalam $watch di angularjs digunakan untuk melihat perubahan dalam pembolehubah atau ekspresi, manakala fungsi $apply digunakan untuk memulakan secara manual tempoh pencernaan sudut, yang memeriksa apa -apa perubahan dalam pemboleh ubah yang dipantau dan mengemas kini pandangan Sehubungan itu. Fungsi $apply biasanya digunakan apabila membuat perubahan model di luar konteks AngularJS, seperti dalam pengendali acara DOM atau fungsi setTimeout.

Bolehkah saya memantau pelbagai pembolehubah dalam angularjs menggunakan $watch?

Ya, anda boleh menggunakan $watch untuk memantau pelbagai pembolehubah dalam AngularJS. Anda boleh melakukan ini dengan lulus pelbagai nama pembolehubah ke fungsi $watch. Walau bagaimanapun, ingat bahawa pemantauan pelbagai pembolehubah boleh menjejaskan prestasi, kerana fungsi $watch perlu memeriksa perubahan dalam semua pembolehubah yang dipantau dalam setiap kitaran pencernaan.

bagaimana saya berhenti memantau pembolehubah dalam $watch di angularjs?

Apabila anda memanggil fungsi $watch di AngularJS, ia mengembalikan fungsi logout. Anda boleh memanggil fungsi ini untuk menghentikan pembolehubah pemantauan. Berikut adalah contoh:

$scope.$watch('letters', function (newValue, oldValue, scope) {
    // 对 $scope.letters 执行任何操作
});

Apa itu $watchGroup di AngularJS?

Fungsi $watchGroup dalam AngularJS digunakan untuk memantau satu set ekspresi. Ia berfungsi seperti fungsi $watch, tetapi ia mencetuskan fungsi panggil balik hanya sekali setiap kitaran dicerna, walaupun terdapat banyak ekspresi yang dipantau. Ini dapat meningkatkan prestasi apabila memantau pelbagai ungkapan.

Apa itu $watchCollection di AngularJS?

Fungsi $watchCollection dalam angularjs digunakan untuk memantau sifat -sifat objek atau unsur -unsur array. Ia mencetuskan fungsi panggil balik selagi mana -mana atribut atau perubahan elemen, tetapi tidak seperti $watch, ia tidak memantau objek atau tatasusunan yang mendalam, yang dapat meningkatkan prestasi.

Bolehkah saya menggunakan $watch dalam arahan AngularJS?

Ya, anda boleh menggunakan $watch dalam arahan AngularJS. Malah, adalah perkara biasa untuk menggunakan $watch dalam arahan untuk bertindak balas terhadap perubahan atribut atau pembolehubah skop arahan.

Apakah pertimbangan prestasi dalam angularjs menggunakan $watch?

Menggunakan $watch di AngularJs boleh menjejaskan prestasi, terutamanya apabila memantau banyak pembolehubah atau ekspresi. Ini kerana fungsi $watch perlu menyemak perubahan semua pembolehubah yang dipantau dalam setiap kitaran pencernaan. Untuk meningkatkan prestasi, pertimbangkan untuk menggunakan $watchGroup atau $watchCollection mengikut keadaan, atau mengehadkan bilangan pembolehubah yang dipantau.

Atas ialah kandungan terperinci Menguasai $ menonton di AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!