jquery - AngularJS 比 jQuery 有什么优势？

Question

关闭。这个问题需要更多focused .它目前不接受答案。




6年前关闭。










锁定。这个问题及其答案是locked因为这个问题是题外话，但具有历史意义。它目前不接受新的答案或互动。








我一直主要使用 jQuery 库，刚刚开始使用 AngularJS。我已经阅读了一些关于如何使用 Angular 的教程，但我不清楚为什么或何时使用它，或者与仅使用 jQuery 相比我可能会发现什么好处。

在我看来，Angular 让你想到了 MVC，这可能意味着你将网页视为模板 + 数据的组合。您使用 {{data bindings}}每当您觉得您将拥有动态数据时。然后 Angular 将为您提供一个 $scope 处理程序，您可以静态地或通过调用 Web 服务器来填充它。这在特性上类似于 JSP 设计网页的方式。为此我需要 Angular 吗？

对于不涉及数据操作的简单 DOM 操作(例如:鼠标悬停时的颜色更改，单击时隐藏/显示元素)，jQuery 或 vanilla JS 就足够了且更简洁。这假设 angular 的 mvc 中的模型是反射(reflect)页面上数据的任何东西，因此，颜色、显示/隐藏等 CSS 属性的更改不会影响模型。对于 DOM 操作，Angular 是否比 jQuery 或 vanilla JS 有任何优势？

与 jQuery 和插件一起做的事情相比，Angular 可以做什么使其对开发有用？

Answer 1

数据绑定(bind)

You go around making your webpage, and keep on putting {{data bindings}} whenever you feel you would have dynamic data. Angular will then provide you a $scope handler, which you can populate (statically or through calls to the web server).

这是对数据绑定(bind)的一个很好的理解。我想你已经明白了。

DOM 操作

For simple DOM manipulation, which doesnot involve data manipulation (eg: color changes on mousehover, hiding/showing elements on click), jQuery or old-school js is sufficient and cleaner. This assumes that the model in angular's mvc is anything that reflects data on the page, and hence, css properties like color, display/hide, etc changes dont affect the model.

我可以在这里看到您关于“简单”DOM 操作更简洁的观点，但这种情况很少见，而且必须非常“简单”。我认为 DOM 操作是其中一个领域，就像数据绑定(bind)一样，Angular 真正发挥了作用。理解这一点还将帮助您了解 Angular 如何考虑其 View 。

我将首先比较 Angular 方式和普通的 js DOM 操作方式。传统上，我们认为 HTML 不“做”任何事情，而是这样编写。所以，内联js，比如“onclick”等是不好的做法，因为它们把“做”放在HTML的上下文中，而不是“做”。 Angular 颠覆了这个概念。在编写 View 时，您认为 HTML 能够“做”很多事情。这种能力在 angular 指令中被抽象出来，但如果它们已经存在或者你已经编写了它们，你不必考虑“如何”完成它，你只需使用这个“增强”HTML 中提供给你的能力 Angular 允许您使用。这也意味着您的所有 View 逻辑都真正包含在 View 中，而不是包含在您的 javascript 文件中。同样，推理是在你的 javascript 文件中编写的指令可以被认为是增加 HTML 的能力，所以你让 DOM 担心操纵自己(可以这么说)。我会用一个简单的例子来演示。

这是我们要使用的标记。我给它起了一个直观的名字。

<div rotate-on-click="45"></div>

首先，我想评论一下，如果 我们已经通过自定义的 Angular 指令为我们的 HTML 提供了这个功能，我们已经完成了 .那是一股清新的空气。稍后会详细介绍。

用 jQuery 实现

live demo here (click).

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

使用 Angular 实现

live demo here (click).

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

很轻，很干净，这只是一个简单的操作! 在我看来， Angular 方法在所有方面都胜出，尤其是如何抽象出功能以及如何在 DOM 中声明 dom 操作。该功能通过 html 属性挂接到元素上，因此无需通过选择器查询 DOM，并且我们有两个不错的闭包 - 一个用于指令工厂的闭包，其中变量在指令的所有用法中共享, 以及 link 中指令的每次使用都有一个闭包函数(或 compile 函数)。

双向数据绑定(bind)和 DOM 操作指令只是让 Angular 变得很棒的开始。 Angular 提倡所有代码都是模块化的、可重用的、易于测试的，并且还包括一个单页应用程序路由系统。需要注意的是，jQuery 是一个包含常用便利/跨浏览器方法的库，但 Angular 是用于创建单页应用程序的全功能框架。 angular 脚本实际上包含了它自己的“精简版”jQuery 版本，因此可以使用一些最重要的方法。因此，您可能会争辩说使用 Angular IS 使用 jQuery(轻松地)，但 Angular 提供了更多“魔法”来帮助您创建应用程序。

