Поддержка геттера JavaScript в IE8 - PullRequest
Новая
       78

Поддержка геттера JavaScript в IE8

12 голосов
/ 17 октября 2011

Проверьте этот код. Это очень простой JavaScript-объект, который реализован с использованием Module Pattern (и вы можете увидеть живой пример на этом адресе скрипки ) 

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

Однако IE8 не поддерживает ключевые слова JavaScript get и set. Вы можете проверить это и увидеть MDN .

Что я должен сделать, чтобы этот скрипт тоже был совместим с IE8?

Ответы [ 4 ]

23 голосов
/ 17 октября 2011

Что я должен сделать, чтобы этот скрипт тоже был совместим с IE8?

Измените его полностью. Например, вместо использования свойств средства доступа используйте комбинацию обычных свойств и функций: 

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

Кто-то еще предложил использовать объект DOM в IE и добавить свойства, используя Object.defineProperty(). Хотя это может сработать, я бы настоятельно рекомендовал не использовать этот подход по нескольким причинам, например, код, который вы пишете, может быть несовместим во всех браузерах: 

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

Это верно по крайней мере для Chrome. В любом случае безопаснее и проще писать код, который работает во всех браузерах, которые вы хотите поддерживать. Любое удобство, которое вы получаете от возможности написания кода для использования методов получения и установки, было потеряно в дополнительном коде, который вы написали специально для Internet Explorer 8.

Это, конечно, помимо снижения производительности, того факта, что вы не сможете использовать цикл for...in на объекте, и потенциальной путаницы, возникающей при использовании свойства, которое вы считали определенным, но ранее существовал в объекте DOM.

8 голосов
/ 17 октября 2011

Вы не можете (, как ответил Энди )

Ближайшая альтернатива будет 

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

Демо на http://jsfiddle.net/gaby/WYjqB/2/

5 голосов
/ 09 июля 2013

IE8 поддерживает методы получения и установки на узлах DOM, поэтому, если вы действительно хотите иметь методы получения и установки, вы можете сделать это: 

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

Обратите внимание, что это дает значительный удар по производительности, поэтому я бы не стал использовать эту технику, если вам нужно создавать тысячи таких объектов. Но если вы не беспокоитесь о производительности этого конкретного объекта, он вас прикончит. И если вы не заботитесь о производительности ie8 и просто хотите, чтобы она работала, используйте эту технику только для ie8, и вы великолепны:)

4 голосов
/ 21 ноября 2012

Проверьте это на http://robertnyman.com/2009/05/28/getters-and-setters-with-javascript-code-samples-and-demos/

Будущее и стандартизированный способ ECMAScript для расширения объектов в всякие способы есть через Object.defineProperty. Вот как Internet Explorer решил реализовать геттеры и сеттеры, но это к сожалению, пока доступно только в Internet Explorer 8, а не в любой другой веб-браузер. Кроме того, IE 8 поддерживает его только на узлах DOM, но в будущих версиях планируется его поддержка на объектах JavaScript в виде хорошо.

Вы можете найти тестовые случаи на том же сайте по адресу 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";

Результат: 

document.body.description = "Content container"
...