В данной статье будут описаны базовые принципы создания модулей на javascript фреймворке htmlix.

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

Модули в htmlix полностью автономны и не требуют добавления в основной (core) участок кода. Поэтому их можно создать на отдельном js скрипте и подключить когда это потребуется или не подключать вовсе. Информацию об изменении состояния приложения и новые данные они получают на основе пользовательских событий см. Работа с пользовательскими событиями, поэтому их легко добавить или удалить не меняя основной код приложения. Можно также выключить прослушивание данных — событий из самого модуля, а потом снова включить.

Далее будет рассмотрен модуль addDrawCirclePanel приложения Collage_n который рисует круги на канвас с помощью кликов мыши. Перед рисованием модуль принимает два параметра — цвет и диаметр круга с помощью свойств с типом inputvalue. Далее после нажатия кнопки рисовать — вызывает emiter событие «emiter-operation-with» со значением «draw-circle», чтобы включить активное состояние модуля и выключить другие модули приложения.

Модуль создается также как и обычный компонент:

(function(){

//разметка модуля
// создаем контейнер для модуля data-draw_circle_panel="container"
//все используемые в js поля и кнопки обозначены именами (для удобства)
// name="draw_circle_btn", name="draw_sircle_radius", name="draw_sircle_color"	
  var html = ` 
<div data-draw_circle_panel="container"  class="form-group" name="draw_circle_panel">
   <label for="exampleFormControlInput1" style="font-size: 15px;">
              Рисовать окружность
   </label>
  <div class="form-row">
	<div class="form-group col-md-4">								
              <button type="button" name="draw_circle_btn" class="btn btn-success btn-sm">
                   Рисовать
              </button>
	</div>
	<div class="form-group col-md-4">										
            <input name="draw_sircle_radius" type="text" class="form-control form-control-sm">
	</div>
	<div class="form-group col-md-4">										
            <input name="draw_sircle_color" type="text" class="form-control form-control-sm">
	</div>
  </div>								
</div>
`  ;
  
//динамическое добавление разметки модуля в общую разметку приложения.
  var div = document.createElement("div");
  div.innerHTML = html;
  div = div.querySelector("div");
  var parent = document.querySelector("[data-main_form]");
  var insert_before = document.querySelector("[name='common_btns_class']")
  var insertedElement = parent.insertBefore(div, insert_before);
  
  
//js код модуля
  var draw_circle_panel = {
	  
	  container: "draw_circle_panel", //контейнер модуля
	  props: [
               ///свойства модуля
		["draw_circle_btn", "click", "[name='draw_circle_btn']"], 
		["draw_sircle_radius", "inputvalue", "[name='draw_sircle_radius']"],
		["draw_sircle_color", "inputvalue", "[name='draw_sircle_color']"],
 
///два свойства-события основного core приложения: клики по канвас и событие смены операции
		["canvas_click", "emiter-mousedown-canvas", ""], 		
		["operation_with", "emiter-operation-with", ""],
	  ],
	  methods: {
 //отключает слушателей canvas событий ( mousedown) если модуль находится в пассивном состоянии	
		  operation_with: function(){  
			  if(this.emiter.prop != "draw-circle"){			  				 
				  this.parent.props.canvas_click.disableEvent();			  
			  }else{				  				
				  this.parent.props.canvas_click.enableEvent();			  
			  }			  
		  },

//при нажатии на кнопку рисовать - вызывает событие "emiter-operation-with" и устанавливает свойство prop = "draw-circle" чтобы другие модули отключили прослушивание событий и скрыли ненужные кнопки.

		  draw_circle_btn: function(){

				  this.$$("emiter-operation-with").set("draw-circle");
			 		  		  
		  }	,

//слушает событие приложения  "emiter-mousedown-canvas" и в активном состоянии рисует круги при кликах мышью.

		 canvas_click: function(){
			if(this.$$("emiter-operation-with").prop == "draw-circle"){
//данные из свойств модуля
			  var props = this.parent.props;
			  var radius = props.draw_sircle_radius.getProp();
			  var color = props.draw_sircle_color.getProp();
                     
			  var point = this.emiter.prop;//данные из события основного (core) приложения с координатами точки на канвас	

             saveStep(saveImg, this.$props().commonProps.area_1);  //функция из глобальной области для сохранения шагов, редактирования
			 
				ctx.save();
	            ctx.putImageData(saveImg, 0, 0);
				ctx.beginPath();
				ctx.arc(point[0], point[1], radius, 0, 2*Math.PI, false);
				ctx.fillStyle =  color;
				ctx.fill();
				ctx.lineWidth = 1;
				ctx.strokeStyle =  color;
				ctx.stroke();

                               //переменная из глобальной области для сохранения картинки после рисования 				
				saveImg = ctx.getImageData(0,0, srcWidth, srcHeight);
				ctx.restore();				
			}
		}	  
	  }	  
  }

//добавляем описание модуля в общее описание приложения
  HM.description.draw_circle_panel  = draw_circle_panel;

//создаем контейнер модуля
  HM.containerInit(div , HM.description, "draw_circle_panel");

  HM.eventProps["emiter-operation-with"].emit(); //вызываем чтобы отключить слушателей canvas событий при старте модуля

})()

В примере выше мы подключили контейнер с помощью функции: HM.containerInit(htmlLink, HM.description, «module_name»);
где HM — ссылка на экземпляр приложения.

Для подключения массива нужно использовать функцию HM.arrayInit(htmlLink, HM.description, «module_name»);

В редакторе Collage_n модули подключаются в панели «Загрузить модуль, изменить настройки».

Это был краткий обзор основных принципов создания и подключения htmlix модулей.