Обзор javascript фреймворка Htmlix

Htmlix микро фреймворк, который также как и jquery встраивается в уже отданную сервером страницу. Принцип его работы базируется на data- атрибутах. В html разметке с помощью дата свойств — создаем необходимую нам структуру приложения из свойств, контейнеров и массивов, например:

      <div data-menu="array"> <!-- создали массив -->
           
           <!-- создали два контейнера  item со свойствами text_item и click-->

           <div data-item="container" >  
                <a href="#"  data-item-text_item="text" data-item-click="click"> 
                        пункт меню 1 
                  </a>
          </div>

           <div data-item="container" > 
                <a href="#"  data-item-text_item="text" data-item-click="click" > 
                     пункт меню 2
                 </a>
          </div>

      </div>

Обратите внимание что у каждого свойства есть определенный тип («text», «click»), у контейнера тип — «container», массива — «array».

Теперь в описании приложения остается только указать имя компонента, его контейнера и свойства, а htmlix сам их найдет в html разметке и создаст подобную структуру на js:

var StateMap = {
           menu: {
                 container: "item",
                 props: ["text_item" , "click"],
                 methods: {
                           click: function(){
                                 this.parent.props.text_item.setProp("новый текст");
                           }
                }

         }
}
//далее создаем экземпляр приложения передав ему наше описпние:
window.onload = function(){
            var HM = new HTMLixState(StateMap);
            console.log(HM);
}

Итак мы получили компонент-массив menu со вложенными в него контейнерами item, которые имеют какие-то свойства необходимые для работы. Обратите внимание что свойства имеют свой определенный тип, что позволяет сократить количество методов для работы с ними и использовать только три основных это: setProp(), getProp() и removeProp().

Навигация из свойства одного контейнера в другое осуществляетcя с помощью this.parent.props.name_prop где parent — родительский контейнер, а props — все объявленные свойства.

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

Например открыв в консоли объект HM можно кликая по свойствам переходить от одного к другому, либо из контейнера в массив или другой контейнер, таким вот простым способом, перейдя например state.menu.data[0].props.text_item — перешли в компонент меню, затем в контейнер с индексом 0, далее к свойству text_item.

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

Другие полезные свойства Htmlix:

• htmlix позволяет обмениваться данными между свойствами компонентов, а также обновлять их интерфейс с помощью пользовательских событий EventEmiters
• htmlix позволяет использовать роутер и использовать шаблоны для построения более серьезных приложений.

Более подробно можно почитать на сайте htmlix.

Либо посмотреть пример готового прототипа приложения .