сокращение для ассоциативного массива объектов Image

Question

Я хотел создать ассоциативный массив в Javascript, в котором у меня была бы куча строковых ключей, указывающих на Image объекты.Причина этого в том, что я хотел начать предварительную загрузку и динамическое управление большим количеством изображений, не загрязняя глобальное пространство сотнями глобальных переменных.Например, чтобы избежать следующего:

var img1, img2, img3, ... , img99; 
img1 = img2 = img3 = ... = img99 = new Image();

Вместо этого я просто хотел вызвать изображение по некоторому идентифицируемому имени строки, чтобы сделать код проще для чтения и иметь только одну переменную _images вглобальное пространство.

Сначала я попытался использовать Array для этой задачи, но обнаружил, что не существует синтаксиса для указания создания экземпляра Array со строковыми ключами.Дальнейшее расследование привело меня сюда , что привело к тому, что использование 1014 * в качестве ассоциативного массива может быть вредным.

Ранее я предполагал, чтоМассивы Javascript были похожи на таблицы LUA , в которых была проиндексированная часть (размер которой был сохранен в атрибуте length) и часть hash (индексированная строка).Видимо, это не так.Вместо этого, при указании «строкового ключа» на самом деле это просто сокращение для указания атрибута объекта .

Таким образом, я наконец-то повел по этому пути:

var _images = {
    "button_mouseover": new Image(),
    "button_mouseout": new Image(),
    "button_mousedown": new Image(),
    "button_mouseup": new Image()       
}

В котором я создаю объект (чья ссылка хранится в _images) с рядом свойств, каждое из которых хранит ссылку на экземплярный Image объект.

Теперь нужно заполнить атрибут src всехизображения, мягко говоря, довольно многословны:

_images["button_mouseover"].src = "fsfs.gif";
_images["button_mouseout"].src = "gsgs.gif";
_images["button_mousedown"].src = "agag.gif";
_images["button_mouseup"].src = "ggg.gif";

Найти спецификации не-w3schools в конструкторе Image, тип по умолчанию , было трудно само по себе (был вопрос о том, где это было!).По-видимому, конструктор принимает только необязательные width и height, но без атрибута источника.

Так что, естественно, следующим маршрутом, который я рассмотрел, была возможность расширения Image конструктор, чтобы я мог немного сократить это до:

var _images = {
    "button_mouseover": new Image("fsfs.gif"),
    "button_mouseout": new Image("gsgs.gif"),
    "button_mousedown": new Image("agag.gif"),
    "button_mouseup": new Image("ggg.gif")      
}

Это привело меня к этому вопросу .Казалось, стигма в том, что это возможно, но вряд ли сработает во всех браузерах и что расширение типов по умолчанию - это табу.

Это подводит меня к моим вопросам:

1. Является ли расширение конструктор Image действительно не будет работать в некоторых браузерах?
2. Существуют ли другие нотации объектов Javascript, чтобы сделать это, что я пропустил?

ИЛИ

Я просто застрял с необходимостью перечислить все атрибуты, новые вызовы Image (), а затем целый отдельный раздел со списком всех ключей и источников снова?

ИЛИ

Должен ли я просто использовать вспомогательную функцию , например:

function Image2( src ) {
    var t = new Image();
    t.src = src;
    return t;   
}

var _images = {
    "button_mouseover": Image2("fsfs.gif"),
    "button_mouseout": Image2("gsgs.gif"),
    "button_mousedown": Image2("agag.gif"),
    "button_mouseup": Image2("ggg.gif")     
}

Answer 1

Вспомогательная функция, вероятно, является вашей лучшей ставкой, поскольку она группирует весь повторяющийся код в функцию.

Лично я бы сделал что-то вроде:

(function() {
    var img = function(src) {
        var t = new Image();
        t.src = src;
        return t;
    };
    window._images = {
        "over": img("fsfs.gif"),
        "out": img("gsgs.gif"),
        "down": img("agag.gif"),
        "up": img("ggg.gif")
    };
})();

Более короткие имена свойств могут помочь сохранить разумный размер кода, не теряя при этом слишком читабельности.

Answer 2

Последнее решение самое хорошее.Объекты Javascript эквивалентны ассоциативным массивам или хеш-таблицам.В качестве альтернативы вы можете использовать функциональную библиотеку, например underscore для отображения массива:

var refs = {
  "button_mouseover": "fsfs.gif",
  "button_mouseout": "gsgs.gif",
  "button_mousedown": "agag.gif",
  "button_mouseup": "ggg.gif"     
}
var _images = _.map(refs, function(value) {
  var image = new Image();
  image.src = value;
  return image;
});