我想在 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 .耻辱似乎是,它是可能的,但不太可能在所有浏览器中工作,并且扩展默认类型是禁忌。
这让我想到了我的问题:
- 扩展
Image
构造函数真的不能在某些浏览器中工作吗? - 是否有一些我忽略的其他 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")
}
最佳答案
辅助函数可能是您最好的选择,因为它将所有重复代码组合到一个函数中。
就我个人而言,我会这样做:
(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")
};
})();
具有较短的属性名称有助于保持代码合理大小,同时不会损失太多可读性。
关于javascript - 图像对象关联数组的简写,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9727540/