我什么时候应该使用KnockoutJS组件vs.模板



所以试着用KnockoutJS 3.2弄脏我的手。我已经阅读了文档,我已经成功地实现了我当前项目中的组件。我没有使用AMD,所以我只是使用脚本元素来保存视图。

我的问题是:如果我不使用异步加载功能,使用组件而不是模板有任何实际的区别吗?

两者的总体描述

正如另一个答案所述,模板只是一段可以绑定到视图模型或视图模型部分的HTML。组件由模板和相应的视图模型组成。此外,这个视图模型除了可观察对象之外,还可以包括一些简单的业务逻辑和与服务器通信的功能。

耦合和封装

另一个重要的区别是耦合。模板绑定到主视图模型,并且绑定到主视图模型的可观察对象,因此它与视图模型高度耦合:视图模型的更改将破坏模板,反之亦然。所以,如果你在几个地方重用一个模板,并且你改变了它,你必须纠正相应的视图模型。

组件绑定到它自己的视图模型。只有当主视图模型提供了参数时,它才会耦合到主视图模型。这意味着你可以很容易地改变组件模板和组件视图模型,而且,如果没有参数,或者你不改变它们,没有什么会被破坏。

所以使用组件有助于解耦和模块化。

主视图模型与组件之间的通信

最后一部分是一把双刃剑:如果主视图模型和模板或组件之间有高度的交互,那么使用模板就容易得多,因为所有的逻辑和属性都保存在主视图模型中,并且交互很容易实现。如果你使用一个组件,你需要提供复杂的参数,或者甚至做一些东西来允许组件向主视图模型公开功能。

多态性

应用程序的某些部分需要不同的行为和可视化来解决相同类型的任务并不奇怪。例如,假设您必须在应用程序中实现一个支付系统:如果您接受paypal和信用卡支付,则有两种不同的可视化和功能。如果使用模板,则需要在主视图模型中拥有每个支付系统的特定实现。如果使用组件,它们将共享一个公共接口(参数),但每个组件都有自己的实现。如果明天你必须包含一个新的支付系统,那么用公共接口实现一个新组件将是很容易的。

注意:注意最后一段

绑定在模板的情况下,绑定不是在模板级别完成的,而是在模板内部完成的。也就是说,模板中的每个元素都必须绑定到主视图模型的可观察对象上。在组件的情况下,绑定要简单得多:最多只需要组件名称和参数(如果存在的话)。

组件注册和自定义标签

如果你注册了组件,你可以使用自定义标签。这使得视图更容易阅读和理解:不用在绑定中指定组件名称,而是使用带有组件名称的标记,参数作为属性传递。

动态加载

如果你使用模板,你必须自己动态加载它们,而且,由于这是一个异步任务,你必须注意只在模板已经可用时才使用它。这就是在大多数情况下使用内联模板的方式。如果它们必须在多个地方重复使用,这是不好的。

如果你使用过一些AMD的实现,比如require.js,并且你了解这项技术的好处,你会很高兴知道你可以很容易地使用AMD来加载组件模板和视图模型。其中一个优点是,当你需要使用模板或组件时,你不必担心它们是否可用。

可测试性无论你是手工测试还是自动测试,测试一堆独立的组件要比测试一个复杂的视图模型要容易得多,不管有没有模板。

我的选择到目前为止,我已经暴露了关于模板和组件的事实,并且我尽量不显示我的个人偏好。然而,在最后一节中,我必须说,在大多数情况下,我更喜欢使用组件,因为它们具有优势: 模块化
  • 低耦合
  • 容易重用
  • 可测试性
  • 绑定语法
  • (可选)动态加载

然而,在某些情况下,模板也更适合

最后一段与大型应用程序有关。如果您处理的是小型应用程序,或者只是对其他技术(如ASP)呈现的接口进行增强。. NET MVC),你可能得不到使用组件的任何好处。所以,你不需要他们。

在其他情况下不值得使用组件。例如,如果你必须显示一个列表(JavaScript数组),其中的项目具有不同的属性,必须以不同的方式显示,那么使用模板会更容易。请注意,在这种情况下的选择是因为每个实例都没有一个具有大量功能的复杂视图模型,而是一些简单的属性。在这种特殊情况下,使用组件不仅不值得,而且还可能适得其反。

您可以将最后一个示例理解为多态性。但是,在这种情况下,它几乎是"可视化的"多态性。也就是说,每种类型的项目必须以不同的方式显示,但不需要在每个组件中实现任何特殊的逻辑。

然而即使在这种情况下,如果模板足够复杂,或者必须在许多不同的地方使用,使用一个包含模板和接收整个项目的参数的简单组件也会好得多。所以,即使在这种情况下,使用组件也不是个坏主意。

如果你读到这里,谢谢你,我希望你有一些标准来帮助你选择最好的选择。

它们并非完全不同。组件由模板(html)和数据/逻辑(视图模型,即JavaScript)组成。当你有一个模块化的视图,你想要附加一个视图模型,你可以利用组件。这里有一个更多讨论组件的链接:http://www.knockmeout.net/2014/06/knockout-3-2-preview-components.html

最新更新