1 回答

• 274

  数据绑定

  您可以自己制作网页，并在认为自己拥有动态数据的同时继续使用{} . 然后，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>
  

  首先，我想评论一下，如果 we've given our HTML this functionality via a custom Angular Directive, we're already done . 那是一股清新的空气 . 稍等一下 .

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

  Pretty light, VERY clean and that's just a simple manipulation! 在我看来，角度方法在所有方面都获胜，特别是如何抽象出功能并在DOM中声明dom操作 . 该功能通过html属性挂接到元素上，因此不需要通过选择器查询DOM，并且我们有两个很好的闭包 - 指令工厂的一个闭包，其中变量在指令的所有用法中共享，以及 link 函数（或 compile 函数）中每次使用该指令的一个闭包 .

  DOM操作的双向数据绑定和指令只是使Angular很棒的开始 . Angular推动所有代码都是模块化的，可重用的，并且易于测试，还包括单页应用程序路由系统 . 值得注意的是，jQuery是一个常用的库方便/跨浏览器方法，但Angular是一个用于创建单页应用程序的全功能框架 . 角度脚本实际上包含了自己的"lite"版本的jQuery，因此可以使用一些最基本的方法 . 因此，您可以争辩说使用jQuery（轻松）使用Angular IS，但Angular提供了更多"magic"来帮助您创建应用程序 .

  这是一篇很好的帖子，可以获得更多相关信息： How do I “think in AngularJS” if I have a jQuery background?

  一般差异 .

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

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

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

  为什么要使用框架？

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

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

  • 模板

  • 数据绑定

  • 路由（单页面应用）

  • 清洁，模块化，可重复使用的架构

  • 安全

  • 附加功能/功能以方便使用

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

  If you need to destroy a planet and you have a Death Star, use the Death star.

  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也是如此，很多人也会如此 .

  回复于 2024-04-19T21:15:16+08:00