angular問題總結與反思

時間 2019-11-24

原文原文鏈接

由於工做中實際開發須要，纔開始接觸angular框架。從當初的比葫蘆畫瓢，被各類問題、概念折磨摧殘，到如今有必定的瞭解認識，以爲有必要將本身的認識進行簡單的總結。不到位的地方還望多多包涵。html

1.雙向數據綁定

目前業內盛行各類MV**框架，相關的框架不斷涌現，而angular就是其中的一種(MVVM)。MV**框架其實最核心的問題就是將view層和model分離開來，下降代碼的耦合性，作到數據和表現的分離，MVC、MVP、MVVM均有相同的目標，而他們之間的不一樣就在於如何把model層和view關聯起來。前端

數據在model、view層如何流動就成了問題的關鍵，angular經過dirty-check實現了數據的雙向綁定。所謂的雙向綁定，就是view的變化能夠反映到model層，而model數據的變化能夠在view體現出來。那麼angular是如何作到雙向綁定的?爲什麼成爲dirty-check呢？仍是前端的一個原始問題出發吧：jquery

 1 html:
 2 <input type="button" value="increase 1" id="J-increase" />
 3 <span id="J-count"></span>
 4  
 5 js:
 6 <script>
 7     var bindDate = {
 8         count: 1,
 9         appy: function () {
10             document.querySelector('#J-count').innerHTML = this.count;
11         },
12         increase: function () {
13             var _this = this;
14             document.querySelector('#J-increase').addEventListener('click', function () {
15                 _this.count++;
16                 appy();
17             }, true);
18         },
19         initialize: function () {
20             // 初始化
21             this.appy();
22             //
23             this.increase();
24         }
25     };
26     bindDate.initialize();
27 </script>

在上面的例子中，存在兩個過程:git

view層影響model層: 頁面上點擊button，形成數據count的數量增長1
model層反應view層: count發生完變化之後，經過apply函數來反映到view層上

這是之前使用jquery、YUI等類庫實現的數據處理，這裏面存在的問題很明顯: 1. 涉及到了大量的DOM操做; 2. 過程繁瑣；3.代碼耦合性過高，不便於寫單元測試。下面來看看angular是如何進行數據處理的：angularjs

第一步. 添加watcher：就是當數據發生變化的時候，須要檢測哪些對象，須要先進行註冊github

 1 // 對angular裏面的源碼進行了精簡  
 2 $watch: function(watchExp, listener, objectEquality) {
 3     var scope = this,
 4         array = scope.$$watchers,
 5         watcher = {
 6             fn: listener,
 7             last: initWatchVal,
 8             get: get,
 9             exp: watchExp,
10             eq: !!objectEquality
11         };
12     if (!array) {
13         array = scope.$$watchers = [];
14     }
15     array.unshift(watcher);
16 }

第二步. dirty-check：就是當有某個scope做用域下的數據發生變化後，須要遍歷檢測註冊的$$watchers = [...]spring

1 $digest: function() {
2     while (length--) {
3         watch = watchers[length];
4         watch.fn(value, lastValue, scope);
5     }
6 }

這樣就實現了數據的雙向綁定，上面的實現是否跟自定義事件很像呢？能夠看到使用了觀察者設計模式或(publisher-subscriber)。後端

2.依賴注入

使用過spring框架的同窗都知道，Ioc、AOP是spring裏面最重要的兩個概念，而Ioc就能夠裏面爲注入依賴(DI)，很明顯angular帶有很是濃厚的後端色彩。設計模式

一樣，首先來看下不使用DI，是如何解決對象相互依賴的:安全

 1 function Car() {
 2     ...
 3 }
 4 Car.prototype = {
 5     run: function () {...}
 6 }
 7  
 8 function Benz() {
 9     var cat = new Car();
10 }
11 Benz.prototype = {
12     ...
13 }

在上面的例子中，類Benz依賴於類Car，直接經過內部New來解決這種依賴關係。這樣作的弊端很是明顯，代碼耦合性變高，不利於維護。後端框架很早就意識到了這個問題，spring早期經過在xml文件中註冊對象之間的依賴關係，後來有經過anotation的方式更加方便地解決DI問題，COS端的同窗能夠看看後端的代碼。

js語言自己是不具備註解(annotation)機制的，那angular是如何實現的呢？

