javascript 如果我有jQuery背景,“在AngularJS中思考”?



7 Answers

势在必行→陈述性

在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中范围原型/原型继承的细微差别是什么?

javascript jquery angularjs

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

  • 如何以不同方式构建和设计客户端Web应用程序? 最大的区别是什么?
  • 我应该停止做什么/使用什么; 我应该开始做什么/使用什么呢?
  • 有任何服务器端考虑因素/限制吗?

我不是在寻找jQueryAngularJS之间的详细比较。




你能描述一下必要的范式转变吗?

势在必行与陈述

使用jQuery,您可以一步一步地告诉DOM需要发生什么。使用AngularJS您可以描述您想要的结果,但不能描述如何执行此操作。更多关于here。另外,请查看Mark Rajcok的答案。

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

AngularJS是一个使用MVC模式的完整客户端框架(查看其图形表示)。它非常注重关注点的分离。

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

jQuery是一个库

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

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

最好的方法是通过他们的精彩教程。你可以在几个小时内完成这些步骤; 但是,如果你想掌握幕后的概念,它们包含了无数的参考资料以供进一步阅读。

有任何服务器端考虑因素/限制吗?

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

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




jQuery的

jQuery制作了一些可笑的长命令,比如getElementByHerpDerp简短和跨浏览器。

AngularJS

AngularJS允许您创建自己的HTML标记/属性,这些标记/属性可以很好地处理动态Web应用程序(因为HTML是为静态页面设计的)。

编辑:

说“我有一个jQuery背景我如何在AngularJS中思考?” 就像说“我有一个HTML背景我如何在JavaScript中思考?” 您提出问题的事实表明您很可能不理解这两种资源的基本目的。这就是为什么我选择通过简单地指出基本区别来回答问题,而不是通过列表说“AngularJS使用指令,而jQuery使用CSS选择器来创建一个jQuery对象来执行此操作等等......” 。这个问题不需要冗长的答案。

jQuery是一种使浏览器中的JavaScript编程更容易的方法。更短,跨浏览器的命令等

AngularJS扩展了HTML,因此您不必<div>为了创建应用程序而将所有地方放在一起。它使HTML实际上适用于应用程序而不是它的设计目标,即静态的教育网页。它使用JavaScript以迂回的方式实现这一点,但从根本上说它是HTML的扩展,而不是JavaScript。




这些是一些非常好的,但冗长的答案。

总结一下我的经历:

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



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

jQuery是关于DOM操作的。它解决了所有跨浏览器的痛苦,否则你将不得不处理,但它不是一个允许你将你的应用程序划分为AngularJS等组件的框架。

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

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

还有一件事,就是指令。它是一个可以附加到任何DOM元素的属性,你可以在其中使用jQuery,而不必担心你的jQuery会与AngularJs组件发生冲突或者与它的架构混淆。

我从参加过的聚会中听到,Angular的一位创始人表示他们非常努力地将DOM操作分开,所以不要试图将它们包括在内。




我发现这个问题很有意思,因为我第一次认真接触JavaScript编程的是Node.js和AngularJS。我从来没有学过jQuery,我想这是件好事,因为我不需要忘记任何事情。事实上,我主动避免jQuery解决方案来解决我的问题,而只是寻找一种“AngularJS方式”来解决它们。所以,我想我对这个问题的回答基本上归结为“想象一个从未学过jQuery的人”,并避免任何直接合并jQuery的诱惑(显然AngularJS在某种程度上在幕后使用它)。




作为一个JavaScript MV *初学者,纯粹关注应用程序架构(而不是服务器/客户端问题),我肯定会推荐以下资源(我很惊讶还没有提到):JavaScript设计模式,作者:Addy Osmani ,作为不同JavaScript设计模式的介绍。本答案中使用的术语来自上面的链接文档。我不打算在接受的答案中重复措辞。相反,这个答案链接到为AngularJS(和其他库)提供动力的理论背景

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

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

例如:

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






Related