7 Soru: Tüm tarayıcılar için Object.watch ()?

tarafından oluşturulan soru Thu, Jun 14, 2018 12:00 AM

Lütfen aşağıdaki tüm yorumları mutlaka okuyun. Object.Watch ve Object.Observe her ikisi de kullanımdan kaldırılmıştır. Güncellenmiş (Jun 2018'den itibaren) bir yöntem için Elliot B'nin yorumuna bakın.


Değişiklikler için bir nesneyi veya değişkeni izlemenin kolay bir yolunu arıyordum ve Mozilla tarayıcılarında desteklenen Object.watch()'u buldum, ancak IE'yi bulamadım. Bu yüzden etrafta bir çeşit eşdeğer yazıp yazmadığını görmek için araştırmaya başladım.

Bulduğum tek şey hakkında bir jQuery eklentisi oldu, ancak değilim Tabii ki gidilecek en iyi yol bu mu? Projelerimin çoğunda kesinlikle jQuery kullanıyorum, bu yüzden jQuery yönü için endişelenmiyorum ...

Her neyse, soru: Birisi bana o jQuery eklentisinin çalışma örneğini gösterebilir mi? Çalışması için sorun yaşıyorum ...

Veya, tarayıcıda işe yarayacak daha iyi alternatifler bilen var mı?

Yanıtlardan sonra güncelleme :

Yanıtlarınız için herkese teşekkürler! Burada yayınlanan kodu denedim: http://webreflection.blogspot.com/2009/01/internet -Explorer-nesne-watch.html

Fakat IE ile çalışmasını sağlayamadım. Aşağıdaki kod Firefox’ta iyi çalışıyor ancak IE’de hiçbir şey yapmıyor. Firefox’ta watcher.status’un her değiştirilişinde document.write()’da watcher.watch()’un adı verilir ve çıktıyı sayfada görebilirsiniz. IE’de bu olmuyor, ancak son watcher.status çağrısı doğru değeri gösterdiğinden (49’un hem IE hem de FF’de) document.write()’un değeri güncellediğini görebiliyorum. Ancak, geri çağırma işlevi çağrılmazsa, bu biraz anlamsız ... :)

Bir şey mi eksik?

 
var options = {'status': 'no status'},
watcher = createWatcher(options);

watcher.watch("status", function(prop, oldValue, newValue) {
  document.write("old: " + oldValue + ", new: " + newValue + "<br>");
  return newValue;
});

watcher.status = 'asdf';
watcher.status = '1234';

document.write(watcher.status + "<br>");
    
115
  1. IE'de onPropertyChange'te kullanabileceğiniz IIRC
    2009-06-22 20: 32: 36Z
  2. document.write () öğesini alert () ile değiştirin. Sadece iyi çalışması gerekir.
    2009-06-23 12: 17: 50Z
7 Yanıtlar                              7                         

(Çapraz gönderim için üzgünüm, ancak benzer bir soruya verdiğim bu cevap burada iyi çalışıyor)

Bir süre önce bunun için küçük bir object.watch shim oluşturdum. IE8, Safari, Chrome, Firefox, Opera vb. Yerlerde çalışır.

    
113
2011-12-27 08: 00: 11Z
  1. Eli tarafından bu betiğin daha yeni bir sürümü gist .github.com /175.649
    2011-09-03 23: 06: 56Z
  2. Nasıl kullanılacağına ve bunun dahili olarak nasıl çalıştığına dair bir açıklama, JS uzmanı olmayanlarımız için iyi olurdu, teşekkürler.
    2011-12-26 15: 48: 16Z
  3. 2011-12-27 08: 00: 28Z
  4. jsfiddle.net/kSWxP HINT: kullan Firefox (ikinci ifade Chrome'da yazdırılmıyor)
    2012-07-06 15: 09: 13Z
  5. 2014-07-23 15: 37: 17Z

Bu eklenti, bir nesne üzerindeki değişiklikleri tekrar tekrar kontrol etmek için sadece bir zamanlayıcı /aralık kullanır. Yeterince iyi olabilir ama şahsen ben bir gözlemci olarak daha fazla yakınlık istiyorum.

watch /unwatch’u IE’ye getirme girişimi: http :. //webreflection.blogspot.com/2009/01/internet-explorer-object-watch.html

Sözdizimini, gözlemci ekleme Firefox'tan değiştirir. Bunun yerine:

 
var obj = {foo:'bar'};
obj.watch('foo', fooChanged);

Siz yapın:

 
var obj = {foo:'bar'};
var watcher = createWatcher(obj);
watcher.watch('foo', fooChanged);

O kadar tatlı değil, ama bir gözlemci olarak derhal bilgilendirilirsin.

    
19
2009-06-22 21: 16: 33Z
  1. Yukarıda daha önce listelenen.
    2009-06-23 04: 42: 42Z
  2. @ SleepyCod: yararlı bir cevabı neden düşürdün? Zaman damgalarına bak. Birbirimize 2 saniye içinde mesaj attık (kelimenin tam anlamıyla, hatırladım). İşte böyle çalışır: yanlış veya başka alakasız cevapları aşağı oyla.
    2009-06-23 11: 54: 05Z
  3. Evet, bu zaman damgalarını izleyin ... indirmeye gerek yok, aynı zamanda crescentfresh, aynı bağlantı olsa bile gönderiye daha fazla bilgi ekledi. Bu arada, o sayfada bulunan kodu denedim ve hala bir sorun görüyorum. Yine de bir şey görmezden geliyorum. Orijinal yayınımı daha fazla bilgi ile güncelledim
    2009-06-23 12: 10: 20Z

    Mevcut Cevap

    Yeni Proxy nesnesini kullanın , hedefindeki değişiklikleri izleyebilir.

     
    let validator = {
        set: function(obj, prop, value) {
            if (prop === 'age') {
                if (!Number.isInteger(value)) {
                    throw new TypeError('The age is not an integer');
                }
                if (value > 200) {
                    throw new RangeError('The age seems invalid');
                }
            }
    
            // The default behavior to store the value
            obj[prop] = value;
    
            // Indicate success
            return true;
        }
    };
    
    let person = new Proxy({}, validator);
    
    person.age = 100;
    console.log(person.age); // 100
    person.age = 'young'; // Throws an exception
    person.age = 300; // Throws an exception
    

    2015’ten gelen eski cevap

    Object.observe () ES7'den kullanabilirsiniz. İşte bir dolum var. Ancak Object.observe () şimdi iptal edildi . Üzgünüm insanlar!

        
    11
    2018-09-19 08: 21: 47Z
    1. Hm, bu polyfill'in ios safari üzerinde çalışmasını sağlayamadım. Hata alıyorum: undefined bir işlev değil ('Object.observe (a.imgTouch, function (a) {console.debug ("lastX:" + a)})') değerlendirilmesi
      2015-04-27 18: 00: 42Z
    2. @ infomofo Merhaba, verebileceğiniz tüm detayları içeren, proje sayfasında bir sorun açmak ister misiniz? İOS'ta test etmedim, ancak soruna bakacağım.
      2015-05-21 18: 52: 14Z

    Chrome 36 ve daha üst sürümlerinde Object.observe adresini kullanabileceğinizi unutmayın . Bu aslında gelecekteki bir ECMAScript standardının bir parçasıdır ve Mozilla'nın Object.watch gibi bir tarayıcıya özgü özelliği değildir.

    Object.observe yalnızca nesne özellikleri üzerinde çalışır, ancak Object.watch'dan (performans kullanımı için hata ayıklama amaçlıdır) çok daha performanslıdır.

     
    var options = {};
    
    Object.observe(options, function(changes) {
        console.log(changes);
    });
    
    options.foo = 'bar';
    
        
    6
    2014-07-16 12: 27: 29Z
    1. 2018’de olduğu gibi, bu artık kullanımdan kaldırıldı ve artık tüm büyük tarayıcılar tarafından desteklenmiyor
      2019-02-01 14: 48: 32Z

    kullanabilirsiniz: Object.defineProperty" >.

    bar'daki foo numaralı mülkü izleyin

     
    Object.defineProperty(foo, "bar", {
      get: function (val){
          //some code to watch the getter function
      },
    
      set: function (val) {
          //some code to watch the setter function
      }
    })
    
        
    2
    2018-01-02 13: 20: 59Z
    1. Bu harika! Ama ben bunu abit olarak değiştiririm :) Orijinal ayarlayıcının üzerine yazmamak. Foo._someObject = foo.someObject
      'in referansını yaparım.
      2018-03-22 10: 59: 14Z

    Projelerimden birinde Watch.js 'i kullandım. Ve iyi çalışıyor. Bu kitaplığı kullanmanın en önemli avantajlarından biri:

      

    "Watch.JS ile geliştirme şeklinizi değiştirmeniz gerekmez."

    Örnek aşağıda verilmiştir

     
    //defining our object however we like
    var ex1 = {
    	attr1: "initial value of attr1",
    	attr2: "initial value of attr2"
    };
    
    //defining a 'watcher' for an attribute
    watch(ex1, "attr1", function(){
    	alert("attr1 changed!");
    });
    
    //when changing the attribute its watcher will be invoked
    ex1.attr1 = "other value";
    <script src="https://cdn.jsdelivr.net/npm/melanke-watchjs@1.5.0/src/watch.min.js"></script>

    Bu, bu kadar basit!

        
    1
    2018-12-10 12: 05: 56Z

    Ayrıca şu anda en iyi çözümün Watch.JS kullanmak, burada güzel bir öğretici bulmak olduğunu düşünüyorum: Javascript'te nesne veya dizi değişikliklerini dinleyin /izleyin (Javascript nesnelerinde özellik değişti)

        
    - 2
    2013-07-14 15: 33: 30Z
kaynak yerleştirildi İşte