AngularJS比jQuery做得更好？

Question

我主要使用jQuery库,刚刚开始使用AngularJS.我已经阅读了一些关于如何使用Angular的教程,但我不清楚为什么或何时使用它,或者与使用jQuery相比我可以找到什么好处.

在我看来,Angular让你想到MVC,这或许意味着你将你的网页视为模板+数据组合.{{data bindings}}只要您觉得自己拥有动态数据,就可以使用它.然后,Angular将为您提供$ scope处理程序,您可以静态填充或通过调用Web服务器.这似乎与JSP设计网页的方式类似.我需要Angular吗？

对于简单的DOM操作,它不涉及数据操作(例如:鼠标悬停时的颜色变化,点击时隐藏/显示元素),jQuery或vanilla JS就足够清晰了.这假设angular的mvc中的模型是反映页面上数据的任何东西,因此,诸如颜色,显示/隐藏等变化的CSS属性不会影响模型.对于DOM操作,Angular是否比jQuery或vanilla JS有任何优势？

与jQuery可以与插件一起执行的操作相比,Angular可以使它对开发有用吗？

Answer 1

数据绑定

您可以自己制作网页,并在认为自己拥有动态数据的同时继续使用{{binding bindings}}.然后,Angular将为您提供$ scope处理程序,您可以填充(静态或通过调用Web服务器).

这是对数据绑定的很好理解.我觉得你已经失败了.

DOM操作

对于简单的DOM操作,它不涉及数据操作(例如:鼠标悬停时的颜色变化,在点击时隐藏/显示元素),jQuery或old-school js足够和清晰.这假设角度mvc中的模型是反映页面上数据的任何内容,因此,css属性(如颜色,显示/隐藏等)更改不会影响模型.

我可以在这里看到你的观点,即"简单"的DOM操作更清晰,但很少,而且必须非常"简单".我认为DOM操作是一个领域,就像数据绑定一样,Angular真的很闪耀.了解这一点也可以帮助您了解Angular如何考虑其观点.

我将首先将Angular方法与vanilla js方法与DOM操作进行比较.传统上,我们认为HTML不是"做"任何事情而是将其写成这样.因此,内联js,如"onclick"等是不好的做法,因为他们把"做"放在HTML的上下文中,而不是"做".角度翻转这个概念在它的头上.当您编写视图时,您会认为HTML能够"执行"许多操作.这个功能在角度指令中被抽象出来,但是如果它们已经存在或者你已经编写了它们,你就不必考虑它是如何完成的,你只需要在这个"增强的"HTML中使用你所拥有的功能.角度允许你使用.这也意味着您的所有视图逻辑都真正包含在视图中,而不是在您的javascript文件中.同样,原因是你的javascript文件中写的指令可以被认为是增加了HTML的能力,所以你让DOM担心操纵自己(可以这么说).我将用一个简单的例子来演示.

这是我们想要使用的标记.我给它一个直观的名字.

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

首先,我想评论一下,如果我们通过自定义Angular Directive给我们的HTML这个功能,我们已经完成了.那是一股清新的空气.稍等一下.

用jQuery实现

现场演示(点击).

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实现

现场演示(点击).

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)'    
        });
      });
    }
  };
});

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

DOM操作的双向数据绑定和指令只是使Angular很棒的开始.Angular推动所有代码都是模块化的,可重用的,并且易于测试,还包括单页应用程序路由系统.需要注意的是jQuery是一个很重要的图书馆的普遍需要的便利/跨浏览器的方法,但是角度是一个全功能的框架,用于创建单页的应用程序.角度脚本实际上包含它自己的"精简版"jQuery,因此可以使用一些最基本的方法.因此,你可以说使用jQuery(轻微)使用Angular IS,但Angular提供了更多的"魔力"来帮助你创建应用程序.

对于更多相关信息,这是一篇很棒的文章:如果我有jQuery背景,我如何"在AngularJS中思考"？

一般差异.

以上几点针对OP的具体问题.我还将概述其他重要的差异.我建议另外阅读有关每个主题的内容.

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

Angular是一个框架,jQuery是一个库.框架有自己的位置,图书馆有自己的位置.但是,毫无疑问,良好的框架在编写应用程序方面比在库中具有更强大的功能.这正是框架的重点.欢迎使用普通JS编写代码,或者添加常用函数库,或者添加框架以大幅减少完成大多数事务所需的代码.因此,更合适的问题是:

为什么要使用框架？

良好的框架可以帮助构建您的代码,使其具有模块化(因此可重用),干燥,可读,高效和安全.jQuery不是一个框架,因此在这些方面没有帮助.我们都看到了jQuery意大利面代码的典型墙壁.这不是jQuery的错 - 这是开发人员的错,他们不知道如何构建代码.但是,如果开发人员确实知道如何构建代码,他们最终会编写某种最小的"框架"来提供我刚才讨论过的基础(架构等),或者他们会添加一些内容.例如,你可能会添加RequireJS作为编写优秀代码的框架的一部分.

以下是现代框架提供的一些内容:

• 模板
• 数据绑定
• 路由(单页面应用)
• 干净,模块化,可重复使用的架构
• 安全
• 附加功能/功能以方便使用

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

如果你需要摧毁一颗行星并拥有死星,请使用死星.

Angular(重新审视).

基于我之前关于框架提供什么的观点,我想赞扬Angular提供它们的方式,并试图澄清为什么这个问题实际上优于单独的jQuery.

DOM参考.

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

<clock></clock>

完成.

是的,我们需要使用JavaScript来实现这一点,但我们正在以与jQuery方法相反的方式执行此操作.我们的Angular指令(在它自己的小世界中)已经"扩充"了html,html将功能挂钩到自身.

MVW Architecure/Modules/Dependency Injection

Angular为您提供了一种直接构建代码的方法.查看视图中的内容(html),增强视图功能属于指令,其他逻辑(如ajax调用)和函数属于服务,服务和逻辑与视图的连接属于控制器.还有一些其他角度组件可以帮助处理服务的配置和修改等.您创建的任何功能都可以通过Injector子系统在您需要的任何地方自动获得,该子系统负责整个应用程序中的依赖注入.在编写应用程序(模块)时,我将其分解为其他可重用的模块,每个模块都有自己的可重用组件,然后将它们包含在更大的项目中.一旦解决了Angular的问题,您就会自动解决它,这种方式非常有用,并且可以在将来重复使用,并且可以轻松地包含在下一个项目中.一个巨大的奖金,这一切是你的代码会更容易测试.

在Angular中让事情"起作用"并不容易.

谢天谢地.上面提到的jQuery意大利面条代码来自一个开发者,它使某些东西"起作用"然后继续前进.你可以编写糟糕的Angular代码,但这样做要困难得多,因为Angular会为你而战.这意味着您必须(至少在某种程度上)利用它提供的干净架构.换句话说,使用Angular编写错误代码更难,但编写干净代码更方便.

Angular远非完美.Web开发世界总是在不断发展和变化,并且有更新的更好的方法来解决问题.例如,Facebook的React和Flux比Angular有一些很大的优势,但它们有其自身的缺点.没有什么是完美的,但Angular现在已经并且仍然很棒.就像jQuery曾经帮助网络世界向前发展一样,Angular也是如此,很多人也会如此.