Русский
Русский
English
Статистика
Реклама

Создание модуля на фреймворке Htmlix

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

Например у вас есть приложение с большим количеством кнопок, событий и т.д. И для удобства, а также для увеличения скорости загрузки, и уменьшения потребления ресурсов вы захотели его разбить на модули. Пример работающего 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 модулей.
Источник: habr.com
К списку статей
Опубликовано: 23.09.2020 12:10:47
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Javascript

Open source

Javascript framework

Modules

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru