Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Dependency Injection. 
Javascript. 
Сергей Камардин
Задача из жизни 
1. Разместить на карте зарегистрированных 
пользователей; 
! 
2
«JS Way» 
Locator.prototype.locateUsers = function(users) { 
// Инициалиация сервиса карт 
loadScript("..."); 
client.init...
Задача из жизни 
1. Разместить на карте зарегистрированных 
пользователей; 
2. Поменять поставщика карт; 
4
Решение: Абстракция 
AbstractMapService.prototype = { 
! 
createMap: function() { 
throw new TypeError("Not implemented");...
Имплементация 
AbstractMapService.extend({ 
! 
createMap: function(id, options) { 
// 
}, 
! 
createMapMarker: function(ma...
Locator.prototype.locateUsers = function(users) { 
// Create map service 
// Could be an Fabric Method, Service Locator, D...
Single responsibility? 
Locator.prototype.locateUsers = function(users) { 
// Create map service 
// Could be an Fabric Me...
Проблемы 
• Невозможно написать юнит тесты; 
• Использование сервиса карт во многих местах в 
коде; 
• Избыточная функцион...
Задача из жизни 
1. Разместить на карте зарегистрированных 
пользователей; 
2. Поменять поставщика карт; 
3. Перенести лок...
Result 
Locator.prototype = { 
// injection 
setMapService: function(mapService) { 
this.mapService = mapService; 
}, 
! 
...
12
Result 
Locator.prototype = { 
// injection 
setMapService: function(mapService) { 
this.mapService = mapService; 
}, 
! 
...
Routine 
// Create MapService 
var mapService = new MapService(...); 
! 
// Create Locator 
var locator = new Locator(); 
...
Inversion of Control 
• Dependency Injection 
• Service Locator 
• Factory Method 
IoC container: 
15
Dependency Injection 
• Constructor injection 
• Setter injection 
• Interface injection 
16
Hard Coupling 
17
Coupling 
18
Loose Coupling 
19
Плюсы 
• Каждый объект отвечает за свою функцию; 
• Соблюден принцип инверсии зависимостей; 
• Простая конфигурация объект...
dm.js 
• Javascript Реализация IoC; 
• Работает в node.js и браузере; 
• Легко расширяется (любые загрузчики скриптов 
и P...
Конфигурация 
"locator": { 
path: "path/to/locator/implementation", 
calls: [ 
["setMapService", ["@maps"]] 
] 
} 
"maps":...
Использование 
dm 
.get("locator") 
.then(function(locator) { 
locator.locateUsers(users); 
}); 
23
Тестирование 
it("should create map", function() { 
var mapStub, locator; 
! 
mapMock = sinon 
.mock(new AbstractMapServic...
Syntax 
! 
"example": { 
"path": "...", 
"arguments": [{ 
"service": "@service", 
"method": "@service:method" 
"result": "...
Альтернативы 
• Wire.js 
• Angular’s DI 
• Тупо контейнеры 
26
Где и для чего это 
можно использовать? 
27
Спасибо! 
Сергей Камардин 
github.com/gobwas/dm.js 
gobwas@gmail.com
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

"Dependency Injection. JavaScript.", Сергей Камардин, MoscowJS 15

Download to read offline

Слайды доклада "Dependency Injection. JavaScript.", Сергей Камардин, MoscowJS 15

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

"Dependency Injection. JavaScript.", Сергей Камардин, MoscowJS 15

  1. 1. Dependency Injection. Javascript. Сергей Камардин
  2. 2. Задача из жизни 1. Разместить на карте зарегистрированных пользователей; ! 2
  3. 3. «JS Way» Locator.prototype.locateUsers = function(users) { // Инициалиация сервиса карт loadScript("..."); client.init(...); ! // Создание карты var map = new client.Map(...); ! // Отображение на карте маркеров users.forEach(...); } 3
  4. 4. Задача из жизни 1. Разместить на карте зарегистрированных пользователей; 2. Поменять поставщика карт; 4
  5. 5. Решение: Абстракция AbstractMapService.prototype = { ! createMap: function() { throw new TypeError("Not implemented"); }, ! createMapMarker: function() { throw new TypeError("Not implemented"); } ! } 5
  6. 6. Имплементация AbstractMapService.extend({ ! createMap: function(id, options) { // }, ! createMapMarker: function(map, options) { // } ! }); 6
  7. 7. Locator.prototype.locateUsers = function(users) { // Create map service // Could be an Fabric Method, Service Locator, DI var mapService = new ConcreteMapService(...); ! // Create map var map = mapService.createMap(...); ! // Run each users, making markers users.forEach(...); } 7
  8. 8. Single responsibility? Locator.prototype.locateUsers = function(users) { // Create map service // Could be an Fabric Method, Service Locator, DI var mapService = new ConcreteMapService(...); ! // Create map var map = mapService.createMap(...); ! // Run each users, making markers users.forEach(...); } 8
  9. 9. Проблемы • Невозможно написать юнит тесты; • Использование сервиса карт во многих местах в коде; • Избыточная функциональность локатора; • Reusability. 9
  10. 10. Задача из жизни 1. Разместить на карте зарегистрированных пользователей; 2. Поменять поставщика карт; 3. Перенести локатор в другой проект, как плагин. 10
  11. 11. Result Locator.prototype = { // injection setMapService: function(mapService) { this.mapService = mapService; }, ! locateUsers: function(users) { // Create map var map = this.mapService.createMap(...); ! // Run each users, making markers users.forEach(...); } } 11
  12. 12. 12
  13. 13. Result Locator.prototype = { // injection setMapService: function(mapService) { this.mapService = mapService; }, ! locateUsers: function(users) { // Create map var map = this.mapService.createMap(...); ! // Run each users, making markers users.forEach(...); } } 13 Вот оно
  14. 14. Routine // Create MapService var mapService = new MapService(...); ! // Create Locator var locator = new Locator(); ! // Inject mapService locator.setMapService(mapService); ! // Use locator locator.locateUsers(users); 14
  15. 15. Inversion of Control • Dependency Injection • Service Locator • Factory Method IoC container: 15
  16. 16. Dependency Injection • Constructor injection • Setter injection • Interface injection 16
  17. 17. Hard Coupling 17
  18. 18. Coupling 18
  19. 19. Loose Coupling 19
  20. 20. Плюсы • Каждый объект отвечает за свою функцию; • Соблюден принцип инверсии зависимостей; • Простая конфигурация объектов; • Безболезненная смена имплементаций; • Легко писать юнит тесты. 20
  21. 21. dm.js • Javascript Реализация IoC; • Работает в node.js и браузере; • Легко расширяется (любые загрузчики скриптов и Promise/A+ библиотеки); • Простая конфигурация (в духе Symfony). 21
  22. 22. Конфигурация "locator": { path: "path/to/locator/implementation", calls: [ ["setMapService", ["@maps"]] ] } "maps": { path: "path/to/map/service/implementation", arguments: [{ id: "my-app-id" }] } 22
  23. 23. Использование dm .get("locator") .then(function(locator) { locator.locateUsers(users); }); 23
  24. 24. Тестирование it("should create map", function() { var mapStub, locator; ! mapMock = sinon .mock(new AbstractMapService) .expects("createMap") .once(); ! locator = new Locator(); locator.setMapService(mapMock); ! locator.locateUsers(...); ! mapMock.verify(); }); 24
  25. 25. Syntax ! "example": { "path": "...", "arguments": [{ "service": "@service", "method": "@service:method" "result": "@service:method[1,2,3]", "resource": "#path/to/my.tpl#", "path": "http://%{api_path}" "build": "build_no_#{file.txt}" }] } ! 25
  26. 26. Альтернативы • Wire.js • Angular’s DI • Тупо контейнеры 26
  27. 27. Где и для чего это можно использовать? 27
  28. 28. Спасибо! Сергей Камардин github.com/gobwas/dm.js gobwas@gmail.com

Слайды доклада "Dependency Injection. JavaScript.", Сергей Камардин, MoscowJS 15

Views

Total views

1,540

On Slideshare

0

From embeds

0

Number of embeds

564

Actions

Downloads

11

Shares

0

Comments

0

Likes

0

×