javascript - 图像对象关联数组的简写

Question

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

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

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

起初，我尝试使用 Array 来完成这项任务，却发现没有语法可以指定带有字符串键的 Array 的实例化。进一步调查引导我here甚至说 Array 用作关联数组 可能有害。

以前，我假设 Javascript 数组类似于 LUA 表，其中有一个索引部分(其大小保存在 length 属性中)和一个 < em>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";

在 Image 构造函数上找到非 w3schools 规范，默认类型，本身就很难(在它所在的位置有一个 question!)。显然，构造函数只采用可选的 width 和 height，但没有 source 属性。

因此，很自然地，我考虑的下一个途径是扩展 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 .耻辱似乎是，它是可能的，但不太可能在所有浏览器中工作，并且扩展默认类型是禁忌。

这让我想到了我的问题:

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

具有较短的属性名称有助于保持代码合理大小，同时不会损失太多可读性。