为在对象上调用 appendchild 时创建默认行为-解网

问：

我正在为一些 HTML 元素创建包装类，我想知道是否有办法在调用 .appendChild 时为我的类指定默认行为。

// Very simple textbox wrapper class
function MyWrapperClass(){
    this.input = document.createElement('input'); // textbox
}
MyWrapperClass.prototype.setValue = function(v){
    this.input.value = v;
}

// Add instance of my wrapper class to DOM
var foo = new MyWrapperClass();
document.body.appendChild( foo.input ); // Works fine.

这已经足够好用了。但是我试图将我的代码抽象到足以达到这个目的：

// Add instance of my wrapper class to DOM
var foo = new MyWrapperClass();
document.body.appendChild( foo );

其中 foo.input 在 foo 上调用 appendChild 时自动返回。

现在，我意识到我可以修改我的包装类以返回其构造函数中的输入元素，但是当我这样做时，我将失去调用任何类方法的能力：

// Modified wrapper, returns input on instancing
function MyWrapperClass(){
   this.input = document.createElement('input'); // textbox
   return this.input
}

var foo = new MyWrapperClass();
foo.setValue('Hello'); // ERROR: html input element has no setValue method

那么有没有办法覆盖对象的默认行为并在 foo 上调用 .appendChild 时返回 foo.input？

dom unobtrusive-javascript

function MyWrapperClass(){
   this.input = document.createElement('input'); // textbox
   return this;
}
MyWrapperClass.prototype.setValue = function(v){
    this.input.value = v;
}
MyWrapperClass.prototype.append = function(){
    document.body.appendChild(this.input)
}


var foo = new MyWrapperClass();
foo.setValue('test');
foo.append();

请看这个小提琴： http://jsfiddle.net/yJ44E/
注意：您还可以更改方法，以便接受节点作为要在其中附加元素的参数。append()

为在对象上调用 appendchild 时创建默认行为

Create default behavior for when appendchild is called on an object

评论

评论