JavaScript工厂模式与OO继承

JavaScript工厂模式与OO继承,javascript,oop,inheritance,Javascript,Oop,Inheritance,为什么使用多页“类型”覆盖数组中的所有项,但在使用“基本类型”工具时却不覆盖 注释/取消注释行52(js底部的9)以进行测试 JavaScript: 定义两种类型,一种是作为抽象基类型“Tool”,另一种是从工具“Multipage”继承的具体类型 “Model”对象定义动态创建的有效类型,getNewInstance()函数返回有效类型的新实例 viewmodel“vmDesigner”包含我们创建的多页的可观察数组 // Contsructor - Inherited var Tool =

为什么使用多页“类型”覆盖数组中的所有项,但在使用“基本类型”工具时却不覆盖

注释/取消注释行52(js底部的9)以进行测试

JavaScript

定义两种类型,一种是作为抽象基类型“Tool”,另一种是从工具“Multipage”继承的具体类型

“Model”对象定义动态创建的有效类型,getNewInstance()函数返回有效类型的新实例

viewmodel“vmDesigner”包含我们创建的多页的可观察数组

// Contsructor - Inherited
var Tool = function () {
    var self = this;

    //Public Fields
    self.id = ko.observable().extend({
        required: true
    });
    self.type = ko.observable();
    self.xPos = ko.observable();
    self.yPos = ko.observable();
    self.xSize = ko.observable();
    self.ySize = ko.observable();
};

var MultiPage = function () {
    var self = this;
    self.tools = ko.observableArray();
};


// Inherit from Tool.
MultiPage.prototype = new Tool();
$.extend(MultiPage, Tool);



function Model(tool, multipage) {
    var types = {
        tool: tool,
        multipage: multipage
    };
    return types;
}
var model = new Model(Tool, MultiPage);

function getNewInstance(type, initisations) {
    var _Type = model[type];
    return (_Type ? new _Type().id(initisations.id) : null);
}

function vmDesigner() {
    var tools = ko.observableArray();
    return {
        tools: tools
    };
}

var vd = new vmDesigner();

var type = 'multipage';
//var type = 'tool';

var dataItem = new Tool(); //tmp data

vd.tools.push(getNewInstance(type, { id: 1, xPos: 50, yPos: 50 }));
vd.tools.push(getNewInstance(type, { id: 2, xPos: 60, yPos: 60 }));
vd.tools.push(getNewInstance(type, { id: 3, xPos: 70, yPos: 70 }));

ko.applyBindings(vd);
HTML

标记绑定到viewmodel并显示工具数组中的所有项

<div id="view-design" data-bind="foreach: tools">
  Tool:<span data-bind="text: id"></span>
  <br />
</div>

工具:


请在帖子中包含所有相关代码,不要只包含指向jsbin的链接。只有链接的帖子在堆栈交换上,因为你的帖子应该独立于任何其他资源;想想JSBN将来会发生什么事!添加代码,删除链接