Przeciąganie i ustawianie w przeglądarce dla wielu przeglądarek

Question

Działa w nowoczesnych przeglądarkach Chrome/Firefox/Opera, ale kończy się niepowodzeniem w IE8. Nie próbowałem go w IE9. Jak mogę sprawić, by ta przeglądarka była kompatybilna, w tym IE7 +? (Fiddle here.)

var foo = { 
    get test(){ return 'Works'; } 
}; 

// foo.test should be 'Works' 

Widziałem trochę zużycia z __defineGetter__ ale wyrzucił błąd „metoda nierozpoznane” w IE8.

Answer 1

Nie wierzę, że możesz.

W IE8 i niższy, dostęp nieruchomość jest sam dostęp do nieruchomości. Nie ma sposobu uruchomienia kodu funkcji bez jawnego wywoływania funkcji.

myślę w IE8 może być w stanie z elementów DOM, ale nie wierzę, że pracuje dla regularnych rodzimych obiektów.

Answer 2

Nie można, składnia nie jest obsługiwana w przeglądarkach, które jej nie implementowały. To będzie dość długo, zanim będziesz mógł użyć tej składni bez problemów z CBC. Bądź wdzięczny, że IE6 jest prawie martwy w Ameryce Północnej.

Answer 3

Istnieje metoda "definePropery", która zasadniczo pozwala tworzyć metody accessor (pobierające/ustawiające) na obiektach bez potrzeby wywoływania wywołania funkcji, jak setProp()/getProp().

Składnia jest trochę dziwne, ale udało mi się uzyskać to do pracy na Firefox, Chrome, Safari i IE9.

Powiedz, że mam obiekt JavaScript o nazwie "Osoba".

function Person() 
{ 
// set a default value // 
    this.__name = 'John'; 
// add getter & setter methods // 
    Object.defineProperty(this, "name", { 
     get: function() { 
     // additional getter logic 
      return this.__name; 
     }, 
     set: function(val) { 
      this.__name = val; 
     // additional setter logic 
     } 
    }); 
} 

var p = new Person(); 
console.log(p.name); // 'John' 
p.name = 'Stephen'; 
console.log(p.name); // 'Stephen' 

Więcej informacji na stronie Mozilli here.

Answer 4

Oto workaround dla IE6/7/8. Wykonałem test i działa bardzo dobrze!

Aktualizacja: link jest uszkodzony, można zobaczyć kod z moich testów tutaj:

// Super amazing, cross browser property function, based on http://thewikies.com/ 
function addProperty(obj, name, onGet, onSet) { 

    // wrapper functions 
    var 
     oldValue = obj[name], 
     getFn = function() { 
      return onGet.apply(obj, [oldValue]); 
     }, 
     setFn = function (newValue) { 
      return oldValue = onSet.apply(obj, [newValue]); 
     }; 

    // Modern browsers, IE9+, and IE8 (must be a DOM object), 
    if (Object.defineProperty) { 

     Object.defineProperty(obj, name, { 
      get: getFn, 
      set: setFn 
     }); 

    // Older Mozilla 
    } else if (obj.__defineGetter__) { 

     obj.__defineGetter__(name, getFn); 
     obj.__defineSetter__(name, setFn); 

    // IE6-7 
    // must be a real DOM object (to have attachEvent) and must be attached to document (for onpropertychange to fire) 
    } else { 

     var onPropertyChange = function (e) { 

      if (event.propertyName == name) { 
       // temporarily remove the event so it doesn't fire again and create a loop 
       obj.detachEvent("onpropertychange", onPropertyChange); 

       // get the changed value, run it through the set function 
       var newValue = setFn(obj[name]); 

       // restore the get function 
       obj[name] = getFn; 
       obj[name].toString = getFn; 

       // restore the event 
       obj.attachEvent("onpropertychange", onPropertyChange); 
      } 
     }; 

     obj[name] = getFn; 
     obj[name].toString = getFn; 

     obj.attachEvent("onpropertychange", onPropertyChange); 

    } 
}