Question

我想在Javascript中创建一个关联数组，其中我会有一堆指向Image对象的字符串键。原因是我想要预先加载并动态控制大量图像，而不会用数百个全局变量污染全局空间。例如，要避免以下情况：

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

相反，我只想通过一些可识别的字符串名称来调用图像，以使代码更易于阅读，并且在全局空间中只有一个_images变量。

首先，我尝试使用Array执行此任务，但却发现没有语法用于指定带有字符串键的Array的实例化。进一步调查导致我here，其中Array被用作关联数组可能是有害的。

以前，我假设Javascript数组类似于 LUA表，其中有一个索引部分（其大小保存在length属性中）和一个哈希部分（索引字符串）。显然，事实并非如此。相反，在指定“字符串键”时，它实际上只是指定对象属性的简写。

因此，我终于走上了这条道路：

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

在Image构造函数中找到非w3schools规范，一个默认类型，本身很难（它上面有question！）。显然，构造函数只采用可选的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")      
}

这导致我question。似乎有这样的耻辱，有可能，但不太可能在所有浏览器中工作，并且扩展默认类型是禁忌。

这让我想到了我的问题：

扩展 Image构造函数真的无法在某些浏览器中运行吗？
是否有其他Javascript对象符号表示我忽略了这一点？

OR

我只是不得不列出所有属性，新的Image（）调用，然后是一个单独的部分，再次列出所有的键和源？

OR

我应该只使用辅助功能，例如：

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

Image对象的关联数组的简写

2 个答案: