Например у вас есть приложение с большим количеством кнопок, событий и т.д. И для удобства, а также для увеличения скорости загрузки, и уменьшения потребления ресурсов вы захотели его разбить на модули. Пример работающего htmlix приложения на основе модулей можно покликать по ссылке редактор для создания коллажей и спрайтов Collage_n .
Модули в htmlix полностью автономны и не требуют добавления в основной (core) участок кода. Поэтому их можно создать на отдельном js скрипте и подключить когда это потребуется или не подключать вовсе. Информацию об изменении состояния приложения и новые данные они получают на основе пользовательских событий см. Работа с пользовательскими событиями, поэтому их легко добавить или удалить не меняя основной код приложения. Можно также выключить прослушивание данных событий из самого модуля, а потом снова включить.
Далее будет рассмотрен модуль addDrawCirclePane приложения 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 модулей.