FrontTalks Meetup #2. 2013: Владимир Кузнецов – Backbone. Шашлык на косточке

С классами в Backbone всё, кажется, понятно. Но где порождаются экземпляры этих классов? Как их связать между собой? Страшное слово «полиморфизм».

Transcript

1. Backbone. Шашлык на косточке
2. Backbone — Нужно уметь готовить — Подходит далеко не для всех задач — Предоставляет замечательную инфраструкуру — Вызывает привыкание и даже зависимость 02
3. Массивы разнотипных объектов Нет типизации — можно хранить любые объекты вперемешку var list = [ {a: 1, b: 2}, 42, "test" ]; 01. 02. 03. 04. 05. 03
4. Backbone.Collection В коллекции тоже можно хранить модели любых типов var c = new Backbone.Collection(); c.add(new App.ItemMessage()); c.add(new App.ItemNews()); 01. 02. 03. 04
5. Backbone.Collection Если в коллекцию добавляется простой объект, то для него создаётся модель (по-умолчанию это Backbone.Model ) var c = new Backbone.Collection({ model : App.Item }); 01. 02. 03. 05
7. Полиморфизм «Один интерфейс, множество реализаций» — Эквивалентный набор методов с одинаковыми именами — Функциональность методов может быть изменена Фактически реализуется наследованием 07
8. Демонстрация
9. App.Item = Backbone.Model .extend({}); App.ItemNews = App.Item .extend({}); App.ItemAction = App.Item .extend({}); А какой класс передавать в конструктор коллекции? App.Items = Backbone.Collection.extend({ model: WHAT??? }); 01. 02. 03. 01. 02. 03. 09
10. Способы создания экземпляров класса Оператор new new var item = new App.Item(); var itemNews = new App.ItemNews(); 01. 02. 10
11. Способы создания экземпляров класса Фабричный метод Используется, когда классу заранее неизвестно, объекты каких подклассов ему нужно создавать. Статический метод класса. 11
12. Фабричный метод var item = App.Item.create( "Could you give me an item" ); var itemNews = App.Item.create( "One more item of type of news, please" ); 01. 02. 03. 04. 05. 06. 12
13. Фабричный метод var itemNews = App.Item.create({ id: 10, type: "news" , text: "Beckham to donate PSG pay to charity" }); 01. 02. 03. 04. 05. 13
14. Фабричный метод Ну не писать же для каждого типа сущностей свою фабрику. Напишем фабрику фабрик! Страшно звучит? 14
15. Фабрика фабрик App.Factory = function (getter, hash, def) { return function () { var value = getter.apply(this, arguments); var ctor = hash[value] ? hash[value] : def; return new ctor(arguments[0], arguments[1]); }; }; 01. 02. 03. 04. 05. 06. 07. 15
16. App.ItemFactory = App.Factory( function (attr) { return attr.type; }, { "news": App.ItemNews, "action": App.ItemAction, "message": App.ItemMessage }, App.Item ); 01. 02. 03. 04. 05. 06. 07. 08. 09. 16
17. Фабрика — это конструктор, только лучше var item = new App.ItemFactory({ }); var itemNews = App.ItemFactory({ type: "news", text: "Prisoners running disco in Venezuela" }); 01. 02. 03. 04. 05. 06. 17
18. Фабрику можно передать в качестве конструктора App.Items = Backbone.Collection.extend({ model: App.ItemFactory }); Коллекция будет автоматически заполняться объектами нужного типа. PROFIT! 01. 02. 03. 18
19. Фабрику можно использовать и для создания экземпляров Backbone.View App.ItemViewFactory = App.Factory( function (options) { return options.model.get("type"); }, … ); 01. 02. 03. 04. 05. 06. 19
20. Почему бы не использовать if … then … else? Потому что ифы — зло! The Clean Code Talks — Inheritance, Polymorphism & Testing Особенно актуально для шаблонов. Подобное «программирование» можно смело вынести в тестируемый JS-код. 20
21. Заключение — узнали, что в коллекциях можно хранить разнотипные объекты — разобрались как работают конструкторы — научились создавать экземпляры нужного класса с помощью фабрики Слайды и примеры на GitHub: bit.ly/fronttalks-bb 21
22. Спасибо за внимание! Владимир Кузнецов Твиттер: @mista_k Блог: noteskeeper.ru Слайды и примеры на GitHub: bit.ly/fronttalks-bb 22