什么是依赖注入呢,我的理解,简单点就是说我的东西我自己并不像来拿着,我想要我依赖的那个人来帮我拿着,当我需要的时候,他给我就行了。当然这只是简单的理解,还是用代码解释比较清楚一些。
这里有一个 function,很简单。
1 2 3 |
var a = function(name){ console.log(name); } |
我们调用它:
1 |
a('abc');//abc |
那么,就像我上面说的,我能不能自己不传参数呢,例如:
1 |
a();//undefined |
如何才能实现让别人帮我们注入这个参数呢:
1 2 3 4 5 |
var inject = function(name,callback){ return function(){ callback(name); } } |
像这样,我们在定义参数的时候这样传:
1 |
a = inject('abc',a) |
我们再调用 a 方法:
1 |
a();//abc |
这其实就是最简单的依赖注入了,当然这么简单是不行的,其实这是很无意义的,下面我们来看一下高深的 angularjs:
1 2 3 |
var MyController = function($scope){ $scope.test = 1; } |
上面这段代码定义了 angularjs 的 controller 里面用到了 scope,这样还看不出问题,在看下面:
1 2 3 4 |
var MyController = function($scope,$http){ $scope.test = 1; $http.get(''); } |
上面这段代码在原来的基础上增加了 http, 那么问题就来了,angular 在调用 controller 的时候怎么知道我需要 scope 还是 http 还是两个都需要呢,这就牵着到了 angular 里的依赖注入,那么我们来模拟一下。
假设没有 angular 的情况下,我们:
1 2 3 4 5 |
var MyController = function($scope,$http){ $scope.test = 1; $http.get(''); } MyController();//undefined |
肯定会报错的,然后我们来修改下我们的 inject:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var inject = { dependencies: {}, register: function(key, value) { this.dependencies[key] = value; }, resolve: function(deps, func, scope) { var arr = []; for (var i = 0 ; i < deps.length ; i++) { if (this.dependencies.hasOwnProperty(deps[i])) {   |