Уже готовый пример можно покликать здесь
Почитать api htmlix можно здесь
После ввода имени пользователя в форму, приложение отобразит его имя в приветствии, кнопке выхода и создаст новый контейнер в массиве с пользователями, а также сохранит данные в localStorage. После перезагрузки страницы, возьмет имя из localStorage. При клике по кнопке выйти из профиля удалит данные со всех компонентов и переменную из localStorage.
Давайте создадим четыре компонента: форму входа form, приветствие greeting, кнопку выхода logout и массив со всеми посетителями users_array, и посмотрим как бы мы создавали между ними коммуникацию если бы не пользовались пользовательскими событиями.
Создадим html разметку всех компонентов:
<!-- компонент - контейнер форма с двумя свойствами input c типом свойства "inputvalue" и click с типом "click" --><form data-form="container" class="card col-12"> <div class="form-group"> <label for="">Введите имя</label> <textarea data-form-input="inputvalue" class="form-control" rows="1"></textarea> </div> <button data-form-click="click" type="submit">Submit</button></form><!-- компонент - контейнер приветствие и свойство user_name с типом - "text" --><div data-greeting="container" class="col-6 card"> <p>Привет: <span data-greeting-user_name="text">guest</span></p></div><!-- компонент - контейнер кнопка выхода и свойство user_name с типом - "text" --><div data-logout="container" class="col-6 card"> <a href="#"> Выйти из профиля: ( <span data-logout-user_name="text"></span> ) </a></div><!-- компонент - массив пользователей, изначально с двумя контейнерами, в каждом контейнере свойство user_name - "text" --> <div class="container-fluid" style="border: 1px solid red; margin-top: 20px;"> <p> все пользователи:</p> <div data-users_array="array" class="row"> <div data-user="container" class="col-4 card"> <p>пользователь - <span data-user-user_name="text">user_name_1</span> </p></div> <div data-user="container" class="col-4 card"> <p>пользователь - <span data-user-user_name="text">user_name_1</span> </p></div> </div></div>
Теперь перенесем их в javascript:
var StateMap = {form: {//форма входаcontainer: "form",props: ["input", "click"],methods: {click: function(){event.preventDefault(); //отменяем перезагрузку страницы //получаем данные свойства inputvar text = this.parent.props.input.getProp(); console.log(text);}},},greeting: {//приветствиеcontainer: "greeting",props: [ "user_name", ], methods: { }},logout: { //кнопка выходаcontainer: "logout",props: [ "user_name", ], methods: {},},users_array: { //массив с пользователями container: "user",props: [ "user_name", ],methods: { }, },}window.onload = function(){//создаем экземпляр приложения htmlixvar HM = new HTMLixState(StateMap);console.log(HM);}
В примере выше мы записали данные свойства input из компонента формы в переменную text. Теперь нам нужно отобразить их в свойствах компонентов greeting и logout, а также создать новый контейнер в массиве users_array. Для понимания того зачем нужны пользовательские события давайте сначала попробуем сделать это различными способами без их использования.
1. способ в самом методе click формы напрямую перейти к каждому компоненту и установить свойство text:
event.preventDefault(); var text = this.parent.props.input.getProp(); //установили значения свойствам this.rootLink.state["greeting"].props.user_name.setProp(text); this.rootLink.state["logout"].props.user_name.setProp(text); ///создали новый контейнер this.rootLink.state["users_array"].add({user_name: text});
Недостаток данного подхода очевиден, что если потом мы где-нибудь еще будем получать данные для этого свойства? Например на основе localstorage они будут загружаться автоматически.
2. способ это создать метод в объекте stateMethods и вызывать его при изменении данных:
ststeMethods: { entryUser: function(text){ this.state["greeting"].props.user_name.setProp(text); this.state["logout"].props.user_name.setProp(text); this.state["users_array"].add({user_name: text}); }}// после загрузки странициwindow.onload = function(){ var name = window.localStorage.getItem('user_name'); if(name)HM.stateMethods.entryUser.call.(HM, name); ///вызываем метод передав ему контекст= HM}//в формеclick: function(){ event.preventDefault(); var text = this.parent.props.input.getProp(); this.rootLink.stateMethods.entryUser.call.(this.rootLink, text); }
В данном случае нам удалось избежать дублирования кода, однако проблема в том что методы для работы со свойствами компонента находятся не внутри него а во внешних функциях. Что если перед тем как установить свойство его нужно как-то отформатировать, по разному для каждого компонента, или нам нужно будет установить не одно свойство, а несколько, поэтому лучше когда компоненты сами работают со своими свойствами.
3. способ перенести всю логику работы со свойствами в компоненты, и создать в них методы, с помощью которых вызывать определенные действия.
greeting: {container: "greeting", //добавили вспомогательный метод для приветствия пользователяprops: [ "user_name", ["greet_user", "aux"] ], methods: { greet_user: function(name){ this.props.user_name.setProp(name+" !!!"); } }},logout: { container: "logout",props: [ "user_name", ["set_name", "aux"]], //добавили вспомогательный метод для работы со свойством компонентаmethods: { set_name: function(name){ this.props.user_name.setProp(name); } },},users_array: { arrayProps: [["entry_user", "aux"]], ///добавляем контейнер с новым пользователем из массива arrayMethods: { entry_user: function(name){ this.add({user_name: name}) } }container: "user",props: [ "user_name", ],methods: { }, }, stateMethods: { //изменили общий метод entryUser: function(text){ this.state["greeting"].methods.greet_user(text); this.state["logout"].methods.set_name(text); this.state["users_array"].entry_user(text); } } //далее также вызываем данный метод entryUser из формы и при загрузке страницы
Теперь компоненты инкапсулированы, однако мы производим доступ к компоненту по его имени. Что если мы потом захотим изменить имя компонента или метода, или вообще удалить компонент, или у нас будет много таких компонентов которые слушают одно и тоже свойство. Или у нас будет много таких свойств, соответственно прийдется создавать много таких методов.
Чтобы облегчить данную задачу можно воспользоваться пользовательскими событиями. Компонент подписывается на событие, и при его наступлении делает что-то со своими свойствами.
Давайте отредактируем код, теперь с использованием пользовательских событий:
var StateMap = { eventEmiters: { //создали эмитер события - входа пользователя ["emiter-entry-user"]: {prop: ""}, }, form: {container: "form",props: ["input", "click"],methods: {click: function(){ event.preventDefault(); var text = this.parent.props.input.getProp(); //вызвали событие в форме и передали в него данные this.rootLink.eventProps["emiter-entry-user"].setEventProp(text); window.localStorage.setItem('user_name', text);}},},greeting: {container: "greeting",props: [ "user_name", ['listen_entry_user', "emiter-entry-user", "" ] ], //добавили слушатель события "emiter-entry-user"methods: {listen_entry_user: function(){ //получили данные из события и обновили свойство this.parent.props.user_name.setProp( this.emiter.getEventProp() );},},},logout: { container: "logout",props: [ "user_name", ["listen_entry_user", "emiter-entry-user", "" ]], //свойство слушатель события "emiter-entry-user"methods: {listen_entry_user: function(){ //получили данные из события и вызвали свойство this.parent.props.user_name.setProp( this.emiter.getEventProp() );},},}, //здесь слушатель события добавляется в свойство массива, т.к. если добавить его в контейнер оно будет вызвано для каждого контейнера users_array: { arrayProps: [ ['listen_entry_user', "emiter-entry-user", ""] ], //свойство слушатель события "emiter-entry-user" arrayMethods: {listen_entry_user: function(){//получили данные из события и создали новый контейнерthis.parent.add( {user_name: this.emiter.getEventProp()} );},},container: "user",props: [ "user_name", ['listen_exit_user', "emiter-exit-user", ""] ],methods: {}}, },}window.onload = function(){var HM = new HTMLixState(StateMap);var name = window.localStorage.getItem('user_name');if(name != null)HM.eventProps["emiter-entry-user"].setEventProp(name); ///вызвали событие "emiter-entry-user" при загрузке сайта и передали в него данные}
Таким образом мы избавились от промежуточного метода entryUser и просто вызываем событие передав в него новые данные в форме и после загрузки страницы. Теперь если нам нужно изменить что-либо в компоненте, или вообще удалить его нам не потребуется поправлять код в каждой функции, которых может быть сколько угодно. А чтобы отписаться от какого либо события можно просто удалить слушателя в компоненте, или временно отключить его с помощью метода disableEvent() в свойстве подписчике.
Полный код данного примера вместе со вторым событием emiter-exit-user можно посмотреть здесь
