首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS之依赖注入模拟实现

Posted in Javascript onAugust 19, 2016

一、概述 

AngularJS有一经典之处就是依赖注入，对于什么是依赖注入，熟悉spring的同学应该都非常了解了，但，对于前端而言，还是比较新颖的。 

依赖注入，简而言之，就是解除硬编码，达到解偶的目的。 

下面，我们看看AngularJS中常用的实现方式。 

方法一：推断式注入声明，假定参数名称就是依赖的名称。因此，它会在内部调用函数对象的toString()方法，分析并提取出函数参数列表，然后通过$injector将这些参数注入进对象实例。 

如下： 

//方法一：推断式注入声明，假定参数名称就是依赖的名称。
//因此，它会在内部调用函数对象的toString()方法，分析并提取出函数参数列表，
//然后通过$injector将这些参数注入进对象实例
injector.invoke(function($http, $timeout){
 //TODO
});

方法二：行内注入声明，允许我们在函数定义时，直接传入一个参数数组，数组包含了字符串和函数，其中，字符串代表依赖名，函数代表目标函数对象。
 如下：

//方法二：行内注入声明，允许我们在函数定义时，直接传入一个参数数组，
//数组包含了字符串和函数，其中，字符串代表依赖名，函数代表目标函数对象。
module.controller('name', ['$http', '$timeout', function($http, $timeout){
 //TODO
}]);

看了上述代码，心中有一疑问，这些是怎么实现的呢？ 

哈哈，下面，我们就来一起模拟一下这些依赖注入方式，从而了解它们。 

二、搭建基本骨架 

依赖注入的获取过程就是，通过字段映射，从而获取到相应的方法。 

故而，要实现一个基本的依赖注入，我们需要一个存储空间（dependencies），存储所需键值（key/value）；一个注册方法（register），用于新增键值对到存储空间中；还有一个就是核心实现方法（resolve），通过相关参数，到存储空间中获得对应的映射结果。 

So，基本骨架如下： 

var injector = {
 dependencies: {},
 register: function(key, value){
 this.dependencies[key] = value;
 return this;
 },
 resolve: function(){
    
 }
};

三、完善核心方法resolve 

从我们搭建的基本骨架中，可以发现，重点其实resolve方法，用于实现我们具体形式的依赖注入需求。 

首先，我们来实现，如下形式的依赖注入：推断式注入声明。 

如下： 

injector.resolve(function(Monkey, Dorie){
 Monkey();
 Dorie();
});

要实现上述效果，我们可以利用函数的toString()方法，我们可以将函数转换成字符串，从而通过正则表达式获得参数名，即key值。 然后通过key值，在存储空间dependencies找value值，没找到对应值，则报错。 

实现如下： 

var injector = {
 dependencies: {},
 register: function(key, value){
 this.dependencies[key] = value;
 return this;
 },
 resolve: function(){
 var func, deps, args = [], scope = null;
 func = arguments[0];
 //获取函数的参数名
 deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
 scope = arguments[1] || {};
 for(var i = 0, len = deps.length; i < len, d = deps[i]; i++){
  if(this.dependencies[d]){
  args.push(this.dependencies[d]);
  }else{
  throw new Error('Can\'t find ' + d);
  }
 }
 func.apply(scope, args);   
 }
};

测试代码，如下： 

<!DOCTYPE html>
 <head>
 <meta charset="utf-8"/>
 </head>
 <body>
 <script>
  var injector = {
  dependencies: {},
  register: function(key, value){
   this.dependencies[key] = value;
   return this;
  },
  resolve: function(){
   var func, deps, args = [], scope = null;
   func = arguments[0];
   //获取函数的参数名
   deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
   scope = arguments[1] || {};
   for(var i = 0, len = deps.length; i < len, d = deps[i]; i++){
   if(this.dependencies[d]){
    args.push(this.dependencies[d]);
   }else{
    throw new Error('Can\'t find ' + d);
   }
   }
   func.apply(scope, args);   
  }
  };
  //测试代码
  injector.register('Monkey', function(){
  console.log('Monkey');
  }).register('Dorie', function(){
  console.log('Dorie');
  });
  injector.resolve(function(Monkey, Dorie){
  Monkey();
  Dorie();
  console.log('-.-');
  }); 
 </script>
 </body>
</html>

推断式注入声明，有个缺点，就是不能利用压缩工具压缩，因为我们是通过函数的参数作为依赖的，当我们压缩时，会将参数名改掉，参数名都变了，那肯定扑街咯。 

那么下面，我们就看看行内注入声明，它可以弥补这缺点。 

实现行内注入声明，如下：

injector.resolve(['Monkey', 'Dorie', function(M, D){
 M();
 D();
}]);

利用typeof判断arguments[0]的类型可以辨别并获得依赖参数和函数。 

实现如下： 

var injector = {
 dependencies: {},
 register: function(key, value){
 this.dependencies[key] = value;
 return this;
 },
 resolve: function(){
 var firstParams, func, deps = [], scope = null, args = [];
 firstParams = arguments[0];
 scope = arguments[1] || {};
 //获得依赖参数
 for(var i = 0, len = firstParams.length; i < len; i++){
  var val = firstParams[i],
  type = typeof val;
  if(type === 'string'){
  deps.push(val);
  }else if(type === 'function'){
  func = val;
  }
 }
 //通过依赖参数，找到关联值
 for(i = 0, len = deps.length; i < len, d = deps[i]; i++){
  if(this.dependencies[d]){
  args.push(this.dependencies[d]);
  }else{
  throw new Error('Can\'t find ' + d);
  }
 }
 func.apply(scope || {}, args);   
 }
};

