我爱编程前端杂货铺

Angular.js问题总结

2016-11-22  本文已影响0人  DontPushMeForev

1.angular 的数据绑定采用什么机制?详述原理

脏检查机制。

双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这需要一个监控。

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

举个栗子

<button ng-click='val=val+1'>increase</button>

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

按下按钮

      * 浏览器接收到一个事件,进入到 angular context

      * $digest循环开始执行,查询每个$watch是否变化

       * 由于监视$scope.val 的$watch报告了变化,因此强制再执行一次$digest循环

       * 新的$digest循环未检测到变化

        * 浏览器拿回控制器,更新$scope.val 新值对应的 dom

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

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

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

共用服务

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

基于事件

这个又分两种方式

第一种是借助父 controller。在子 controller 中向父 controller 触发($emit)一个事件,然后在父 controller 中监听($on)事件,再广播($broadcast)给子 controller ,这样通过事件携带的参数,实现了数据经过父 controller,在同级 controller 之间传播,(Angularjs为在scope中为我们提供了冒泡和隧道机制,$broadcast会把事件广播给所有子controller,而$emit则会将事件冒泡传递给父controller,$on则是angularjs的事件注册函数).

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

3.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 指令将子路由模版插入到父路由模板的

中去,从而实现视图嵌套。而在 ngRoute 中不能这样定义,如果同时在父子视图中 使用了

会陷入死循环。

示例

ngRoute

var app = angular.module('ngRouteApp', ['ngRoute']);

app.config(function($routeProvider){

          $routeProvider

                   .when('/main', {

                         templateUrl: "main.html",

                          controller: 'MainCtrl'

})

.otherwise({ redirectTo: '/tabs' });

ui.router

var app = angular.module("uiRouteApp", ["ui.router"]);

app.config(function($urlRouterProvider, $stateProvider){

            $urlRouterProvider.otherwise("/index");

            $stateProvider

                      .state("Main", {

                                url: "/main",

                                templateUrl: "main.html",

                                controller: 'MainCtrl'

                         })

4.angular 的缺点有哪些?

强约束

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

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

不利于 SEO

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

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

性能问题

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

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

减少监控项(比如对不会变化的数据采用单向绑定)

主动设置索引(指定track by,简单类型默认用自身当索引,对象默认使用$$hashKey,比如改为track by item.id)

降低渲染数据量(比如分页,或者每次取一小部分数据,根据需要再取)

数据扁平化(比如对于树状结构,使用扁平化结构,构建一个 map 和树状数据,对树操作时,由于跟扁平数据同一引用,树状数据变更会同步到原始的扁平数据)

另外,对于Angular1.x ,存在 脏检查 和 模块机制 的问题。

移动端

可尝试 Ionic,但并不完善。

5.解释下什么是$rootScrope以及和$scope的区别?

通俗的说$rootScrope页面所有$scope的父亲。

我们来看下如何产生$rootScope和$scope吧。

     *  Angular解析ng-app然后在内存中创建$rootScope。

     * Angular会继续解析,找到{{}}表达式,并解析成变量。

     * 接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

6. Angular中的digest周期是什么?

每个digest周期中,angular总会对比scope上model的值,一般digest周期都是自动触发的,我们也可以使用$apply进行手动触发。

7.不同模块之间通信方式?

     * Service

     * events,指定绑定的事件   

     * 使用 $rootScope

     * controller之间直接使用$parent,$$childHead等

     * directive 指定属性进行数据绑定

8.有哪些措施可以改善Angular 性能

     官方提倡的,关闭debug,$compileProvider

myApp.config(function ($compileProvider) {

         $compileProvider.debugInfoEnabled(false);

   });

  * 使用一次绑定表达式即{{::yourModel}}

  * 减少watcher数量

  * 在无限滚动加载中避免使用ng-repeat,关于解决方法可以参考这篇文章

  * 使用性能测试的小工具去挖掘你的angular性能问题,我们可以使用简单的console.time()也可以借助开发者工具以及Batarang

console.time("TimerName");

codeconsole.timeEnd("TimerName");

9.如何进行angular的单元测试

   我们可以使用karam+jasmine 进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。一段简单的测试代码:

describe('calculator', function () {

       beforeEach(module('calculatorApp'));

       var $controller;

       beforeEach(inject(function(_$controller_){

             $controller = _$controller_;

         }));

        describe('sum', function () {

                    it('1 + 1 should equal 2', function () {

                                var $scope = {};

                                var controller = $controller('CalculatorController', { $scope: $scope });

                                $scope.x = 1;

                                 $scope.y = 2;

                                $scope.sum();

                                expect($scope.z).toBe(3);

                            });

                });

});

10.如何看待angular2

相比 Angular1.x,Angular2的改动很大,几乎算是一个全新的框架。

基于 TypeScript(可以使用 TypeScript 进行开发),在大型项目团队协作时,强语言类型更有利。

组件化,提升开发和维护的效率。

还有 module 支持动态加载,new router,promise的原生支持等等。

迎合未来标准,吸纳其他框架的优点,值得期待,不过同时要学习的东西也更多了(ES next、TS、Rx等)。

上一篇下一篇

猜你喜欢

热点阅读