Question

我正在构建一个JavaScript应用程序，我在其中有一个主JS对象，我将为此帖子调用App。

App对象具有modules属性，该属性包含一组Module对象，其中模块名称为App.modules上的对象属性名称。

module是我的应用的用户贡献附加组件，它将使用Prototypes扩展CoreModule个对象。

App.modules对象会像这样向对象添加新模块......

App.modules[moduleName] = module-object-instance;

因此，如果注册了1个模块，我所描述的总共有3个对象....

应用
CoreModule
userBuiltMOdule

在我的App代码中，我希望有registerModule()函数执行此操作...

// this will create a new instance of "moduleName" and add it to this.modules[moduleName] object
// for example I am hardcoding the module name as theres 1 module now
registerModule: function(moduleName, moduleClass) {

    // create new instance of module
    this.modules[moduleName] = new bookmarksModule();

    // run moduleName.init() function from the main App 
    this.modules[moduleName].init();

    console.log('App.registerModulemoduleName) function ran and created new instance of '+moduleName+'object');
},

现在要从我的CoreModule扩展用户模块，我在名为CoreModule的{{1}}上有一个帮助函数，用户模块可以调用它来组合用户模块的属性和核心模块进入用户模块的原型......

createModule

现在要创建一个用户模块，我这样做......

createModule: function(moduleObject){
    var moduleCoreInstance = Object.create(this);
    // add sub-modules properties and functions to CoreModule 
    Object.keys(moduleObject).forEach(function(key){
        moduleCoreInstance[key] = moduleObject[key];
    });
    return moduleCoreInstance;
},

var bookmarksModule = ModuleCore.createModule({ name: 'bookmarks', init: function(){ console.log('bookmarksModule init() function ran from App object '+this.name+')'); } });现在有bookmarksModule，name，init()

现在我对这个系统的问题......

在我的App.registerMOdule（）函数中我无法使用：

registerSidebar() from the CoreModule

这会产生如下错误：

// create new instance of module
this.modules[moduleName] = new bookmarksModule();

如果我用这个代码切换代码，它可以工作：

Uncaught TypeError: bookmarksModule is not a constructor
    at App.registerModule (yuzulat.js:51)
    at App.init (yuzulat.js:43)

其中this.modules[moduleName] = bookmarksModule;是调用bookmarksModule

的用户模块

所以我的问题是，有没有办法像我现在一样从var bookmarksModule = ModuleCore.createModule()扩展，但允许我的CoreModule创建用户模块的新实例？

以下是我的完整示例代码...

JSBin演示 - http://jsbin.com/yuzulat/1/edit?js,console,output

App.registerModule()

Answer 1

让用户创建一个简单的构造函数并为App创建一个addModule函数，而不是使构造函数生成直接继承coremodule的模块。

此函数应该接受一个对象，使其继承coreModule并立即将其添加到模块列表中。

App = {
    // ...

    addModule: function(name, module) {
        // make module inherit coreModule
        this.modules[name] = module;
    },

    // ...
};

function MyModule() {
    // Stuff
}

App.addModule(new MyModule());

模块化系统中JavaScript原型的继承

1 个答案: