1. Visão geral
AngularJS tem um recurso clássico que é a injeção de dependência. Os alunos familiarizados com a primavera devem saber muito bem o que é a injeção de dependência, mas ainda é relativamente novo para o front-end.
A injeção de dependência , em resumo, é para o código rígido incódico para obter o objetivo de desacoplar.
Abaixo, vamos dar uma olhada nos métodos de implementação comumente usados no AngularJs.
Método 1: Declaração de injeção inferencial, assumindo que o nome do parâmetro seja o nome da dependência. Portanto, ele chamará internamente o método ToString () do objeto de função, analisará e extrairá a lista de parâmetros da função e, em seguida, injetará esses parâmetros na instância do objeto por meio de $ injetor.
do seguinte modo:
// Método 1: Declaração Injeção Inferencial, assumindo que o nome do parâmetro seja o nome da dependência. // Portanto, ele chamará o método ToString () do objeto de função internamente, analisará e extrairá a lista de parâmetros da função e, em seguida, injete esses parâmetros na instância do objeto injector.invoke (function ($ http, $ timeout) {// TODO});Método 2: Injetar declarações dentro da linha, permitindo passar diretamente uma matriz de parâmetros ao definir a função. A matriz contém strings e funções, onde a string representa o nome da dependência e a função representa o objeto de função objetivo.
do seguinte modo:
// Método 2: Injete declarações na linha, permitindo que passemos diretamente uma matriz de parâmetros ao definir a função. // Array contém strings e funções, onde as strings representam nomes e funções de dependência representam objetos de função objetiva. Module.Controller ('Nome', ['$ http', '$ timeout', function ($ http, $ timeout) {// TODO}]);Depois de ler o código acima, tive uma pergunta em minha mente: como isso foi implementado?
Haha, vamos simular esses métodos de injeção de dependência juntos para entendê -los.
2. Construa o esqueleto básico
O processo de aquisição de injeção de dependência é obter o método correspondente através do mapeamento de campo.
Portanto, para implementar uma injeção básica de dependência, precisamos de um espaço de armazenamento (dependências) para armazenar a chave/valor necessária; um método de registro (registro) para adicionar novos pares de valor-chave ao espaço de armazenamento; e outro é o método de implementação principal (Resolve), que obtém o mapeamento correspondente resulta no espaço de armazenamento por meio de parâmetros relevantes.
Então, o esqueleto básico é o seguinte:
var injector = {dependências: {}, registro: function (key, value) {this.dependências [key] = value; devolver isso; }, resolve: function () {}};3. Melhore o método central para resolver
A partir do esqueleto básico que construímos, podemos descobrir que a chave é realmente o método Resolve, que é usado para implementar nossa forma específica de requisitos de injeção de dependência.
Primeiro, implementaremos a injeção de dependência na seguinte forma: Declaração de injeção inferida.
do seguinte modo:
injetor.Resolve (function (macaco, Dorie) {Monkey (); Dorie ();});Para alcançar o efeito acima, podemos usar o método ToString () da função, onde podemos converter a função em uma string, de modo a obter o nome do parâmetro, ou seja, o valor da chave, através de uma expressão regular. Em seguida, através do valor da chave, encontre o valor do valor nas dependências do espaço de armazenamento. Se nenhum valor correspondente for encontrado, será relatado um erro.
A implementação é a seguinte:
var injector = {dependências: {}, registro: function (key, value) {this.dependências [key] = value; devolver isso; }, resolve: function () {var func, deps, args = [], scope = null; func = argumentos [0]; // Obtenha o nome do parâmetro da função deps = func.toString (). Match (/^function/s*[^/]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); escopo = argumentos [1] || {}; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependências [d]) {args.push (this.dependências [d]); } else {lança novo erro ('pode/' t encontre ' + d); }} func.apply (escopo, args); }};O código de teste é o seguinte:
<! Doctype html> <head> <meta charset = "utf-8"/> </adhead> <body> <cript> var injector = {dependências: {}, registro: function (key, value) {this.Dependences [key] = value; devolver isso; }, resolve: function () {var func, deps, args = [], scope = null; func = argumentos [0]; // Obtenha o nome do parâmetro da função deps = func.toString (). Match (/^function/s*[^/]*/(/s*([^/)]*)/)/m) [1] .replace (//g, '') .split (','); escopo = argumentos [1] || {}; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependências [d]) {args.push (this.dependências [d]); } else {lança novo erro ('pode/' t encontre ' + d); }} func.apply (escopo, args); }}; // Código de teste injetor.register ('Monkey', function () {Console.log ('Monkey');}). Register ('Dorie', function () {console.log ('Dorie');}); injetor.Resolve (função (macaco, Dorie) {Monkey (); Dorie (); console.log ('-.-');}); </script> </body> </html>Uma desvantagem da declaração de injeção inferida é que ela não pode ser comprimida usando ferramentas de compressão, porque contamos com os parâmetros da função. Quando comprimirmos, alteraremos o nome do parâmetro e alteraremos o nome do parâmetro, que definitivamente falhará.
Então, abaixo, vamos dar uma olhada na declaração de injeção em linha, que pode compensar essa falha.
Implementar declarações de injeção em linha da seguinte forma:
injetor.Resolve (['Monkey', 'Dorie', function (m, d) {m (); d ();}]);Use o tipo OF para determinar o tipo de argumentos [0] para distinguir e obter parâmetros e funções de dependência.
A implementação é a seguinte:
var injector = {dependências: {}, registro: function (key, value) {this.dependências [key] = value; devolver isso; }, resolve: function () {var FirstParams, func, deps = [], scope = null, args = []; FirstParams = argumentos [0]; escopo = argumentos [1] || {}; // Obtenha parâmetros de dependência 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; }} // Ao confiar nos parâmetros, encontre o valor associado para (i = 0, len = deps. } else {lança novo erro ('pode/' t encontre ' + d); }} func.apply (escopo || {}, args); }};O código de teste é o seguinte:
<! Doctype html> <head> <meta charset = "utf-8"/> </adhead> <body> <cript> var injector = {dependências: {}, registro: function (key, value) {this.Dependences [key] = value; devolver isso; }, resolve: function () {var FirstParams, func, deps = [], scope = null, args = []; FirstParams = argumentos [0]; escopo = argumentos [1] || {}; // Obtenha parâmetros de dependência 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; }} // Ao confiar nos parâmetros, encontre o valor associado para (i = 0, len = deps. } else {lança novo erro ('pode/' t encontre ' + d); }} func.apply (escopo || {}, args); }}; // Código de teste injetor.register ('Monkey', function () {Console.log ('Monkey');}). Register ('Dorie', function () {console.log ('Dorie');}); injetor.Resolve (['Monkey', 'Dorie', function (m, d) {m (); d (); console.log ('-.-');}]); </script> </body> </html>Porque a declaração na linha é usada como um parâmetro de dependência através da forma de uma string, portanto e a compactação não tem medo.
Finalmente, integramos os dois métodos implementados acima e fazemos o que quisermos.
Então, vamos mesclar, como segue:
var injector = {dependências: {}, registro: function (key, value) {this.dependências [key] = value; devolver isso; }, resolve: function () {var FirstParams, func, deps = [], scope = null, args = []; FirstParams = argumentos [0]; escopo = argumentos [1] || {}; // julga qual forma de injeção if (typeof FirstParams === 'function') {func = FirstParams; deps = func.toString (). Match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .Rplace (//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; }}} // Ao confiar nos parâmetros, encontre o valor associado para (i = 0, len = deps. } else {lança novo erro ('pode/' t encontre ' + d); }} func.apply (escopo || {}, args); }};4. Destaques - requer injeção de dependência dojs
A injeção de dependência não é encontrada no AngularJS. Se você usou requerjs, o seguinte formulário estará familiarizado com:
requer (['macaco', 'Dorie'], função (m, d) {// TODO});Através do exposto, simulamos a implementação da injeção de dependência do AngularJS passo a passo. Acredito que, quando você vir isso, de repente perceberá que mudará a sopa ou o remédio.
A implementação da simulação é a seguinte:
var injector = {dependências: {}, registro: function (key, value) {this.dependências [key] = value; devolver isso; }, resolver: function (deps, func, escopo) {var args = []; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependências [d]) {args.push (this.dependências [d]); } else {lança um novo erro ('Can/' t resolve ' + d); }} func.apply (escopo || {}, args); }};O código de teste é o seguinte:
<! Doctype html> <head> <meta charset = "utf-8"/> </adhead> <body> <cript> var injector = {dependências: {}, registro: function (key, value) {this.Dependences [key] = value; devolver isso; }, resolver: function (deps, func, escopo) {var args = []; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependências [d]) {args.push (this.dependências [d]); } else {lança um novo erro ('Can/' t resolve ' + d); }} func.apply (escopo || {}, args); }}}; // Código de teste injetor.register ('Monkey', function () {Console.log ('Monkey');}). Register ('Dorie', function () {console.log ('Dorie');}); injetor.Resolve (['Monkey', 'Dorie'], function (m, d) {m (); d (); console.log ('-.-');}); </script> </body> </html>V. Referência
1. Application Development de AngularJS Pensamento 3: Injeção de dependência
2. Injeção de dependência em JavaScript
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.