Javascript 什么时候应该使用KnockoutJS组件与模板?

Javascript 什么时候应该使用KnockoutJS组件与模板?,javascript,knockout.js,Javascript,Knockout.js,所以我想用KnockoutJS3.2把我的手弄脏。我已经阅读了文档,并且在我当前的项目中成功地实现了组件。我不使用AMD,所以我只是使用脚本元素来保存视图 我的问题是:如果我没有使用异步加载功能,那么使用组件而不是模板有什么实际区别吗?它们并没有完全不同。组件由模板(html)和数据/逻辑(视图模型,即JavaScript)组成。如果您有一个模块化视图,并且希望将视图模型附着到该视图,则可以使用构件。这里有一个更详细地讨论组件的链接:这两个组件的一般说明 正如在另一个答案中所述,模板只是可以绑定

所以我想用KnockoutJS3.2把我的手弄脏。我已经阅读了文档,并且在我当前的项目中成功地实现了组件。我不使用AMD,所以我只是使用脚本元素来保存视图


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

它们并没有完全不同。组件由模板(html)和数据/逻辑(视图模型,即JavaScript)组成。如果您有一个模块化视图,并且希望将视图模型附着到该视图,则可以使用构件。这里有一个更详细地讨论组件的链接:

这两个组件的一般说明 正如在另一个答案中所述,模板只是可以绑定到viewmodel或viewmodel节的HTML片段。组件由模板及其对应的viewmodel组成。除此之外,这个视图模型还可以包括一些简单的业务逻辑和与服务器通信的功能

耦合与封装 另一个重要的区别是耦合。模板它绑定到主viewmodel,并绑定到主viewmodel的可观察对象,因此它与viewmodel高度耦合:viewmodel中的更改将破坏模板,反之亦然。因此,如果要在多个位置重用模板,并对其进行更改,则必须更正相应的viewmodels

组件绑定到其自己的viewmodel。仅当主viewmodel提供了参数时,才会将其耦合到主viewmodel。这意味着您可以轻松地更改零部件模板和零部件视图模型,并且,如果没有参数,或者您不更改参数,则不会有任何损坏

因此,使用组件有助于解耦和模块化

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

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

注:注意最后一段

结合 对于模板,绑定不是在模板级别完成的,而是在模板内部完成的。即,模板内的每个元素必须绑定到主viewmodel的可观察对象。对于组件,绑定要简单得多:最多需要组件名称和参数(如果存在)

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

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

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

可测试性 无论您是进行手动测试还是自动测试,逐个测试一组独立组件都要容易得多,无论是否使用模板测试复杂的viewmodel

我的选择 到目前为止,我已经公开了有关模板和组件的事实,并且我试图不显示我的个人偏好。但是,在最后一节中,我必须指出,在大多数情况下,我更喜欢使用组件,因为它们具有优势:

  • 模块化
  • 低耦合
  • 易于重用
  • 可测试性
  • 绑定语法
  • (可选)动态加载
但是,模板在某些情况下也更适合 最后一段与大型应用程序有关。如果您处理的是小型应用程序,或者仅仅是由另一种技术(如ASP.NET MVC)提供的接口增强,那么使用组件可能不会带来任何好处。所以,你不需要它们

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

您可以将最后一个示例理解为多态性。但是,在这种情况下,它几乎是“视觉”多态性。即每种物品必须