这是提供更多相关信息的好帖子: How do I “think in AngularJS” if I have a jQuery background?

一般差异。

以上几点针对 OP 的具体问题。我还将概述其他重要差异。我建议对每个主题也做额外的阅读。

Angular 和 jQuery 无法合理地进行比较。

Angular 是一个框架，jQuery 是一个库。框架有自己的位置，库也有自己的位置。然而，毫无疑问，一个好的框架在编写应用程序方面比库更强大。这正是框架的意义所在。欢迎你用普通的 JS 编写你的代码，或者你可以添加一个常用函数库，或者你可以添加一个框架来大大减少完成大多数事情所需的代码。因此，更合适的问题是:

为什么要使用框架？

好的框架可以帮助构建您的代码，使其模块化(因此可重用)、DRY、可读、高性能和安全。 jQuery 不是一个框架，因此它在这些方面没有帮助。我们都见过典型的 jQuery 意大利面条式代码墙。这不是 jQuery 的错——这是不知道如何构建代码的开发人员的错。但是，如果开发人员确实知道如何构建代码，他们最终会编写某种最小的“框架”来提供我刚才讨论的基础(架构等)，或者他们会添加一些东西。例如，你可能会添加 RequireJS 以作为编写良好代码的框架的一部分。

以下是现代框架提供的一些东西:

模板

数据绑定(bind)

路由(单页应用)

干净、模块化、可重用的架构

安全

为方便起见的附加功能/特性

在我进一步讨论 Angular 之前，我想指出 Angular 并不是唯一的一种。例如，Durandal 是一个构建在 jQuery、Knockout 和 RequireJS 之上的框架。同样，jQuery 本身无法提供 Knockout、RequireJS 以及构建在它们之上的整个框架所能提供的功能。只是没有可比性。

如果您需要摧毁一颗行星并且您有一颗死星，请使用死星。

Angular (重新审视)。

基于我之前关于框架提供什么的观点，我想赞扬 Angular 提供它们的方式，并试图澄清为什么这实际上优于 jQuery。

DOM 引用。

在我上面的例子中，jQuery 必须 Hook 到 DOM 以提供功能是绝对不可避免的。这意味着 View (html) 关注功能(因为它标有某种标识符 - 例如“图像滑块”)，而 JavaScript 关注提供该功能。 Angular 通过抽象消除了这个概念。使用 Angular 正确编写代码意味着 View 能够声明自己的行为。如果我想显示一个时钟:

<clock></clock>

完毕。

是的，我们需要使用 JavaScript 来让它变得有意义，但我们正在以与 jQuery 方法相反的方式来做这件事。我们的 Angular 指令(在它自己的小世界中)已经“增强”了 html，而 html 将功能 Hook 到自身中。

MVW 架构/模块/依赖注入(inject)

Angular 为您提供了一种直接的方式来组织您的代码。 View 事物属于 View (html)，增强的 View 功能属于指令，其他逻辑(如 ajax 调用)和功能属于服务，服务和逻辑与 View 的连接属于 Controller 。还有一些其他的 Angular 组件可以帮助处理服务的配置和修改等。您创建的任何功能都可以通过 Injector 子系统在您需要的任何地方自动可用，该子系统负责整个应用程序的依赖注入(inject)。在编写应用程序(模块)时，我将其分解为其他可重用模块，每个模块都有自己的可重用组件，然后将它们包含在更大的项目中。一旦你用 Angular 解决了一个问题，你就会以一种有用的、结构化的方式自动解决它，以便将来重用，并且很容易包含在下一个项目中。所有这一切的一个巨大好处是您的代码将更容易测试。

在 Angular 中让事情“工作”并不容易。

谢天谢地。前面提到的 jQuery 意大利面代码来自一个开发人员，该开发人员做了一些“工作”然后继续前进。你可以写出糟糕的 Angular 代码，但要做到这一点要困难得多，因为 Angular 会为此与你争吵。这意味着您必须(至少在某种程度上)利用它提供的干净架构。换句话说，用 Angular 写不好的代码更难，但写干净的代码更方便。

Angular 远非完美。 Web 开发世界一直在发展和变化，并且有新的更好的方法被提出来解决问题。例如，Facebook 的 React 和 Flux 与 Angular 相比有一些很大的优势，但也有自己的缺点。没有什么是完美的，但 Angular 一直并且现在仍然很棒。正如 jQuery 曾经帮助 Web 世界向前发展一样，Angular 也是如此， future 还会有很多。