javascript - 在 MVVM View 模型中处理应用程序范围的元素

Question

我一直在尝试寻找一些关于在使用 MVVM 进行 Web 开发时如何处理应用程序范围的元素的好资源。我正在使用 knockoutjs。

我所说的应用程序范围是指像网站导航这样的元素。也许每个页面都有一个登录框、搜索框、页脚等。

这些应该放在一个单独的 View 模型中吗？或者你应该从包含这些的基本 View 模型中派生每个页面的 View 模型？还是应该将这些属性一起排除在 View 模型之外？

提前致谢。

Answer 1

考虑像对待业务组件一样对待所有支持组件(菜单、页脚等)。此外，我建议无论 UI 组件的类型如何，每个 UI 组件都有单独的 View 模型。这会使您的组件高度松散耦合。

例如，菜单可能有自己的 View 模型(不属于任何全局 View 模型)。现在，您可以使用 PubSub 库来实现发布者/订阅通知，以便在不同的 UI 组件( View 模型)之间进行松散耦合的通信，您的业务组件可以根据事件请求显示/隐藏自己。

但特别是对于实现菜单组件，我建议使用可以响应 URL 更改(URL 的 hashtag 部分)的路由器库。然后，当用户在主菜单(简单的 anchor 标记)上导航时，您可以简单地更改 URL，您的组件将被路由器库激活/停用。这将使您可以添加书签并使用浏览器历史记录按钮。

看看http://boilerplatejs.org这是大规模 JavaScript 开发的引用架构。它在其示例应用程序中实现了以上所有内容。它使用 UrlController 根据 URL 更改激活/停用组件，而 DomController 用于将组件静态放置在 DOM 本身上(例如，用于菜单、页脚、标题)。它对大多数示例 UI 组件使用 knockoutjs。

免责声明:我是 BoilerplateJS 的创始人