首页 > 代码库 > 如何权衡自己的angular水准

如何权衡自己的angular水准

angular是现在常用的一个前端MVVM框架,感受下下面的问题权衡下自己的水准吧。

1. angular的数据绑定采用什么机制?详述原理
2. 两个平级界面块a和b,如果a中触发一个事件,有哪些方式能让b知道,详述原理
3. 一个angular应用应当如何良好地分层?
4. angular应用常用哪些路由库,各自的区别是什么?
5. 如果通过angular的directive规划一套全组件化体系,可能遇到哪些挑战?
6. 分属不同团队进行开发的angular应用,如果要做整合,可能会遇到哪些问题,如何解决?
7. angular的缺点有哪些?
8. 如何看待angular 1.2中引入的controller as 语法?
9. 详述angular的“依赖注入”
10. 如何看待angular 2……

上面是需要长篇大论的问题,再来一些小问题:

1. ng-if跟ng-show/hide的区别有哪些?
2. ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决?
3. ng-click中写的表达式,能使用JS原生对象上的方法,比如Math.max之类的吗?为什么?
4. {{now | ‘yyyy-MM-dd‘}}这种表达式里面,竖线和后面的参数通过什么方式可以自定义?
5. factory和service,provider是什么关系?
 
 
 
答案附在下面,存在主观因素,如存疑,可再自行搜索答案
 
从小问题开始:

1. ng-if跟ng-show/hide的区别有哪些?

第一点区别是,ng-if 在后面表达式为 true 的时候才创建这个 dom 节点,ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不显示。


第二点区别是,ng-if 会(隐式地)产生新作用域,ng-switch 、 ng-include 等会动态创建一块界面的也是如此。


2. ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决?


会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然,也可以 trace by 任何一个普通的值,只要能唯一性标识数组中的每一项即可(建立 dom 和数据之间的关联)。


3. ng-click中写的表达式,能使用JS原生对象上的方法,比如Math.max之类的吗?为什么?


不可以。只要是在页面中,就不能直接调用原生的 JS 方法,因为这些并不存在于与页面对应的 Controller 的 $scope 中。除非在 $scope 中添加了这个函数:

$scope.parseInt = function(x){
    return parseInt(x);
}

4. {{now | ‘yyyy-MM-dd‘}}这种表达式里面,竖线和后面的参数通过什么方式可以自定义?


定义方式:

app.filter(‘过滤器名称‘,function(){
    return function(需要过滤的对象, 过滤器参数1, 过滤器参数2, ...){
        //...做一些事情   
        return 处理后的对象;
    }
}); 

  使用方式有两种,一种是直接在页面里:

<p>{{now | date : ‘yyyy-MM-dd‘}}</p>

 一种是在 js 里面用:

// $filter(‘过滤器名称‘)(需要过滤的对象, 参数1, 参数2,...)
$filter(‘date‘)(now, ‘yyyy-MM-dd hh:mm:ss‘);

  

5. factory和service,provider是什么关系?

factory 把 service 的方法和数据放在一个对象里,并返回这个对象;service 通过构造函数方式创建 service,返回一个实例化对象;provider 创建一个可通过 config 配置的 service。

从底层实现上来看,service 调用了 factory,返回其实例;factory 调用了 provider,将其定义的内容放在 $get 中返回。factory 和 service 功能类似,只不过 factory 是普通 function,可以返回任何东西(return 的都可以被访问,所以那些私有变量怎么写你懂的);service 是构造器,可以不返回(绑定到 this 的都可以被访问);provider 是加强版 factory,返回一个可配置的 factory。
1. angular的数据绑定采用什么机制?详述原理

脏检查机制。

Angular 在 scope 模型上设置了一个监听队列,用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch,用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时,$digest 循环就会触发,遍历所有的 $watch,最后更新 dom。
举个栗子:
<button ng-click="val=val+1">increase 1</button>

  

click 时会产生一次更新的操作(至少触发两次 $digest 循环)

  • 按下按钮
  • 浏览器接收到一个事件,进入到 angular context
  • $digest 循环开始执行,查询每个 $watch 是否变化
  • 由于监视 $scope.val 的 $watch 报告了变化,因此强制再执行一次 $digest 循环
  • 新的 $digest 循环未检测到变化
  • 浏览器拿回控制器,更新 $scope.val 新值对应的 dom

$digest 循环的上限是 10 次(超过 10次后抛出一个异常,防止无限循环)。

2. 两个平级界面块a和b,如果a中触发一个事件,有哪些方式能让b知道,详述原理


这个问题换一种说法就是,如何在平级界面模块间进行通信。有两种方法,一种是共用服务,一种是基于事件。


a. 共用服务


在 Angular 中,通过 factory 可以生成一个单例对象,在需要通信的模块 a 和 b 中注入这个对象即可。


b. 基于事件


这个又分两种方式


第一种是借助父 controller。在子 controller 中向父 controller 触发($emit)一个事件,然后在父 controller 中监听($on)事件,再广播($broadcast)给子 controller ,这样通过事件携带的参数,实现了数据经过父 controller,在同级 controller 之间传播。


第二种是借助 $rootScope。每个 Angular 应用默认有一个根作用域 $rootScope, 根作用域位于最顶层,从它往下挂着各级作用域。所以,如果子控制器直接使用 $rootScope 广播和接收事件,那么就可实现同级之间的通信。

angular应用常用哪些路由库,各自的区别是什么?


Angular1.x 中常用 ngRoute 和 ui.router,还有一种为 Angular2 设计的 new router(面向组件)。后面那个没在实际项目中用过,就不讲了。


无论是 ngRoute 还是 ui.router,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入。


两者区别是:


ngRoute 模块是 Angular 自带的路由模块,而 ui.router 模块是基于 ngRoute模块开发的第三方模块。


ui.router 是基于 state (状态)的, ngRoute 是基于 url 的,ui.router模块具有更强大的功能,主要体现在视图的嵌套方面。


使用 ui.router 能够定义有明确父子关系的路由,并通过 ui-view 指令将子路由模版插入到父路由模板的 <div ui-view></div> 中去,从而实现视图嵌套。而在 ngRoute 中不能这样定义,如果同时在父子视图中 使用了 <div ng-view></div> 会陷入死循环。


5. 如果通过angular的directive规划一套全组件化体系,可能遇到哪些挑战?


没有自己用 directive 做过一全套组件,讲不出。


能想到的一点是,组件如何与外界进行数据的交互,以及如何通过简单的配置就能使用吧。


6. 分属不同团队进行开发的angular应用,如果要做整合,可能会遇到哪些问题,如何解决?

可能会遇到不同模块之间的冲突。比如一个团队所有的开发在 moduleA 下进行,另一团队开发的代码在 moduleB 下:
angular.module(‘myApp.moduleA‘, [])
    .factory(‘serviceA‘, function(){
        ...
    })

angular.module(‘myApp.moduleB‘, [])
    .factory(‘serviceA‘, function(){
        ...
    })    

angular.module(‘myApp‘, [‘myApp.moduleA‘, ‘myApp.moduleB‘]) 

  

7. angular的缺点有哪些?


a. 强约束


导致学习成本较高,对前端不友好。


但遵守 AngularJS 的约定时,生产力会很高,对 Java 程序员友好。


b. 不利于 SEO


因为所有内容都是动态获取并渲染生成的,搜索引擎没法爬取。


一种解决办法是,对于正常用户的访问,服务器响应 AngularJS 应用的内容;对于搜索引擎的访问,则响应专门针对 SEO 的HTML页面。


c. 性能问题


作为 MVVM 框架,因为实现了数据的双向绑定,对于大数组、复杂对象会存在性能问题。

可以用来 优化 Angular 应用的性能 的办法:


  • 减少监控项(比如对不会变化的数据采用单向绑定)
  • 主动设置索引(指定 track by,简单类型默认用自身当索引,对象默认使用 $$hashKey,比如改为track by item.id)
  • 降低渲染数据量(比如分页,或者每次取一小部分数据,根据需要再取)
  • 数据扁平化(比如对于树状结构,使用扁平化结构,构建一个 map 和树状数据,对树操作时,由于跟扁平数据同一引用,树状数据变更会同步到原始的扁平数据)

    9. 详述angular的“依赖注入”


    AngularJS 是通过构造函数的参数名字来推断依赖服务名称的,通过 toString() 来找到这个定义的 function 对应的字符串,然后用正则解析出其中的参数(依赖项),再去依赖映射中取到对应的依赖,实例化之后传入。


    因为 AngularJS 的 injector 是假设函数的参数名就是依赖的名字,然后去查找依赖项,那如果像下面这样简单注入依赖,代码压缩后(参数被重命名了),就无法查找到依赖项了。

    function myCtrl = ($scope, $http){
        ...
    }
    

      

    所以,通常会使用下面两种方式注入依赖(对依赖添加的顺序有要求)。

     

    数组注释法:

    myApp.controller(‘myCtrl‘, [‘$scope‘, ‘$http‘, function($scope, $http){
        ...
    }])
    

      显式 $inject :

    myApp.controller(‘myCtrl‘, myCtrl);
    function myCtrl = ($scope, $http){
        ...
    }
    myCtrl.$inject = [‘$scope‘, ‘$http‘];
    

      

    对于一个 DI 容器,必须具备三个要素:依赖项的注册,依赖关系的声明和对象的获取。在 AngularJS 中,module 和 $provide 都可以提供依赖项的注册;内置的 injector 可以获取对象(自动完成依赖注入);依赖关系的声明,就是上面的那两种方式。

如何权衡自己的angular水准