1. Обзор
AngularJS имеет классическую особенность, которая является инъекцией зависимости. Студенты, знакомые с весной, должны очень хорошо знать, что такое инъекция зависимости, но это все еще относительно новое для фронта.
Короче говоря, инъекция зависимости состоит в том, чтобы разоблачить жесткий код для достижения цели разобщенности.
Ниже давайте посмотрим на широко используемые методы реализации в AngularJS.
Метод 1: Объявление логического впрыска, предполагая, что имя параметра является именем зависимости. Следовательно, он внутренне вызовет метод ToString () функционального объекта, анализировать и извлечь список параметров функции, а затем ввести эти параметры в экземпляр объекта через инжектор $.
следующее:
// Метод 1: Объявление «Логическая инъекция», предполагая, что имя параметра является именем зависимости. // Следовательно, он будет вызывать метод ToString () объекта функции внутри, анализировать и извлечь список параметров функции, а затем ввести эти параметры в injector Encect Object.invoke ($ http, $ timeout) {// todo});Метод 2: Объявления инъекций в линии, позволяя нам напрямую передавать массив параметров при определении функции. Массив содержит строки и функции, где строки представляют имена и функции зависимостей, и функции представляют объективные объекты функции.
следующее:
// Метод 2: Включите объявления в строку, позволяя нам напрямую передавать массив параметров при определении функции. // массив содержит строки и функции, где строки представляют имена и функции зависимостей, представляющие объективные объекты функции. module.controller ('name', ['$ http', '$ timeout', function ($ http, $ timeout) {// todo}]);Прочитав приведенный выше код, у меня был вопрос, как они были реализованы?
Ха -ха, давайте вместе смоделируем эти методы впрыска зависимостей, чтобы понять их.
2. Постройте базовый скелет
Процесс сбора инъекции зависимости заключается в получении соответствующего метода с помощью полевого отображения.
Следовательно, для реализации базовой инъекции зависимостей нам нужно место для хранения (зависимости) для хранения требуемого ключа/значения; метод регистрации (регистр) для добавления новых парам ключевых значений в пространство для хранения; и другой является метод реализации Core (Resolve), который получает соответствующие результаты отображения в пространстве хранения посредством соответствующих параметров.
Итак, основной скелет заключается в следующем:
var injector = {degyEndention: {}, register: function (key, value) {this.edEpendencies [key] = value; вернуть это; }, Resolve: function () {}};3. Улучшите основной метод разрешения
Из основного скелета, который мы создали, мы можем обнаружить, что ключом является метод разрешения, который используется для реализации нашей конкретной формы требований к инъекции зависимостей.
Во -первых, мы будем внедрить инъекцию зависимостей в следующей форме: представленная заявление инъекций.
следующее:
injector.resolve (function (monkey, dorie) {monkey (); dorie ();});Чтобы достичь вышеуказанного эффекта, мы можем использовать метод функции ToString (), где мы можем преобразовать функцию в строку, чтобы получить имя параметра, то есть значение ключа, через регулярное выражение. Затем, через значение ключа, найдите значение значения в зависимости пространства хранения. Если соответствующее значение не найдено, будет сообщена ошибка.
Реализация выглядит следующим образом:
var injector = {degyEndention: {}, register: function (key, value) {this.edEpendencies [key] = value; вернуть это; }, Resolve: function () {var func, deps, args = [], scope = null; func = аргументы [0]; // Получить имя параметра функции deps = func.toString (). Match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .Replace (//g, '') .split (','); Scope = аргументы [1] || {}; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.pendencies [d]); } else {бросить новую ошибку ('can/' t найти ' + d); }} func.apply (scope, args); }};Тестовый код заключается в следующем:
<! Doctype html> <Head> <meta charset = "utf-8"/> </head> <body> <script> var injector = {degyEdencies: {}, Register: function (key, value) {this.Epectendenties [key] = value; вернуть это; }, Resolve: function () {var func, deps, args = [], scope = null; func = аргументы [0]; // Получить имя параметра функции deps = func.toString (). Match (/^function/s*[^/(]*/(/s*([^/)]*)/)/m) [1] .Replace (//g, '') .split (','); Scope = аргументы [1] || {}; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.pendencies [d]); } else {бросить новую ошибку ('can/' t найти ' + d); }} func.apply (scope, args); }}; // тестовый код injector.register ('monkey', function () {console.log ('monkey');}). Register ('dorie', function () {console.log ('dorie');}); injector.resolve (function (monkey, dorie) {monkey (); dorie (); console.log ('-.-');}); </script> </body> </html>Одним из недостатков представленного объявления впрыска является то, что его нельзя сжать с помощью инструментов сжатия, потому что мы полагаемся на параметры функции. Когда мы сжимаем, мы изменим имя параметра и изменим имя параметра, которое определенно потерпит неудачу.
Затем ниже, давайте посмотрим на встроенное заявление о инъекциях, которое может восполнить этот недостаток.
Внедрить встроенные заявления инъекций следующим образом:
injector.resolve (['monkey', 'dorie', function (m, d) {m (); d ();}]);Используйте TypeOF, чтобы определить тип аргументов [0], чтобы отличить и получить параметры и функции зависимости.
Реализация выглядит следующим образом:
var injector = {degyEndention: {}, register: function (key, value) {this.edEpendencies [key] = value; вернуть это; }, Resolve: function () {var FirstParams, func, deps = [], scope = null, args = []; FirstParams = аргументы [0]; Scope = аргументы [1] || {}; // Получить параметры зависимости для (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; }} //, полагаясь на параметры, найдите соответствующее значение для (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.pendencies [d]) {args.push (this. -sependencies [d]); } else {бросить новую ошибку ('can/' t найти ' + d); }} func.apply (scope || {}, args); }};Тестовый код заключается в следующем:
<! Doctype html> <Head> <meta charset = "utf-8"/> </head> <body> <script> var injector = {degyEdencies: {}, Register: function (key, value) {this.Epectendenties [key] = value; вернуть это; }, Resolve: function () {var FirstParams, func, deps = [], scope = null, args = []; FirstParams = аргументы [0]; Scope = аргументы [1] || {}; // Получить параметры зависимости для (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; }} //, полагаясь на параметры, найдите соответствующее значение для (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.pendencies [d]) {args.push (this. -sependencies [d]); } else {бросить новую ошибку ('can/' t найти ' + d); }} func.apply (scope || {}, args); }}; // тестовый код injector.register ('monkey', function () {console.log ('monkey');}). Register ('dorie', function () {console.log ('dorie');}); injector.resolve (['monkey', 'dorie', function (m, d) {m (); d (); console.log ('-.-');}]); </script> </body> </html>Поскольку объявление в линии используется в качестве параметра зависимости через форму строки, так и сжатие не боятся.
Наконец, мы интегрируем два метода, реализованные выше, и делаем все, что хотим.
Затем давайте объединим это следующим образом:
var injector = {degyEndention: {}, register: function (key, value) {this.edEpendencies [key] = value; вернуть это; }, Resolve: function () {var FirstParams, func, deps = [], scope = null, args = []; FirstParams = аргументы [0]; Scope = аргументы [1] || {}; // судить, какая форма инъекции 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; }}} //, полагаясь на параметры, найдите соответствующее значение для (i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this. -ePectendenties [d]); } else {бросить новую ошибку ('can/' t найти ' + d); }} func.apply (scope || {}, args); }};4. Основные моменты - инъекция зависимости требования
Инъекция зависимости не обнаружена в Angularjs. Если вы использовали requirejs, то следующая форма будет знакома:
require (['monkey', 'dorie'], function (m, d) {// todo});Благодаря вышесказанному мы смоделировали реализацию инъекции зависимости AngularJS, шаг за шагом. Я считаю, что когда вы увидите это, вы вдруг поймете, что измените суп или лекарство.
Реализация симуляции выглядит следующим образом:
var injector = {degyEndention: {}, register: function (key, value) {this.edEpendencies [key] = value; вернуть это; }, Resolve: function (deps, func, scope) {var args = []; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.pendencies [d]); } else {бросить новую ошибку ('can/' t Resiple ' + d); }} func.apply (scope || {}, args); }};Тестовый код заключается в следующем:
<! Doctype html> <Head> <meta charset = "utf-8"/> </head> <body> <script> var injector = {degyEdencies: {}, Register: function (key, value) {this.Epectendenties [key] = value; вернуть это; }, Resolve: function (deps, func, scope) {var args = []; for (var i = 0, len = deps.length; i <len, d = deps [i]; i ++) {if (this.dependencies [d]) {args.push (this.pendencies [d]); } else {бросить новую ошибку ('can/' t Resiple ' + d); }} func.apply (scope || {}, args); }}}; // тестовый код injector.register ('monkey', function () {console.log ('monkey');}). Register ('dorie', function () {console.log ('dorie');}); injector.resolve (['monkey', 'dorie'], function (m, d) {m (); d (); console.log ('-.-');}); </script> </body> </html>V. Ссылка
1. AngularJS Development Development Development 3: Инъекция зависимости
2. Инъекция зависимостей в JavaScript
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.