测试代码，如下： 

<!DOCTYPE html>
 <head>
 <meta charset="utf-8"/>
 </head>
 <body>
 <script>
  var injector = {
  dependencies: {},
  register: function(key, value){
   this.dependencies[key] = value;
   return this;
  },
  resolve: function(){
   var firstParams, func, deps = [], scope = null, args = [];
   firstParams = arguments[0];
   scope = arguments[1] || {};
   //获得依赖参数
   for(var i = 0, len = firstParams.length; i < len; i++){
   var val = firstParams[i],
    type = typeof val;
   if(type === 'string'){
    deps.push(val);
   }else if(type === 'function'){
    func = val;
   }
   }
   //通过依赖参数，找到关联值
   for(i = 0, len = deps.length; i < len, d = deps[i]; i++){
   if(this.dependencies[d]){
    args.push(this.dependencies[d]);
   }else{
    throw new Error('Can\'t find ' + d);
   }
   }
   func.apply(scope || {}, args);   
  }
  };
  //测试代码
  injector.register('Monkey', function(){
  console.log('Monkey');
  }).register('Dorie', function(){
  console.log('Dorie');
  });
  injector.resolve(['Monkey','Dorie',function(M, D){
  M();
  D();
  console.log('-.-');
  }]); 
 </script>
 </body>
</html>

因为行内注入声明，是通过字符串的形式作为依赖参数，so，压缩也不怕咯。
 最后，我们将上面实现的两种方法，整合到一起，就可以为所欲为啦。
 那，就合并下吧，如下： 

var injector = {
 dependencies: {},
 register: function(key, value){
 this.dependencies[key] = value;
 return this;
 },
 resolve: function(){
 var firstParams, func, deps = [], scope = null, args = [];
 firstParams = arguments[0];
 scope = arguments[1] || {};
 //判断哪种形式的注入
 if(typeof firstParams === 'function'){
  func = firstParams;
  deps = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
 }else{
  for(var i = 0, len = firstParams.length; i < len; i++){
  var val = firstParams[i],
   type = typeof val;
  if(type === 'string'){
   deps.push(val);
  }else if(type === 'function'){
   func = val;
  }
  } 
 }
 //通过依赖参数，找到关联值
 for(i = 0, len = deps.length; i < len, d = deps[i]; i++){
  if(this.dependencies[d]){
  args.push(this.dependencies[d]);
  }else{
  throw new Error('Can\'t find ' + d);
  }
 }
 func.apply(scope || {}, args);   
 }
};

四、花絮—RequireJS之依赖注入 

依赖注入并非在AngularJS中有，倘若你使用过RequireJS，那么下面这种形式，不会陌生吧：

require(['Monkey', 'Dorie'], function(M, D){
 //TODO 
});

通过，上面我们一步步的模拟AngularJS依赖注入的实现，想必，看到这，你自己也会豁然开朗，换汤不换药嘛。 

模拟实现如下： 

var injector = {
 dependencies: {},
 register: function(key, value){
 this.dependencies[key] = value;
 return this;
 },
 resolve: function(deps, func, scope){
 var args = [];
 for(var i = 0, len = deps.length; i < len, d = deps[i]; i++){
  if(this.dependencies[d]){
  args.push(this.dependencies[d]);
  }else{
  throw new Error('Can\'t resolve ' + d);
  }
 }
 func.apply(scope || {}, args);
 }
};

测试代码如下： 

<!DOCTYPE html>
 <head>
 <meta charset="utf-8"/>
 </head>
 <body>
 <script>
  var injector = {
  dependencies: {},
  register: function(key, value){
   this.dependencies[key] = value;
   return this;
  },
  resolve: function(deps, func, scope){
   var args = [];
   for(var i = 0, len = deps.length; i < len, d = deps[i]; i++){
   if(this.dependencies[d]){
    args.push(this.dependencies[d]);
   }else{
    throw new Error('Can\'t resolve ' + d);
   }
   }
   func.apply(scope || {}, args);
  }
  };
  //测试代码  
  injector.register('Monkey', function(){
  console.log('Monkey');
  }).register('Dorie', function(){
  console.log('Dorie');
  });
  injector.resolve(['Monkey', 'Dorie'], function(M, D){
  M();
  D();
  console.log('-.-');
  }); 
 </script>
 </body>
</html>

五、参考 

1、AngularJS应用开发思维之3：依赖注入 
2、Dependency injection in JavaScript

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

AngularJS之依赖注入模拟实现

- Author -

猴子

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
删除节点的jquery代码
Jan 13 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
iframe如何动态创建及释放其所占内存
Sep 03 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
浅谈Vue中render中的h箭头函数
Nov 07 Javascript
vue实现计算器功能
Feb 22 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 #Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 #Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 #Javascript
AngularJS入门教程之双向绑定详解
Aug 18 #Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 #Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 #Javascript
AngularJS入门教程之静态模板详解
Aug 18 #Javascript
触发器(3) Hash(1) XML(1) metaclass(1) Geospatial(1) 自动化(1) zip(1) IOC(3) 数据类型(8) Bean(3)
You might like
php中文本操作的类
2007/03/17 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python+django+sql学生信息管理后台开发
2018/01/11 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
python调用jenkinsAPI构建jenkins，并传递参数的示例
2020/12/09 Python
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
信息专业个人的自我评价
2013/12/27 职场文书
2014的自我评价
2014/01/13 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
要账委托书范本
2014/09/15 职场文书
简易版租房协议书范本
2014/10/13 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
健康证明
2015/06/19 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书