淘汰赛：可扩展的主题组件

Question

我正在改进一个基于淘汰赛的网络应用程序，它将有不同的主题。主题之间的变化可以在视图和功能上。某些功能是特定于主题的，而其他功能可以在 2 个或更多主题中通用，但不是全部。还有其他功能可以是所有主题。

我们的目标是通过消除代码重复、具有适当的结构、松散的功能和改进的可测试性来提供可维护性的框架。

我正在设想包含可重用功能的组件。我称它们为 "base" 组件。这些组件可以通过配置参数进行配置。这些组件并不特定于任何主题。

我想制作一个允许：

• 要包含在主题中的基本组件。
• 主题可以提供基础组件的主题特定视图，这将覆盖基础组件提供的视图。
• 主题可以提供特定于主题的配置参数。
• 主题可以扩展基本组件的功能。扩展组件将具有基础组件的所有功能
• 主题可以具有特定于主题的组件。
• 组件依赖由 RequireJS 管理
• 框架应支持通过 r.js 进行优化
• 每个组件都应单独进行单元测试
• 组件之间的通信基于发布-订阅机制，例如ko.postbox

为了实现上述需求，我使用的是Knockout 3.2+中提供的components支持

我已经能够处理特定于主题的视图，但无法找到扩展主题中“基础”组件的方法。

欢迎对此提出任何想法。

---

我已经创建了两个 KO 组件：“base-menu”和“menu”。

“基本菜单”组件是：

define("base-menu", ['knockout'], function (ko) {

function ViewModel(params) {

    // this parameter should be configurable in theme
    var name = params.name || "No Name";

    this.name = ko.observable(name);

    this.dispose = function () {
        console.log("base dispose");
    }

};

return {
    viewModel: ViewModel,
    template: '<h2><span data-bind="text: name"></span> Settings in BASE</h2>'
};
});

“菜单”组件是：

// TODO: this component should "inherit" from base-menu, so that it has a "name" observable

define("menu", ['knockout'], function (ko) {

function ViewModel(params) {
    this.sections = params.sections || [];
    this.selectedSection = ko.observable();

    this.dispose = function () {
        // TODO: this should call base-menu's dispose function
        console.log("theme dispose");
    }

};

return {
    viewModel: ViewModel,
    template: '<h2><span data-bind="text: name"></span> Settings in THEME</h2><ul class="nav nav-pills" data-bind="foreach: sections"><li data-bind="css: { active: $parent.selectedSection() === $data }"><a href="#" data-bind="text: $data, click: $parent.selectedSection"></a></li></ul>'
};
});

“menu”组件应该从“base-menu”组件“继承”，以便它有一个可观察的“name”。

我怎样才能做到这一点？

JSFiddle 给出了可编辑的示例

Answer 1

您可以通过使用原型继承来实现这一点——尽管它有点难看，尤其是没有super 概念来调用基本方法。您可能会考虑使用 ES2015 并通过 Babel 对其进行转译，以便获得更清晰的类语法。

// TODO: this component should "inherit" from base-menu, so that it has a "name" observable

define("menu", ['knockout', 'base-menu'], function (ko, baseMenu) {

function ViewModel(params) {
    baseMenu.viewModel.call(this, params);
    this.sections = params.sections || [];
    this.selectedSection = ko.observable();

    this.dispose = function () {
        baseMenu.viewModel.prototype.dispose.call(this);
        // TODO: this should call base-menu's dispose function
        console.log("theme dispose");
    }

};
ViewModel.prototype = new baseMenu.viewModel();

return {
    viewModel: ViewModel,
    template: '<h2><span data-bind="text: name"></span> Settings in THEME</h2><ul class="nav nav-pills" data-bind="foreach: sections"><li data-bind="css: { active: $parent.selectedSection() === $data }"><a href="#" data-bind="text: $data, click: $parent.selectedSection"></a></li></ul>'
};
});

// menu.{js|ts|es6}
// Same thing in ES2015/ES6/TypeScript
import ko, { observable } from 'knockout;
import { viewModel as BaseMenu } from 'base-menu';

export class viewModel extends BaseMenu {
    constructor(params) {
        super(params);
        this.sections = params.sections || [];
        this.selectedSection = observable();
    }
    dispose() {
        super.dispose();
    }
};

export var template = 'Your template here';