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教程