jQuery和AngularJS的区别
来源:互联网 发布:东方不败网络歌手 编辑:程序博客网 时间:2024/06/04 18:56
url: ‘/myEndpoint.json’,
success: function ( data, status ) {(‘ul#log’).append(‘
现在我们不使用ul,而是使用Bootstrap的弹出框,但是我们不用修改controller中的代码,更为重要的是,不管是数据如何修改,视图层也会自动随之发生变化,非常简洁!
尽管我这里不会做演示,但是你需要知道数据绑定是双向的,你可以编辑数据通过添加指令,此外还有很多其他的令人兴奋的地方。
区别model层
在jQuery中,DOM类似于一种model,但是在AngularJS中,我们拥有不同于jQuery中的model层以便我们可以以任何我们想要的方式去管理它,它是完全独立于视图之外的。这种方式是有助于我们进行数据绑定并且可以保持对分离的关注,而且可以具备更好的可测试性。
关注点分离
以上所讲都和这个总体的话题相关:让你关注分离,你的视图层显示记录,你的model层代表数据,你还有个服务层用来执行这些可复用的任务。你使用directive来执行dom操作并扩展你的视图,并将它和controller连接起来,这也就是我在其他方面提到的有关于增强可测试性的原因。
依赖注入
帮助我们解决关注点分离的是依赖注入(DI),如果你是一个服务端开发者(Java或者PHP),你可能已经很熟悉这个概念了,但是如果你是从事客户端开发的,你会觉得这个概念可能有些多余和纯属追求时髦,但是实际上不是这样。
从广义的角度讲,DI意味着你可以自由地声明组件然后从这些组件中进行实例化,这是理所当然的。你不必知道加载顺序,文件位置等诸如此类的事情,这种魔力不是能够立即看到,但是我会给出一个例子:测试。
我们说在应用中,我们需要一个依赖于应用状态和本地存储的服务用来通过一个rest API来执行服务端存储,当我们测试我们的controller时,我们不必和服务端进行通信,毕竟只是在测试controller而已。我们仅添加一个与我们最初组件相同的mock服务,注入器能够确保我们的controller获得一个虚拟的服务,controller自身不必也不需要了解这种差异。
那么说说测试吧。
4.以测试驱动的开发
这部分是一个架构的第三部分,但是他是很重要的,以至于我需要将它放在最重要的位置。
在我们所有见过的,用过的以及写过的jQuery插件中,有多少具有一套测试组件呢?其实并不多,这是因为jQuery在测试上不易控制,但是AngularJS却与此不同。
在jQuery中,测试的唯一方法是使用一个demo页去创建一个独立组件来使得我们的测试可以执行dom操作。我们接下来我们必须开发一个独立的组件然后将它集成到我们的应用中来,这是多不方便啊!在很多情况下,当我们使用jQuery开发实际上是做了很多重复开发而不是以测试驱动的开发,这又能怪我们吗?
但是在AngularJS中我们可以关注分离点,所以我们可以做一些测试驱动的开发。例如,我们有一个directive用来说明在menu中我们的当前路径,我们可以在视图中这样声明:
复制代码 代码如下:
Hello
好了,现在我们可以写一个测试用来测试这个不存在的指令when-active了
复制代码 代码如下:
it( ‘should add “active” when the route changes’, inject(function() {
var elm =
$location.path('/not-matching');expect( elm.hasClass('active') ).toBeFalsey();$location.path( '/hello' );expect( elm.hasClass('active') ).toBeTruthy();
}));
我们直接run测试用例,你会发现是失败的,这时候需要创建这个指令,如下:
复制代码 代码如下:
.directive( ‘whenActive’, function ( location ) {
return {
scope: true,
link: function ( scope, element, attrs ) {
scope.on( 'routeChangeSuccess’, function () {
if (location.path() == element.attr( ‘href’ ) ) {
element.addClass( ‘active’ );
}
else {
element.removeClass( ‘active’ );
}
});
}
};
});
再次run这个测试用例,你会发现通过了并且菜单如请求的样子显示,我们的开发是兼有反复性和可测试性,非常酷吧!
5.从概念上讲,指令不是打包的jQuery
你常常听说,dom操作只能在指令中,这是必须的,你必须严肃对待。
让我们深入讨论,
某些指令仅仅是装饰我们的视图(例如ngClass),因此有时候直接操作dom是可以的,但是当一个指令类似于一个小物件并且拥有自己的模板,那么它应该当做一个分离的关注点,这就是说,它的模板需要和link中的执行逻辑以及其他controller函数分离开。
AngularJS拥有一整套的工具可以是这种分离更简单,使用ngClass指令,我们可以动态地更新class,使用ngBind我们可以进行双向数据绑定,使用ngShow和ngHide 我们
可以采用编程的形式显示和隐藏一个元素,也包括我们自己写的很多指令。换句话说,我们可以不用Dom操作而完成所有工作,dom操作越少,指令越容易测试,越容易指定他们的style属性,就越容易在将来改变他们,那么他们就越容易复用和分发。
我看过很多AngularJS新手使用指令封装一大串 jQuery代码,换句话说,既然我不能在controller里面进行dom操作,那么我可以将他放在指令中,虽然这相对于直接操作dom好很多,但是任然是错误的。
看看我们在上面的记录,即使我们将其放在一个指令中,我们任然需要以Angular的方式去操作它,这种方式不执行dom操作!在很多时候dom操作是需要的,但是这种情况比你想的要少得多。当我们需要做dom操作的时候先问问自己这里是否必须这样做,这才是一种更好的方式。
下面是一个简单的例子用来表明我常常见到的一种模式,我们需要I一个可切换的button:
复制代码 代码如下:
.directive( ‘myDirective’, function () {
return {
template: ‘Toggle me!‘,
link: function ( scope, element, attrs ) {
var on = false;
$(element).click( function () { on = !on; $(element).toggleClass('active', on); }); }};
});
在以上例子中存在以下错误:
1.首先,jQuery是不必要的,这里的工作完全不需要jQuery!
2.第二,即使我们已经在页面中引入了jquery,但是我们没有理由去使用它,我们可以使用angular.element而我们的组件也能够运行,即使这个项目中没有引入jQuery。
3.第三,假设jquery是需要的在我们的指令中,我们可以使用jqLite去进行替代,只要引入jQuery即可,所以我们不必使用
5.第五,我们之前已经说过,为什么不将我们的模板和逻辑混合起来呢?
以上指令可以按照如下方式来重写,即使在最复杂的情况下看起来也如此简单。
复制代码 代码如下:
.directive( ‘myDirective’, function () {
return {
scope: true,
template: ‘Toggle me!‘,
link: function ( scope, element, attrs ) {
scope.on = false;
scope.toggle = function () { scope.on = !scope.on; }; }};
});
模板元素是在 template属性中,你可以很容易替换掉它的style,而逻辑根本不用发生变化,达到了完全复用!
还有其他的好处,比如测试起来很简单,不管模板里面是什么,指令API都不会发生改变,所以重构它很简单。你可以随意多次改变你的模板而不用改变指令,无论你怎么改变,你的测试总能通过!
所以说指令不是一堆jQuery代码的集合,比如函数等,而是HTML代码的扩展,如果HTML代码不能实现你需要的功能,你可以写一个指令去实现它,然后像使用HTML那样去使用它。
以另外一种方式讲,AngularJS如果不做额外的事情,想想我们怎么能够使用ngClick,ngClass指令呢?
总结
不要总使用jquery ,甚至不要去引用它,它会阻止你前进,当我们回到这个问题—你知道你怎么在AngularJS中以jquery方式解决问题,但是当你使用诸如$等选择器时,你要想想它们实际上是禁锢了AngularJS,如果你不知道怎么不用jQuery实现,那么去请教别人,一次一次去问,最好的方式是不需要使用jQuery,使用jQuery只会导致你的工作量提升。
- jQuery和AngularJS的区别
- jQuery和AngularJS的区别浅析
- jQuery和AngularJS的区别浅析
- jQuery和AngularJS的区别浅析
- AngularJS和jQuery的区别分析
- jQuery和AngularJS的区别浅析
- Angularjs和jQuery的ajax的请求区别
- AngularJS与jQuery的区别
- angularjs和jquery在CRUD上的区别
- angularjs和vuejs的区别
- angularjs和vuejs的区别
- AngularJs 与Jquery区别
- 什么是AngularJs?特点是什么?和JQuery什么区别和联系?
- Handlebars 和 angularjs 之间的区别
- angularJS 1和2的区别
- angularjs compile和link的区别
- angularjs中ngbind和ngbindhtml的区别
- AngularJS中ngRouter和uiRouter的区别
- python set
- IPython下的网络协议学习-------以echo回显程序为例
- ORACLE逻辑操作符
- PHP PDO函数库详解
- java参数传递的最终理解
- jQuery和AngularJS的区别
- 集群的设计思路和常用的技术
- Hydra工具解析
- Android Studio 下获取开发版应用(application)的SHA1---方法之一
- 浅谈C++多态性
- session失效时间设置
- php使用PDO方法详解
- 原生javascript-图片滚动按需加载
- markdown绘图插件----mermaid简介