如果我有jQuery背景,那么“ AngularJS中的思考”吗?[关闭]

假设我熟悉使用jQuery开发客户端应用程序,但是现在我想开始使用AngularJS您能否描述必要的范式转换?以下是一些可以帮助您确定答案的问题:

  • 我如何以不同的方式设计和设计客户端Web应用程序?最大的区别是什么?
  • 我应该停止做什么/使用;我应该开始做什么/使用呢?
  • 是否有服务器端注意事项/限制?

我不希望在jQuery之间进行详细的比较AngularJS

十三前端Harry2020/03/09 12:32:29

作为JavaScript MV *的初学者,并且只专注于应用程序体系结构(而不​​是服务器/客户端问题),我当然会推荐以下资源(我还没有提及到我很惊讶):JavaScript设计模式,作者:Addy Osmani ,介绍不同的JavaScript设计模式该答案中使用的术语取自上面的链接文档。我不会在已接受的答案中重复非常好的措词。相反,此答案可以链接到为AngularJS(和其他库)提供支持的理论背景

像我一样,您会很快意识到AngularJS(或Ember.js,Durandal以及其他MV *框架)是一个复杂的框架,它集合了许多不同的JavaScript设计模式。

我发现它也更容易,以测试(1)天然的JavaScript代码和(2)对于这些模式中的每一个更小的文库分别潜水成一个全球框架之前。这使我可以更好地了解框架解决了哪些关键问题(因为您亲自面对该问题)。

例如:

注意:此列表不完整,也不是“最佳图书馆”;它们恰好是我使用的库。这些库还包含更多模式,其中提到的只是它们的主要重点或原始意图。如果您觉得此列表中缺少某些内容,请在评论中提及它,我们将很高兴添加它。

老丝阿飞2020/03/09 12:32:29

实际上,如果您使用的是AngularJS,则不再需要jQuery。AngularJS本身具有绑定和指令,对于您可以使用jQuery进行的大多数操作而言,这是一个很好的“替代品”。

我通常使用AngularJS和Cordova开发移动应用程序我唯一需要的jQuery是Selector。

通过谷歌搜索,我看到那里有一个独立的jQuery选择器模块。是嘶嘶声。

然后,我决定制作一个很小的代码段,以帮助我使用带有jQuery Selector(使用Sizzle)的AngularJS快速启动网站。

我在这里分享了我的代码:https : //github.com/huytd/Sizzular

神奇宝儿2020/03/09 12:32:29

他们是苹果和橘子。您不想比较它们。他们是两回事。AngularJs已经内置了jQuery lite,它允许您执行基本的DOM操作,甚至不包括完整的jQuery版本。

jQuery全部涉及DOM操作。它解决了所有跨浏览器的烦恼,否则您将不得不面对,但它不是一个框架,可让您将应用程序划分为AngularJS之类的组件。

关于AngularJs的好处是,它允许您在指令中分离/隔离DOM操作。有内置指令可供您使用,例如ng-click。您可以创建自己的自定义指令,其中将包含所有视图逻辑或DOM操作,因此您不会最终在应该处理业务逻辑的控制器或服务中混合DOM操作代码。

Angular将您的应用细分为-控制器-服务-视图-等

还有一件事,那就是指令。它是一个属性,可以附加到任何DOM元素,并且可以在其中使用jQuery,而不必担心jQuery与AngularJs组件发生冲突或使其体系结构混乱。

I heard from a meetup I attended, one of the founders of Angular said they worked really hard to separate out the DOM manipulation so do not try to include them back in.

小卤蛋Near小卤蛋2020/03/09 12:32:28

我发现这个问题很有趣,因为我最先接触JavaScript编程的是Node.js和AngularJS。我从来没有学过jQuery,我想那是一件好事,因为我不必学习任何东西。实际上,我积极地避免了针对我的问题的jQuery解决方案,而是仅寻找“ AngularJS方式”来解决它们。因此,我想我对这个问题的回答基本上可以归结为“像从未学习过jQuery的人一样思考”,并避免了直接集成jQuery的任何诱惑(显然AngularJS在后台使用了它)。

神奇猴子2020/03/09 12:32:28

jQuery是一个DOM操作库。

AngularJS是MV *框架。

实际上,AngularJS是为数不多的JavaScript MV *框架之一(许多JavaScript MVC工具仍属于类别库)。

作为框架,它托管您的代码,并拥有有关调用什么时候以及何时调用的决策的所有权!

AngularJS本身包含一个jQuery-lite版本。因此,对于一些基本的DOM选择/操作,您实际上不必包括jQuery库(它节省了很多字节以在网络上运行)。

