Compatibilidad con obtención de JavaScript en IE8

Question

Echa un vistazo a este código. Se trata de un objeto muy simple JavaScript que se implementan utilizando Module Pattern (y se puede ver el ejemplo vivo en 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); 

Sin embargo, IE8 no soporta JavaScript get y set palabras clave. Puede probarlo y ver MDN.

¿Qué debo hacer para que este script también sea compatible con IE8?

Answer 1

¿Qué debo hacer para que este script también sea compatible con IE8?

Cambie por completo. Por ejemplo, en lugar de utilizar las propiedades de descriptor de acceso, utilizar una combinación de propiedades y funciones normales:

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

Alguien sugirió el uso de un objeto DOM en IE y la adición de las propiedades usando Object.defineProperty(). Si bien puede trabajar, lo recomiendo mucho en contra de este enfoque por varias razones, una es que el código que escriba puede no ser compatible en todos los navegadores ejemplo:

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 

Esto es cierto de al menos Chrome. De cualquier manera, es más seguro y fácil escribir código que funcione en todos los navegadores que desee. Cualquier conveniencia que obtenga de poder escribir código para aprovechar getters y setters se ha perdido en el código adicional que escribió específicamente para Internet Explorer 8.

Esto es, por supuesto, además de la reducción en el rendimiento, el hecho de que no podrá usar un bucle for...in en el objeto y la confusión potencial que se produce cuando utiliza una propiedad que pensó que ya había definido pero que ya existía en el objeto DOM.

Answer 2

Puede no (as Andy answered)

La alternativa más cercana sería

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 en http://jsfiddle.net/gaby/WYjqB/2/

Answer 3

comprobarlo en http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/

El futuro, y el estándar ECMAScript de manera extendida, de extender objetos en todo tipo de formas es a través de Object.defineProperty. Así es como Internet Explorer eligió implementar getters y setters, pero es desafortunadamente hasta ahora solo está disponible en Internet Explorer 8, y no en en cualquier otro navegador web. Además, IE 8 solo lo admite en nodos DOM, pero las versiones futuras de están planificadas para admitirlo en objetos de JavaScript como .

Puede encontrar los casos de prueba en el mismo sitio en 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"; 

Resultado:

document.body.description = "Content container" 

Answer 4

IE8 es compatible con captadores y definidores de nodos DOM, por lo que si realmente quiere tener getters y setters, puede hacer esto:

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); 

Tenga en cuenta que esto le da un impacto de rendimiento algo significativo, por lo que no utilizaría esta técnica si necesita crear miles de objetos como este. Pero si no te preocupa el rendimiento de este objeto en particular, te matará. Y si no le importa el rendimiento ie8, y solo quiere que funcione, use esta técnica solo para ie8 y está de oro:)