Статьи

Введение в Backbone.js

Февраль 8, 2019

Вступление

Процесс разработки веб-приложений развивался на протяжении многих лет. Вначале веб-приложения были просто статическими HTML-страницами, которые требовали от программистов изменения кода для изменения содержимого. Позже, в Web 2.0 были добавлены языки программирования на стороне сервера для динамической генерации HTML-страниц на основе пользовательского ввода и данных, хранящихся в базе данных.
Веб-приложения в настоящее время требуют интенсивного использования JavaScript для создания контента на лету. Пользователю не нужно ждать между запросами и обновлением страницы. Большая часть логики / кода, которая раньше была на стороне сервера, перемещается на сторону клиента. Хотя JavaScript сейчас широко используется для создания веб-приложений, мы наверняка столкнулись с некоторыми проблемами при создании больших приложений с помощью JavaScript.

Backbone.js

Для решения этой проблемы Backbone.js или backbone находится здесь. Мы все использовали различные виды фреймворков, таких как Model-View-Controller (MVC), Model-View-Presenter (MVP), Model-View-View Model (MVVM) для создания одностраничных приложений (SPA). Backbone.js (или просто Backbone) — это оболочка JavaScript для создания одностраничных приложений (SPA) с интенсивным использованием данных. Backbone придерживается своей особой парадигмы. Магистраль не требует, чтобы файлы были структурированы в файловой системе. Backbone также помогает нам предоставлять необходимые советы по структуре кода в проектах. Backbone наиболее полезен, когда приложение использует базу данных в бэкэнде для сохранения пользовательских данных, а внешнему приложению необходимо будет отразить большую часть этих данных.
Выше мы говорили о необходимости backbone.js. Теперь давайте посмотрим на рабочий процесс backbone.js.

Рабочий процесс backbone.js

Во время работы SPA на основе Backbone пользователи будут взаимодействовать с данными из серверной части. Когда они взаимодействуют с приложением, они делают это с помощью Views. Представление представляет собой часть объектной модели документа (DOM). Эти взаимодействия запускают события для обновления данных в модели. Backbone.js отслеживает эти модели и отправляет данные о каждом изменении на веб-сервер для сохранения. Он также отслеживает изменения данных модели и может обновлять виды. Это делает процесс обновления DOM и отправки данных на сервер автоматическим. Вместо того чтобы создавать несколько одноразовых вызовов jQuery $ .ajax, мы можем использовать согласованный метод.
Теперь давайте проработаем пример кода, который напечатает Hello! Мир.

HTML-страница

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<!DOCTYPE HTML>
<html>
<head>
<title>Backbone Application Development Starter</title>
<!-- utility library and selector engine should  be placed here.-->
<script src="scripts/backbone-1.0.0.js"></script>
</head>
<body>
<div id="display">
<div class="listing">There is a problem.</div>
</div>
</body>
<script src="scripts/sample.js"></script>
</html>

Для начала с backbone.js нам понадобятся три сторонних скрипта.

  1. Backbone.
  2. Подчеркнуть / LoDash.
  3. J-запрос / Zepto.

На приведенной выше html-странице мы включили backbone-1.0.0.js. и мы должны включить Underscore / LoDash и J-query / Zepto. После загрузки всех библиотек и механизма выбора мы можем писать HTML-коды.

Файл JavaScript

1
2
3
4
5
6
var obj = {};
_.extend(obj, Backbone.Events);
obj.on("show-message", function(msg) {
$('#display .listing').text(msg);
});
obj.trigger("show-message", "Hello World");

теперь, как мы видим, в приведенном выше фрагменте кода происходит много вещей. Как мы видим в первой строке

1
var obj = {};

Мы создаем объект с именем ‘obj’. Вторая строка очень важна.

1
_.extend(obj, Backbone.Events);

В этой строке мы видим, что библиотека утилит предоставляет нам множество функций. Одним из которых является расширение. Эта функция принимает два или более объектов в качестве аргументов. После копирования атрибутов из них, добавляет их к первому объекту. Утилита расширения является лучшим способом добавления функциональности Backbone к классам. наш объект obj теперь является объектом Backbone Event, который можно использовать для запуска событий и запуска функций обратного вызова при срабатывании события.
Кроме приведенного выше кода, мы также можем написать тот же код, используя шаблоны. Давайте посмотрим на это:

01
02
03
04
05
06
07
08
09
10
11
var AppView = Backbone.View.extend({
      el: $('#container'),
      template: _.template("<h3>Hello <%= who %><h3>"),
      initialize: function(){
        this.render();
      },
      render: function(){
        this.$el.html(this.template({who: 'world!'}));
         }
    });
    var appView = new AppView();

В приведенном выше коде мы используем другой подход для печати Hello world! Мы используем шаблон. Мы создали представление, которое расширяет служебные библиотеки.

1
el: $('#container'),

‘el’ здесь является элементом DOM представления. Далее у нас есть шаблон, в котором есть заполнитель «кто», который будет заменен позже.

1
this.$el.html(this.template({who: 'world!'}));

В этой строке мы отрисовываем функцию, подставляя переменную who для world! , в самом конце мы используем следующий фрагмент кода для инициализации представления.

1
var appView = new AppView();

Backbone.js предоставляет нам пять очень важных функций.

  1. Модели.
  2. Коллекции.
  3. Просмотры.
  4. Шаблоны.
  5. Посмотреть события.

Мы просто пройдемся по основам этих пяти функций в этой статье.

Модели. Модели — это сердце любого приложения JavaScript, содержащего интерактивные данные, а также большую часть логики, окружающей их.

Коллекции: коллекция прокси для Underscore, чтобы предоставить функции списка для работы с данными.

Представления: базовые представления используются для отображения моделей данных приложений. Они также используются для прослушивания событий и соответствующей реакции.

Шаблоны. Шаблоны — это, по сути, фрагменты разметки, которые используются для создания множества различных повторно используемых копий этой разметки, но для заполнения каждого компонента различными данными.

Просмотр событий: « События» — это модуль, который можно смешивать с любым объектом, давая объекту возможность связывать и запускать пользовательские именованные события.

Мы будем подробно описывать возможности Backbone в наших последующих статьях. Поэтому, пожалуйста, ищите то же самое.

Ссылка: Введение в Backbone.js от нашего партнера по JCG Пияса Де в блоге Phlox Blog .
44
Share: