backbone js

http://documentcloud.github.com/backbone/

вторник, 15 ноября 11 г.



Типичный application.js:1. Код не имеет структуры - набор обработчиков событий

2. Код растет - тяжело ориентироваться

3. Совсем не просто проследить логику взаимодействия объектов на странице


Рефакторинг - использование волшебных (function(){})()

var MyCoolModule = (function(opts){

//public variable this.settings = opts;

//private var var bla = 0;

//public method this.reset = function (){}

//private method function init(){};

//initializer self.init();})();

Используем:var myCoolObject = new MyCoolModule({params});//call of public functionsmyCoolObject.reset();

1. Код чуть более структурирован - функционал организован в модули

2. Код отдельного модуля продолжает оставаться довольно тяжелым и неструктурированным - генерация html, обмен данными смешано

3. Если страница довольна интерактивна и объемна - для оптимизации скорости и потребления памяти сырые данные хранятся в данных js - скорее всего в объекте(ах) глобального пространства имен.

4. Скорее всего в этот момент мы уже воспринимаем нашу страницу как набор объектов(визуальных,объектов по типу данных) - но js код остается в виде методов класса, т.е. соответствующих объектов(инкапсулирующих данные, представляющие АПИ) - нет. Как следствие - дополнительные расходы на работу с html кодом, идентификацию классов источника события и пр.


Рефакторинг - MVC1. 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. etc6. Custom implementations - можно написать и самому :)


https://github.com/amdjs/amdjs-api/wiki/AMD

https://github.com/amdjs/amdjs-api/wiki/AMD

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 - ООП подход, те каждая вью отвечает за определенный блок на странице. Если блоков несколько - то будет несколько экземпляров вью, каждый из который хранит в себе конкретную информацию(настройку) на логический блок. Ограничений нет - блоки логические.




1. Router

class Apihelp.Routers.PostsRouter extends Backbone.Router initialize: (options) -> @posts = new Apihelp.Collections.PostsCollection() @posts.reset options.posts

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)

Структура роутера:1. Хеш(функция, возращающая хеш) - определяет урл и соответствующее ему действие обработчик2. Набор функций обработчиков - на вход получают параметры, указанные в определении URL.


2. View

Apihelp.Views.Posts ||= {}

class Apihelp.Views.Posts.EditView extends Backbone.View template : JST["backbone/templates/posts/edit"] events : "submit #edit-post" : "update" update : (e) -> e.preventDefault() e.stopPropagation() @model.save(null, success : (post) => @model = post window.location.hash = "/#{@model.id}" ) render : -> $(this.el).html(this.template(@model.toJSON() )) this.$("form").backboneLink(@model) return this

Структура View:

1. View наследуется от базового класса Baclbone.View, но может насловедоваться и от другой вью

2. Шаблонизатор можно использовать любой, рекомендую Mustache(Hadlebars). Определять явно не обязательно, но удобно поскольку сразу видно какие шаблоны используются в данной вью.

3. Хеш реакций на события - позволяет определять любые события внутри html блока вью(нет просмотра всего DOM страницы, только относительно текущей view - для работы с DOM вью также есть сокращение this.$()) и функций обработчиков. В каждый обработчик передает конктекс текущей View(this) и пераметр, имеющий всю нужную информацию об источнике события.

4. Набор обработчков событий и просто служебных функций


3. Model && Collection

class Apihelp.Models.Post extends Backbone.Model paramRoot: 'post'

defaults: title: null content: null class Apihelp.Collections.PostsCollection extends Backbone.Collection model: Apihelp.Models.Post url: '/posts'

Модель - предназначена для хранения логики, относящейся к конкретному объекту - преобразования, валидации, кастомная логика, свойства и собственно структура объектов

Коллекция - упорядоченный найбор объекто моделей. Предоставляет события об изменения в моделях, появлении новых и пр. Предоставляет методы для обновления, сохранения, сравнения данных, включая взимодействие с сервером

Существуют множество реализаций моделей и их способом взиамодействия с сервером - rest api(rails), websocket и другие

Интегрированы методы Underscore.js, для обработки наборов моделей


4. Templates

<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"> <label for="content"> content:</label> <input type="text" name="content" id="content" value={{ content }} > </div>

<div class="actions"> <input type="submit" value="Update Post" /> </div>

</form>

<a href="#/index">Back</a>

Backbone дает свободу выбора шаблонизатора(Jquery Templates, Underscore, EJS,Mustache, и еще тонна существующих)

НО! Самый удобный способ - когда шаблоны на стороне сервера компилируются в один файл, содержащий JS функций, собранный в массив(JST):- не загрязняется html- систематизация позволяет динамически конструировать вызовы шаблонов

Rails.version <3.1 => JammitRails.version >=3.1 => AssetPipeline(HadleBars + HadleBars Assets) || Jammit


To sum up:

THE END

1MVC(Backbone) - не панацея. Это удобный инстурмент, когда JS кода много.2. Backbone - позволяет структурировать JS код по типу Rails приложения, что облегчает его поддержку и развитие3. События позволяют сделать код слабо связанным - облегчает структура приложения4. Production ready


backbone js

Documents