jQuery和AngularJS的区别浅析

帮助我们解决关注点分离的是依赖注入（DI），如果你是一个服务端开发者（Java或者PHP），你可能已经很熟悉这个概念了，但是如果你是从事客户端开发的，你会觉得这个概念可能有些多余和纯属追求时髦，但是实际上不是这样。

从广义的角度讲，DI意味着你可以自由地声明组件然后从这些组件中进行实例化，这是理所当然的。你不必知道加载顺序，文件位置等诸如此类的事情，这种魔力不是能够立即看到，但是我会给出一个例子：测试。

我们说在应用中，我们需要一个依赖于应用状态和本地存储的服务用来通过一个rest API来执行服务端存储，当我们测试我们的controller时，我们不必和服务端进行通信，毕竟只是在测试controller而已。我们仅添加一个与我们最初组件相同的mock服务，注入器能够确保我们的controller获得一个虚拟的服务，controller自身不必也不需要了解这种差异。

那么说说测试吧。

4.以测试驱动的开发

这部分是一个架构的第三部分，但是他是很重要的，以至于我需要将它放在最重要的位置。

在我们所有见过的，用过的以及写过的jQuery插件中，有多少具有一套测试组件呢？其实并不多，这是因为jQuery在测试上不易控制，但是AngularJS却与此不同。

在jQuery中，测试的唯一方法是使用一个demo页去创建一个独立组件来使得我们的测试可以执行dom操作。我们接下来我们必须开发一个独立的组件然后将它集成到我们的应用中来，这是多不方便啊！在很多情况下，当我们使用jQuery开发实际上是做了很多重复开发而不是以测试驱动的开发，这又能怪我们吗？

但是在AngularJS中我们可以关注分离点，所以我们可以做一些测试驱动的开发。例如，我们有一个directive用来说明在menu中我们的当前路径，我们可以在视图中这样声明：

<a href="/hello" when-active>Hello</a>

好了，现在我们可以写一个测试用来测试这个不存在的指令when-active了

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );
 
    $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,

 4/7   首页 上一页 2 3 4 5 6 7 下一页 尾页