Pengenalan kepada Object.observe

Takeaways Key

Object.observe, juga dikenali sebagai O.O, adalah ciri yang akan ditambah kepada JavaScript sebagai sebahagian daripada ECMAScript 7 untuk menyokong pengesanan perubahan objek secara asli dalam penyemak imbas. Ia berfungsi secara langsung pada objek tanpa membuat sebarang pembalut di sekelilingnya, menjadikannya mudah digunakan dan bermanfaat untuk prestasi.
kaedah pemerhatian () adalah kaedah statik tak segerak yang ditakrifkan pada objek yang boleh digunakan untuk mencari perubahan objek. Ia menerima tiga parameter: objek yang perlu diperhatikan, fungsi panggil balik yang akan dipanggil apabila perubahan dikesan, dan pelbagai pilihan yang mengandungi jenis perubahan yang akan ditonton.
Mengamati tatasusunan adalah serupa dengan memerhati objek, dengan satu -satunya perbezaan adalah bahawa fungsi pemerhati harus didaftarkan menggunakan array.observe bukan object.observe.
Pemerhati berdaftar pada objek atau array boleh dikeluarkan menggunakan objek.unobserve () atau, array.unobserve () masing -masing. Kaedah ini menerima dua parameter, objek atau array dan panggilan balik yang akan dikeluarkan.

Pengikatan data dua hala kini merupakan salah satu ciri penting aplikasi klien. Tanpa mengikat data, pemaju perlu berurusan dengan banyak logik untuk mengikat data secara manual ke pandangan, apabila terdapat perubahan dalam model. Perpustakaan JavaScript seperti Knockout, AngularJS, dan Ember mempunyai sokongan untuk mengikat dua hala tetapi perpustakaan ini menggunakan teknik yang berbeza untuk mengesan perubahan.

Knockout dan Ember Gunakan Observables. Observables adalah fungsi yang dibalut sifat -sifat objek model. Fungsi -fungsi ini digunakan apabila terdapat perubahan nilai objek atau harta yang sepadan. Walaupun pendekatan ini berfungsi dengan baik, dan mengesan dan memberitahu semua perubahan, ia menghilangkan kebebasan bekerja dengan objek JavaScript biasa seperti sekarang kita harus berurusan dengan fungsi.

menggunakan Angular menggunakan pemeriksaan kotor untuk mengesan perubahan. Pendekatan ini tidak mencemarkan objek model. Ia mendaftarkan pemerhati untuk setiap objek yang ditambah kepada model. Semua pemerhati ini dilaksanakan setiap kali kitaran Digest Angular menendang dan jika terdapat sebarang perubahan pada data. Perubahan tersebut diproses oleh pemerhati yang sepadan. Model ini masih menjadi objek biasa, kerana tiada pembalut dicipta di sekelilingnya. Tetapi, teknik ini menyebabkan kemerosotan prestasi sebagai bilangan pemerhati tumbuh.

Apa itu Object.observe?

Object.observe, a.k.a. O.O, adalah ciri yang akan ditambah kepada JavaScript sebagai sebahagian daripada ECMAScript 7 untuk menyokong pengesanan perubahan objek secara asli dalam penyemak imbas. Walaupun ES7 belum selesai, ciri ini sudah disokong dalam pelayar berasaskan Blink (Chrome dan Opera).

Kerana object.observe akan disokong oleh pelayar secara asli dan ia berfungsi secara langsung pada objek tanpa membuat sebarang pembalut di sekelilingnya, API adalah mudah digunakan dan menang untuk prestasi. Jika object.observe disokong oleh penyemak imbas, anda boleh melaksanakan pengikatan dua hala tanpa memerlukan perpustakaan luaran. Ini tidak bermakna bahawa semua perpustakaan mengikat dua hala yang sedia ada tidak akan digunakan sekali O.O dilaksanakan. Kami masih memerlukan mereka untuk mengemas kini UI dengan cekap selepas mengesan perubahan menggunakan O.O. Selain itu, perpustakaan akan secara dalaman polyfill logik pengesanan perubahan jika tidak semua penyemak imbas yang disasarkan menyokong O.O.

mengamati sifat objek

Sekarang anda mempunyai idea tentang apa yang baik, mari kita lihat dalam tindakan.

Kaedah Observe () adalah kaedah statik tak segerak yang ditakrifkan pada objek. Ia boleh digunakan untuk mencari perubahan objek dan menerima tiga parameter:

• objek yang harus diperhatikan
• fungsi panggil balik yang akan dipanggil apabila perubahan dikesan
• Arahan pilihan yang mengandungi jenis perubahan yang akan ditonton untuk

mari kita lihat contoh menggunakan kaedah ini. Pertimbangkan coretan berikut:

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

Dalam kod ini kita mencipta objek literal dengan beberapa data. Kami juga menentukan fungsi bernama ObserveCallback () yang akan kami gunakan untuk log perubahan objek. Kemudian, kita mula memerhatikan perubahan dengan menggunakan O.O. Akhirnya, kami melakukan beberapa perubahan pada objek.

Jika anda melihat output pada konsol, anda akan melihat bahawa semua tiga perubahan dikesan dan dilog masuk. Tangkapan skrin berikut menunjukkan hasil yang dihasilkan oleh coretan:

o.o berjalan secara asynchronously dan ia kumpulan semua perubahan berlaku dan lulus mereka ke panggilan balik apabila ia dipanggil. Oleh itu, di sini kami menerima tiga penyertaan untuk tiga perubahan yang digunakan pada objek tersebut. Seperti yang anda lihat, setiap entri terdiri daripada nama harta berubah, nilai lama, jenis perubahan, dan objek itu sendiri dengan nilai -nilai baru.

demo langsung kod terdahulu dilaporkan di bawah (ingat untuk membuka konsol untuk melihat hasilnya):

lihat pena emkveb oleh sitepoint (@sitePoint) pada codepen.

Dalam kod kami, kami tidak menentukan jenis perubahan untuk dicari, jadi ia memerhatikan penambahan, kemas kini dan memadam. Ini boleh dikawal menggunakan parameter ketiga kaedah Observe seperti berikut:

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

Pemberitahuan mendaftarkan

kaedah pemerhatian () mampu mengesan perubahan yang dibuat pada sifat langsung yang ditambahkan ke objek. Ia tidak dapat mengesan perubahan pada sifat yang dibuat menggunakan getters dan setters. Kerana tingkah laku sifat -sifat ini dikawal oleh penulis, perubahan pengesanan juga harus dimiliki oleh penulis. Untuk menangani isu ini, kita perlu menggunakan pemberitahuan (tersedia melalui objek.getNotifier ()) untuk memberitahu perubahan yang dibuat pada harta itu.

Pertimbangkan coretan berikut:

<span>Object.observe(person, observeCallback, ['add', 'update']);</span>

Todotype adalah fungsi pembina dengan dua sifat. Sebagai tambahan kepada mereka, disekat ditambah menggunakan object.defineproperty. Dalam contoh kami, setter yang ditakrifkan untuk harta ini adalah satu yang mudah. Dalam aplikasi perniagaan biasa, ia boleh melakukan beberapa pengesahan dan ia tidak boleh menetapkan nilai sekiranya pengesahan gagal. Walau bagaimanapun, saya mahu menyimpan perkara yang mudah.
Sebagai nota terakhir, anda dapat melihat bahawa dalam contoh kami pemberitahuan dihantar hanya apabila terdapat kemas kini.

Perubahan yang dibuat kepada harta yang disekat menghasilkan hasil berikut dalam alat pemaju krom:

demo langsung contoh ini dilaporkan di bawah (ingat untuk membuka konsol untuk melihat hasilnya):

lihat pen npzgoo oleh sitepoint (@sitePoint) pada codepen.

Mengamati pelbagai perubahan

Kadang -kadang, kita mungkin mempunyai perhitungan untuk dijalankan selepas dua atau lebih sifat diubahsuai dalam beberapa cara. Walaupun kita dapat memberitahu kedua -dua perubahan ini secara individu menggunakan pemberitahuan, lebih baik untuk menghantar pemberitahuan tunggal dengan nama jenis tersuai untuk menunjukkan bahawa kedua -dua nilai diubahsuai. Ini boleh dilakukan dengan menggunakan kaedah Notifier.PerformChange (). Kaedah ini menerima tiga argumen:

• nama jenis tersuai
• Fungsi panggil balik melakukan perubahan. Nilai yang dikembalikan dari fungsi ini digunakan dalam objek perubahan
• objek di mana perubahan digunakan

Mari tambahkan harta baru yang dinamakan dilakukan ke kelas todotypedefined di atas. Nilai harta ini menentukan jika item TODO selesai atau tidak. Apabila nilai yang dilakukan ditetapkan kepada benar, kita perlu menetapkan nilai harta yang disekat kepada Benar juga.

coretan berikut mentakrifkan harta ini:

<span>function <span>TodoType</span>() {
</span>  <span>this.item = '';
</span>  <span>this.maxTime = '';
</span>  
  <span>var blocked = false;
</span>  
  <span>Object.defineProperty(this, 'blocked', {
</span>    <span>get:function(){
</span>      <span>return blocked;
</span>    <span>},
</span>    <span>set: function(value){
</span>      <span>Object.getNotifier(this).notify({
</span>        <span>type: 'update',
</span>        <span>name: 'blocked',
</span>        <span>oldValue: blocked
</span>      <span>});
</span>      blocked <span>= value;
</span>    <span>}
</span>  <span>});
</span><span>}
</span>
<span>var todo = new TodoType();
</span>
todo<span>.item = 'Get milk';
</span>todo<span>.maxTime = '1PM';
</span>
<span>console.log(todo.blocked);
</span>
<span>Object.observe(todo, function(changes){
</span>  <span>console.log(changes);
</span><span>}, ['add', 'update']);
</span>
todo<span>.item = 'Go to office';
</span>todo<span>.blocked = true;</span>

Setelah logik di dalam panggilan balik performa dilaksanakan, perubahan itu akan dimaklumkan dengan jenis perubahan tersuai yang diluluskan ke dalamnya. Jenis ini tidak diperhatikan oleh Object.observe secara lalai; Kita perlu meminta O.O secara eksplisit untuk melihat perubahan jenis tersuai. Coretan berikut menunjukkan O.O yang diubahsuai pada objek Todo untuk melihat perubahan jenis tersuai bersama -sama dengan jenis Tambah dan Kemas kini:

<span>var person = {
</span>  <span>name: 'Ravi',
</span>  <span>country: 'India',
</span>  <span>gender: 'Male'
</span><span>};
</span>
<span>function observeCallback(changes){
</span>  <span>console.log(changes);
</span><span>};
</span>
<span>Object.observe(person, observeCallback);
</span>
person<span>.name = 'Rama';  // Updating value
</span>person<span>.occupation = 'writer';  // Adding a new property
</span><span>delete person.gender;  // Deleting a property</span>

coretan di atas menetapkan nilai disekat kepada benar sebelum menetapkan yang dilakukan kepada benar. Jadi, ia menghantar pemberitahuan dengan jenis perubahan tersuai. Tangkapan skrin berikut menunjukkan butiran objek perubahan yang dikembalikan oleh jenis tersuai:

demo langsung contoh ini dilaporkan di bawah (ingat untuk membuka konsol untuk melihat hasilnya):

lihat pena yyexgd oleh sitepoint (@sitePoint) pada codepen.

memerhati tatasusunan

Mengamati tatasusunan adalah serupa dengan memerhati objek. Satu -satunya perbezaan adalah bahawa fungsi pemerhati perlu didaftarkan menggunakan array.observe dan bukannya object.observe. Coretan berikut menunjukkan ini:

<span>Object.observe(person, observeCallback, ['add', 'update']);</span>

