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

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

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）

。这怎么可能呢？谢谢。

您需要修改函数以在某处公开创建的DOM对象。目前，它只是一个作用于函数的变量，在该函数之外是不可访问的

然后使用标准DOM方法之一（，等等）

---

您的自定义对象不是DOM对象，无法添加到文档本身。

您需要修改函数以在某处公开创建的DOM对象。目前，它只是一个作用于函数的变量，在该函数之外是不可访问的

然后使用标准DOM方法之一（，等等）

---

您的自定义对象不是DOM对象，无法添加到文档本身。

您可以将

图像

添加到页面（通过jQuery的

append

或其他任何一个），但不能添加

图像对象

实例

但是，您可以使用jQuery的

数据

将图像元素与

ImageObject

关联，例如（假设

此

引用

ImageObject

实例）：

然后，如果有对

图像

元素的引用，则可以使用

$（img）.data（“所有者”）

获取该

图像对象

---

我建议使用

数据

而不仅仅是在

图像

上使用expando属性，因为当元素从DOM中删除时，jQuery会清理与元素关联的数据（前提是通过jQuery删除）。如果在IE上使用expando属性（只需在

图像

上设置自己的任意属性），则从DOM中删除图像时，

图像

和

图像对象

实例都不会被清除，除非您显式将属性设置为

null

（因为IE不能正确处理DOM元素和JavaScript对象之间的循环引用）。

您可以将

图像添加到页面中（通过jQuery的
append
或其他任何一个），但不能添加
图像对象
实例

但是，您可以使用jQuery的
数据
将图像元素与
ImageObject
关联，例如（假设
此
引用
ImageObject
实例）：

然后，如果有对
图像
元素的引用，则可以使用
$（img）.data（“所有者”）
获取该
图像对象

我建议使用
数据
而不仅仅是在
图像
上使用expando属性，因为当元素从DOM中删除时，jQuery会清理与元素关联的数据（前提是通过jQuery删除）。如果改用expando属性（只需在
图像
上设置您自己的任意属性），在IE上，当您从DOM中删除图像时，
图像
和
图像对象
实例都不会被清除，除非您显式地将属性设置为
null
（因为IE不能正确处理DOM元素和JavaScript对象之间的循环引用）。
我不考虑这里的type参数。如果需要后台img，应该将DIV作为引用传递并设置background属性

function ImageObject(path, name, type) {

        var img = new Image();
        addListener(img, 'load', function () {
            // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
        });
        img.src = path;

        return img;
    }

var newImg = new ImageObject(test.jpg, 'my test', 'background');

$("#container").append( newImg )

这里我不考虑类型参数。如果您想要一个后台img，您应该将DIV作为引用传递，并设置background属性

function ImageObject(path, name, type) {

        var img = new Image();
        addListener(img, 'load', function () {
            // RESIZE THE IMAGE AND DO OTHER MANIPULATIONS HERE
        });
        img.src = path;

        return img;
    }

var newImg = new ImageObject(test.jpg, 'my test', 'background');

$("#container").append( newImg )

您可以使ImageObject（）函数返回img：

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;
    return img;
}

然后，据我所知，您应该能够将其附加到DOM。
您可以让ImageObject（）函数返回img：

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;
    return img;
}

然后，据我所知，您应该能够将其附加到DOM中。
只需在对象中添加一个
this.appendTo
函数

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;
       this.appendTo = function(id){
             document.getElementById(id).appendChild(img);
            };
    }

var newImg = new ImageObject('test.jpg', 'my test', 'background');
newImg.appendTo("container");

只需在对象中添加一个
this.appendTo
函数

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;
       this.appendTo = function(id){
             document.getElementById(id).appendChild(img);
            };
    }

var newImg = new ImageObject('test.jpg', 'my test', 'background');
newImg.appendTo("container");

构造函数的目的只是初始化一个对象，而且您还希望自定义对象处于控制状态，而不是jQuery

我想这样做：

function ImageObject(path, name, type) {
        this.name = name;
        this.type = type;
        this.path = path;
}

ImageObject.prototype.renderTo = function( target ) {
        var img = new Image();
        this.img = img;
        img.src = this.path;
        $(img).load( $.proxy( this.loaded, this )) ;
        $(img).appendTo(target);    
};

ImageObject.prototype.loaded = function(e) {
    this.width = e.currentTarget.width;
    this.height = e.currenTtarget.height;
    //Resize
};

var a = new ImageObject( "image.png", "image", "png" );

$(document).ready(function() {
    a.renderTo("body");
});

构造函数的目的只是初始化一个对象，而且您还希望自定义对象处于控制状态，而不是jQuery

我想这样做：

function ImageObject(path, name, type) {
        this.name = name;
        this.type = type;
        this.path = path;
}

ImageObject.prototype.renderTo = function( target ) {
        var img = new Image();
        this.img = img;
        img.src = this.path;
        $(img).load( $.proxy( this.loaded, this )) ;
        $(img).appendTo(target);    
};

ImageObject.prototype.loaded = function(e) {
    this.width = e.currentTarget.width;
    this.height = e.currenTtarget.height;
    //Resize
};

var a = new ImageObject( "image.png", "image", "png" );

$(document).ready(function() {
    a.renderTo("body");
});

哇，很多答案，谢谢，我真的不知道哪一个是正确的。如果我的目的是以后获取该对象并调用该对象中的函数，那么哪一个是最好的选择？哇，很多答案，谢谢，我真的不知道哪一个是正确的。如果我的目的是以后获取该对象并调用该对象中的函数，那么哪一个不是正确的他是最好的选择吗？