javascript - 使用 JavaScript 将自定义对象添加到文档中

Question

我尝试创建一个包含图像的自定义对象，然后将该对象添加到文档中。 例如:

function ImageObject(path, name, type) {
   this.name = name;
   this.type = type;
   var img = new Image();
   addListener(img, 'load', function () {
      // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
   });
   img.src = path;
}
var newImg = new ImageObject(test.jpg, 'my test', 'background');

然后我想将对象添加到文档中，就像添加普通图像一样，并在页面上查看加载的图像。类似于:$(#container).append(newImg)。怎么可能做到这一点？谢谢。

Answer 1

您可以添加Image到页面(通过 jQuery 的 append 或任何其他页面)，但不是您的 ImageObject实例。

不过，您可以使用 jQuery 的 data将图像元素与您的 ImageObject 相关联，例如(假设 this 引用 ImageObject 实例):

$(img).data("owner", this).appendTo("#container");

然后你可以使用$(img).data("owner")得到那个ImageObject如果您引用了image，请返回元素。

我建议使用data而不仅仅是在image上使用expando属性因为当元素从 DOM 中删除时，jQuery 会清理与元素关联的数据(假设删除是通过 jQuery 进行的)。如果您使用 Expando 属性(只需在 image 上设置您自己的任意属性)，则在 IE 上， image 都不会。也不是你的ImageObject当您从 DOM 中删除图像时，实例将会被清理，除非您明确将属性设置为 null (因为 IE 不能正确处理 DOM 元素和 JavaScript 对象之间的循环引用)。