demo langsung contoh ini dilaporkan di bawah (ingat untuk membuka konsol untuk melihat hasilnya):

lihat pena gggezq oleh sitepoint (@sitePoint) pada codepen.

Mengeluarkan pemerhati berdaftar

Pemerhati berdaftar pada objek atau array boleh dikeluarkan menggunakan objek.unobserve () atau, array.unobserve () masing -masing. Kaedah ini menerima dua parameter, objek atau array dan panggilan balik yang akan dikeluarkan. Oleh itu, untuk menggunakan kaedah ini, kita perlu mempunyai rujukan panggilan balik.

<span>function <span>TodoType</span>() {
</span>  <span>this.item = '';
</span>  <span>this.maxTime = '';
</span>  
  <span>var blocked = false;
</span>  
  <span>Object.defineProperty(this, 'blocked', {
</span>    <span>get:function(){
</span>      <span>return blocked;
</span>    <span>},
</span>    <span>set: function(value){
</span>      <span>Object.getNotifier(this).notify({
</span>        <span>type: 'update',
</span>        <span>name: 'blocked',
</span>        <span>oldValue: blocked
</span>      <span>});
</span>      blocked <span>= value;
</span>    <span>}
</span>  <span>});
</span><span>}
</span>
<span>var todo = new TodoType();
</span>
todo<span>.item = 'Get milk';
</span>todo<span>.maxTime = '1PM';
</span>
<span>console.log(todo.blocked);
</span>
<span>Object.observe(todo, function(changes){
</span>  <span>console.log(changes);
</span><span>}, ['add', 'update']);
</span>
todo<span>.item = 'Go to office';
</span>todo<span>.blocked = true;</span>

Kesimpulan

Setelah O.O disokong sepenuhnya oleh semua pelayar, perubahan pengesanan akan diseragamkan di semua perpustakaan sampingan pelanggan. Aurelia sudah mula menggunakannya, Perpustakaan Pengesanan Perubahan Angular 2, Watchtower.js, menggunakan O.O secara dalaman, dan Ember juga akan menggunakannya untuk pengesanan perubahan pada masa akan datang. Angular 2 dan Aurelia mempunyai pollyfills yang dilaksanakan untuk jatuh balik apabila O.O tidak tersedia secara asli.

Masa depan di sekeliling pelanggan mengikat dua arah akan lebih cerah dengan tambahan hebat ini kepada pelayar. Mari kita menantikan penyemak imbas lain untuk mengejar lebih awal!

Soalan Lazim (Soalan Lazim) Mengenai Object.Observe

mengapa object.observe decrecated?

object.observe telah ditutup kerana ia didapati mempunyai beberapa batasan dan isu. Ia tidak dapat melihat perubahan yang dibuat dalam fungsi, dan ia juga tidak dapat mengesan perubahan yang dibuat kepada prototaip objek. Di samping itu, ia didapati tidak cekap dari segi prestasi, kerana ia memerlukan banyak sumber untuk mengesan perubahan dalam objek besar. Penolakan itu juga dipengaruhi oleh pengenalan ciri -ciri baru dalam ES6, seperti proksi dan mencerminkan, yang memberikan cara yang lebih efisien untuk memerhatikan dan bertindak balas terhadap perubahan objek.

Apakah alternatif untuk object.observe?

