最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs的话,很可能学了很久还不知道这个东西能用来干什么以及怎么使用,怎么和UI进行结合等问题,在stackoverflow上找到一篇关于这方面的文章,阅读之后颇有收获,在此基础上将它译成中文,以求抛砖引玉大家一同学习。

原问题:假如我熟悉利用jQuery去开发客户端应用,那么我怎么上手angularjs,能否描述下所需要的模式转变,下面这些问题能够帮助你给出一个回答:

1.在设计客户端web应用的时候有什么区别,最大的区别是什么?

2.我应该停止使用哪些技术,同时又使用哪些技术作为替代?

3.是否存在服务端需要考虑的东西或者说一些限制呢?

回答:

1.不要首先设计好你的页面,然后再通过DOM操作去修改它

在jQuery中,你首先设计了一个page,然后再去动态修改它的内容,这是因为jQuery被设计用来进行扩展并在这个前提下大幅度地增加和修改内容,但是在angularjs中,你必须在心中先设计好你的架构,

从一开始,你就要摒弃“我拥有一个DOM元素并且想让它去做某件事”,代之为“我需要完成什么任务,然后接着设计你的应用,最后再去设计你的视图view层”。

2.不要使用angularjs去扩展jQuery

相应地,不要存在说让jQuery去干某些事情,然后在此基础上添加angularjs的功能让它去管理model以及controller的想法。所以我一般不推荐AngularJS开发新手同时使用jQuery,至少在他们还没有适应AngularJS的开发模式之前不会去推荐这样做,但是当你真正开始适应angularjs 的方式之后,你会发觉这是一件很诱人的事情。

我曾经看到过很多开发者采用将150到200行代码的jQuery插件利用angularjs的回调以及$apply方法封装起来,这种方式使得代码看起来极其复杂,但是实际上他们让这些插件跑起来了!问题在于,在大部分情况下jQuery插件能够用angularjs进行重写,并且可能只会使用很少量的代码,同时这种重写使得代码很直观且易于理解,这显然好过于将jQuery代码直接做封装。

所以最后说,当你遇见问题的时候,首先要以angularjs的思维进行思考,如果找不到解决方案,可以求助于社区,如果说没有人能够给出一个简单的方案,那么才考虑使用jQuery,不要让jQuery成为你的拐杖,否则你永远掌握不了AngularJS。

3.要以架构为中心进行思考

首先你要知道单页应用属于web应用,它们不是传统的多网页网站,所以我们要同时作为一个服务端和客户端开发者的思维进行思考,我们需要思考如何将我们的应用分为独立的,可扩展的以及可测试的部分。

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

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

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

  1. <ul class="main-menu">
  2. <li class="active">
  3. <a href="#/home">Home</a>
  4. </li>
  5. <li>
  6. <a href="#/menu1">Menu 1</a>
  7. <ul>
  8. <li><a href="#/sm1">Submenu 1</a></li>
  9. <li><a href="#/sm2">Submenu 2</a></li>
  10. <li><a href="#/sm3">Submenu 3</a></li>
  11. </ul>
  12. </li>
  13. <li>
  14. <a href="#/home">Menu 2</a>
  15. </li>
  16. </ul>

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

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

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

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

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

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

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

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

数据绑定

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

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

相对于这样一个视图

  1. <ul class="messages" id="log">
  2. </ul>

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

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

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

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

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

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

  1. <div class="messages">
  2. <div class="alert" ng-repeat="entry in log">
  3. {{ entry.msg }}
  4. </div>
  5. </div>

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

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

区别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中我们的当前路径,我们可以在视图中这样声明:

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

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

  1. it( 'should add "active" when the route changes', inject(function() {
  2. var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );
  3.  
  4. $location.path('/not-matching');
  5. expect( elm.hasClass('active') ).toBeFalsey();
  6.  
  7. $location.path( '/hello' );
  8. expect( elm.hasClass('active') ).toBeTruthy();
  9. }));

