15 ноября или интерфейс-трансформер. I’ll be back, html
- суббота, 16 ноября 2019 г. в 00:30:39
habrahabr
https://habr.com/ru/post/475976/
Давайте сделаем интерфейс-трансформер на JS, где html вполне управляем и подвижен.
При выполнении этой задачи я буду опираться на архитектуру CSDR и вдохновляться смелостью работы над ошибками.
Приступим.
Давайте взглянем на трансформацию в природе!
1. Объект «Семя»
Получаем java-script-код (и никаких html-тэгов, кроме script).
2. Главная цель
Получаем цели.
3. Главное место
Выстраиваем DOM.
4. Место запаса
Запоминаем глобальные переменные.
5. Верхне-нижнее место
DOM дополняется новыми отделами.
6. Элемент
Задаем на местах необходимый обмен (входящее-выходящее) с глобальными переменными.
7. Событие
На элементы выставляем необходимые события.
8. Объект «Дерево»
Отображаем интерфейс в браузере!
Часть примера вывода тэга div и b, с наполнением (ниже ссылка):
Вся версия кода
Ο ωκεανός θα απομακρύνει τα σκουπίδια. Καλή τύχη!
- JavaScript
- Совершенный код
Давайте сделаем интерфейс-трансформер на JS, где html вполне управляем и подвижен.
При выполнении этой задачи я буду опираться на архитектуру CSDR и вдохновляться смелостью работы над ошибками.
Приступим.
Давайте взглянем на трансформацию в природе!
1. Объект «Семя»
Получаем java-script-код (и никаких html-тэгов, кроме script).
2. Главная цель
Получаем цели.
3. Главное место
Выстраиваем DOM.
4. Место запаса
Запоминаем глобальные переменные.
5. Верхне-нижнее место
DOM дополняется новыми отделами.
6. Элемент
Задаем на местах необходимый обмен (входящее-выходящее) с глобальными переменными.
7. Событие
На элементы выставляем необходимые события.
8. Объект «Дерево»
Отображаем интерфейс в браузере!
Часть примера вывода тэга div и b, с наполнением (ниже ссылка):
<html id="1.1">
<head id="1.1.1">
<title id="1.1.1.1"></title>
<meta id="1.1.1.2" charset="utf-8">
<script id="1.1.1.3">
$GLOBALS = [];
/*1 компонент проекта*/
$GLOBALS['Рефлексы'] = {
'1': {
'Ориентир': 'Интерфейс',
'Условия': 'false',
'Расчёты': 'Не более 5 кб. памяти',
'Места': ['1'],
'Вложение': {
'1.1': {
'Ориентир': 'Пример развёртки html',
'Условия': 'true',
'Расчёты': 'Два новых тэга',
'Места': ['1.1.2.1','1.1.2.1.1'],
'Вложение': false
},
'1.2': {
'Ориентир': 'Пример наполнения содержимым',
'Условия': 'true',
'Расчёты': 'Текст для одного тэга',
'Места': ['1.1.1.1.1','1.1.2.1.1.1'],
'Вложение': false
},
}
}
};
/*2 компонент проекта*/
$GLOBALS['Места'] = {
'1': {
'Смысл': 'Память интерфейса',
'Роль': ['Способность'],
'Связи': ['1'],
'Вложение': {
'1.1': {
'Смысл': 'Тэг html',
'Роль': {'Оболочка':'html'},
'Связи': false,
'Вложение': {
'1.1.1': {
'Смысл': 'Тэг head',
'Роль': {'Оболочка':'head'},
'Связи': false,
'Вложение': {
'1.1.1.1': {
'Смысл': 'Блок заголовка',
'Роль': {'Оболочка':'title'},
'Связи': false,
'Вложение': {
'1.1.1.1.1': {
'Смысл': 'Текст заголовка',
'Роль': ['Информация в оболочку'],
'Связи': false,
'Вложение': 'Пример'
},
}
},
'1.1.1.2': {
'Смысл': 'Кодировка',
'Роль': {'Оболочка':'meta'},
'Связи': false,
'Вложение': false
},
'1.1.1.3': {
'Смысл': 'Вызов js',
'Роль': {'Оболочка':'script'},
'Связи': false,
'Вложение': false
},
}
},
'1.1.2': {
'Смысл': 'Тэг body',
'Роль': {'Оболочка':'body'},
'Связи': false,
'Вложение': {
'1.1.2.1': {
'Смысл': 'Блок для текстов',
'Роль': {'Оболочка':'div'},
'Связи': false,
'Вложение': {
'1.1.2.1.1': {
'Смысл': 'Блок текста',
'Роль': {'Оболочка':'b'},
'Связи': false,
'Вложение': {
'1.1.2.1.1.1': {
'Смысл': 'Текст',
'Роль': ['Информация в оболочку'],
'Связи': false,
'Вложение': 'Хорошая архитектура — это дорого. Плохая — еще дороже.'
},
............. //весь код смотрите по ссылке
/*активируем интерфейс*/
$GLOBALS['Реакции'][1]['Способность']();
</script>
</head>
<body id="1.1.2"></body>
</html>
Вся версия кода
Ο ωκεανός θα απομακρύνει τα σκουπίδια. Καλή τύχη!