Сценарий жизненного цикла

Жизненный цикл компонента или мнемосхемы состоит из следующих этапов:

• scOnInit - при инициализации, вызывается при отображении (однако опционально может выполняться повторно на этапе обновления), на этом этапе выполняется первичная настройка внешнего вида компонента в соответствии с выставленными ему свойствами;

• scOnChange – при изменении состояния, вызывается каждый раз, когда элементу мнемосхем измененили свойство, позволяет оптимизировать процесс модификации;

• scOnLayout – при расположении, вызывается на этапе позиционирования элемента, позволяет задать собственные правила позиционирования;

• scOnTime – по таймеру, вызывается на этапе периодического автообновления мнемосхемы, позволяет оптимизировать процесс обновления;

• scOnDestroy – при уничтожении, вызывается однократно на этапе завершения работы компонента, позволяет освободить предварительно занятые пользовательские ресурсы.

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

Окружение сценария жизненного цикла

Сценарий жизненного цикла, являясь клиентским сценарием, пишется на языке JavaScript и имеет в своем окружении доступ к объекту this, олицетворяющему текущий элемент мнемосхем. Через этот объект можно получить доступ к свойствам, дочерним объектам, содержимому html/svg и настройкам окружения.

Сценарий при инициализации, scOnInit

Вызываемый на этапе инициализации сценарий выполняет первичную настройку внешнего вида компонента согласно выставленным ему свойствам.

Пример сценария при инициализации.

...
// Поиск элемента rect в составе компонента
let rectNode = this._node.querySelector('rect');
// Настройка внешнего вида в соответствии со свойствами
rectNode.style.strokeWidth = this.border ? this.borderWidth : 0;
rectNode.style.stroke = this.borderColor;
rectNode.style.fill = this.backColor;
rectNode.style.fillOpacity = this.backColor ? 1 : 0;
...

Сценарий при изменении состояния, scOnChange

Вызываемый при изменении состояния сценарий выполняет частичное обновление компонента с целью оптимизации его работы. Сценарий является опциональным, при его отсутствии происходит полное обновление компонента автоматическим вызовом scOnInit().

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

Пример сценария при изменении состояния.

for(let ch of event){
  switch(ch.name){
    case 'items':{
      this.value = null;    
      break;
    }        
    default:
      this.render();
  }
}

Сценарий при расположении, scOnLayout

Вызываемый сценарий переопределяет поведение по умолчанию по настройке расположения компонента.

Пример сценария при расположении.

...
this._node.style.left = this.x + 'px';
this._node.style.top = this.y + 'px';
this._node.style.zIndex = 0;
...

Сценарий по таймеру, scOnTime

Сценарий формы мнемосхем, вызываемый при ее автообновлении по таймеру. Сценарий является опциональным, при его отсутствии происходит полное обновление формы автоматическим вызовом scOnInit().

Пример сценария по таймеру.

...
// вызов перерисовки только одного дочернего элемента
this.cubicle1.scOnInit();
...

Сценарий при уничтожении, scOnDestroy

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

Пример сценария при уничтожении.

...
// освобождение пользовательского таймера
clearTimeout(this.tempTimer);
...