我们直接run测试用例,你会发现是失败的,这时候需要创建这个指令,如下:

  1. .directive( 'whenActive', function ( $location ) {
  2. return {
  3. scope: true,
  4. link: function ( scope, element, attrs ) {
  5. scope.$on( '$routeChangeSuccess', function () {
  6. if ( $location.path() == element.attr( 'href' ) ) {
  7. element.addClass( 'active' );
  8. }
  9. else {
  10. element.removeClass( 'active' );
  11. }
  12. });
  13. }
  14. };
  15. });

再次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:

  1. .directive( 'myDirective', function () {
  2. return {
  3. template: '<a class="btn">Toggle me!</a>',
  4. link: function ( scope, element, attrs ) {
  5. var on = false;
  6.  
  7. $(element).click( function () {
  8. on = !on;
  9. $(element).toggleClass('active', on);
  10. });
  11. }
  12. };
  13. });

在以上例子中存在以下错误:

1.首先,jQuery是不必要的,这里的工作完全不需要jQuery!

2.第二,即使我们已经在页面中引入了jquery,但是我们没有理由去使用它,我们可以使用angular.element而我们的组件也能够运行,即使这个项目中没有引入jQuery。

3.第三,假设jquery是需要的在我们的指令中,我们可以使用jqLite去进行替代,只要引入jQuery即可,所以我们不必使用$而是使用angular.element;

4.第四,和第三点联系很紧密,jqLite元素不必使用$包裹起来,element元素传递到link函数中已经是一个jQuery对象了;

5.第五,我们之前已经说过,为什么不将我们的模板和逻辑混合起来呢?

以上指令可以按照如下方式来重写,即使在最复杂的情况下看起来也如此简单。

  1. .directive( 'myDirective', function () {
  2. return {
  3. scope: true,
  4. template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
  5. link: function ( scope, element, attrs ) {
  6. scope.on = false;
  7.  
  8. scope.toggle = function () {
  9. scope.on = !scope.on;
  10. };
  11. }
  12. };
  13. });

模板元素是在 template属性中,你可以很容易替换掉它的style,而逻辑根本不用发生变化,达到了完全复用!

还有其他的好处,比如测试起来很简单,不管模板里面是什么,指令API都不会发生改变,所以重构它很简单。你可以随意多次改变你的模板而不用改变指令,无论你怎么改变,你的测试总能通过!

所以说指令不是一堆jQuery代码的集合,比如函数等,而是HTML代码的扩展,如果HTML代码不能实现你需要的功能,你可以写一个指令去实现它,然后像使用HTML那样去使用它。

以另外一种方式讲,AngularJS如果不做额外的事情,想想我们怎么能够使用ngClick,ngClass指令呢?

总结

不要总使用jquery ,甚至不要去引用它,它会阻止你前进,当我们回到这个问题—你知道你怎么在AngularJS中以jquery方式解决问题,但是当你使用诸如$等选择器时,你要想想它们实际上是禁锢了AngularJS,如果你不知道怎么不用jQuery实现,那么去请教别人,一次一次去问,最好的方式是不需要使用jQuery,使用jQuery只会导致你的工作量提升。

原帖地址:

http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background

具有jQuery背景的程序员如何转换为AngularJS思考模式(译)的更多相关文章

  1. android程序员成长路径的思考

    我之前就想过要写这个话题,不过之前没有什么认识,我只是在阅读别人的见解,看法.昨天晚上,我阅读了这篇文章<产品经理罗永浩:用户体验探索,没有尽头>,这篇文章描述了罗永浩对锤子手机设计细节的 ...

  2. JAVA程序员面试宝典

    程序员面试之葵花宝典 面向对象的特征有哪些方面    1. 抽象:抽象就是忽略一个主题中与当前目标2. 无关的那些方面,3. 以便更充分地注意与当前目标4. 有关的方面.抽象并不5. 打算了解全部问题 ...

  3. Java程序员面试之葵花宝典

    程序员面试之葵花宝典 1.面向对象的特征有哪些方面   抽象:抽象就是忽略一个主题中与当前目标 无关的那些方面, 以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而 只是选择其中的一部 ...

  4. Java程序员面试题收集(3)

    面试中被问到过的题目: 1.<%@ include=""/>和<jsp:include page="" flush="true&qu ...

  5. Java程序员岗位

    Java程序员岗位面试题有哪些?   1.面向对象的特征有哪些方面(1)抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择 ...

  6. Java程序员从笨鸟到菜鸟全部博客目录

    本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 大学上了一年半,接触java也一年半了,虽然中间也有其他东西的学习,但是还是以java为主 ...

  7. Java程序员可能犯的3个常见SQL错误

    概述:Java程序员不仅要具备扎实的Java编程能力,在日常的工作当中往往还要涉及到其他语言的基础知识,尤其是SQL.那么哪些常见的SQL错误是程序员们容易犯的呢?让我们一起来看看吧! 你可能看到Ja ...

  8. 2017年 Java 程序员,风光背后的危机

    不得不承认,经历过行业的飞速发展期,互联网的整体发展趋于平稳.为什么这么说?为什么要放在 Java 程序员的盘点下说? 的确,对于进可攻前端,后可守后端大本营的 Java 程序员而言,虽然供应逐年上涨 ...

  9. JAVA程序员面试30问(附带答案)

    第一,谈谈final, finally, finalize的区别. 最常被问到.final修饰符(关键字)如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能 ...

随机推荐

  1. Linux查看进程的所有子进程和线程

    得到进程的pid: ps -ef | grep process_name | grep -v "grep" | awk '{print $2}' 查看进程的所有线程 # ps mp ...

  2. sscanf的用法

    sscanf也太好用了8我竟然一直都不知道qaq #include<cstdio> #include<cstdlib> #include<cstring> #inc ...

  3. 「6月雅礼集训 2017 Day7」回转寿司

    [题目大意] 给一个n个数的序列,q次操作,每次选择区间$[l,r]$,给出数p,对于区间$[l,r]$的每个数$x$,做如下操作: 如果$x > p$,就交换$x$和$p$.求每次操作后$p$ ...

  4. python初步学习-python数据类型-列表(list)

    列表 list 在 python 中具有非常强大的功能 定义 在python中,用方括号表示一个list:[] 在方括号里面,可以是 int,也可以是 str类型的数据,甚至也可以是Flase/Tru ...

  5. GBK UTF-16 UTF-8 编码表

    GBK   UTF-16 UTF-8 ================== D2BB  4E00  E4 B8 80  一 B6A1  4E01  E4 B8 81  丁 C6DF  4E03  E4 ...

  6. sk_buff结构

    sk_buff结构用来描述已接收或者待发送的数据报文信息:skb在不同网络协议层之间传递,可被用于不同网络协议,如二层的mac或其他链路层协议,三层的ip,四层的tcp或者udp协议,其中某些成员变量 ...

  7. make command explaination 編譯命令解釋

    Creating .config file make ARCH=arm CROSS_COMPILE=arm-none-eabi- stm32_defconfig 以上命令是 將變數 ARCH=arm, ...

  8. 关于c++的string的operator =

    在 c++ primer 5 中在说到string的章节里面有这样一句话: string s5 = "hiya"; // copy initialization 也就是说,这里说上 ...

  9. 【bzoj4518】征途

    懒得推式子了,总之是个斜率优化…… 先化一下题目要求的式子,再写一下dp方程,然后就是很自然的斜率优化了qwq #include<bits/stdc++.h> #define N 3005 ...

  10. 2015多校第6场 HDU 5355 Cake 贪心,暴力DFS

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5355 题意:给你n个尺寸大小分别为1,2,3,…,n的蛋糕,要求你分成m份,要求每份中所有蛋糕的大小之 ...