1.模擬註解

 1 // 註解的模擬
 2 function annotate(fn, strictDi, name) {
 3     var $inject;
 4     if (!($inject = fn.$inject)) {
 5         $inject = [];
 6         $inject.push(name);
 7     }else if (isArray(fn)) {
 8         $inject = fn.slice(0, last);
 9     }
10     return $inject;
11 }
12 createInjector.$$annotate = annotate;

2. 注入對象的建立

 1 function createInjector(modulesToLoad, strictDi) {
 2     //經過singleton模式建立對象
 3     var providerCache = {
 4         $provide: {
 5             provider: supportObject(provider),
 6             factory: supportObject(factory),
 7             service: supportObject(service),
 8             value: supportObject(value),
 9             constant: supportObject(constant),
10             decorator: decorator
11           }
12       },
13     instanceCache = {},
14     instanceInjector = (instanceCache.$injector =
15         createInternalInjector(instanceCache, function(serviceName, caller) {
16             var provider = providerInjector.get(serviceName + providerSuffix, caller);
17             return instanceInjector.invoke(provider.$get, provider, undefined, serviceName);
18         }));
19     return instanceInjector;
20 }

3. 獲取注入對象

 1 function invoke(fn, self, locals, serviceName) {
 2     var args = [],
 3         $inject = annotate(fn, strictDi, serviceName);
 4  
 5     for (...) {
 6         key = $inject[i];
 7         // 替換成依賴的對象
 8         args.push(
 9           locals && locals.hasOwnProperty(key)
10           ? locals[key]
11           : getService(key, serviceName)
12         );
13     }
14     if (isArray(fn)) {
15         fn = fn[length];
16     }      
17     return fn.apply(self, args);
18 }

到這裏，是不是看到不少後端框架設計的思路，沒有anotation就模擬一個，難怪PPK要說angular是" a front-end framework by non-front-enders for non-front-enders"

3.controller通訊

在實際開發中，應用系統會很是龐大，一個應用app不可能只存在一個controller，那麼不一樣controller之間就存在通訊的可能，如何解決這個常見問題，主要有兩種方法：

1.事件機制: 把事件註冊在$rootScope上，這樣作的問題就是會在$rootScope上註冊太大事件，會引發一些列後續問題

 1 //controller1
 2 app.controller('controller1', function ($rootScope) {
 3     $rootScope.$on('eventType', function (arg) {
 4         ......
 5     })
 6 })
 7  
 8 // controller2
 9 app.controller('controller2', function ($rootScope) {
10     $rootScope.$emit('eventType',arg);
11     or
12     $rootScope.$broadcast('eventType',arg);
13 })

2.經過service: 充分利用angular的DI特性，利用service是單例的特色，在不一樣controller之間起到橋樑做用

 1 // 註冊service
 2 app.service('Message', function () {
 3     return {
 4         count: void(0);
 5     }
 6 })
 7  
 8 // controller1,修改service的count值
 9 app.controller('controller1', function ($scope, Message) {
10     $scope.count = 1;
11     Message.count = $scope.count;
12 });
13  
14 // controller2, 獲取service的count值
15 app.controller('controller2', function ($scope, Message) {
16     $scope.num = Message.count;
17 });

4.service的特色

1. 單例(singleton): angular裏面只有service才能夠進行DI諸如，controller、directive這些均不具備這些功能，service字面上就是提供一些基本的服務，跟具體的業務沒有關聯，而controller、directive則與具體業務緊密相關聯，因此須要保證service的惟一性。

2. lazy new：angular首先會生成service的provider，可是並無當即生成對應的service，只有到須要這些服務的時候纔會進行實例化操做。

3. provider)的分類: provider()、factory、service、value、constant，其中provider是最底層的實現，其餘方式都是在其基礎上的語法糖(sugar)，須要注意的是這些服務最終均要添加$get方法，由於具體service是經過執行$get方法生成的。

5. directive的實現

directive的編譯(compiler)包括兩個階段: compile、link。簡單來說compile階段主要處理template DOM，此時並不涉及做用域問題，也就是沒有進行數據渲染，例如ngRepeate指令就是經過compile進行template修改的，執行compile後會返回link函數，覆蓋後面定義的link函數；而link主要是進行數據渲染，分爲pre-link和post-link兩個環節，這兩個環節解析的順序是相反，post-link是先解析內部，而後纔是外部，這樣對directive的解析就是安全的，由於directive內部還能夠包括directive，同時link是對真正DOM的處理，會涉及DOM操做的性能問題。