Надежность

Основная причина, по которой ваш код может перестать работать — это обновления редактора. Их не избежать, иначе мы остановимся в развитии.

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

Кратко

Чем меньше недокументированных возможностей используется, тем надежнее код.

  1. Используйте наше API, поскольку оно надежное.

  2. Весь код оборачивайте в cr.api, вот так:

    cr.api(function (page) {
    // Тут ваш код
    });

    Исключение — код во вкладке JS в настройках компонентов. Там эта обертка делается по умолчанию.

  3. Используйте page.lazy при работе с DOM-элементами.

  4. Используйте те классы элементов, которые добавили сами, или которые начинаются с cr-.

  5. Не используйте jQuery и Lodash, по возможности.

  6. С большой силой приходит большая ответственность.

Используйте JS API

Весь смысл API в том, чтобы код не зависел от обновлений редактора. Мы следим за тем, чтобы из версии в версию все возможности API продолжали работать без изменений.

Старайтесь решить задачу с использованием API. Если не хватает возможностей - пишите в чат в телеграме. По истории переписки в чате вы можете увидеть, что недостающий функционал мы добавляем очень оперативно.

Оборачивайте код в cr.api

Исключение

Это не относится к коду во вкладке JS в настройках компонентов.

Даже если вы не используете JS API, мы рекомендуем код оборачивать в блок cr.api.

Используя jQuery, многие разработчики привыкли использовать подобную конструкцию:

$(document).ready(function () {
// Тут код, использующий jQuery
});

На Creatium вместо нее следует использовать следующую:

cr.api(function (page) {
// Тут код, даже если он не использует JS API и jQuery.
});

В этом есть несколько преимуществ:

  1. Код не будет влиять на скорость загрузки страницы, а выполнится после всех критичных скриптов.

  2. Код выполнится после загрузки библиотек jQuery и Lodash, которые можно будет безопасно использовать.

Волшебная функция page.lazy

Это простая и удобная функция, которая позволяет избежать многих ошибок при обращении к DOM-элементам.

Представьте, что вы написали код, который что-то делает с элементом, с помощью jQuery:

cr.api(function (page) {
var $element = $('.my-element');
});

Он может сломаться, если элемент поместить в окно, потому что окна появляются в DOM страницы не при загрузке, а перед первым открытием окна. Следовательно, jQuery ничего не найдет, и код не выполнится. А учитывая то, как работает jQuery, в консоли может даже не быть ошибки!

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

Просто используйте функцию page.lazy и не беспокойтесь обо всем этом.

cr.api(function (page) {
page.lazy('.my-element', function (el) {
var $element = $(el);
});
});

Можно так же использовать функцию page.waitForAppear, которая похожим образом, но срабатывает чуть раньше, чем page.lazy. Она тоже безопасна.

Используйте безопасные селекторы

Любой класс или аттрибут элемента может измениться в обновлении.

Например, у нас есть компонент форма с классом widget-form2. В какой-то момент она может стать просто widget-form. Вероятно, будет изменен класс widget-imagedtext на что-нибудь более подходящее по смыслу.

Еще раньше у нас заголовки были отдельным компонентом с классом widget-header, а потом были объединены с текстовым компонентом и стали тоже widget-text.

В одном из обновлений мы полностью переписали окна, и в них вообще все классы поменялись.

Таких примеров много. Поэтому мы предлагаем использовать или свои классы (добавлять их в настройках компонентов), или использовать классы, начинающиеся с cr-.

Примеры таких безопасных классов среди компонентов:

  • cr-slider
  • cr-button
  • cr-spoiler
  • cr-field и cr-field-input
  • и т.д.

Использовать их можно, не опасаясь, что они будут удалены или изменены.

Не используйте jQuery и Lodash

На текущий момент мы используем jQuery 3.4.1 и Lodash 2.4.1.

Мы даем возможность использовать эти библиотеки, поскольку сами их используем. Но раз в несколько лет мы обновляем их версии, и это может привести к непредсказуемым проблемам.

Использование этих библиотек — на свой страх и риск.