Obsługa JavaScriptu w IE8

Question

Sprawdź ten kod. Jest to bardzo prosty obiekt JavaScript, który jest realizowany za pomocą Module Pattern (i można zobaczyć na żywo na przykład this fiddle address)

var human = function() { 
    var _firstName = ''; 
    var _lastName = '' 
    return { 
     get firstName() { 
      return _firstName; 
     }, get lastName() { 
      return _lastName; 
     }, set firstName(name) { 
      _firstName = name; 
     }, set lastName(name) { 
      _lastName = name; 
     }, get fullName() { 
      return _firstName + ' ' + _lastName; 
     } 
    } 
}(); 
human.firstName = 'Saeed'; 
human.lastName = 'Neamati'; 
alert(human.fullName); 

Jednak IE8 nie obsługuje JavaScript get i set kluczowych. Możesz je przetestować i zobaczyć MDN.

Co należy zrobić, aby ten skrypt był zgodny z IE8?

Answer 1

Co należy zrobić, aby ten skrypt był zgodny z IE8?

Zmień go całkowicie. Na przykład, zamiast korzystania z właściwości dostępowe, użyć kombinacji normalnych właściwości i funkcje:

human.firstName = 'Saeed'; 
human.lastName = 'Neamati'; 
alert(human.getFullName()); 

Ktoś zasugerował pomocą obiektu DOM w IE i dodawanie właściwości używając Object.defineProperty(). Chociaż może to działać, bardzo polecam przeciwko takiemu podejściu z kilku powodów, przykładowo jest, że piszesz kod może nie być kompatybilna z wszystkimi przeglądarkami:

var human = document.createElement('div'); 
Object.defineProperty(human, 'firstName', { ... }); 
Object.defineProperty(human, 'lastName', { ... }); 
Object.defineProperty(human, 'children', { value: 2 }); 

alert(human.children); 
//-> "[object HTMLCollection]", not 2 

to prawda przynajmniej z Chrome. W każdym razie bezpieczniej i łatwiej jest pisać kod, który działa we wszystkich przeglądarkach, które chcesz obsługiwać. Dowolna wygoda, jaką można uzyskać dzięki możliwości pisania kodu w celu skorzystania z modułów pobierających i ustawiających, została utracona przez dodatkowy kod napisany specjalnie w programie Internet Explorer 8.

Jest to, oczywiście, oprócz zmniejszenia wydajności, fakt, że nie będziesz w stanie użyć pętli for...in na obiekcie i potencjalne zamieszanie wynikające z użycia właściwości, którą myślałeś, że zdefiniowałeś, ale która wcześniej istniała w obiekcie DOM.

Answer 2

Nie można (as Andy answered)

Najbliżej alternatywą byłoby

var human = function() { 
    var _firstName = ''; 
    var _lastName = ''; 

    return { 
     firstName: function() { 
      if (arguments.length === 1) { 
       _firstName = arguments[0]; 
      } 
      else { 
       return _firstName; 
      } 
     }, 
     lastName: function() { 
      if (arguments.length === 1) { 
       _lastName = arguments[0]; 
      } 
      else { 
       return _lastName; 
      } 
     }, 
     fullName: function() { 
      return _firstName + ' ' + _lastName; 
     } 
    }; 
}(); 

human.firstName('Saeed'); 
human.lastName('Neamati'); 

alert(human.fullName()); 

Demo na http://jsfiddle.net/gaby/WYjqB/2/

Answer 3

Sprawdź to na http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/

przyszłości i standard ECMAScript sposób uporządkowany, rozszerzania obiektów w na różne sposoby jest przez Object.defineProperty. W ten sposób Internet Explorer zdecydował się na implementację modułów pobierających i ustawiających, ale jest to niestety do tej pory dostępne tylko w przeglądarce Internet Explorer 8, a nie w żadnej innej przeglądarce internetowej. Ponadto IE 8 obsługuje go tylko w węzłach DOM, ale przyszłe wersje są planowane do obsługi w obiektach JavaScript jako .

można znaleźć przypadki testowe na tym samym miejscu w http://robertnyman.com/javascript/javascript-getters-setters.html#object-defineproperty

Object.defineProperty(document.body, "description", { 
    get : function() { 
     return this.desc; 
    }, 
    set : function (val) { 
     this.desc = val; 
    } 
}); 
document.body.description = "Content container"; 

Wynik:

document.body.description = "Content container" 

Answer 4

IE8 obsługuje pobierające i ustawiające na węzłach DOM, więc jeśli naprawdę chcesz mieć pobierające i ustawiające, możesz to zrobić:

var objectForIe8 = $("<div></div>")[0];  
Object.defineProperty(objectForIe8, "querySelector", { 
    get: function() { 
     return this.name; 
    }, 
    set: function(val) { 
     this.name = val+", buddy"; 
    } 
}); 
// notice you can overwrite dom properties when you want to use that property name 
objectForIe8.querySelector = "I'm not your guy"; 

alert(objectForIe8.querySelector); 

Zauważ, że daje to dość znaczący efekt, więc nie użyłbym tej techniki, jeśli potrzebujesz stworzyć tysiące takich obiektów. Ale jeśli nie martwisz się o wydajność tego konkretnego obiektu, to cię odpędzi. A jeśli nie dbasz o wydajność ie8 i chcesz, żeby działała, użyj tej techniki tylko dla ie8 i jesteś złoty:)