jQuery和AngularJS的区别浅析

那么接下来我们如何采用AngularJS思维去工作呢，以下是一些将其与jQuery对比之后的基本准则：

以下是某个应用的视图层：

在jQuery中，我们动态地去修改这个视图，我们使用ul去定义一个dropdown menu

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

在jQuery中，我们采用如下逻辑使用这个dropdownMenu

$('.main-menu').dropdownMenu();

让我们回头看看这个view，你会发现它的功能并不是很直白，对于小型应用来讲，这样是可以的，但是对于大型应用来讲，这种方式会让人费解并且难以维护；

在angularjs中，这个视图实际上是一项基于视图的功能，我们可以这样来定义ul

<ul class="main-menu" dropdown-menu>
    ...
</ul>

这两种方式实际上做了同样的事情，但是在AngularJS方式下任何人看到这个视图模板就知道接下来要干什么。无论何时当一个新成员加入开发团队之后他都能够看到这里并发现这里有一个叫做dropdownMenu的指令去操作view，他不需要去猜想正确的答案或者审查其他的代码，这个视图就直接告诉我们它要做什么，相比于jQuery，它更为简洁。

常常有些AngularJS新手问这样的问题：我怎么才能找到某个确切类型的所有link并在此基础上添加一个directive，但是当我们回答了“你不应该这样去做，你这是一种半jQuery半angularjs的想法”时，他们会觉得很吃惊。

问题在于他们试图在AngularJS背景下用jQuery去做某件事，这通常不是一种好的方式，在指令之外你不需要去做任何dom操作，而指令是直接内添加在视图上的，所以意图已经很明显了。记住，不要先设计好之后再去修改，而是先有架构然后在这个框架下再去设计。

数据绑定

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