OSCHINA-MIRROR/diqye-declarehtml

Введение

При создании множества синхронных страниц опыт использования MVVM-фреймворка и инструментов рефакторинга был плохим. Использование библиотек, таких как JQuery, для работы с DOM также может быть утомительным. Мы хотим иметь возможность видеть отношения между элементами и их взаимодействие в HTML (например, включение кнопки «согласиться» при выборе соответствующего чекбокса), а также иметь хорошую модульную упаковку (только для JS, не для синхронных страниц). Однако реализация на основе данных не является реалистичной (поскольку окончательный HTML должен формироваться после выполнения JS), поэтому мы всё ещё используем работу с DOM. Мы предоставляем глобальный селектор, который вставляется между атрибутами HTML, и передаём состояние через функции для абстрагирования логики и упаковки бизнес-логики. Поскольку на моём компьютере есть только Chrome и Safari, я не тестировал его в IE и Firefox. Если вам интересно, присоединяйтесь к клубу разработчиков Frontend Girls, чтобы обсудить это вместе. Номер группы: 632826899.

Использование

<script src="your/path/src/index.js"></script>

Это позволит глобально установить переменную declare.

Hello

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hello</title>
</head>
<body d-mod="main">
  <button d-click="alert('The tag\'s name is ' + $e.target.tagName)">hello</button>
  <script src="../src/index.js"></script>
  <script>
    declare.create(document.body,{})
  </script>
</body>
</html>

Атрибут d-mod представляет использование модуля main, который является встроенным модулем, включающим d-click и некоторые общие функции работы с DOM. Здесь просто вызывается функция alert окна для отображения сообщения.

Особенности

Декларативная работа с DOM.
Полноценный механизм модулей, поощряющий разработку с использованием модулей. Всё — модули.
В HTML можно напрямую писать селекторы, которые автоматически преобразуются в объекты элементов в вашем обработчике.
Следование функциональному стилю (минимизация состояния, возможность комбинирования функций, чистые функции).