假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较jQuery和AngularJS。
假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较jQuery和AngularJS。
当前回答
jQuery:您对DOM元素的“QUERYing the DOM”进行了很多思考,并做了一些事情。
AngularJS:模型是事实,你总是从这个角度思考。
例如,在jQuery中,当您从THE服务器获取要以某种格式显示在DOM中的数据时,需要“1”。FIND”在DOM中要放置此数据的位置,即“2”。通过创建新节点或仅设置其innerHTML,UPDATE/APPEND”。然后,当您要更新此视图时,请选择“3”。查找位置和“4”。更新”。在AngularJS中,在从服务器获取和格式化数据的同一上下文中完成的查找和更新循环已经消失。
有了AngularJS,你就有了你的模型(你已经习惯了JavaScript对象),模型的值告诉了你关于模型(显然)和视图的信息,模型上的操作会自动传播到视图,所以你不必考虑它。你会发现自己在Angular JS中不再在DOM中找到东西。
换言之,在jQuery中,您需要考虑CSS选择器,也就是说,具有类或属性等的div或td在哪里,这样我就可以获得它们的HTML或颜色或值,但在AngularJS中,您会发现自己这样想:我在处理什么模型,我会将模型的值设置为true。您不必担心反映该值的视图是复选框还是驻留在td元素中(在jQuery中通常需要考虑的细节)。
通过AngularJS中的DOM操作,您发现自己添加了指令和过滤器,可以将其视为有效的HTML扩展。
在AngularJS中,你会体验到另一件事:在jQuery中,你经常调用jQuery函数,在AngularJS中,AngularJS会调用你的函数,所以AngularJS将“告诉你怎么做”,但好处是值得的,所以学习AngularJS通常意味着学习AngularJS想要什么,或者AngularJS要求你呈现函数的方式,它会相应地调用它。这是AngularJS成为框架而不是库的原因之一。
其他回答
实际上,如果您使用的是AngularJS,那么就不再需要jQuery了。AngularJS本身具有绑定和指令,这是一个非常好的“替代品”,可以替代jQuery中的大多数功能。
我通常使用AngularJS和Cordova开发移动应用程序。jQuery中我唯一需要的就是选择器。
通过谷歌搜索,我发现有一个独立的jQuery选择器模块。这是Sizzle。
我决定制作一个小代码片段,帮助我利用jQuery Selector(使用Sizzle)的强大功能快速启动一个使用AngularJS的网站。
我在这里分享了我的代码:https://github.com/huytd/Sizzular
你能描述一下必要的范式转变吗?
命令与声明
使用jQuery,您可以一步一步地告诉DOM需要发生什么。使用AngularJS,您可以描述您想要的结果,但不描述如何实现。还有,看看马克·拉乔克的答案。
如何以不同的方式构建和设计客户端web应用程序?
AngularJS是一个使用MVC模式的完整客户端框架(查看它们的图形表示)。它非常注重关注点的分离。
最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?
jQuery是一个库
AngularJS是一个漂亮的客户端框架,高度可测试,它结合了许多很酷的东西,如MVC、依赖注入、数据绑定等等。
它专注于关注点和测试的分离(单元测试和端到端测试),这有助于测试驱动开发。
最好的开始方式是完成他们很棒的教程。你可以在几个小时内完成这些步骤;然而,如果你想掌握幕后的概念,它们包括大量的参考资料以供进一步阅读。
是否有服务器端的考虑/限制?
您可以在已经使用纯jQuery的现有应用程序上使用它。然而,如果您想充分利用AngularJS特性,可以考虑使用RESTful方法对服务器端进行编码。
这样做将允许您利用他们的资源工厂,这将创建服务器端RESTful API的抽象,并使服务器端调用(获取、保存、删除等)变得异常简单。
jQuery:您对DOM元素的“QUERYing the DOM”进行了很多思考,并做了一些事情。
AngularJS:模型是事实,你总是从这个角度思考。
例如,在jQuery中,当您从THE服务器获取要以某种格式显示在DOM中的数据时,需要“1”。FIND”在DOM中要放置此数据的位置,即“2”。通过创建新节点或仅设置其innerHTML,UPDATE/APPEND”。然后,当您要更新此视图时,请选择“3”。查找位置和“4”。更新”。在AngularJS中,在从服务器获取和格式化数据的同一上下文中完成的查找和更新循环已经消失。
有了AngularJS,你就有了你的模型(你已经习惯了JavaScript对象),模型的值告诉了你关于模型(显然)和视图的信息,模型上的操作会自动传播到视图,所以你不必考虑它。你会发现自己在Angular JS中不再在DOM中找到东西。
换言之,在jQuery中,您需要考虑CSS选择器,也就是说,具有类或属性等的div或td在哪里,这样我就可以获得它们的HTML或颜色或值,但在AngularJS中,您会发现自己这样想:我在处理什么模型,我会将模型的值设置为true。您不必担心反映该值的视图是复选框还是驻留在td元素中(在jQuery中通常需要考虑的细节)。
通过AngularJS中的DOM操作,您发现自己添加了指令和过滤器,可以将其视为有效的HTML扩展。
在AngularJS中,你会体验到另一件事:在jQuery中,你经常调用jQuery函数,在AngularJS中,AngularJS会调用你的函数,所以AngularJS将“告诉你怎么做”,但好处是值得的,所以学习AngularJS通常意味着学习AngularJS想要什么,或者AngularJS要求你呈现函数的方式,它会相应地调用它。这是AngularJS成为框架而不是库的原因之一。
它们是苹果和橘子。你不想比较它们。它们是两种不同的东西。AngularJs已经内置了jQuery lite,它允许您执行基本的DOM操作,甚至不包括完整的jQuery版本。
jQuery完全是关于DOM操作的。它解决了所有跨浏览器的问题,否则您将不得不处理,但它不是一个允许您将应用程序划分为AngularJS等组件的框架。
AngularJs的一个优点是它允许您在指令中分离/隔离DOM操作。有内置指令可供您使用,例如ng-click。您可以创建自己的自定义指令,这些指令将包含所有视图逻辑或DOM操作,这样您就不会在应该处理业务逻辑的控制器或服务中混合DOM操作代码。
Angular将应用程序分解为-控制器-服务-视图-等等。
还有一件事,那就是指令。它是一个可以附加到任何DOM元素的属性,您可以在其中使用jQuery,而不必担心jQuery会与AngularJs组件冲突或破坏其架构。
我从我参加的一次会议上听到,Angular的创始人之一表示,他们非常努力地将DOM操作分离出来,所以不要试图将它们重新纳入其中。
迫切的→ 声明的
在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对象。想想你想如何展示你的模型——你的观点。使用必要的指令为每个视图创建HTML模板以获得动态数据绑定。将控制器连接到每个视图(使用ng视图和布线或ng控制器)。让控制器仅查找/获取视图执行其任务所需的任何模型数据。使控制器尽可能薄。
原型继承
在不了解JavaScript原型继承的工作原理的情况下,您可以使用jQuery做很多工作。在开发AngularJS应用程序时,如果您对JavaScript继承有很好的理解,您将避免一些常见的陷阱。推荐阅读:AngularJS中范围原型/原型继承的细微差别是什么?