Документация Creatium

# Надежность

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

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

# Кратко

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

  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.

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

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

Полезные ссылки

https://github.com/nefe/You-Dont-Need-jQuery

https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore

Поддержка в Telegram-чате

Подскажем, как решить вашу задачу!

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

← Cart →