Синтаксис Marionette Application, View и CollectionView и класса ES 6

По крайней мере, на данный момент классы ES 6 не являются лучшими друзьями элементов Marionette: Application, View или CollectionView. Но, к счастью, есть несколько умных обходных путей, в том числе один, который довольно прост в использовании.

ЭС 6 классы

Это одна из самых ожидаемых функций на протяжении многих лет (особенно людьми, пришедшими из мира Java/C#), и в то же время одна из самых ненавидимых разработчиками старой школы JS: Синтаксис класса JavaScript . И тут следует помнить две самые важные, на мой взгляд, вещи о классах ES 6:

1. Это лишь синтаксический сахар вокруг известного Prototype, поэтому, с одной стороны, не исключено, что в некоторых ситуациях это может сбить с толку новичков в Java/c#, а с другой стороны — такие ситуации должны быть достаточно редкими, и это затрудняет миграцию с Прототипировать синтаксис класса проще.
2. В классе все идет в строгом режиме.

Я думаю, что синтаксис класса делает код более чистым и легким для чтения.

Неожиданные проблемы

К сожалению, это плохо работает с Backbone и Marionette:

Backbone полагается на добавление свойств к прототипу класса перед вызовом конструктора класса 1. Классы ES6 не предоставляют никакого способа определить свойства прототипа как часть определения класса.

Вы можете прочитать больше здесь: Почему классы Backbone.js и ES6 не смешиваются.

Решения

К счастью, в том же блоге я нашел пост с решениями: Пересмотр классов Backbone и ES6.

Относитесь ко всему как к методу

Одно из решений мне особенно помогло (тот же пост):

Backbone оценивает все свои свойства с помощью функции Underscore _.result. _.resultпроверяет, является ли свойство объекта функцией. Если да, то _.result оценит его и вернет результат. Это позволяет Backbone принимать свои свойства либо как объект, либо как функцию. Очень кстати. Таким образом, одним из способов решения проблемы с конструктором является превращение всего в метод, включая свойства.

На мой взгляд, это требует от меня как можно меньше изменений, мне не нужно добавлять какие-то лишние методы.

Пример

В качестве доказательства концепции я переписал несколько классов из Backbone’s extend в нативный ES Class, например — Application class (app.js):

class Application extends Mn.Application {
    channelName () {
        return "chessboardMoves";
    }
    radioEvents () {
        return {
            "move": "onMove"
        };
    }
    onMove (move) {
        alert(`Move: ${JSON.stringify(move)}`);
    }
}

Единственное существенное изменение заключается в том, что channelName, ранее связанный как строка, становится методом, возвращающим строку.

Вывод

Я не ожидал этой проблемы с довольно простой функцией ES 6, и я хотел бы поблагодарить Бена Маккормика за предоставление умных решений.

‹‹ Читать мой предыдущий пост: