角度与 KnockoutJS:您应该知道的基本差异和相似之处

在两个库和框架之间进行选择时,尤其是当它们几乎彼此相似时,这非常令人困惑。

最近,当我不得不从Angular vs KnockoutJS中选择一个时,我遇到了同样的情况。 两者中最令人困惑的部分是Angular,它是一个基于JavaScript的开源前端Web开发框架,而Knockout是一个库。

因此,选择是一个有点复杂的任务,而且,正如我不得不做的那样,您可能需要仔细地系统地理解这两种技术或Web开发框架。

图片

因此,您需要开始遵循一对一的方法。

什么是框架?


框架是您必须在其上构建房屋的模型。 它具有一系列蓝图,从中可以为您选择合适的蓝图。 简而言之,框架负责流程,它选择何时以及如何进行。

什么是图书馆?


图书馆就像去家具屋,为您的家弄些家具。 在这里,您将负责流程,并决定何时调用代码。

Angular和KnockoutJS概述


角度的

淘汰赛

稳定释放
版本8.0.0于/ May 29,20193.5.0 / 2019年2月22日
由...管理
谷歌史蒂夫·安德森
程式语言
Java脚本Java脚本
型式
网络框架JavaScript库
路由选择
角度支撑不可用
测试中
量角器作为测试框架不可用
文献资料
组织良好的文档文档不良
Github星星
59,5559,526


他们共享但工作方式不同的一些相似功能


资料绑定


数据绑定通过平滑的过程帮助开发人员在UI和业务逻辑之间建立连接。 这意味着,尽管需要正确配置设置和通知,但更改数据时,数据将反映在UI中。

让我们看看Angular和KnockoutJS中都发生了数据绑定过程

这是我们假设的模型
图片

如果使用KnockoutJS执行双向绑定,则需要使用包装器更改以下模型属性,例如ko.observable;。

图片

让我们探讨如何将绑定应用于这两种技术。

KnockoutJS;

图片

角度的

图片

如果您想对此进行分析,您会发现在Knockout的HTML语法中使用了data-bind属性以及适当的绑定类型。 您可能需要付出更多的努力才能将所有属性指定为可观察的。 您可以通过以下方式进行操作:

利用映射插件使过程更容易


如果在从服务器加载JSON文件时利用mappings完成了将属性转换为可观察的属性将更加容易。

在Angular语法的情况下,数据绑定(例如读取和编写)变得非常容易。 将两种技术区分开的是绑定方法。 是的,KnockoutJS使用提供的模型来完成它,而Angular使用$ Scope-特殊对象来完成它。

此外,在KnockoutJS的情况下,由于Scope,数据绑定可以执行一次,而在Angular的情况下可以重复执行。

我的观点:Angular已经解决了Knockout,尽管Knockout可以适合每个项目。

模板化


模板在Angular和Knockout JS中都很常见,它可以帮助开发人员将代码分解为可维护的小片段。 让我们通过示例了解它们。

AngulaJS:

图片

KnockoutJS:

图片

我的看法:在这种情况下,Angular更为有益。 Angular将模板存储到外部HTML文件中。 只需提供模板URL(<div ng-include =“ template-title.html”> </ div>),它将正确组织模板代码。

可扩展性


在这里,您可以从两种技术中受益-Angular和KnockoutJS不仅限于其内置功能。 Angular使用Directives概念,可以帮助您将DOM元素的特定行为组合在一起。 另一方面,KnockoutJS也使用相似和等效的功能,您可以通过编写自定义绑定来实现。

让我们在这些示例中找到它;

角度的
图片

淘汰赛
图片

变量观察


变量观察旨在跟踪更改并通知订阅者,它与Knockout配合得很好,因为它使用Observable模式,而Angular使用脏检查技术进行。

您可以从下面给出的示例中了解它们。

淘汰赛
图片

角度的
图片

性能表现


Angular以更好的优化而著称,它可以提高基于它的应用程序的性能。 同时,最新版本的Angular具有更新的功能,这些功能会自动从应用程序中删除polyfill,从而提高应用程序的性能。 对于KnockoutJS,您可以期望仅在小型应用程序中具有集成的性能。 在复杂的应用程序中可能无法提供理想的结果。

易于发展


Angular的最新版本提供了“捆绑预算”,可帮助Angular开发人员保持项目轻量化。 同时,它有助于加快开发速度,并且有许多此类功能使开发变得容易。 尽管Knockout在小型应用程序中很有效,但它也支持更快,更轻松的开发。

社区支持


Angular拥有大量的社区支持,并且很明显,因为Google自己维护着它。 如果开发人员在淘汰赛中遇到问题,他们将快速解决所有问题,因为到目前为止它还没有任何社区支持,因此您可能无法获得支持。

开发费用


Angular非常受欢迎有很多原因。 成本效益就是其中之一。 但是,与淘汰赛相比,您需要在Angular开发服务上花费更多的钱。 但是,可以使用Angular构建所有类型的应用程序,而Knockout仅适用于UI表示。

到目前为止,我专注于Angular和Knockout的子集功能,而Angular具有Knockout没有的其他一些独特功能。 因此,在以下各段中,我将讨论Angular的其他元素,以及如何在Knockout中实现此功能。

淘汰赛中缺少的Angular的一些其他功能


模块:模块充当容器或服务的集合,例如指令,控制器,过滤器和配置信息等。 而且,它们有助于在应用程序中构建或添加更多块。

摇树:

此功能可帮助Angular开发人员轻松找到代码中的错误。 此外,它使您可以轻松找到或消除应用程序中未使用的代码。 使用此功能,您可以做很多事情,并且可以作为优化。

服务项目:

$ http,$ q和$ log等服务可帮助开发人员在应用程序中组织和共享代码。 例如,使用$ http,您向AJAX服务器发出请求,并且$ log可用作登录服务。

依赖注入:

角注入器子系统可以帮助开发人员消除其依赖性,使组件可重用,等等。

适用范围:

$ Angular中的Scope是一个内置对象,它模仿应用程序的DOM结构并包含应用程序数据和方法。 借助于此,您可以轻松地在控制器函数内为$范围对象创建属性,该属性将为其分配值。

注1: Angular的发展很快,每个新版本都提供了新增和更新的功能。 因此,此处说明的功能可能有所不同。

注意2:这些是KnockoutJS核心库中没有的一些功能,尽管利用外部库或自定义逻辑,也可以实现这些功能。

我的观点:将特定需求分开,如果您有可以同时使用Angular和KnockoutJS进行工作的项目,请考虑其功能和可用性,并明智地选择技术。 到目前为止,Angular在淘汰赛方面似乎有优势。

现在,有些功能(如路由和测试)在Knockout中不受支持,尽管可以按照类似Angular的方法进行测试。

两种技术(例如Angular和Knockout)在浏览器支持方面也有所不同。

结论

为您的项目选择框架有点复杂,因为您需要对自己的决定充满信心。 如果您不精通技术,那会更加复杂。 我试图以一种更简化的方式来解释它,以便您可以更好地理解技术并明智地做出决定。 再次

Angular非常受欢迎,并被许多品牌使用。 它具有足够的能力直接绑定到普通对象,模块化结构,并具有可靠的开发准则,该准则禁止开发期间或后期开发中可能发生的任何问题。

另一方面,KnockoutJS用于UI表示。 它也主要用于实现应用程序中具有较低复杂度的应用程序中的任何功能。 因此,何时选择框架要明智地做出决定。

Source: https://habr.com/ru/post/zh-CN456954/


All Articles