Основою є ...
... дуже невелика бібліотека компонентів, яку ви можете використовувати для організації свого коду. Він поставляється упакованим у вигляді одного файлу JavaScript. За винятком коментарів, він має менше 1000 рядків фактичного JavaScript. Це розумно написано, і ви можете прочитати всю справу за пару годин.
Це фронтальна бібліотека, ви включаєте її на свою веб-сторінку з тегом сценарію. Це впливає лише на браузер і мало говорить про ваш сервер, за винятком того, що він в ідеалі повинен відкривати спокійний API.
Якщо у вас є API, у Backbone є кілька корисних функцій, які допоможуть вам поговорити з ним, але ви можете використовувати Backbone для додавання інтерактивності на будь-яку статичну HTML-сторінку.
Хребет для ...
... додавання структури в JavaScript.
Оскільки JavaScript не застосовує конкретних моделей, програми JavaScript можуть дуже швидко забруднитися. Кожен, хто створив щось нетривіальне в JavaScript, швидше за все, наштовхнеться на такі питання, як:
- Де я буду зберігати свої дані?
- Де я буду розміщувати свої функції?
- Як я з'єднаю свої функції разом, щоб вони були викликані розумним чином і не зверталися до спагетті?
- Як я можу зробити цей код підтримуваним різними розробниками?
Хребет шукає відповісти на ці запитання, надаючи вам:
- Моделі та колекції, які допоможуть вам представляти дані та колекції даних.
- Перегляди, щоб допомогти вам оновити DOM при зміні ваших даних.
- Система подій, щоб компоненти могли слухати один одного. Це утримує ваші компоненти в роз'єднаному стані та запобігає спагетізації.
- Мінімальний набір розумних умов, щоб розробники могли працювати разом на одній і тій же кодовій базі.
Ми називаємо це схемою MV *. Моделі, перегляди та додаткові додатки
Хребет легкий
Незважаючи на початкові виступи, хребет є фантастично легким, він навряд чи робить щось взагалі. Те, що вона робить, дуже корисно.
Він дає вам набір маленьких об’єктів, які ви можете створювати, і які можуть випромінювати події та слухати один одного. Ви можете створити невеликий об’єкт, наприклад, для представлення коментаря, а потім невеликий об’єкт commentView, щоб представити відображення коментаря в певному місці браузера.
Ви можете сказати commentView прослухати коментар і перемалювати себе, коли коментар зміниться. Навіть якщо у вас є один і той же коментар, який відображається в декількох місцях на вашій сторінці, усі ці перегляди можуть слухати ту саму модель коментарів і залишатися синхронізованою.
Такий спосіб складання коду допомагає уберегти вас від заплутування, навіть якщо ваша база коду стає дуже великою при багатьох взаємодіях.
Моделі
Коли ви починаєте, звичайно зберігати свої дані або в глобальній змінній, або в DOM як атрибути даних . У обох із них є проблеми. Глобальні змінні можуть конфліктувати між собою, і, як правило, погана форма. Атрибути даних, що зберігаються в DOM, можуть бути лише рядками, вам доведеться їх знову розбирати і вимикати. Важко зберігати такі речі, як масиви, дати чи об’єкти, і аналізувати свої дані в структурованому вигляді.
Атрибути даних виглядають приблизно так:
<p data-username="derek" data-age="42"></p>
Магістральна система вирішує це, надаючи об’єкт Model для представлення ваших даних та пов'язаних з ними методів . Скажімо, у вас є список todo, ви б мали модель, що представляє кожен елемент у цьому списку.
Коли ваша модель оновлюється, вона запускає подію. У вас може бути вид, прив’язаний до конкретного об'єкта. Перегляд прослуховує події зміни моделі та відтворює себе.
Перегляди
Магістраль надає вам об’єкти Перегляд, які спілкуються з DOM. Усі функції, які маніпулюють DOM або слухають події DOM, переходять сюди.
Перегляд зазвичай реалізує функцію візуалізації, яка перемальовує весь вид або, можливо, частину подання. Немає обов'язку реалізовувати функцію візуалізації, але це звичайна конвенція.
Кожен перегляд прив’язаний до певної частини DOM, тому у вас може бути searchFormView, який слухає лише форму пошуку, і shoppingCartView, що відображає лише кошик для покупок.
Перегляди, як правило, також пов'язані з конкретними моделями або колекціями. Коли Модель оновлюється, вона запускає подію, яку перегляд слухає. Вигляд може викликати візуалізацію, щоб перемалювати себе.
Так само, коли ви вводите форму, ваш погляд може оновити об'єкт моделі. Кожен інший вигляд, слухаючи цю модель, буде викликати свою функцію візуалізації.
Це дає нам чітке розмежування проблем, яке підтримує наш код акуратним та охайним.
Функція візуалізації
Ви можете реалізувати функцію візуалізації будь-яким способом, який вважаєте за потрібне. Ви можете просто поставити сюди jQuery, щоб оновити DOM вручну.
Ви також можете скласти шаблон і використовувати його. Шаблон - це лише рядок з точками вставки. Ви передаєте його функції компіляції разом з об'єктом JSON і отримуєте назад складений рядок, який ви можете вставити у свій DOM.
Колекції
Ви також маєте доступ до колекцій, у яких зберігаються списки моделей, тож todoCollection буде списком моделей todo. Коли колекція отримує або втрачає модель, змінює її порядок або модель в колекції оновлюється, вся колекція запускає подію.
Перегляд може слухати колекцію та оновлювати себе щоразу, коли колекція оновлюється.
Ви можете додати методи сортування та фільтрування у свою колекцію та зробити їх сортування автоматично, наприклад.
І події, щоб зв’язати це все разом
Наскільки це можливо, компоненти додатків відокремлюються один від одного. Вони спілкуються за допомогою подій, тож ShoppingCartView може прослухати колекцію ShoppingCart та перемалювати себе, коли до кошика додано.
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);
Звичайно, інші об’єкти також можуть слухати ShoppingCart, і вони можуть робити інші речі, такі як оновлення загальної кількості або збереження стану в локальному сховищі.
- Перегляди слухають Моделі та відображають, коли модель змінюється.
- Перегляди слухають колекції та надають список (або сітку, карту тощо), коли елемент колекції змінюється.
- Моделі слухають перегляди, щоб вони могли змінити стан, можливо, коли редагувати форму.
Розв’язання подібних об’єктів та спілкування за допомогою подій означає, що ви ніколи не заплутаєтеся у вузлах, а додавання нових компонентів та поведінки легко. Ваші нові компоненти просто повинні слухати інші об'єкти, які вже є в системі.
Конвенції
Код, написаний для Backbone, дотримується нескінченного набору умов. Код DOM належить до перегляду. Код колекції належить до колекції. Логіка бізнесу йде в моделі. Інший розробник, який забирає вашу кодову базу, зможе вразити землю.
Підсумовуючи
Backbone - це легка бібліотека, яка надає структуру вашому коду. Компоненти роз'єднуються і спілкуються через події, щоб ви не опинилися в безладі. Ви можете легко розширити свою кодову базу, просто створивши новий об’єкт і змусивши його відповідним чином прослухати наявні об’єкти. Ваш код буде чистішим, приємнішим та більш ретельним.
Моя маленька книжка
Мені настільки сподобалось «Хребет», що я написав про це невелику вступну книгу. Ви можете прочитати його онлайн тут: http://nicholasjohnson.com/backbone-book/
Я також розбив матеріал на короткий онлайн-курс, який ви можете знайти тут: http://www.forwardadvance.com/course/backbone . Ви можете закінчити курс приблизно за день.