Пока ребята из команд, работающих над Angular и React, мягко, но уверенно переводят разработчиков на ES2015, хотелось бы немного рассказать о возможностях использования нового стандарта спецификации с библиотекой Backbone.js. Сегодня основной подход к использованию ES2016 в браузерах тот же и не зависит от используемого фреймворка/библиотеки.
А состоит он в следующем: пишем код на ES2015 и с помощью транспилятор (например.
Вавилон ) получаем код (который выполняется в браузере) по предыдущему стандарту ES5. Но как можно использовать модули, классы и другие «фишки» из ES2015 в сущностях библиотеки Backbone.js? Об этом пойдет речь под катом.
Прежде всего нам необходимо организовать все файлы моделей, коллекций, представлений и маршрутов в виде модулей es6. На мой взгляд, лучший инструмент для сборки модулей — вебпак; если вы используете его в своем проекте, то вряд ли потом пожалеете об этом.
Итак, приступим к написанию модуля, который будет одним из наших представлений:
Здесь мы просто импортировали зависимости, необходимые в этом модуле.import $ from 'jquery'; import Backbone from 'backbone'; import _ from 'underscore';
Используете ли вы другие библиотеки? Делать то же самое.
Далее мы объявим класс МойCustomView : 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, event. Как они будут выглядеть? Есть 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() {
super();
this.tagName = 'div';
this.className = 'example';
this.events = {
'click': 'sayHelloWorld'
};
}
}
Аналогичная ситуация произойдет и с атрибутами моделей и коллекций.
Никаких препятствий для дальнейшего использования всех «возможностей» стандарта ES2015 нет. Вы можете использовать деструктуризацию, строки шаблонов, итераторы, стрелочные функции, новые типы коллекций, промисы, символы так же, как и в других фреймворках/библиотеках, привязки к Backbone.js нет. Например, используя функцию стрелки в методе инициализации: class MyCustomView extends Backbone.View {
initialize() {
setTimeout(() => {this.render()}, 1000);
}
render() {
}
// our other code
}
Как видите, внеся минимальные структурные изменения в свой проект, вы легко сможете перейти на ES2015 с помощью библиотеки Backbone.js. Вы уже можете использовать все возможности языка, не развиваясь на таких быстро развивающихся библиотеках, как React.
Теги: #backbone.js #es2015 #JavaScript #JavaScript #программирование
-
Споры Вокруг Корпоративного Блоггинга
19 Oct, 24 -
Опасный Прецедент
19 Oct, 24 -
Тренировка Мозга Для Эффективной Работы
19 Oct, 24 -
Fivegui — Красивые Кнопки Для Холста
19 Oct, 24 -
Ищу Простой Контроль Версий, Так Сказать
19 Oct, 24