AngularJS具有用于DOM操作和设计可重用UI组件的“指令”的概念,因此,只要您需要进行与DOM操作相关的工作,就应该使用它(指令仅是在使用AngularJS时应编写jQuery代码的地方)。

AngularJS涉及一些学习曲线(不仅仅是jQuery :-)。

->对于所有来自jQuery背景的开发人员,我的第一条建议是“在跳入AngularJS之类的丰富框架之前,将JavaScript作为一流的语言来学习!” 我很难学到上述事实。

祝好运。

西里Stafan小哥2020/03/09 12:32:28

这些是很好的答案,但答案冗长。

总结一下我的经验:

  1. 控制器和提供者(服务,工厂等)用于修改数据模型,而不是HTML。
  2. HTML和指令定义布局并绑定到模型。
  3. 如果需要在控制器之间共享数据,请创建服务或工厂-它们是在应用程序中共享的单例。
  4. 如果需要HTML小部件,请创建一个指令。
  5. 如果您有一些数据,现在正尝试更新HTML,请停止!更新模型,并确保您的HTML已绑定到模型。
做个有心人2020/03/09 12:32:28

您能否描述必要的范式转换?

命令式与声明式

使用jQuery,您可以逐步告诉DOM需要做什么。使用AngularJS,您可以描述所需的结果,而不是所需的结果。更多关于此这里另外,请查看Mark Rajcok的答案。

我如何以不同的方式设计和设计客户端Web应用程序?

AngularJS是使用MVC模式的完整客户端框架(请查看其图形表示)。它极大地侧重于关注点分离。

最大的区别是什么?我应该停止做什么/使用;我应该开始做什么/使用呢?

jQuery是一个库

AngularJS是一个漂亮的客户端框架,可测试性强,它结合了许多很酷的东西,例如MVC,依赖项注入,数据绑定等等。

它着重于关注点和测试(单元测试和端到端测试)的分离,这有助于测试驱动的开发。

最好的开始方法是阅读他们很棒的教程您可以在几个小时内完成所有步骤;但是,如果您想掌握幕后的概念,则其中包含许多参考资料供进一步阅读。

是否有服务器端注意事项/限制?

您可以在已经使用纯jQuery的现有应用程序上使用它。但是,如果您想充分利用AngularJS功能,则可以考虑使用RESTful方法对服务器端进行编码

这样做将允许您利用他们的资源工厂,这将创建服务器端RESTful API的抽象,并使服务器端调用(获取,保存,删除等)变得异常简单。

小小神无2020/03/09 12:32:28

命令式→声明式

在jQuery中,选择器用于查找DOM元素,然后将事件处理程序绑定/注册到它们。当事件触发时,该(命令)代码将执行以更新/更改DOM。

在AngularJS中,您要考虑视图而不是DOM元素。视图是包含AngularJS 指令的(声明性)HTML 指令为我们在后台设置了事件处理程序,并为我们提供了动态数据绑定。选择器很少使用,因此对ID(和某些类型的类)的需求大大减少了。视图与模型绑定(通过作用域)。视图是模型的投影。事件会更改模型(即数据,范围属性),并且投影这些模型的视图会“自动”更新。

在AngularJS中,请考虑模型,而不要考虑保存数据的jQuery选择的DOM元素。将视图视为这些模型的投影,而不是注册回调以操纵用户看到的内容。

关注点分离

jQuery使用了不引人注目的JavaScript-行为(JavaScript)与结构(HTML)是分开的。

AngularJS使用控制器和指令(每个控制器和指令都可以具有自己的控制器和/或编译和链接功能)从视图/结构(HTML)中删除行为。Angular还提供服务过滤器,以帮助分离/组织您的应用程序。

另请参阅https://stackoverflow.com/a/14346528/215945

应用设计

设计AngularJS应用程序的一种方法:

  1. 考虑一下您的模型。为这些模型创建服务或您自己的JavaScript对象。
  2. 考虑一下您要如何展示模型-您的视图。使用必要的指令获取动态数据绑定,为每个视图创建HTML模板。
  3. 将控制器附加到每个视图(使用ng-view和routing或ng-controller)。让控制器仅查找/获取视图完成其工作所需的任何模型数据。使控制器尽可能薄。

原型继承

您可以在不了解JavaScript原型继承如何工作的情况下使用jQuery做很多事情。在开发AngularJS应用程序时,如果您对JavaScript继承有很好的了解,将避免一些常见的陷阱。推荐阅读:AngularJS中范围原型/原型继承的细微差别是什么?