Dengan penolakan objek.observe, pemaju telah beralih kepada kaedah lain untuk memerhatikan perubahan dalam objek. Salah satu alternatif yang paling popular ialah penggunaan proksi ES6. Proksi membolehkan anda menentukan tingkah laku tersuai untuk operasi asas pada objek, seperti carian harta, tugasan, penghitungan, penyerahan fungsi, dan banyak lagi. Alternatif lain ialah penggunaan perpustakaan seperti Mobx atau Vue.js, yang menyediakan mekanisme mereka sendiri untuk memerhatikan perubahan dalam objek. > Proksi ES6 menyediakan cara untuk menyesuaikan tingkah laku operasi asas pada objek. Proksi dibuat dengan dua parameter: objek sasaran dan objek pengendali. Objek pengendali mentakrifkan 'perangkap' untuk pelbagai operasi pada objek sasaran. Apabila operasi ini dilakukan, perangkap yang sama dalam pengendali dicetuskan, membolehkan tingkah laku tersuai dilaksanakan. Ini menjadikan proksi sebagai alat yang berkuasa untuk mengamati dan bertindak balas terhadap perubahan dalam objek. Mereka menyediakan cara yang lebih fleksibel dan berkuasa untuk memerhatikan dan bertindak balas terhadap perubahan objek. Dengan proksi, anda boleh menentukan tingkah laku tersuai untuk pelbagai operasi, bukan hanya perubahan kepada sifat. Proksi juga melakukan lebih baik daripada object.observe, terutamanya apabila berurusan dengan objek besar. Tambahan pula, proksi adalah sebahagian daripada standard ES6, yang bermaksud mereka disokong oleh semua pelayar moden. Masih menggunakan Object.observe dalam projek anda, ia sangat tidak digalakkan. Object.observe telah ditolak dan dikeluarkan dari piawaian JavaScript, yang bermaksud ia tidak lagi dikekalkan dan tidak dapat disokong oleh semua pelayar. Menggunakan ciri -ciri yang tidak disengajakan boleh membawa kepada isu keserasian dan masalah lain dalam projek anda. Adalah disyorkan untuk menggunakan alternatif seperti proksi ES6 atau perpustakaan seperti Mobx atau Vue.Js.

bagaimana saya boleh berhijrah dari object.observe ke proksi ES6? Proksi melibatkan menggantikan panggilan objek.observe dengan objek proksi. Daripada memerhatikan perubahan kepada sifat objek, anda menentukan perangkap untuk operasi yang anda ingin perhatikan dalam objek pengendali proksi. Ini boleh melibatkan beberapa refactoring kod anda, tetapi ia menyediakan cara yang lebih fleksibel dan cekap untuk melihat perubahan objek.

Apakah kesan prestasi menggunakan proksi ES6? Walau bagaimanapun, seperti mana -mana ciri, mereka harus digunakan dengan bijak. Mewujudkan proksi untuk setiap objek dalam aplikasi anda boleh membawa kepada isu -isu prestasi. Lebih baik menggunakan proksi hanya apabila perlu dan untuk memastikan objek pengendali sebagai ringan yang mungkin. Mereka mempunyai beberapa batasan. Sebagai contoh, mereka tidak boleh digunakan untuk memerhatikan perubahan pada sifat panjang tatasusunan. Juga, proksi tidak memberikan cara untuk melihat perubahan kepada prototaip objek. Walau bagaimanapun, batasan -batasan ini sering boleh dilakukan dengan menggunakan ciri -ciri lain ES6, seperti Reflek. .js menyediakan mekanisme mereka sendiri untuk memerhatikan perubahan dalam objek. Sebagai contoh, MOBX menggunakan sifat yang boleh dilihat dan nilai yang dikira untuk mengesan perubahan, manakala Vue.js menggunakan model data reaktif. Perpustakaan ini menyediakan API peringkat tinggi untuk pemerhatian objek, menjadikannya lebih mudah digunakan daripada proksi ES6 mentah.

Apakah masa depan pemerhatian objek dalam JavaScript? JavaScript mungkin dibentuk oleh evolusi bahasa yang berterusan dan perkembangan perpustakaan dan kerangka. Ciri-ciri seperti proksi ES6 dan mencerminkan menyediakan alat yang kuat untuk mengamati dan bertindak balas terhadap perubahan objek, dan perpustakaan seperti Mobx dan Vue.js membina alat ini untuk menyediakan API peringkat tinggi untuk pemerhatian objek. Oleh kerana bahasa dan ekosistem terus berkembang, kita dapat mengharapkan untuk melihat cara yang lebih cekap dan fleksibel untuk melihat perubahan objek.

Atas ialah kandungan terperinci Pengenalan kepada Object.observe. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!