Nano Hash - криптовалюты, майнинг, программирование

Насколько общими / специфичными должны быть веб-компоненты HTML5, созданные с помощью ванильного JavaScript?

Я разрабатываю веб-приложение, используя веб-компоненты HTML5 (импорт HTML, теневой DOM, шаблоны и пользовательские элементы HTML), реализованные с помощью ванильного JavaScript (без фреймворка). Веб-приложение достаточно простое и должно быть реализовано как одностраничное приложение. Частью требований приложения является настраиваемость пользовательского интерфейса.

Дизайн-подход

В примере используется пользовательский элемент <application-navigation>. Этот элемент взаимодействует с JavaScript «верхнего уровня» (например, «маршрутизатор» на языке JavaScript MV *) через пользовательские события (например, new CustomEvent('application-navigation', {location:'/sign-in'})) и вызовы методов (например, document.querySelector('application-navigation').enableSignOut()). По сути, пользовательские события и методы образуют «общедоступный API» элемента.

Настроенный элемент <application-navigation> может быть включен в приложение с помощью другого импорта HTML. Например, используя <link rel="import" href="default/application-navigation.html"/> или <link rel="import" href="my_cool_theme/application-navigation.html"/>. Пока HTML-импорт имеет одни и те же методы и производит одни и те же настраиваемые события, приложение должно работать одинаково независимо от того, какая настройка пользовательского интерфейса используется.

Основное преимущество этого дизайна заключается в том, что он отвечает требованиям, позволяя настраивать пользовательский интерфейс - внутренние события JavaScript, CSS и (теневая) структура DOM могут быть разными в разных шаблонах. Это также позволяет повторно использовать существующие библиотеки, если и где это необходимо. Например, элемент <application-navigation> по умолчанию может использовать раскрывающуюся разметку HTML из Twitter Bootstrap, а тематическая версия может использовать библиотеку Foundation.

Однако этот компонент не является универсальным. Он выполняет довольно конкретную цель (управление запросами навигации), в отличие, например, от элемента <application-dropdown> (хотя элемент <application-navigation> может использовать (настраиваемый) элемент <application-dropdown>).

Повторение вопроса

У меня вопрос: следует ли создавать настраиваемые элементы для выполнения конкретной цели, более общей цели или широта цели не имеет значения?

javascript html css web-component custom-element
20.10.2015

Ответы:


1

Вы можете создавать как конкретные, так и общие пользовательские элементы. Оба актуальны.

Однако основным преимуществом определения настраиваемых элементов является возможность легко повторно использовать. Поэтому я бы сказал, что пользовательский элемент часто бывает универсальным.

Что касается архитектуры, вы можете разрабатывать общие технические элементы, а затем с их помощью составлять определенные функциональные элементы.

В любом случае создание двух разных компонентов с одним и тем же именем тега - не лучшая идея. Вы бы предпочли использовать другой подход для достижения своей цели (используйте атрибуты или внутренние элементы для настройки своего настраиваемого элемента или дайте ему другое имя).

Вот пример с темой, определенной как атрибут элемента:

//CUSTOM ELEMENT
var proto = Object.create( HTMLElement.prototype )

proto.createdCallback = function ()
{
  console.log( "{created}" )
  var html = document.querySelector( "template" )
  this.innerHTML = html.innerHTML
}

proto.attributeChangedCallback = function ( attr, old, val )
{
  console.log( "{changed} attr=%s, old=%s, new=%s", attr, old, val )
}

var AN = document.registerElement( "application-navigation", { 
  prototype: proto 
} )

//EVENTS
function add ()
{
  if ( AN )
    document.body.appendChild( new AN )
}

function theme ( name )
{
  var elem = document.querySelector( "application-navigation" )
  if ( elem )
    elem.setAttribute( "theme", name )
    }

function load ()
{
  var link = document.createElement( "link" )
  link.rel = "stylesheet"
  link.href = "/content/green.css"
  document.head.appendChild( link )
}
application-navigation[theme=blue] {
			color: blue ;
		}
		application-navigation[theme=red] {
			color: red ;
		}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <title></title>
</head>
<body>
	<nav>
		<button onclick="add()">Add Custom Element</button>
		<button onclick="theme('red')">Change First to Red</button>
		<button onclick="load()">External CSS</button>
	</nav>
	<template>
		<h1>Title</h1>
		<p>Custom Element Content</p>
	</template>

	<application-navigation theme="blue"></application-navigation>
</body>
</html>

В приведенном выше примере вы даже можете загрузить внешний файл CSS с относительным URL-адресом /content/green.css:

application-navigation[theme=blue] * {
    color: limegreen ;
}

application-navigation[theme=red] p {
    color: green ;
}

application-navigation[theme=red] h1 {
    color: orange ;
}
21.10.2015
  • У вас есть ссылки с примерами такой настройки? 21.10.2015
  • Я обновил свой ответ примером такой настройки. 22.10.2015
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..