1. Overview
AngularJS has a classic feature that is dependency injection. Students who are familiar with spring should know very well what dependency injection is, but it is still relatively novel for the front-end.
Dependency injection, in short, it is to uncode hard code to achieve the purpose of uncoupling.
Below, let's take a look at the commonly used implementation methods in AngularJS.
Method 1: Inferential injection declaration, assuming that the parameter name is the name of the dependency. Therefore, it will internally call the toString() method of the function object, analyze and extract the function parameter list, and then inject these parameters into the object instance through $injector.
as follows:
//Method 1: Inferential injection declaration, assuming that the parameter name is the name of the dependency.// Therefore, it will call the toString() method of the function object internally, analyze and extract the function parameter list,//Then inject these parameters into the object instance through $injector(function($http, $timeout){
//TODO
});
Method 2: Inject declarations within the line, allowing us to directly pass an array of parameters when defining the function. The array contains strings and functions, where strings represent dependency names and functions represent objective function objects.
as follows:
//Method 2: Inject declarations into the line, allowing us to directly pass an array of parameters when defining the function.//Array contains strings and functions, where strings represent dependency names and functions represent objective function objects.('name', ['$http', '$timeout', function($http, $timeout){
//TODO
}]);
After reading the above code, I had a question in my mind, how did these be implemented?
Haha, let’s simulate these dependency injection methods together to understand them.
2. Build the basic skeleton
The acquisition process of dependency injection is to obtain the corresponding method through field mapping.
Therefore, to implement a basic dependency injection, we need a storage space (dependencies) to store the required key/value; a registration method (register) to add new key-value pairs to the storage space; and another is the core implementation method (resolve), which obtains the corresponding mapping results in the storage space through relevant parameters.
So, the basic skeleton is as follows:
var injector = {
dependencies: {},
register: function(key, value){
[key] = value;
return this;
},
resolve: function(){
}
};
3. Improve the core method to resolve
From the basic skeleton we have built, we can find that the key is actually resolve method, which is used to implement our specific form of dependency injection requirements.
First, we will implement dependency injection in the following form: inferred injection declaration.
as follows:
(function(Monkey, Dorie){
Monkey();
Dorie();
});
To achieve the above effect, we can use the function's toString() method, where we can convert the function into a string, so as to obtain the parameter name, that is, the key value, through a regular expression. Then, through the key value, find the value value in the storage space dependencies. If no corresponding value is found, an error will be reported.
Implementation is as follows:
var injector = {
dependencies: {},
register: function(key, value){
[key] = value;
return this;
},
resolve: function(){
var func, deps, args = [], scope = null;
func = arguments[0];
//Get the parameter name of the function deps = ().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
scope = arguments[1] || {};
for(var i = 0, len = ; i < len, d = deps[i]; i++){
if([d]){
([d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
(scope, args);
}
};
Test code, as follows:
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var injector = {
dependencies: {},
register: function(key, value){
[key] = value;
return this;
},
resolve: function(){
var func, deps, args = [], scope = null;
func = arguments[0];
//Get the parameter name of the function deps = ().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
scope = arguments[1] || {};
for(var i = 0, len = ; i < len, d = deps[i]; i++){
if([d]){
([d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
(scope, args);
}
};
//Test code ('Monkey', function(){
('Monkey');
}).register('Dorie', function(){
('Dorie');
});
(function(Monkey, Dorie){
Monkey();
Dorie();
('.');
});
</script>
</body>
</html>
One disadvantage of inferred injection declaration is that it cannot be compressed using compression tools, because we rely on the parameters of the function. When we compress, we will change the parameter name and change the parameter name, which will definitely fail.
Then below, let's take a look at the in-line injection statement, which can make up for this shortcoming.
Implement in-line injection declarations as follows:
(['Monkey', 'Dorie', function(M, D){
M();
D();
}]);
Use typeof to determine the type of arguments[0] to distinguish and obtain dependency parameters and functions.
Implementation is as follows:
var injector = {
dependencies: {},
register: function(key, value){
[key] = value;
return this;
},
resolve: function(){
var firstParams, func, deps = [], scope = null, args = [];
firstParams = arguments[0];
scope = arguments[1] || {};
//Get dependency parameters for(var i = 0, len = ; i < len; i++){
var val = firstParams[i],
type = typeof val;
if(type === 'string'){
(val);
}else if(type === 'function'){
func = val;
}
}
// Find the associated value by dependent parameters for(i = 0, len = ; i < len, d = deps[i]; i++){
if([d]){
([d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
(scope || {}, args);
}
};
Test code, as follows:
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var injector = {
dependencies: {},
register: function(key, value){
[key] = value;
return this;
},
resolve: function(){
var firstParams, func, deps = [], scope = null, args = [];
firstParams = arguments[0];
scope = arguments[1] || {};
//Get dependency parameters for(var i = 0, len = ; i < len; i++){
var val = firstParams[i],
type = typeof val;
if(type === 'string'){
(val);
}else if(type === 'function'){
func = val;
}
}
// Find the associated value by dependent parameters for(i = 0, len = ; i < len, d = deps[i]; i++){
if([d]){
([d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
(scope || {}, args);
}
};
//Test code ('Monkey', function(){
('Monkey');
}).register('Dorie', function(){
('Dorie');
});
(['Monkey','Dorie',function(M, D){
M();
D();
('.');
}]);
</script>
</body>
</html>
Because the declaration in the line is used as a dependency parameter through the form of a string, so and compression are not afraid of.
Finally, we integrate the two methods implemented above and do whatever we want.
Then, let's merge it, as follows:
var injector = {
dependencies: {},
register: function(key, value){
[key] = value;
return this;
},
resolve: function(){
var firstParams, func, deps = [], scope = null, args = [];
firstParams = arguments[0];
scope = arguments[1] || {};
//Judge which form of injection if(typeof firstParams === 'function'){
func = firstParams;
deps = ().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m)[1].replace(/ /g, '').split(',');
}else{
for(var i = 0, len = ; i < len; i++){
var val = firstParams[i],
type = typeof val;
if(type === 'string'){
(val);
}else if(type === 'function'){
func = val;
}
}
}
// Find the associated value by dependent parameters for(i = 0, len = ; i < len, d = deps[i]; i++){
if([d]){
([d]);
}else{
throw new Error('Can\'t find ' + d);
}
}
(scope || {}, args);
}
};
4. Highlights—RequireJS's dependency injection
Dependency injection is not found in AngularJS. If you have used RequireJS, then the following form will be familiar with:
require(['Monkey', 'Dorie'], function(M, D){
//TODO
});
Through the above, we simulated the implementation of AngularJS dependency injection step by step. I believe that when you see this, you will suddenly realize that you will change the soup or the medicine.
The simulation is implemented as follows:
var injector = {
dependencies: {},
register: function(key, value){
[key] = value;
return this;
},
resolve: function(deps, func, scope){
var args = [];
for(var i = 0, len = ; i < len, d = deps[i]; i++){
if([d]){
([d]);
}else{
throw new Error('Can\'t resolve ' + d);
}
}
(scope || {}, args);
}
};
The test code is as follows:
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
var injector = {
dependencies: {},
register: function(key, value){
[key] = value;
return this;
},
resolve: function(deps, func, scope){
var args = [];
for(var i = 0, len = ; i < len, d = deps[i]; i++){
if([d]){
([d]);
}else{
throw new Error('Can\'t resolve ' + d);
}
}
(scope || {}, args);
}
};
//Test code ('Monkey', function(){
('Monkey');
}).register('Dorie', function(){
('Dorie');
});
(['Monkey', 'Dorie'], function(M, D){
M();
D();
('.');
});
</script>
</body>
</html>
5. Reference
1、AngularJS application development thinking 3: Dependency injection
2、Dependency injection in JavaScript
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.