模板与 DOM 创建 - 高度动态的界面

Question

构建一个浏览器游戏 我从 PHP 转向了 JavaScript，现在我也想在服务器端使用它。 由于我将要求用户以任何方式使用 JavaScript，因此我将广泛使用它。不过我想以面向对象的方式使用。

考虑到 MVC，模型将同时用于客户端和服务器端。视图仅在客户端使用。 该界面分为多个部分：主侧菜单、主要内容和一些小部件。我将以我已经完成的部分为例： 菜单分为三个类别，具有多个条目。每个条目都是一个带有附加操作的链接（例如切换内容）。

// menuview:
var self = new View();
var generalMenu = new MenuCategory('generalmenu')
    .addEntry(new MenuEntry('overview', new Action()))
 .addEntry(new MenuEntry('buildings'))
    .addEntry(new MenuEntry('resources'))
// [..more categories..]
self.toData = function() {
    return {
        id: this.id,
        cat: [generalMenu.toData(), infosMenu.toData(), userMenu.toData()]
    };
};

目前 View 是一个带有 toData() 方法的组合体，用于为模板解析器创建数据（自制，简单但支持迭代）。并且操作在创建后会附加。我使用 jQuery 作为框架：

self.show = function(callback) {
    $tpl(this.tpl).parse(this.toData()).lang('main').toHTML(function(html) {
        var el = $(html);
        el.find('a').click(function (e) {
            MenuEntry.actionHandler.execAction(e.target.id);
            return false;
        });
        el.appendTo('#'+self.target);
        callback && callback();
    });
    return this;
};

我声明了一个动作处理程序以避免迭代链接。

我对这个解决方案感觉不太好，它不够灵活。我想将视图视为真正的组合，而不是有很多奇怪的依赖关系。另外，如果我更改了一部分，我必须重新解析整个视图。嗯，在这个例子中，这并不明显，因为菜单在运行时不会改变，但界面的其他部分会改变。

现在，终于回答我的问题：有更好的解决方案吗？ 就像让 dom 引用分布在视图上一样，每个菜单项都有它自己的引用和直接附加的操作？如果我不再使用模板，我会失去什么样的灵活性？

Answer 1

我决定不使用模板解析器。每个视图都存储其节点，并且如果收到更新数据的通知，则可以直接操作它。