jQuery和AngularJS的区别浅析

这是到目前为止AngularJS最令人瞩目的特性了，在数据绑定方面它舍弃了对DOM的操作方式，而这一切都是由AngularJS来自动更新视图，你不必写操作dom的代码，在jQuery中，我们常常按照以下方式响应事件并修改视图：

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

相对于这样一个视图

<ul class="messages" id="log">
</ul>

除了混杂的问题之外，我们还存在我之前提到的如何表明自己意图的问题。但是更为重要的是，我们必须人工手动去引用并更新这个DOM节点，如果我们想删除其中一条，那么必须以编程方式去操作那个DOM元素，那么在这种情况下我们怎么去测试DOM节点之外的逻辑呢，亦或者我们想改变展示方式呢？

以上代码显得凌乱又脆弱，但是在AngularJS中，我们可以这样做：

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

我们的视图应该像下面这样

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

在那种情况下，我们的视图也可以这样

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

现在我们不使用ul,而是使用Bootstrap的弹出框，但是我们不用修改controller中的代码，更为重要的是，不管是数据如何修改，视图层也会自动随之发生变化，非常简洁！

尽管我这里不会做演示，但是你需要知道数据绑定是双向的，你可以编辑数据通过添加指令<input ng-model="entry.msg" />，此外还有很多其他的令人兴奋的地方。

区别model层

在jQuery中，DOM类似于一种model，但是在AngularJS中，我们拥有不同于jQuery中的model层以便我们可以以任何我们想要的方式去管理它，它是完全独立于视图之外的。这种方式是有助于我们进行数据绑定并且可以保持对分离的关注，而且可以具备更好的可测试性。

关注点分离

以上所讲都和这个总体的话题相关：让你关注分离，你的视图层显示记录，你的model层代表数据，你还有个服务层用来执行这些可复用的任务。你使用directive来执行dom操作并扩展你的视图，并将它和controller连接起来，这也就是我在其他方面提到的有关于增强可测试性的原因。

依赖注入

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