AngularJS做什么比jQuery好?

前端之家收集整理的这篇文章主要介绍了AngularJS做什么比jQuery好?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我主要使用jQuery库和刚刚开始使用AngularJS。我已经阅读了一些关于如何使用Angular的教程,但我不清楚为什么或什么时候使用它,或者我可以找到相比,只是使用jQuery的好处。

在我看来,Angular使你认为MVC,这也许意味着你将你的网页作为模板数据组合。只要您认为您有动态数据,就使用{{data bindings}}。然后Angular将为您提供一个$ scope处理程序,您可以静态或通过调用Web服务器。这看起来与JSP设计网页的方式类似。我需要Angular吗?

对于简单的DOM操作,它不涉及数据操作(例如:鼠标上的颜色更改,隐藏/显示元素点击),jQuery或香草JS是足够和清洁。这假设角度mvc中的模型是反映页面上的数据的任何东西,因此,CSS属性(如颜色,显示/隐藏等)的更改不会影响模型。 Angular有什么优于jQuery或vanilla JS的DOM操作的任何优势?

与jQuery可以做的插件相比,Angular做什么可以使它对开发有用?

数据绑定

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).

这是对数据绑定的很好理解。我想你已经下了。

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操作是一个领域,就像数据绑定,其中Angular真的闪耀。理解这一点也将帮助你了解Angular如何看待它的意见。

我将首先比较Angular的方式和一个vanilla js的DOM操作方法。传统上,我们认为HTML不是“做”任何东西,而是这样写。所以,内联js,像“onclick”等是不好的做法,因为他们把“做”在HTML的上下文中,这不是“做”。角度翻转这个概念在它的头。当你写你的观点,你认为HTML是能够“做”很多事情。这个功能在角度指令中被抽象出来,但是如果它们已经存在或者你已经编写了它们,你不必考虑它是如何做的,你只是使用在这个“增强的”HTML中提供的功能angular允许你使用。这也意味着您的所有视图逻辑真正包含在视图中,而不是在您的javascript文件中。同样,推理是写在您的javascript文件中的指令可以被认为是增加HTML的能力,所以你让DOM担心操纵自己(可以说)。我将用一个简单的例子来演示。

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

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

首先,我想评论一下,如果我们通过自定义Angular Directive给我们的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)',transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

相当轻,非常干净,这只是一个简单的操纵!在我看来,角度方法赢得所有方面,特别是如何的功能被抽象出来,dom操作在DOM中声明。该功能通过html属性挂接到元素上,因此不需要通过选择器查询DOM,我们有两个很好的闭包 – 一个指令工厂的闭包,其中变量在指令的所有用法之间共享,以及在链接函数(或编译函数)中用于指令的每次使用的一个闭包。

DOM操作的双向数据绑定和指令只是使Angular真棒的开始。 Angular提倡所有代码都是模块化,可重用和易于测试,并且还包括页面应用程序路由系统。重要的是要注意,jQuery是一个常用的方便/跨浏览器方法的库,但Angular是一个用于创建单页应用程序的功能齐全的框架。角度脚本实际上包括它自己的“lite”版本的jQuery,以便一些最基本的方法可用。因此,你可以认为使用Angular IS使用jQuery(轻),但Angular提供了更多的“魔法”来帮助你在创建应用程序的过程。

这是一个伟大的职位更多相关信息:How do I “think in AngularJS” if I have a jQuery background?

一般差异。

上述几点是针对OP的具体关注点。我还将概述其他重要差异。我建议对每个主题做更多的阅读。

Angular和jQuery不能合理地比较。

Angular是一个框架,jQuery是一个库。框架有他们的位置和图书馆有他们的位置。然而,毫无疑问,一个好的框架在编写应用程序比库更有力量。这正是框架的要点。欢迎您使用纯JS编写代码,或者可以添加常用函数库,或者可以添加框架以大幅减少完成大多数操作所需的代码。因此,更恰当的问题是:

为什么要使用框架?

良好的框架可以帮助您构建代码,使其成为模块化(因此可重用),干燥,可读,高效和安全。 jQuery不是一个框架,所以它在这些方面没有帮助。我们都看到了jQuery spaghetti代码的典型墙。这不是jQuery的错误 – 这是开发人员的故障,不知道如何构建代码。然而,如果开发人员知道如何构建代码,他们最终会写出一些最小的“框架”来提供我刚才讨论的基础(achitecture等),或者他们会添加一些内容。例如,可能添加RequireJS作为框架的一部分,用于编写良好的代码

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

>模板
>数据绑定
>路由(单页应用)
>清洁,模块化,可重用架构
>安全
>附加功能/功能

在我进一步讨论Angular之前,我想指出Angular并不是唯一的一种。例如,Durandal是一个构建在jQuery,Knockout和RequireJS之上的框架。再次,jQuery本身不能提供什么Knockout,RequireJS,和建立在它们顶部的整个框架。它只是不可比。

如果你需要摧毁一个星球,你有一个死亡之星,使用死亡之星。

角(重访)。

基于我以前关于什么框架提供的观点,我想赞扬Angular提供的方式,并试图澄清为什么这是事实上优于jQuery的事情。

DOM引用。

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

<clock></clock>

完成。

是的,我们需要去使用JavaScript来实现这一点,但是我们使用的方式与jQuery方法相反。我们的Angular指令(这是它自己的小世界)已经“告诉”html和html钩子的功能到自己。

MVW架构/模块/依赖注入

Angular给你一个直接的方式来构建你的代码。查看属于视图(html)的属性,扩充视图功能属于指令,其他逻辑(如ajax调用)和函数属于服务,服务和逻辑连接到视图属于控制器。还有一些其他角度组件以及帮助处理服务的配置和修改等。您创建的任何功能都可以通过Injector子系统自动在任何地方可用,它在整个应用程序中处理依赖注入。当编写应用程序(模块)时,我将其分解成其他可重用的模块,每个模块都有自己的可重用组件,然后将它们包含在更大的项目中。一旦你解决了Angular的问题,你已经自动解决了它的方式是有用的和结构化以便将来重用,并轻松地包含在下一个项目。所有这一切的巨大的奖励是,你的代码将更容易测试。

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

谢天谢地。前面提到的jQuery意大利面条代码是由一个开发者做出的“工作”,然后继续前进。你可以写错误的Angular代码,但是这是很难做到这一点,因为Angular会打你。这意味着你必须利用(至少在某种程度上)它提供的干净的架构。换句话说,使用Angular编写错误代码更困难,但是更方便的编写干净的代码

角是远非完美。 Web开发世界总是在不断发展和变化,有新的和更好的方法提出来解决问题。例如,Facebook的React和Flux与Angular相比有一些很大的优势,但是有自己的缺点。没有什么是完美的,但Angular已经,现在仍然令人敬畏。正如jQuery曾经帮助网络世界向前发展一样,Angular也是如此,所以很多人会来。

猜你在找的Angularjs相关文章