Моя первая реакция была:
В чем разница между ES5 и ES6? (если вы все еще не используете ES3)
Есть так много различий, что скоро будет сравнение яблок и яблок.
Читайте все блоги, играйте с Custom Элементы, изучите.
TL; DR
Используйте элементы DOM с Javascript - Требуется порядок (1 и 2 можно переключать) :
- Загрузить JavaScript
- Создать элементы DOM
- Выполнить JavaScript
- Преобразовать DOM Элементы
Использовать API пользовательских элементов: - Порядок не имеет значение :
Создание пользовательских элементов DOM
Загрузка JavaScript
Различия и преимущества
Предположим, клиент хотел ТРИ сетки на странице:
Вы добавляете 3 DIV: <div id="myGrid1" .../> <div id="myGrid2" .../> <div id="myGrid3" .../>
Для их активации необходимо также добавить: new agGrid.Grid(document.getElementById("myGird1") new agGrid.Grid(document.getElementById("myGird2") new agGrid.Grid(document.getElementById("myGird3")
Это ужасно неправильно, если JavaScript выполняет до элементов DOM Итак, вы добавляете прослушиватель событий: window.addEventListner("onload",()=>ActivateGrids());
Обратите внимание, как вам нужно было добавить сюда (какой-то тип) глобальную функцию; так скрестите пальцы, никто другой не собирается перезаписывать ваш драгоценный код;
Думая о вышеизложенном, вы решаете перестраховаться:
- вы переименуйте все свои идентификаторы во что-то действительно уникальное (и действительно нечитаемое)
- вы переименуете все свои селекторы БЭМ в действительно уникальные (и нечитаемые) имена
- React, Angular, Vue сделай это (частично) для тебя, но вы используете Native JavaScript, поэтому вам придется делать это вручную.
Почему не работает? Вы запускаете F12, отлаживаете и хлопаете головой ... вы сделали опечатку в ID .. grid и gird
2 дня спустя ... Штопать! Заказчик хочет 4-ю сетку! Прежде чем он поставит перед вами пятую ошибку, вы решите провести рефакторинг своей функции ActivateGrids для обработки любого количества сеток на странице
[...document.querySelectorAll('[id*="MyuniQueIDgridComponent_KUT!"]')].forEach(...)
3 недели спустя Клиент имеет очень простой запрос: Это можно сделать за полчаса , он говорит. Мы хотим изменить цвет фона с помощью атрибута на DIV
Вы в тупике! Изменение свойств с помощью атрибутов DIV!?! Почему они не могут просто вызвать JavaScript экземпляр Grid?!?
Вы пытались обучить клиента много лет назад; У Семанти c HTML НЕТ будущего! Нанимайте только СТАРШИХ веб-разработчиков ... но он бы не стал их слушать
Какой смысл с <my-grid background=green></my-grid>
Когда вы можете это сделать, круто программистский путь:
document.getElementById("myGird1").mySetPropperty("background","green");
Но Клиент оплачивает вашу ипотеку; так что вы узнаете о MutationObserver и прикрепите его к тегу BODY. ( Это одно предложение легко написать, но кодирование потребует серьезных усилий! )
5 месяцев спустя клиент говорит, что больше не хочет вас нанимать, потому что добавление / удаление сеток в их SPA вызывает утечку памяти.
Введите API пользовательских элементов (он же веб-компоненты)
Все вышеперечисленное (лишь немного) проще с помощью Framework ..
Но вы хотите создать повторно используемый компонент, а НЕ приложение, созданное с компонентами
Итак, вы решили использовать go API собственных пользовательских элементов
Вы думали об использовании Lit или Stencil, или Hybrids, или Component Libray X; но решил против них. Использование Native JavaScript занимает всего пару дополнительных строк кода, но прежде всего вы не хотите вводить зависимость (вы помните ранние jQuery дни, когда существовала дюжина альтернатив, и вам приходилось отказываться от проекта $$$, потому что разработчик выбрал Mootools)
Собственный JavaScript будет работать, пока JavaScript поддерживается в браузере.
Вы определяете, как (конечный) пользователь будет использовать ваш компонент:
<KCB-grid rows=3 columns=5 background=color ></KCB-grid>
Затем вы программируете компонент. Я взял пространство имен KCB- из вашего дескриптора Twitter Это пространство имен (как и ваша глобальная функция) должно быть уникальным на странице См. Код ниже, это текстовая строка, поэтому ее можно создавать динамически! <KCB-Grid-Customer rows=3 columns=5 background=color ></KCB-grid-Customer>
Что работает в любом современном браузере Есть полифилл для IE11; но, честно говоря, избегайте IE11. Вы перестали поддерживать IE9 годами go. Настало время прекратить поддержку IE11, этот момент сейчас ... даже Microsoft заявила об этом больше года a go
Работает со всеми фреймворками и библиотеки (кроме React вам нужно проделать дополнительную работу .. потому что Facebook все еще пытается навязать свой «стандарт» остальному миру) https://custom-elements-everywhere.com/libraries/react/results/results.html
Нет проблем с onload, не имеет значения, объявлены ли элементы до или после скрипта. Пользовательские элементы автоматически обновляются.
вы можете сделать .innerHTML = "<KCB-Grid></KCB-Grid>" в любое время. Заказчик тоже этого хотел, но нанял другого программиста, чтобы сделать это с помощью настраиваемого элемента ниже
Нет CSS Проблемы с уникальностью селектора ... и, вероятно, вообще не будут выполнять БЭМ
rows и columns можно изменить в любой момент Запустить фрагмент кода, щелкнуть по сетке
<template id="KCB-GRID">
<!-- use TEMPLATES! don't mess with JSX, CSSinJS or HTML in textstrings! -->
<style>
#grid { /* no BEM, no forced unique IDs or style names */
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-rows: minmax(min-content, max-content);
gap: .2em;
}
#grid div {
background: var(--background);
text-align: center;
}
</style>
<div id=grid></div>
</template>
<KCB-Grid columns=5 rows=3 background=#FF9933></kcb-grid>
<KCB-Grid columns=3 rows=3 background=white ></kcb-grid>
<KCB-Grid columns=4 rows=3 background=#138808></kcb-grid>
<script>
customElements.define('kcb-grid', class extends HTMLElement {
static get observedAttributes() {
return [ "columns", "rows" ] // only these can be changed at any time
}
constructor() {
super().attachShadow({ mode: 'open' })
.append(document.getElementById(this.nodeName).content.cloneNode(true));
this.grid = this.shadowRoot.querySelector("#grid");
}
connectedCallback() {
const random = (x, y) => Math.floor(Math.random() * (y + 1 - x) + x);
this.setProperty("background");
this.grid.onclick = () => {
this.setAttribute("columns", random(2, 6));
this.setAttribute("rows", random(2, 4));
}
}
attributeChangedCallback(name, oldValue, newValue) {
let columns = this.setProperty("columns");
let rows = this.setProperty("rows" );
this.grid.innerHTML = "<div>Hello World!</div>".repeat(columns * rows);
}
setProperty(name, value = this.getAttribute(name)) {
this.grid.style.setProperty("--" + name, value);
return value;
}
disconnectedCallback() {} //clean memory, remove listeners, etc.
});
</script>
Cue Tom Lehrer's Elements song: https://www.youtube.com/watch?v=AcS3NOQnsQM
И многое другое для Custom Elements
Вы можете играть с KCB-Grid