依赖注入(Dependancy Injection)听起来是一个望而生怯的词,所有大的词都有一个简单易懂的切入点,那先来用一个例子解释下DI。
有一下JS代码
在logCar这个函数中,car是声明后再进行使用的,这样无法对logCar函数进行重用,不是好的设计。因此,依赖注入的概念就在以下优化代码中体现了。
再来对比下以上的代码,DI可以解释传入对象的Reference。
第二点要讨论的,既然知道了DI是什么,那它在Angular中到底起了什么样的核心作用呢?在解答前先来看app.ts中的一段代码。
在浏览器的控制台会看到$scope函数是有值的,也就是说$scope这个函数是由Angular创建好并传入function中,换句话说Angular检测到function需要一个$scope的参数,于是Framework就将$scope准备好并将其reference注入到function中。
一般在实际开发中,为了减少JavaScript的文件大小缩短下载时间,会对script文件进行精简,于是function($scope)会被替换为function($a),这样会导致DI出现问题,因此才会有将$scope放到array里,避免被替换成其他简单的变量表达,最终写法如下。