1. Descripción general
AngularJS tiene una característica clásica que es la inyección de dependencia. Los estudiantes que están familiarizados con la primavera deben saber muy bien qué es la inyección de dependencia, pero todavía es relativamente novedoso para el front-end.
La inyección de dependencia , en resumen, es desanimar un código duro para lograr el propósito de desacoplamiento.
A continuación, echemos un vistazo a los métodos de implementación comúnmente utilizados en AngularJS.
Método 1: Declaración de inyección inferencial, suponiendo que el nombre del parámetro sea el nombre de la dependencia. Por lo tanto, llamará internamente el método ToString () del objeto de función, analizará y extraerá la lista de parámetros de función, y luego inyectará estos parámetros en la instancia del objeto a través de $ inyector.
como sigue:
// Método 1: Declaración de inyección inferencial, suponiendo que el nombre del parámetro sea el nombre de la dependencia. // Por lo tanto, llamará al método toString () del objeto de función internamente, analizará y extraerá la lista de parámetros de función, y luego inyectará estos parámetros en la instancia de objeto inyector.invoke (function ($ http, $ timeOut) {// toDO});Método 2: Inyectar declaraciones dentro de la línea, lo que nos permite pasar directamente una matriz de parámetros al definir la función. La matriz contiene cadenas y funciones, donde la cadena representa el nombre de dependencia y la función representa el objeto de función objetivo.
como sigue:
// Método 2: inyectar declaraciones en la línea, lo que nos permite pasar directamente una matriz de parámetros al definir la función. // La matriz contiene cadenas y funciones, donde las cadenas representan los nombres de dependencia y las funciones representan objetos de función objetivo. módulo.controller ('name', ['$ http', '$ timeOut', function ($ http, $ timeOut) {// tODO}]);Después de leer el código anterior, tenía una pregunta en mi mente, ¿cómo se implementaron estos?
Jaja, simulemos estos métodos de inyección de dependencia juntos para comprenderlos.
2. Construye el esqueleto básico
El proceso de adquisición de inyección de dependencia es obtener el método correspondiente a través del mapeo de campo.
Por lo tanto, para implementar una inyección de dependencia básica, necesitamos un espacio de almacenamiento (dependencias) para almacenar la clave/valor requerido; un método de registro (registrar) para agregar nuevos pares de valor clave al espacio de almacenamiento; y otro es el método de implementación central (resolución), que obtiene los resultados de mapeo correspondientes en el espacio de almacenamiento a través de parámetros relevantes.
Entonces, el esqueleto básico es el siguiente:
var inyector = {dependencias: {}, registrar: function (key, value) {this.dependences [key] = valor; devolver esto; }, resolve: function () {}};3. Mejore el método central para resolver
Desde el esqueleto básico que hemos construido, podemos encontrar que la clave es realmente el método de resolución, que se utiliza para implementar nuestra forma específica de requisitos de inyección de dependencia.
Primero, implementaremos la inyección de dependencia en la siguiente forma: Declaración de inyección inferida.
como sigue:
inyector.resolve (function (mono, dorie) {monkey (); dorie ();});Para lograr el efecto anterior, podemos usar el método ToString () de la función, donde podemos convertir la función en una cadena, para obtener el nombre del parámetro, es decir, el valor clave, a través de una expresión regular. Luego, a través del valor clave, encuentre el valor del valor en las dependencias del espacio de almacenamiento. Si no se encuentra ningún valor correspondiente, se informará un error.
La implementación es la siguiente:
var inyector = {dependencias: {}, registrar: function (key, value) {this.dependences [key] = valor; devolver esto; }, resolve: function () {var func, deps, args = [], scope = null; func = argumentos [0]; // Obtenga el nombre del parámetro de la función DEPS = FUNC.ToString (). Match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); alcance = argumentos [1] || {}; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependences [d]); } else {tirar un nuevo error ('Can/' t Find ' + D); }} func.apply (alcance, args); }};El código de prueba es el siguiente:
<! DOCTYPE HTML> <HEAD> <meta charset = "utf-8"/> </head> <body> <script> var inyector = {dependencias: {}, registrar: function (key, value) {this.dependencies [key] = value; devolver esto; }, resolve: function () {var func, deps, args = [], scope = null; func = argumentos [0]; // Obtenga el nombre del parámetro de la función DEPS = FUNC.ToString (). Match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); alcance = argumentos [1] || {}; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependences [d]); } else {tirar un nuevo error ('Can/' t Find ' + D); }} func.apply (alcance, args); }}; // Test Code Injector.Register ('Monkey', function () {console.log ('monkey');}). Registro ('dorie', function () {console.log ('dorie');}); inyector.resolve (function (mono, dorie) {monkey (); dorie (); console.log ('-.-');}); </script> </body> </html>Una desventaja de la declaración de inyección inferida es que no se puede comprimir utilizando herramientas de compresión, porque confiamos en los parámetros de la función. Cuando comprimamos, cambiaremos el nombre del parámetro y cambiaremos el nombre del parámetro, que definitivamente fallará.
Luego a continuación, echemos un vistazo a la declaración de inyección en línea, que puede compensar esta deficiencia.
Implementar declaraciones de inyección en línea de la siguiente manera:
inyector.resolve (['mono', 'dorie', function (m, d) {m (); d ();}]);Use typeOf para determinar el tipo de argumentos [0] para distinguir y obtener parámetros y funciones de dependencia.
La implementación es la siguiente:
var inyector = {dependencias: {}, registrar: function (key, value) {this.dependences [key] = valor; devolver esto; }, resolve: function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = argumentos [0]; alcance = argumentos [1] || {}; // Obtener parámetros de dependencia para (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; }} // Confiando en los parámetros, encuentre el valor asociado para (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependences [d]); } else {tirar un nuevo error ('Can/' t Find ' + D); }} FunC.Apply (alcance || {}, args); }};El código de prueba es el siguiente:
<! DOCTYPE HTML> <HEAD> <meta charset = "utf-8"/> </head> <body> <script> var inyector = {dependencias: {}, registrar: function (key, value) {this.dependencies [key] = value; devolver esto; }, resolve: function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = argumentos [0]; alcance = argumentos [1] || {}; // Obtener parámetros de dependencia para (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; }} // Confiando en los parámetros, encuentre el valor asociado para (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependences [d]); } else {tirar un nuevo error ('Can/' t Find ' + D); }} FunC.Apply (alcance || {}, args); }}; // Test Code Injector.Register ('Monkey', function () {console.log ('monkey');}). Registro ('dorie', function () {console.log ('dorie');}); inyector.resolve (['mono', 'dorie', function (m, d) {m (); d (); console.log ('-.-');}]); </script> </body> </html>Debido a que la declaración en la línea se usa como un parámetro de dependencia a través de la forma de una cadena, y la compresión no tiene miedo.
Finalmente, integramos los dos métodos implementados anteriormente y hacemos lo que queramos.
Entonces, fusionémoslo, como sigue:
var inyector = {dependencias: {}, registrar: function (key, value) {this.dependences [key] = valor; devolver esto; }, resolve: function () {var firstParams, func, deps = [], scope = null, args = []; FirstParams = argumentos [0]; alcance = argumentos [1] || {}; // juzga qué forma de inyección 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; }}} // confiando en los parámetros, encuentre el valor asociado para (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependences [d]) {args.push (this.dependences [d]); } else {tirar un nuevo error ('Can/' t Find ' + D); }} FunC.Apply (alcance || {}, args); }};4. Destacados: la inyección de dependencia de Requirjs
La inyección de dependencia no se encuentra en AngularJS. Si ha usado necesidades, entonces el siguiente formulario estará familiarizado con:
requerir (['mono', 'dorie'], function (m, d) {// tODO});A través de lo anterior, simulamos la implementación de la inyección de dependencia de AngularJS paso a paso. Creo que cuando veas esto, de repente te darás cuenta de que cambiarás la sopa o el medicamento.
La implementación de la simulación es la siguiente:
var inyector = {dependencias: {}, registrar: function (key, value) {this.dependences [key] = valor; devolver esto; }, resolver: function (deps, func, alcance) {var args = []; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependences [d]); } else {tirar un nuevo error ('can/' t resolve ' + d); }} FunC.Apply (alcance || {}, args); }};El código de prueba es el siguiente:
<! DOCTYPE HTML> <HEAD> <meta charset = "utf-8"/> </head> <body> <script> var inyector = {dependencias: {}, registrar: function (key, value) {this.dependencies [key] = value; devolver esto; }, resolver: function (deps, func, alcance) {var args = []; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.dependences [d]); } else {tirar un nuevo error ('can/' t resolve ' + d); }} FunC.Apply (alcance || {}, args); }}}; // Test Code Injector.Register ('Monkey', function () {console.log ('monkey');}). Registro ('dorie', function () {console.log ('dorie');}); inyector.resolve (['mono', 'dorie'], function (m, d) {m (); d (); console.log ('-.-');}); </script> </body> </html>V. Referencia
1. AngularJS Desarrollo de aplicaciones Pensamiento 3: Inyección de dependencia
2. Inyección de dependencia en JavaScript
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.