Введение во внедрение зависимостей JavaScript

внешний интерфейс программист JavaScript регулярное выражение
Введение во внедрение зависимостей JavaScript

На лбу написано

На этот раз я поделюсь сортировкой и кратким изложением того, что я узнал о внедрении зависимостей. Постарайтесь живо объяснить его внутреннее мышление и процесс реализации.

Добро пожаловать, чтобы следоватьмой блог, время от времени обновляется——

Что такое внедрение зависимостей

Впервые я услышал это утверждение в angular, и все мы знаем, что внедрение зависимостей часто используется внутри angular. Хотя я еще не играл в нее :), но это не мешает нам исследовать ее.

Прежде всего, попробуйте объяснить это визуально (личная точка зрения, пожалуйста, поправьте меня, если у вас есть какие-либо вопросы):Есть группа людей, которые являются профессиональными программистами. Они не хотят заниматься ничем, кроме работы. Помимо работы, осталось только купить еду и клетчатые рубашки. Им все равно, что они едят и как выглядит клетчатая рубашка. Тогда, может быть, мы сможем предоставить государственную услугу по обеспечению программистов едой и клетчатыми рубашками. Программистам не нужно заботиться о том, как мы готовим и где купить клетчатые рубашки, им достаточно сказать нам, что им нужно, а мы отправим их им после того, как купим. Таким образом, каждый программист может избежать необходимости тратить свое время на еду и покупку клетчатых рубашек в одиночку, сэкономив много времени и позволив им лучше посвятить себя работе.

Вышеприведенное утверждение можно представить в виде следующей простой диаграммы:
image
В соответствии с процессом, показанным на рисунке выше, мы можем знать, что нам нужно достичь следующих вещей:

  • Предоставить сервисный контейнер
  • Зарегистрируйте необходимые зависимости для целевой функции
  • Получить зависимости, зарегистрированные целевой функцией
  • Запросите соответствующий сервис через зависимости
  • Передайте полученные зависимости в целевую функцию

Предоставить сервисный контейнер

//假装提供一些服务
var services = { 
    A: () => {console.log(1)}, 
    B: () => {console.log(2)},
    C: () => {console.log(3)}
}

Зарегистрируйте необходимые зависимости для целевой функции

// 目标函数 
function Service(A, B) { 
    A()
    B()
}

Текущий метод регистрации передается в виде параметров, нам не нужно заботиться о том, как реализованы A и B, нам нужно только знать, что это еда и клетчатые рубашки :)

Получить зависимости, зарегистрированные целевой функцией

// 获取func的参数列表(依赖列表) 
getFuncParams = function (func) { 
    var matches = func.toString().match(/^function\s*[^\(]*\(\s*([^\)]*)\)/m); 
    if (matches && matches.length > 1) 
        return matches[1].replace(/\s+/, '').split(','); 
    return []; 
}

Принцип реализации заключается в регулярном сопоставлении поступающей целевой функции и сопоставлении формальных параметров. Ключевым моментом здесь является регулярное выражение:

/^function\s*[^\(]*\(\s*([^\)]*)\)/m

в\(\s*([^\)]*
Используйте круглые скобки для извлечения внутреннего содержимого, которое соответствует скобкам параметра после функции, то есть вы можете получить строку параметра. Вот информация, полученная с помощью правил извлечения данных в скобках.Правила следующие:

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( string.match(regex) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

Первый элемент в результирующем массиве — это результат сопоставления, за которым следуют данные в круглых скобках.Из этого мы можем знать, что это регулярное выражение получает весь формальный параметр в виде строки с помощью круглых скобок, а затем разбивает его с помощью разделения.Мы получить желаемый результат.

Запросите соответствующий сервис через зависимости

//简易实现
setFuncParams = function (params) { 
    for (var i in params) { 
        params[i] = services[params[i]]; 
    } 
    return params; 
}; //依次对应服务中的项进行查找返回结果。

Передайте полученные зависимости в целевую функцию

// 注射器 
function Activitor(func, scope) { 
   return () => {
       func.apply(scope || {}, setFuncParams(getFuncParams(func)));
   } 
} 
// 实例化Service并调用方法 
var service = Activitor(Service); 
service();//1 2

резюме

На данный момент мы полностью реализовали очень простой шаблон внедрения зависимостей,Исходный код здесь. Это очень просто, и в то же время не требует большого количества суждений. Однако с основной идеей все же разобрались. Я долго размышлял, и если что-то не так, пожалуйста, не стесняйтесь исправить это ~ PS: Все следующие ссылки хорошо написаны, среди которыхЯн ХайцзинучительскийВнедрение зависимостей в JavaScriptОна очень содержательная, я давно ее читала, и тоже делюсь с вами.

использованная литература

наконец

пользовательский заказБлог автора, время от времени обновляется——
Если у вас есть какие-либо вопросы, пожалуйста, свяжитесь с нами в разделе «Вопросы».

Категории