自学实现angularjs依赖注入

站长资源 2024/11/28 佚名

54 1538 54

DDR爱好者之家 Design By 杰米

在用angular依赖注入时，感觉很好用，他的出现是为了“削减计算机程序的耦合问题” ，我怀着敬畏与好奇的心情，轻轻的走进了angular源码，看看他到底是怎么实现的，我也想写个这么牛逼的功能。于是就模仿着写了一个，如果有什么不对，请大家批评指正。

其实刚开始的时候我也不知道怎么下手，源码中有些确实晦涩难懂，到现在我也没有看明白，于是我就静下心想一想，他是怎么用的，如下所示：

angular.module(/*省略*/)
 .factory("xxxService", ['xx',function (xx) {
  return {
    //省略
  }
 }])
 .controller('iiController',['xxxService',function(xxxService){
  //省略
 }]);
/*...方法省略..*/

看看上面严格模式下的使用方式，先不去看源码，如何实现service重用，controller不重用呢？我就按照自己的想法创建一个cache用于保存service，controller 只运行一次，不保存到cache中。

有了点思路，就把该有的东西先写了，

(function (global) {
 function CreateInjector(cache){
  this.cache=cache;//用于保存service的cache
 }
 function Angular(){}
 Angular.module=function(){
  var moduleObj={};
  return {
   injector:new CreateInjector(moduleObj),
   factory:function(name,fn){
   },
   controller:function(name,fn){
   }
  }
 };
 global.angular = Angular;
})(window);

上面两个构造函数，一个是创建构造器，一个是angular 的静态module（不用创建直接用 "构造函数名.方法名"，这里就是想模仿angular.module()）方法，这里angular module 的方法我简写了，他也有依赖注入，但是我能力有限，先研究了controller和service的注入。上面的方法名字都是我copy于源码中的，这里我就不解释他们的具体意义了。

由于我们研究的是依赖注入，真正的核心代码如下：

var ARROW_ARG = /^([^\(]+"htmlcode">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>angular injector Demo</title>
</head>
<body>
<script>
(function (global) {
  var ARROW_ARG = /^([^\(]+"userInfoService", ['cacheService',function (cacheService) {
    return {
      getUserInfo:function(){
        return cacheService.userInfo;
      },
      setUserInfo:function(value){
        cacheService.userInfo=value;
      }
    }
  }])
  .controller('userController',['userInfoService',function(userInfoService){
    userInfoService.setUserInfo({id:'qqqq11234',name:'zhangLearing'});
    console.log(userInfoService.getUserInfo());
  }]);
</script>
</body>
</html>




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

angularjs,依赖注入

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“自学实现angularjs依赖注入”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

自学实现angularjs依赖注入

JS实现淡入淡出图片效果的方法分析

JS多物体实现缓冲运动效果示例

评论“自学实现angularjs依赖注入”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接