Enyo 2. Введение

Историческая справка:

Enyo — JavaScript framework.
Разрабатывался для замены Mojo (еще один JS framework) в недрах Palm и HP.
Первые версии входили в состав WebOS, а позднее выделился в отдельный проект.

Hello World

Простейшее приложение мы напишем в единственном файле, и назовем его «index.html»:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Title</title>
    <link rel="stylesheet" href="http://enyojs.com/enyo-2.2.0/enyo.css"><!--Стили Enyo 2.2.0-->
    <script type="text/javascript" src="http://enyojs.com/enyo-2.2.0/enyo.js"></script><!--Сам Enyo 2.2.0-->
  </head>
  <body>

  <!--Наш Hello World-->
  <script type="text/javascript">
  enyo.kind({
    name: 'App',
    content: 'Hello World'
  });

  var app = new App()
  app.renderInto(document.body);
  </script>

  </body>
</html>

Что же делает этот код?

Оповещает Enyo о существовании типа с именем App (именно типа)
Создает экземпляр объекта с типом App
Выполняет метод renderInto которому в качестве аргумента передается DOM элемент

Если теперь проверить DOM с помощью любого инспектора можно наблюдать следующую картину:
Enyo 2. Введение

Что можно вынести из этого примера (хоть и не явно)?

Тип объекта доступен по глобальному имени после объявления (см. Отступление)
Данные записанные в «content» объекта Enyo будут размещены внутри тега

Отступление.

Говоря «Тип», я подразумеваю именно тип объекта, а не экземпляр. Т.е. мы можем создать множество экземпляров App и отрисовать в разные элементы DOM, при этом значения «content» могут быть свои в каждом экземпляре.

Откровенно говоря, для этой статьи элемент <link rel="stylesheet" href="http://enyojs.com/enyo-2.2.0/enyo.css"> не обязателен, но оставлен для наглядности.

Тут и далее мы будем производить манипуляции над следующим кодом:

enyo.kind({
  name: 'App',
  content: 'Hello World'
});

Вложенные элементы

И так, мы хотим вложить внутрь нашего div еще один элемент, например h1. Как быть?
Первое что приходит в голову:

enyo.kind({
  name: 'App',
  content: '<h1>Header</h1>'
});

НО! Результат оказался слегка не тем… Как же вложить элемент?

Для этого мы можем использовать поле components с типом Array в который и вложим новый элемент, при этом content родителя использоваться не будет, а переедет в дочерний объект:

enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {content: 'Header'}
  ]
});

Если теперь проверить инспектором наш DOM мы получим следующую картину:
Enyo 2. Введение

Почти, но не то… мы хотели вложить h1, а вложили div… Исправим это?

enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'}
  ]
});

А вот это уже хорошо. НО! Если components имеет тип Array, значит ли это что объектов можно создать множество? Проверим:

enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'},
    {tag: 'p', content: 'Tag P'},
    {tag: 'span', content: 'Tag SPAN'},
    {content: 'No TAG'},
  ]
});

Результат:
Enyo 2. Введение

Интересно, а можно вложить элемент внутрь уже вложенного?

enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'},
    {components: [
      {content: 'No TAG1'},
      {content: 'No TAG2'}
    ]},
    {tag: 'span', content: 'Tag SPAN'},
    {content: 'No TAG'},
  ]
});

Да не проблема:
Enyo 2. Введение

Что можно вынести из этого примера?

Отображение объекта в DOM можно задавать через поле tag
Для вложения элементов необходимо использовать поле components которое имеет тип Array
Хоть и не явно, но для элементов без указания поля tag используется div

Стили

Предположим мы построили наш DOM, но как быть со стилями для элементов? Атрибуты id для них генерирует Enyo, а class или style вообще могут отсутствовать…
Знакомьтесь: поля classes и style! Оба имеют тип String и предназначены для стилизации компонентов:

enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'},
    {components: [
      {content: 'No TAG1', style: 'color: red;'},
      {content: 'No TAG2', classes: 'fake_class fake_class2'}
    ]},
    {tag: 'span', content: 'Tag SPAN'},
    {content: 'No TAG'},
  ]
});

Получаем:
Enyo 2. Введение

Что можно вынести из этого примера?

Для стилизации DOM элементов необходимо использовать поля classes и style

Атрибуты

Это все хорошо, но если мы используем свои framework'и которые ожидают атрибуты data-* внутри тега?
И это решаемо:

enyo.kind({
  name: 'App',
  //content: '<h1>Header</h1>'
  components: [
    {tag: 'h1', content: 'Header'},
    {components: [
      {content: 'No TAG1', style: 'color: red;',  attributes: {'data-fake': 'blabla', 'data-fake-new': 'qwe'}},
      {content: 'No TAG2', classes: 'fake_class fake_class2'}
    ]},
    {tag: 'span', content: 'Tag SPAN'},
    {content: 'No TAG'},
  ]
});

Результат:
Enyo 2. Введение

Что можно вынести из этого примера?

Для создания своих атрибутов необходимо использовать поле attributes

Вывод

В этой статье я коснулся исключительно отображения объектов Enyo в DOM.
Кроме явного создания DOM элементов, Enyo предоставляет множество методов по динамическому созданию/изменению объектов, доступ к json/jsonp web сервисам, UI, размещению элементов (layouts), кросс-(браузерным/платформенным) событиям и многое другое.
Если данный framework будет интересен сообществу — буду рад осветить работу с ним.

Ссылки

Сайт проекта ^[1]
Поддерживаемые платформы ^[2]
Enyo Community Gallery ^[3]

Попробовать

Enyo API ^[4]
Enyo на jsfiddle.net ^[5]

Автор: metej

Источник ^[6]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/48434

Ссылки в тексте:

[1] Сайт проекта: http://enyojs.com

[2] Поддерживаемые платформы: http://enyojs.com/docs/2.2.0/platforms/

[3] Enyo Community Gallery: http://enyojs.com/gallery/

[4] Enyo API: http://enyojs.com/api/

[5] Enyo на jsfiddle.net: http://jsfiddle.net/enyojs/g7MLS/

[6] Источник: http://habrahabr.ru/post/202288/

Нажмите здесь для печати.