Объекты и namespace BX

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

script.jslet data = new Date();
  function dateTaim() {
    let result = data.getTime();
    alert(result);
  }

Я предпочитаю создавать объект, который будет в себе содержать все свойства и методы, относящиеся к конкретному компоненту:

script.jslet componentData = {
  data: new Date(),
  dateTaim: function () {
    let result = componentData.data.getTime();
    alert(result);
  },
};

Название componentData не самый лучший и очевидный вариант именования. В Bitrix и Bitrix24 объекты распределены в пространстве имён BX., что позволяет случайно не переопредилить существующей функционал и внести некоторую ясность в то, с чем мы работаем в данный момент.

Создание объекта в пространстве имен и инициализация

Для создания цепочки объектов в js библиотеке Bitrix предусмотрен метод BX.namespace(namespaceName). Этот метод создаст требуемыое пространство имён, если оно отсутствует и вернёт на него ссылку:

script.jsBX.namespace("HM.Data.Hed");
BX.HM.Data.Hed = {
  text: "",
  data: new Date(),
  dateTaim: function () {
    let result = BX.HM.Data.Hed.data.getTime();
    alert(BX.HM.Data.Hed.text + result);
  },
};

Инициализация объекта

Для выполнения кода, достаточно сделать вызов:

template.php// добавляем расширение, которое содержит данное пространство имен
\Bitrix\Main\UI\Extension::load('hmarketing.test');
<script>
    BX.ready(function() {
        BX.HM.Data.Hed.text = "Время: ";
        BX.HM.Data.Hed.dateTaim();
    })
</script>

Создание объекта в пространстве имен с методом init() и инициализация

Альтернативным вариантом будет добавление метода init(), который будет принимать объект с параметрами, распределять их по нужным свойствам. Иными словами, создадим конструктор нашего объекта:

script.jsBX.namespace("HM.Data.Hed");
BX.HM.Data.Hed = {
  text: "",
  data: new Date(),
  name: {},
  dateTaim: function () {
    let result = BX.HM.Data.Hed.data.getTime();
    alert(this.name.name + this.name.surname + this.text + result);
  },
  init: function (params) {
    this.text = params.text;
    this.name = params.name;
    this.dateTaim();
  },
};

Инициализация объекта

template.php// добавляем расширение, которое содержит данное пространство имен
\Bitrix\Main\UI\Extension::load('hmarketing.test');
<script>
    BX.ready(function() {
        let componentParams = {
            text: "время: ",
            name: {
                name: "Иван ",
                surname: "Иванов "
            }
        }
        BX.HM.Data.Hed.init(componentParams);
    })
</script>

Самовызывающиеся объекты

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

script.jsBX.namespace("HM.button");
BX.HM.button = {
  init: function () {
    let block = document.querySelector(".border");
    let btn = block.querySelector(".tekst");
    btn.addEventListener("click", function (e) {
      alert(123);
    });
  },
};
BX.ready(() => {
  BX.HM.button.init();
});