[Из песочницы] Использование стандарта ES2015 в рамках библиотеки Backbone.js
В то время, как ребята из команд, работающих над Angular, React, мягко, но уверенно пересаживают разработчиков на ES2015, я хотел бы немного рассказать о возможностях использования нового стандарта спецификации с библиотекой Backbone.js. На сегодня основной подход к использованию ES2016 в браузерах один и не зависит от используемого фреймворка/библиотеки. И заключается он в следующем: пишем код на ES2015 и с помощью транспайлера (напр., Babel) получаем код (который и выполняется в браузере) на предыдущем стандарте ES5.
Но как модули, классы и прочие «фишки» из ES2015 использовать в рамках сущностей библиотеки Backbone.js? Об этом речь пойдет под катом.
Прежде всего нам необходимо организовать все файлы моделей, коллекций, представлений и роутов в виде es6 модулей. По моему мнению лучший инструмент для сборки модулей — webpack, если будете использовать в своем проекте его, то вряд ли пожалеете впоследствии. Итак, начнем писать модуль, который будет являться одним из наших представлений:
import $ from 'jquery';
import Backbone from 'backbone';
import _ from 'underscore';
Здесь просто импортировали зависимости, необходимые в данном модуле. Используете другие библиотеки? Поступайте аналогично.
Дальше объявим класс MyCustomView:
class MyCustomView extends Backbone.View {
// our other code
}
Как видите созданный класс унаследован от стандартного класса Backbone.View. Кроме этого нам нужно экспортировать MyCustomView, для использования его в других модулях:
class MyCustomView extends Backbone.View {
// our other code
}
export default MyCustomView;
Структура модуля готова, осталось добавить созданному классу методы (именно методы, не свойства-функции):
class MyCustomView extends Backbone.View {
initialize() {
}
render() {
}
// our other code
}
export default MyCustomView;
Пока все предсказуемо, но мы еще не объявили такие свойства как el, tagName, events. Как будут выглядеть они? Есть 2 подхода: реализовать их объявление через геттеры, либо объявить в методе конструктора, приведу оба примера:
class MyCustomView extends Backbone.View {
get tagName() { return 'div'}
get className() { return 'example' }
get template() { return _.template(myTemplate)}
get events() {
return {
'click': 'sayHelloWorld'
}
}
}
используя конструктор, получим:
class MyCustomView extends Backbone.View {
constructor() {
this.tagName = 'div';
this.className = 'example';
this.events = {
'click': 'sayHelloWorld'
};
super();
}
}
Аналогичная ситуация будет с атрибутами моделей и коллекций.
К дальнейшему использованию всех «фич» стандарта ES2015 нет никаких препятствий. Вы можете использовать деструктуризацию, строки-шаблоны, итераторы, стрелочные функции, новые типы коллекций, промисы, symbol точно так же, как в других фреймворках/библиотеках, завязки на Backbone.js тут нет.
Например, использование arrow function в методе initialize:
class MyCustomView extends Backbone.View {
initialize() {
setTimeout(() => {this.render()}, 1000);
}
render() {
}
// our other code
}
Как видите, внеся минимальные структурные изменения в свой проект, можно легко перейти на ES2015, используя при этом библиотеку Backbone.js. Можно уже сейчас использовать все возможности языка, при этом не разрабатывая на таких бурно развивающихся библиотеках, как React.
