前些時(shí)候有使用過(guò)AngularJS一些時(shí)間，最大的感受就是Angular完全顛覆了我們開發(fā)Web應(yīng)用的方式，自己被其許多耳目一新的設(shè)計(jì)思想所折服。

首先想說(shuō)的就是依賴注入（DI），這也意味著，你在使用某一個(gè)模塊時(shí)，不需要去手動(dòng)require()一下，你需要的模塊會(huì)自己注入到的函數(shù)所在的作用域中，如：

JavaScript

1 2 3 4 5

app.service('PersonService', function ($http) { ????this.addPerson = function () { ????????return $http.post('url/addPersonAction', {name:'name'}); ????} });

上面的代碼中，直接使用了$http的post()方法。那么問題來(lái)了：為什么可以這樣？我們知道JS函數(shù)在調(diào)用時(shí)，其形參如果沒有賦值就會(huì)是undefined。能直接使用$http的post()方法，就說(shuō)明$http是有對(duì)應(yīng)的實(shí)參與之對(duì)應(yīng)的。這是怎么發(fā)生的呢？下面，就讓我們一起來(lái)揭開其中的秘密。

一： 如何在JS中實(shí)現(xiàn)DI

在這之前，我們先回顧一下toString方法。在JS中，除了null和undefined，其它所有的一切值都是有toString()方法的。函數(shù)也不例外，而且函數(shù)的toString()方法，是可以拿到函數(shù)定義的全部代碼，甚至是注釋。有了這一前提，我們可以實(shí)現(xiàn)一個(gè)獲取函數(shù)形參的方法。

?

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/** ?* 以數(shù)組的形式返回函數(shù)的參數(shù)名字字符串。沒有參數(shù)時(shí)返回空數(shù)組 ?* @param {Function} fn - 要獲取參數(shù)的函數(shù) ?* @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"];

有了這個(gè)方法，我們要實(shí)現(xiàn)參數(shù)的DI，還需要兩步：
1. 函數(shù)運(yùn)行攔截它
2. 把對(duì)應(yīng)的模塊傳給函數(shù)的上下文

對(duì)于第一步，JS原生沒有提供對(duì)應(yīng)方法。但我們可以參照defined(), require()的做法。你定義模塊時(shí)，必須使用我給的方式去定義。類比Angular是

JavaScript

1 2 3

angularModule.service('serviceID', function (dependencyModuleA [, dependencyModuleB...]) { ????// do something });

呵呵，既然你使用了我的方法去定義模塊，那么我就可以對(duì)你傳入的函數(shù)為所欲為了…。可能你已經(jīng)想到了，我們要對(duì)其傳入的函數(shù)所做的第一件事就是獲取其參數(shù)列表，然后再把這個(gè)模塊保存下來(lái)。有了這個(gè)參數(shù)列表，就知道要注入多少個(gè)依賴。再接著，把對(duì)應(yīng)的依賴傳作為實(shí)參傳過(guò)去。那么，如何拿到對(duì)應(yīng)的依賴？在我們給的定義方法中，已經(jīng)讓傳入了一個(gè)ID，這個(gè)ID就是獲取對(duì)應(yīng)模塊的關(guān)鍵。

要注入的模塊 === 模塊倉(cāng)庫(kù)[模塊ID];

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的完整實(shí)現(xiàn)： (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; ????????????// 根據(jù)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(); ????});

到此，我們已經(jīng)簡(jiǎn)單實(shí)現(xiàn)了依賴注入。當(dāng)然，這個(gè)實(shí)現(xiàn)是有很多問題的，比如JS混淆后不能正常工作，定義一個(gè)模塊就立即new也是不恰當(dāng)?shù)摹Ｓ信d趣的話可以嘗試去完善這個(gè)DI，這里就不繼續(xù)下去了。

二： 如何在JS中實(shí)現(xiàn)AOP

提到DI，我就想到了AOP。有Java基礎(chǔ)的同學(xué)都知道Ioc和AOP是Spring的兩大特性。在JS中，要實(shí)現(xiàn)AOP也很簡(jiǎn)單，但方式卻顯得唯一：重寫原來(lái)的函數(shù)定義。如下是AOP一個(gè)實(shí)現(xiàn)：

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...'); }; // 現(xiàn)在使用AOP在ns.foo函數(shù)執(zhí)行前，切入新邏輯bar() AOP.before(ns, 'foo', bar); // 執(zhí)行ns.foo ns.foo();? /* 打印： ????bar... ????foo... */

雖然上面AOP的實(shí)現(xiàn)比較丑陋，但目前要想在JS中實(shí)現(xiàn)AOP，核心原理都是重寫函數(shù)定義。期望有一天能像操作XMLHttpRequest對(duì)象那樣，在每個(gè)函數(shù)對(duì)象上，也有一個(gè)類似readyState的屬性，這時(shí)，再結(jié)合Object.observe，相信那時(shí)JS中的AOP實(shí)現(xiàn)將會(huì)非常優(yōu)雅，AOP也會(huì)在JS中得到更好的使用。更多AOP的使用場(chǎng)景可以參考文章：js實(shí)現(xiàn)aop

小結(jié)：
1. 在JS中實(shí)現(xiàn)DI：利用函數(shù)的toString方法
2. 在JS中實(shí)現(xiàn)AOP：重寫原函數(shù)

轉(zhuǎn)載于:https://www.cnblogs.com/zoucaitou/p/4179042.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的js 实现 di的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。