假设我熟悉使用jQuery开发客户端应用程序,但是现在我想开始使用AngularJS。您能否描述必要的范式转换?以下是一些可以帮助您确定答案的问题:
- 我如何以不同的方式设计和设计客户端Web应用程序?最大的区别是什么?
- 我应该停止做什么/使用;我应该开始做什么/使用呢?
- 是否有服务器端注意事项/限制?
我不希望在jQuery
和之间进行详细的比较AngularJS
。
实际上,如果您使用的是AngularJS,则不再需要jQuery。AngularJS本身具有绑定和指令,对于您可以使用jQuery进行的大多数操作而言,这是一个很好的“替代品”。
我通常使用AngularJS和Cordova开发移动应用程序。我唯一需要的jQuery是Selector。
通过谷歌搜索,我看到那里有一个独立的jQuery选择器模块。是嘶嘶声。
然后,我决定制作一个很小的代码段,以帮助我使用带有jQuery Selector(使用Sizzle)的AngularJS快速启动网站。
我在这里分享了我的代码:https : //github.com/huytd/Sizzular
他们是苹果和橘子。您不想比较它们。他们是两回事。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.
我发现这个问题很有趣,因为我最先接触JavaScript编程的是Node.js和AngularJS。我从来没有学过jQuery,我想那是一件好事,因为我不必学习任何东西。实际上,我积极地避免了针对我的问题的jQuery解决方案,而是仅寻找“ AngularJS方式”来解决它们。因此,我想我对这个问题的回答基本上可以归结为“像从未学习过jQuery的人一样思考”,并避免了直接集成jQuery的任何诱惑(显然AngularJS在后台使用了它)。
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作为一流的语言来学习!” 我很难学到上述事实。
祝好运。
这些是很好的答案,但答案冗长。
总结一下我的经验:
您能否描述必要的范式转换?
命令式与声明式
使用jQuery,您可以逐步告诉DOM需要做什么。使用AngularJS,您可以描述所需的结果,而不是所需的结果。更多关于此这里。另外,请查看Mark Rajcok的答案。
我如何以不同的方式设计和设计客户端Web应用程序?
AngularJS是使用MVC模式的完整客户端框架(请查看其图形表示)。它极大地侧重于关注点分离。
最大的区别是什么?我应该停止做什么/使用;我应该开始做什么/使用呢?
jQuery是一个库
AngularJS是一个漂亮的客户端框架,可测试性强,它结合了许多很酷的东西,例如MVC,依赖项注入,数据绑定等等。
它着重于关注点和测试(单元测试和端到端测试)的分离,这有助于测试驱动的开发。
最好的开始方法是阅读他们很棒的教程。您可以在几个小时内完成所有步骤;但是,如果您想掌握幕后的概念,则其中包含许多参考资料供进一步阅读。
是否有服务器端注意事项/限制?
您可以在已经使用纯jQuery的现有应用程序上使用它。但是,如果您想充分利用AngularJS功能,则可以考虑使用RESTful方法对服务器端进行编码。
这样做将允许您利用他们的资源工厂,这将创建服务器端RESTful API的抽象,并使服务器端调用(获取,保存,删除等)变得异常简单。
在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应用程序的一种方法:
您可以在不了解JavaScript原型继承如何工作的情况下使用jQuery做很多事情。在开发AngularJS应用程序时,如果您对JavaScript继承有很好的了解,将避免一些常见的陷阱。推荐阅读:AngularJS中范围原型/原型继承的细微差别是什么?
作为JavaScript MV *的初学者,并且只专注于应用程序体系结构(而不是服务器/客户端问题),我当然会推荐以下资源(我还没有提及到我很惊讶):JavaScript设计模式,作者:Addy Osmani ,介绍不同的JavaScript设计模式。该答案中使用的术语取自上面的链接文档。我不会在已接受的答案中重复非常好的措词。相反,此答案可以链接到为AngularJS(和其他库)提供支持的理论背景。
像我一样,您会很快意识到AngularJS(或Ember.js,Durandal以及其他MV *框架)是一个复杂的框架,它集合了许多不同的JavaScript设计模式。
我发现它也更容易,以测试(1)天然的JavaScript代码和(2)对于这些模式中的每一个更小的文库分别潜水成一个全球框架之前。这使我可以更好地了解框架解决了哪些关键问题(因为您亲自面对该问题)。
例如:
注意:此列表不完整,也不是“最佳图书馆”;它们恰好是我使用的库。这些库还包含更多模式,其中提到的只是它们的主要重点或原始意图。如果您觉得此列表中缺少某些内容,请在评论中提及它,我们将很高兴添加它。