In the use of angular rely on injection, feeling very good, his appearance is to "reduce the coupling of computer programs", I have a sense of awe and curiosity, gently walked into the angular source code, to see how he actually achieved, I also want to write a so cool function. So he imitated the writing of one, if there is anything wrong, please criticize correct.
In fact, I did not know how to start at the beginning, some of the source code is indeed obscure, to the present I did not see, so I would like to think, he is how to use, as follows:
Angular.module (* * omitted/*)
. Factory ("Xxxservice", [' xx ', function (xx) {return
{
//omitted
}
}])
. Controller (' Iicontroller ', [' Xxxservice ', function (xxxservice) {
//omitted
}]);
/*... Method omitted. */
Look at the above strict mode of use, not to see the source code, how to achieve service reuse, controller not reuse it? I'm going to create a cache for my own purposes. Save Service,controller only once and not save to cache.
With a little thought, I wrote the things that were supposed to be first,
(function (global) {
function Createinjector (cache) {
this.cache=cache;//is used to save the cache
}
for the service function angular () {}
angular.module=function () {
var moduleobj={};
return {
injector:new createinjector (moduleobj),
factory:function (NAME,FN) {
},
Controller: function (NAME,FN) {
}
}
};
Global.angular = angular;
}) (window);
The above two constructors, one is to create the constructor, one is angular static module (do not need to create directly with the "constructor name. Method Name", here is to imitate the Angular.module ()) method, here angular the method of module I abbreviated, He also has dependency injection, but I have limited ability to study the controller and service injection first. The above method name is in my copy source code, here I do not explain their concrete meaning.
Since we're studying dependency injection, the real core code is as follows:
var arrow_arg =/^ ([^\ (]+?) =>/;
var Fn_args =/^[^\ (]*\ (\s* ([^\)]*) \)/m;
var strip_comments =/((\/\/.*$) | ( \/\*[\s\s]*?\*\/))/mg;
function IsArray (obj) {return
Object.prototype.toString.call (obj) = = ' [Object Array] ';
}
function Stringifyfn (FN) {return
fn.tostring ();
}
function Extractargs (FN) {
var fntext = STRINGIFYFN (FN). replace (Strip_comments, '),
args= Fntext.match ( Arrow_arg) | | Fntext.match (Fn_args);
Return Args[1].split (', ');
}
function Createinjector (cache) {
This.cache=cache
}
createinjector.prototype={
Constructor:createinjector,
invoke:function (fn,self) {
var argsname= Extractargs (FN), argsfn=[];
Argsname.foreach (function (ARG) {
Argsfn.push (this.cache[arg));
},this)
; if (IsArray (FN)) {return
fn[fn.length-1].apply (SELF,ARGSFN);
} else{return
fn.apply (SELF,ARGSFN);
}
}
;
The above regular expression is copied in the source code, the code principle is:
(1) the function toString (), then using the regular match out of the parameter name, split the parameter into a parameter array;
(2) loop parameter array, find the function under the parameter name in cache, push into a function array;
(3) Using apply, the function array is used as the parameter to execute the function;
For the transmitted FN, the judgment is an array format, or an ordinary one, if the array is the last value of the apply, that is, the function, or FN itself.
I did not do the above error handling, such as injection can not find a number of problems, and I am interested in adding it.
Finally all the code is as follows, you can copy and run:
<! DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>angular injector DEMO&L T;/title> </head> <body> <script> (function (global) {var arrow_arg =/^ ([^\ (]+?)
=>/;
var Fn_args =/^[^\ (]*\ (\s* ([^\)]*) \)/m; var strip_comments =/((\/\/.*$) | (
\/\*[\s\s]*?\*\/))/mg;
function IsArray (obj) {return Object.prototype.toString.call (obj) = = ' [Object Array] ';
function Stringifyfn (FN) {return fn.tostring (); function Extractargs (FN) {var fntext = STRINGIFYFN (FN). replace (Strip_comments, '), args= Fntext.match (ARROW _arg) | |
Fntext.match (Fn_args);
Return Args[1].split (', ');
function Createinjector (cache) {This.cache=cache; } createinjector.prototype={Constructor:createinjector, Invoke:function (fn,self) {var argsname= extractAr
GS (FN), argsfn=[];
Argsname.foreach (function (ARG) {Argsfn.push (This.cache[arg]);
},this);
if (IsArray (FN)) { Return fn[fn.length-1].apply (SELF,ARGSFN);
}else{return fn.apply (SELF,ARGSFN);
}
}
};
function angular () {} angular.module=function () {var moduleobj={}; return {injector:new createinjector (moduleobj), factory:function (NAME,FN) {moduleobj[name]=this.in
Jector.invoke (FN);
return this;
}, Controller:function (NAME,FN) {This.injector.invoke (FN);
return this;
}
}
};
Global.angular = angular;
}) (window);
Angular.module (). Factory (' Cacheservice '), [function () {return {};
}]. Factory ("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>
Thank you!
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
