Question

我想创建可以重复用于为Web应用程序制作复杂用户界面的javascript对象我已经使用原型创建了一个javascript对象，上面的示例工作正常。不适合使用。

var MainWindow = function(width, height){
    this.width = width;
    this.height = height;
    this.html = '';

MainWindow.prototype = {

    toString: function(){
        this.html += '<div id="main_div" style="width:' + this.width + 'px; height:' + this.height + 'px; background-color:#CCC;"></div>';
        return this.html;
    }
}

var newWindow = new MainWindow(400,400);
document.write(newWindow);

现在初始化和创建一个新对象，这很好。它不能以我想要的方式使用

现在我已经为此创建了另一个例子： -

var Button(text){
    this.text = text;
    this.element = '';
}

Button.prototype = {
    this.element = document.createElement("button");
    this.element.innerHTML = this.text;
    return this.element;
}


var x = document.getElementById("main_div");
element = new Button("ashish");
x.appendChild(element);

第二个例子是错误的，并且没有工作在那里缺少某些东西，所以我怎样才能使它工作。并创建一个新元素并按照我想要的方式追加

Answer 1

var Button = function(text){
    this.text = text;
    this.element = '';
}

Button.prototype.createButton = function()
{
    this.element = document.createElement("BUTTON");
    this.element.innerHTML = this.text;
    return this.element;
}
var x = document.getElementById("main_div");
element = new Button("ashish"); // your Button should be function object
element=element.createButton(); // you should call the property you added
x.appendChild(element);

JSFIDDLE LINK

javascript原型创建一个新的用户界面元素对象

1 个答案: