假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较jQuery和AngularJS。
假设我熟悉在jQuery中开发客户端应用程序,但现在我想开始使用AngularJS。你能描述一下必要的范式转变吗?以下几个问题可能有助于您确定答案:
如何以不同的方式构建和设计客户端web应用程序?最大的区别是什么?我应该停止做什么/使用什么;我应该开始做什么?是否有服务器端的考虑/限制?
我不想详细比较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作为第一类语言学习!”我很难了解到上述事实。
祝你好运
其他回答
作为一个JavaScriptMV*初学者,纯粹专注于应用程序架构(而不是服务器/客户端的问题),我当然会推荐以下资源(我很惊讶还没有提到):AddyOsmani的JavaScript设计模式,作为不同JavaScript设计模式的介绍。本答案中使用的术语取自上述链接文档。我不打算重复在公认的答案中措辞很好的内容。相反,这个答案与支持AngularJS(和其他库)的理论背景联系起来。
像我一样,你会很快意识到AngularJS(或Ember.js、Durandal和其他MV*框架)是一个复杂的框架,它集合了许多不同的JavaScript设计模式。
我还发现,在深入到一个全局框架之前,分别测试(1)本机JavaScript代码和(2)这些模式中的每一个的较小库更容易。这让我更好地理解了框架解决了哪些关键问题(因为你个人面临着这个问题)。
例如:
JavaScript面向对象编程(这是一个谷歌搜索链接)。它不是一个库,但肯定是任何应用程序编程的先决条件。它教会了我原型、构造函数、单例和装饰器模式的本地实现facade模式的jQueryUndercore(如用于操作DOM的WYSIWYG)原型/构造函数/混合模式的Prototype.js模块模式/AMD需要js/Coll.js可观察的发布/订阅模式的KnockoutJS
注:此列表不完整,也不是“最佳库”;它们正好是我用过的图书馆。这些库还包括更多的模式,这些模式只是它们的主要焦点或初衷。如果你觉得这个列表中缺少一些东西,请在评论中提及,我很乐意补充。
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元素的“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成为框架而不是库的原因之一。
我觉得这个问题很有趣,因为我第一次认真接触JavaScript编程是Node.js和AngularJS。我从未学习过jQuery,我想这是一件好事,因为我不必忘记任何东西。事实上,我积极避免使用jQuery解决我的问题,而是只寻找一种“AngularJS方法”来解决它们。因此,我想我对这个问题的回答基本上可以归结为,“像从未学习过jQuery的人一样思考”,并避免任何直接合并jQuery的诱惑(显然AngularJS在某种程度上在幕后使用了它)。
它们是苹果和橘子。你不想比较它们。它们是两种不同的东西。AngularJs已经内置了jQuery lite,它允许您执行基本的DOM操作,甚至不包括完整的jQuery版本。
jQuery完全是关于DOM操作的。它解决了所有跨浏览器的问题,否则您将不得不处理,但它不是一个允许您将应用程序划分为AngularJS等组件的框架。
AngularJs的一个优点是它允许您在指令中分离/隔离DOM操作。有内置指令可供您使用,例如ng-click。您可以创建自己的自定义指令,这些指令将包含所有视图逻辑或DOM操作,这样您就不会在应该处理业务逻辑的控制器或服务中混合DOM操作代码。
Angular将应用程序分解为-控制器-服务-视图-等等。
还有一件事,那就是指令。它是一个可以附加到任何DOM元素的属性,您可以在其中使用jQuery,而不必担心jQuery会与AngularJs组件冲突或破坏其架构。
我从我参加的一次会议上听到,Angular的创始人之一表示,他们非常努力地将DOM操作分离出来,所以不要试图将它们重新纳入其中。