Backbone js
1 like1,059 views
Документ обсуждает структуру и оптимизацию JavaScript-кода с использованием библиотеки Backbone.js и подхода MVC. Описываются основные компоненты, такие как модели, коллекции и представления, а также лучшие практики рефакторинга кода для повышения его удобочитаемости и управления. В заключение подчеркивается, что Backbone.js помогает структурировать код, упрощая его поддержку и развитие.
![2. View
Структура View:
Apihelp.Views.Posts ||= {}
1. View наследуется от базового класса Baclbone.View, но может
class Apihelp.Views.Posts.EditView extends Backbone.View
template : JST["backbone/templates/posts/edit"] насловедоваться и от другой вью
events :
"submit #edit-post" : "update"
update : (e) ->
e.preventDefault() 2. Шаблонизатор можно использовать любой, рекомендую
e.stopPropagation() Mustache(Hadlebars). Определять явно не обязательно, но удобно поскольку
сразу видно какие шаблоны используются в данной вью.
@model.save(null,
success : (post) =>
@model = post
window.location.hash = "/#{@model.id}"
) 3. Хеш реакций на события - позволяет определять любые события внутри
html блока вью(нет просмотра всего DOM страницы, только относительно
render : -> текущей view - для работы с DOM вью также есть сокращение this.$()) и
$(this.el).html(this.template(@model.toJSON() )) функций обработчиков. В каждый обработчик передает конктекс текущей
View(this) и пераметр, имеющий всю нужную информацию об источнике
this.$("form").backboneLink(@model) события.
return this
4. Набор обработчков событий и просто служебных функций
вторник, 15 ноября 11 г.](https://image.slidesharecdn.com/backbonejs-111115121514-phpapp01/85/Backbone-js-7-320.jpg)
Backbone js
- 2. Типичный application.js: 1. Код не имеет структуры - набор обработчиков событий 2. Код растет - тяжело ориентироваться 3. Совсем не просто проследить логику взаимодействия объектов на странице вторник, 15 ноября 11 г.
- 3. Рефакторинг - использование волшебных (function(){})() var MyCoolModule = (function(opts){ 1. Код чуть более структурирован - функционал //public variable организован в модули this.settings = opts; //private var var bla = 0; //public method 2. Код отдельного модуля продолжает оставаться this.reset = function (){} довольно тяжелым и неструктурированным - генерация html, обмен данными смешано //private method function init(){}; //initializer self.init(); 3. Если страница довольна интерактивна и объемна - })(); для оптимизации скорости и потребления памяти сырые данные хранятся в данных js - скорее всего в объекте(ах) Используем: глобального пространства имен. var myCoolObject = new MyCoolModule({params}); //call of public functions myCoolObject.reset(); 4. Скорее всего в этот момент мы уже воспринимаем нашу страницу как набор объектов(визуальных,объектов по типу данных) - но js код остается в виде методов класса, т.е. соответствующих объектов(инкапсулирующих данные, представляющие АПИ) - нет. Как следствие - дополнительные расходы на работу с html кодом, идентификацию классов источника события и пр. вторник, 15 ноября 11 г.
- 4. Рефакторинг - MVC 1. Bacbone.js - легковесен, дает только шаблон, обеспечивая свободу, не требует специального html кода 2. Knockout.js - Model-View-ViewModel (MVVM), работает с помощью data аттрибутов, что означает специальный html код 3. Sproutcore - мощный и тяжеловесный, включает MVC фреймворк и визуальные компоненты 4. Require JS - по сути больше п.6, но использует AMD (Asynchronous Module Definition) - загрузку js по требованию и ассинхронно 5. etc 6. Custom implementations - можно написать и самому :) вторник, 15 ноября 11 г.
- 5. Backbone.js - структура https://github.com/codebrew/backbone-rails rails g backbone:scaffold Post title:string content:string 1. Models - компонент, позволяющий организовать обмен данными, предоставляет события(изменение, добавление...), на которые могут подписываться Views 2. Routers - Его назначение обработка хеш навигации в приложении. В современных браузерах это прямое управление адресной строкой, в остальных - эмуляция через якорные ссылки(#..., настраиваемо) 3. Templates - в общем-то любой шаблонизатор(встроенный в Underscore, EJS, JQTemplates, Mustache, Handlabars) 4. Views - ООП подход, те каждая вью отвечает за определенный блок на странице. Если блоков несколько - то будет несколько экземпляров вью, каждый из который хранит в себе конкретную информацию(настройку) на логический блок. Ограничений нет - блоки логические. вторник, 15 ноября 11 г.
- 6. 1. Router class Apihelp.Routers.PostsRouter extends Backbone.Router Структура роутера: initialize: (options) -> 1. Хеш(функция, возращающая хеш) - определяет урл и соответствующее @posts = new Apihelp.Collections.PostsCollection() ему действие обработчик @posts.reset options.posts 2. Набор функций обработчиков - на вход получают параметры, указанные в определении URL. routes: "/new" : "newPost" "/index" : "index" "/:id/edit" : "edit" "/:id" : "show" ".*" : "index" newPost: -> @view = new Apihelp.Views.Posts.NewView(collection: @posts) $("#posts").html(@view.render().el) index: -> @view = new Apihelp.Views.Posts.IndexView(posts: @posts) $("#posts").html(@view.render().el) show: (id) -> post = @posts.get(id) @view = new Apihelp.Views.Posts.ShowView(model: post) $("#posts").html(@view.render().el) edit: (id) -> post = @posts.get(id) @view = new Apihelp.Views.Posts.EditView(model: post) $("#posts").html(@view.render().el) вторник, 15 ноября 11 г.
- 7. 2. View Структура View: Apihelp.Views.Posts ||= {} 1. View наследуется от базового класса Baclbone.View, но может class Apihelp.Views.Posts.EditView extends Backbone.View template : JST["backbone/templates/posts/edit"] насловедоваться и от другой вью events : "submit #edit-post" : "update" update : (e) -> e.preventDefault() 2. Шаблонизатор можно использовать любой, рекомендую e.stopPropagation() Mustache(Hadlebars). Определять явно не обязательно, но удобно поскольку сразу видно какие шаблоны используются в данной вью. @model.save(null, success : (post) => @model = post window.location.hash = "/#{@model.id}" ) 3. Хеш реакций на события - позволяет определять любые события внутри html блока вью(нет просмотра всего DOM страницы, только относительно render : -> текущей view - для работы с DOM вью также есть сокращение this.$()) и $(this.el).html(this.template(@model.toJSON() )) функций обработчиков. В каждый обработчик передает конктекс текущей View(this) и пераметр, имеющий всю нужную информацию об источнике this.$("form").backboneLink(@model) события. return this 4. Набор обработчков событий и просто служебных функций вторник, 15 ноября 11 г.
- 8. 3. Model && Collection Модель - предназначена для хранения логики, относящейся к конкретному объекту - преобразования, валидации, кастомная логика, свойства и собственно структура объектов Коллекция - упорядоченный найбор объекто моделей. Предоставляет события об изменения в моделях, появлении новых и пр. Предоставляет методы для обновления, сохранения, сравнения данных, включая взимодействие с сервером class Apihelp.Models.Post extends Backbone.Model paramRoot: 'post' defaults: title: null content: null Существуют множество реализаций моделей и их способом взиамодействия class Apihelp.Collections.PostsCollection extends с сервером - rest api(rails), websocket и другие Backbone.Collection model: Apihelp.Models.Post url: '/posts' Интегрированы методы Underscore.js, для обработки наборов моделей вторник, 15 ноября 11 г.
- 9. 4. Templates Backbone дает свободу выбора шаблонизатора(Jquery Templates, Underscore, EJS,Mustache, и еще тонна существующих) <h1>Edit post</h1> <form id="edit-post" name="post"> <div class="field"> <label for="title"> title:</label> <input type="text" name="title" id="title" value={{ title }} > </div> НО! Самый удобный способ - когда шаблоны на стороне сервера <div class="field"> компилируются в один файл, содержащий JS функций, собранный в <label for="content"> content:</label> массив(JST): <input type="text" name="content" id="content" - не загрязняется html value={{ content }} > - систематизация позволяет динамически конструировать вызовы шаблонов </div> <div class="actions"> <input type="submit" value="Update Post" /> </div> </form> <a href="#/index">Back</a> Rails.version <3.1 => Jammit Rails.version >=3.1 => AssetPipeline(HadleBars + HadleBars Assets) || Jammit вторник, 15 ноября 11 г.
- 10. To sum up: 1MVC(Backbone) - не панацея. Это удобный инстурмент, когда JS кода много. 2. Backbone - позволяет структурировать JS код по типу Rails приложения, что облегчает его поддержку и развитие 3. События позволяют сделать код слабо связанным - облегчает структура приложения 4. Production ready THE END вторник, 15 ноября 11 г.