JavaScript가있는 문서에 사용자 지정 개체 추가

Question

image가 포함 된 사용자 지정 개체를 만든 다음이 개체를 문서에 추가하려고합니다. 예를 들어 :

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

당신은 당신 된 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에 추가 할 수 있어야한다.

Answer 2

생성 된 DOM 개체를 어딘가에 노출 시키려면 함수를 수정해야합니다. 현재 함수에 적용되는 변수이며 해당 함수 외부에서 액세스 할 수 없습니다.

그런 다음 표준 DOM 방법 (appendChild, insertBefore 등) 중 하나를 사용합니다.

사용자 지정 개체는 DOM 개체가 아니기 때문에 문서 자체에 추가 할 수 없습니다.

Answer 3

Image을 페이지에 추가 할 수 있습니다 (jQuery의 append 또는 기타 여러 항목을 통해). ImageObject 인스턴스는 추가 할 수 없습니다.

그래도 할 수있는 일은 jQuery의 data을 사용하여 이미지 요소를 ImageObject과 연결하는 것입니다. (this 가정하면 ImageObject 인스턴스를 참조) : 당신이 image 요소에 대한 참조가있는 경우

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

는 그런 다음 다시 그 ImageObject를 얻을 수 $(img).data("owner")를 사용할 수 있습니다.

image에서 expando 속성을 사용하는 것보다는 data을 사용하는 것이 좋습니다. 이유는 jQuery가 요소가 DOM에서 제거 될 때 요소와 관련된 데이터를 정리하기 때문입니다 (제거가 jQuery를 통해 이루어지는 경우). IE에서 확장 속성을 대신 사용하는 경우 (image에 임의의 속성을 설정 한 경우) 으로 명시 적으로 설정하지 않으면 image 및 ImageObject 인스턴스가 DOM에서 이미지를 제거 할 때 정리되지 않습니다. IE는 DOM 요소와 JavaScript 객체 간의 순환 참조를 제대로 처리하지 않기 때문에).

Answer 4

여기에서는 형식 인수를 고려하지 않았습니다. background-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) 

Answer 5

개체에 this.appendTo 함수를 추가하기 만하면됩니다.

Answer 6

생성자의 목적은 개체를 초기화하는 것입니다. 또한 jQuery가 아닌 사용자 정의 객체를 제어 할 수 있습니다.

I는 다음과 같이 할 것이다 :

이

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