富贵资源网 Design By www.hznty.com
在用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>谢谢大家!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...