js 實現 di

時間  2019-11-10
標籤 實現 欄目 JavaScript 简体版
原文   原文鏈接

前些時候有使用過AngularJS一些時間，最大的感覺就是Angular徹底顛覆了咱們開發Web應用的方式，本身被其許多耳目一新的設計思想所折服。javascript

首先想說的就是依賴注入（DI），這也意味着，你在使用某一個模塊時，不須要去手動require()一下，你須要的模塊會本身注入到的函數所在的做用域中，如：html

JavaScript
1
2
3
4
5
app.service( 'PersonService' , function ($http) {
     this .addPerson = function () {
         return $http.post( 'url/addPersonAction' , {name: 'name' });
     }
});

上面的代碼中，直接使用了$http的post()方法。那麼問題來了：爲何能夠這樣？咱們知道JS函數在調用時，其形參若是沒有賦值就會是undefined。能直接使用$http的post()方法，就說明$http是有對應的實參與之對應的。這是怎麼發生的呢？下面，就讓咱們一塊兒來揭開其中的祕密。java

一： 如何在JS中實現DI數組

在這以前，咱們先回顧一下toString方法。在JS中，除了null和undefined，其它全部的一切值都是有toString()方法的。函數也不例外，並且函數的toString()方法，是能夠拿到函數定義的所有代碼，甚至是註釋。有了這一前提，咱們能夠實現一個獲取函數形參的方法。app

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
  * 以數組的形式返回函數的參數名字字符串。沒有參數時返回空數組
  * @param {Function} fn - 要獲取參數的函數
  * @returns {Array}
  */
function argumentNames(fn) {
     var ret,
         methodCode = fn.toString();
         methodCode.replace(/\((.*?)\)/, function (match, g1) {
             var argStr = g1.replace(/\s/g, '' );
             ret = argStr.length ? argStr.split( ',' ) : [];
         });
     return ret;
}
 
// 使用：
argumentNames( function (arg1, arg2) {}); // ["arg1", "arg2"];

有了這個方法，咱們要實現參數的DI，還須要兩步：
1. 函數運行攔截它
2. 把對應的模塊傳給函數的上下文函數

對於第一步，JS原生沒有提供對應方法。但咱們能夠參照defined(), require()的作法。你定義模塊時，必須使用我給的方式去定義。類比Angular是post

JavaScript
1
2
3
angularModule.service( 'serviceID' , function (dependencyModuleA [, dependencyModuleB...]) {
     // do something
});

呵呵，既然你使用了個人方法去定義模塊，那麼我就能夠對你傳入的函數隨心所欲了…。可能你已經想到了，咱們要對其傳入的函數所作的第一件事就是獲取其參數列表，而後再把這個模塊保存下來。有了這個參數列表，就知道要注入多少個依賴。再接着，把對應的依賴傳做爲實參傳過去。那麼，如何拿到對應的依賴？在咱們給的定義方法中，已經讓傳入了一個ID，這個ID就是獲取對應模塊的關鍵。ui

要注入的模塊 === 模塊倉庫[模塊ID];this

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// DI的完整實現：
( function (widnow) {
     window.DI = {
         serviceCache:{},
         _argumentNames: function (fn) {
             var ret, methodCode = fn.toString();
             methodCode.replace(/\((.*?)\)/, function (match, g1) {
                 var argStr = g1.replace(/\s/g, '' );
                 ret = argStr.length ? argStr.split( ',' ) : [];
             });
             return ret;
         },
 
         service: function (serviceID, serviceFactory) {
             this .serviceCache[serviceID] = new serviceFactory();
             return this ;
         },
 
         controller: function (controllerID, controllerCb) {
             var controllerCbArgs = this ._argumentNames(controllerCb);
             var dependencies = [], i = 0;
 
             // 根據controllerCbArgs有序填充依賴
             while (controllerCbArgs[i]) {
                 dependencies.push( this .serviceCache[controllerCbArgs[i]]);
                 i++;
             }
 
             controllerCb.apply({}, dependencies);
             return this ;
         }
     };
 
})( this );
 
// 使用方法：
DI
     .service( 'AT' , function () {
         this .name = 'Alloy Team' ;
 
         this .concatUs = function () {
             document.body.innerHTML = 'Email: <a onclick="javascript:pageTracker._trackPageview(' /mailto/AlloyTeam@tencent.com ');" href="mailto:AlloyTeam@tencent.com">AlloyTeam@tencent.com</a>' ;
         };
     })
 
     .controller( 'c' , function (AT) {
         AT.concatUs();
     });

到此，咱們已經簡單實現了依賴注入。固然，這個實現是有不少問題的，好比JS混淆後不能正常工做，定義一個模塊就當即new也是不恰當的。有興趣的話能夠嘗試去完善這個DI，這裏就不繼續下去了。url

二： 如何在JS中實現AOP

提到DI，我就想到了AOP。有Java基礎的同窗都知道Ioc和AOP是Spring的兩大特性。在JS中，要實現AOP也很簡單，但方式卻顯得惟一：重寫原來的函數定義。以下是AOP一個實現：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
( function (window) {
     window.AOP = {
         before: function (ns, fnName, beforefn) {
             var ori = ns[fnName];
 
             ns[fnName] = function () {
                 beforefn();
                 ori();
             }
         }
     };
})( this );
 
// 使用
var ns = {
     foo: function () {
         console.log( 'foo...' );
     }
};
 
var bar = function () {
     console.log( 'bar...' );
};
 
// 如今使用AOP在ns.foo函數執行前，切入新邏輯bar()
AOP.before(ns, 'foo' , bar);
 
// 執行ns.foo
ns.foo(); 
/*
打印：
     bar...
     foo...
*/

雖然上面AOP的實現比較醜陋，但目前要想在JS中實現AOP，核心原理都是重寫函數定義。指望有一天能像操做XMLHttpRequest對象那樣，在每一個函數對象上，也有一個相似readyState的屬性，這時，再結合Object.observe，相信那時JS中的AOP實現將會很是優雅，AOP也會在JS中獲得更好的使用。更多AOP的使用場景能夠參考文章：js實現aop

小結：1. 在JS中實現DI：利用函數的toString方法2. 在JS中實現AOP：重寫原函數

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程