Обзор 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.

Либо посмотреть пример готового прототипа приложения .
Tags:
javascript framework, htmlix, single page application, jquery, javascript

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.