Надежность

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

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

Содержание

Кратко Используйте JS API Оборачивайте код в cr.api Волшебная функция page.lazy Используйте безопасные селекторы Не используйте jQuery и Lodash

Кратко

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

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

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

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

💡

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

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

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

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

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

Используйте 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.
});

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

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

Код выполнится после загрузки библиотек 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

Надежность

Кратко

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

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

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

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

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

Не можете найти то, что ищите?

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

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