Как правильно унаследовать компоненты чтобы не дублировать код?

Question

[Dubrovin]

Есть два компонента (php+js+css): Checkbox и Switch.
JS-код обоих делает по сути одно и то же, с той лишь разницей что input ссылается на разные элементы DOM-дерева:

ksf.classes.KsfCheckbox = class {
	constructor( el ) {
		let _this = this;
		let change = new Event( 'change' );
		this.el = el;
		this.input = el.getElementsByClassName( 'checkbox__input' )[ 0 ];
		this.value = +this.input.checked + '';

		this.input.addEventListener( 'change', function() {
			_this.el.dispatchEvent( change );
		} );

		this.el.addEventListener( 'click', function( e ) {
			e.preventDefault();
			toggleValue();
		} );

		/* Space Pressed */
		this.el.addEventListener( 'keypress', function( e ) {
			if ( e.which === 32 ) {
				e.preventDefault();
				toggleValue();
			}
		} );

		function toggleValue() {
			if ( _this.value === '0' ) {
				_this.value = '1';
				_this.input.checked = true;
			} else {
				_this.value = '0';
				_this.input.checked = false;
			}
		}
	}

	setValue( value ) {
		this.input.checked = !! parseInt( value );
		this.value = parseInt( value ) + '';
	}

	getValue() {
		return this.value;
	}

};

ksf.classes.KsfSwitch = class {
	constructor( el ) {
		let _this = this;
		let change = new Event( 'change' );
		this.el = el;
		this.input = el.getElementsByClassName( 'switch__input' )[ 0 ];
		this.value = +this.input.checked + '';

		this.input.addEventListener( 'change', function() {
			_this.el.dispatchEvent( change );
		} );

		this.el.addEventListener( 'click', function( e ) {
			e.preventDefault();
			toggleValue();
		} );

		/* Space Pressed */
		this.el.addEventListener( 'keypress', function( e ) {
			if ( e.which === 32 ) {
				e.preventDefault();
				toggleValue();
			}
		} );

		function toggleValue() {
			if ( _this.value === '0' ) {
				_this.value = '1';
				_this.input.checked = true;
			} else {
				_this.value = '0';
				_this.input.checked = false;
			}
		}
	}

	setValue( value ) {
		this.input.checked = !! parseInt( value );
		this.value = parseInt( value ) + '';
	}

	getValue() {
		return this.value;
	}

};

JS-файлы компонентов лежат в разных файлах, потом клеится всё в один файл с помощью gulp concat.
Как эти компоненты правильно унаследовать в JS от какого-нибудь другого компонента (например, "toggler"), чтобы не дублировать код?

Comments

[Антон Спирин]

Вам еще в этом вашем вопросе советовали не изобретать велосипед и использовать фреймворк.
Вы в итоге решили пойти своим путем, при этом ничего не смысля в проектировании. Если вы даже такую банальную вещь, как наследование компонентов от общего родителя самостоятельно реализовать не можете, то рано вам еще такими вещами заниматься. Да и не нужно наследование в вашем случае. Достаточно передать параметры при создании экземпляра. Про паттерны и принципы проектирования, я полагаю, вы тоже не слышали.
Заглянули бы хоть в исходники Backbone, перед тем как начать.
Страшно представить какая участь ожидает этот проект.

[Dubrovin]

Антон Спирин, фреймворк нам НЕ нужен, мы слышали и про паттерны и про наследование и т.д. В php всё сделано без дублирования кода от одного класса Component. Был задан конкретный вопрос как сделать то же самое в JS.

[Dubrovin]

Антон Спирин, на счёт передачи параметров - это сработает в данном конкретном случае, но другие компоненты могут сильно отличаться. Какой толк использовать фреймворк если не понимаешь как он работает? Более того, фреймворки, как правило, все тяжёлые.
Вы вот привели в пример backbone, какие проблемы решает в данном случае использование этого фреймворка? Там есть логика работы для чекбоксов, свитчеров, рейндж-слайдеров, колор-пикеров и других UI компонентов? Конечно же нет, это всё нужно реализовывать самому. И уж поверьте, мы это сделаем лучше, чем большинство говнокодеров сделает тоже самое на jQuery.
Все с чего-то начинают. Если для вас ответ на вопрос очевидный, почему бы не поделиться опытом и не рассказать как вы видите решение проблемы? а не отвечать шаблонно вроде "идите юзайте React, Angular, Vue и не изобретайте велосипед"

[Антон Спирин]

Dubrovin, очевидным решением в вашем случае было бы использовать React или Vue. Как раз для вашей задачи один их этих инструментов бы здорово подошел. Backbone это старая библиотека, но ее исходный код легко читаем и оттуда можно подчерпнуть немного знаний. Использовать ее сейчас я бы не советовал.
Где вы прочитали, что" фреймворки, как правило, тяжелые"? Что за нелепая оценка рациональности использования инструмента? Если вам большинство опытных программистов отвечает "шаблонно" использовать фреймворк, значит на то есть ряд очевидных причин. Погуглите причин очень много.
Вы, видимо, пока не поняли сути разработки, вы называете 'говнокодерами' тех кто использует jquery, хотя jquery бы сильно упростил вам жизнь с тем что вы делаете сейчас, но вы в силу неопытности этого не понимаете и по сути являетесь теми самыми "говнокодерами" о которых говорите, уж простите. Вы вообще ничего не понимаете в фронтенд разработке, но пишите, что сделаете лучше многих.
Все что вам надо было сделать это изучить React и написать это приложение за пару дней без боли, слез, велосипедов и вопросов на Тостере. В итоге, вы пытаетесь повторить ошибки неопытных разработчиков 2015 года, которые знатно тогда огребли на хайпе VanillaJS и давно переписали свои проекты на фреймворках.

[Dubrovin]

Мы реализуем методологию БЭМ в своём собственном фреймворке, уже написано более 30 компонентов и весь JS-код занимает в несжатом виде 50кб. В качестве бекэнда у нас не Node.JS, а PHP. Создавать темплейты из JSON у нас нет необходимости, это задача PHP, а не JS. JS реализует только поведение элементов.
Вы предлагаете подключить Vue.js который весит 80кб или React который весит почти 100кб. А мой вопрос был в том, как превратить наши 50кб, например, в 30кб, а не запихивать в JS-приложение лишний код, которым никто не будет пользоваться.

[Антон Спирин]

Dubrovin, я бы на вашем месте считал не килобайты, а часы которые вы тратите на написание этих ужасных велосипедов.
То, как больно потом вам будет это поддерживать и если придется масштабировать, это отдельная тема.
Простите, но вы мыслите не рационально и не объективно.
На React набросать такое приложение можно за день.

БЭМ макарон вообще можно избежать, если использовать css-modules. А с React Styled Components вообще можно забыть о селекторах.

Так же не ясно зачем вы клеите файлы конкатом и используете такую бороду в названиях:
ksf.classes.KsfSwitch = ...
У вас даже в таких мелочах костыли. Вы не знаете как правильно использовать модульную систему ES6?

К слову, вес библиотек:
React 16.2.0 + React DOM GZipped 31.8Kb
Vue 2.4.2 GZipped 20.9Kb
Preact 7.2.0 GZipped 4kb
Но для вашей задачи безразлично, хоть 300Kb. Только вы этого, видимо, не понимаете.

[Dubrovin]

Антон Спирин, спасибо за ответ. Но я не совсем понимаю, как именно, например, React решит проблему которую я описываю. Все компоненты в любом случае нужно будет создавать самостоятельно с их поведением, не важно на нативном JS или на React. Точно также можно дублировать код и с использованием React. То есть в результате получится 50кб нашего кода + вес фреймворка.
На счёт модулей - насколько мне известно, это не поддерживается браузерами, и если даже будет поддерживаться, то на HTTP 1.1 всё равно будет рукопожатие для получения каждого отдельного файла, а мы клеим абсолютно все модули в один файл, т.е. всего один файл JS для всего сайта. Ну и даже на HTTP 2.0 любой Google Pagespeed, GTmetrix будет ругаться на несколько JS файлов.
Декларацию классов добавляем в глобальную переменную, чтобы потом их инициализировать вот таким кодом:

document.addEventListener( 'DOMContentLoaded', function() {
	ksf.declaration.forEach( function( component ) {
		let elList = document.querySelectorAll( component.elSelector );
		elList.forEach( function( el ) {
			ksf.components[ el.dataset.id ] = new component.classDecl( el );
		} );
	} );
} );

На счёт CSS Modules ничего не слышал, наткнулся на статью на хабре: https://habrahabr.ru/post/335244/
Но в ней человек вообще не разобрался с БЭМ, если пишет имена классов как block__element1__element2___element3, вот пример SCSS кода для компонента Checkbox:

.checkbox {

		min-width: $fr-1;
		padding: $gap-sm / 2;

		&:focus {
			.checkbox__control {
				box-shadow: 0 0 0 3px rgba($primary, 0.35);
			}
		}

		&__label {
			display: flex;
			align-items: center;
			color: $dark;
		}

		&__input {
			display: none;

			&:hover {
				+ .checkbox__label {
					.checkbox__control {
						background-color: $light2;
					}
				}
			}

			&:checked {
				+ .checkbox__label {
					.checkbox__control {
						background-color: $primary;

						&::after {
							opacity: 1;
						}
					}
				}
			}
		}

		&__control {
			position: relative;
			display: inline-block;
			width: 24px;
			height: 24px;
			margin-right: $gap-xs;
			border: 0;
			border-radius: 5px;
			background-color: $light;
			transition: 0.2s;

			&::after {
				@include fa-icon(f00c, 16px);
				position: absolute;
				top: 50%;
				left: 50%;
				color: $color-white;
				opacity: 0;
				transform: translate(-50%, -50%);
			}
		}
	}

[Dubrovin]

Антон Спирин, Спасибо за ссылку на Preact, 4кб это действительно мало, но я всё равно не понимаю, как можно избежать дублирования кода при создании компонентов и как именно фреймворк в этом поможет.

[Dubrovin]

Антон Спирин, ещё проблема в том, что вы предлагаете рендерить HTML с помощью JS и это не подходит нам, потому как у нас за рендер отвечает PHP и в нем уже реализован рендер всех компонентов. У нас не one-page приложение.
Поэтому решения вроде React, Vue, Angular принципиально не подходят.

Нам нужен рендер в PHP, поведение в JS. И вопрос по большей части как правильно организовать архитектуру своего фреймворка, в частности компонентов, в частности в JS, чтобы не копипастить код.

[Антон Спирин]

Dubrovin, ваш подход к организации модулей устарел. Вам достаточно использовать babel и вы сможете писать модульный код в со всеми удобствами ES6 и хоть stage-0.
Webpack + babel отличное решение для сборки js. На выходе вы получите один минифицированный поддерживаемый всеми браузерами бандл или при желании несколько с выделенной common частью.
По модулям это не он их так пишет, а библиотека выдает изолированный сгенерированный код. А он пишет:

.select {}
.loading {}
.item {}
.icon {}

вместо:

.select {}
.select__item {}
.select__item__icon {}
.select--loading {}

SPA не означает, что в приложении одна страница, а лишь то, что все(а можно и не все) приложение загружается в браузер, роутинг осуществляется на клиентской части, а работа с сервером только через JSON. Для всяких панелек конфигурации и прочих dashboard SPA отлично подходят.

Что-то конкретное в вашей ситуации посоветовать тяжело, я так понимаю на беке у вас Twig + css + js и все это надо друг с другом дружить, при этом полностью отсутствует задача рендера на клиенте?

[Dubrovin]

Антон Спирин,
насколько мне известно, babel полностью убирает ES6 синтаксис из кода, нам это не нужно. let должны остаться let, а не var, class должны остаться class, а не function с прототипами.
Js пробовали собирать webpack и browserify, но эти инструменты добавляют "лишние" обёртки над нашим кодом, не совсем понятен профит от этого, если можно просто склеить файлы с помощью gulp и получить конкретно то, что пишешь и ничего более. Тем более, есть gulp-file-import с помощью которого можно в любом месте заинклудить любой кусок кода из другого файла.

На счёт именования классов - не совсем понятно, как именно заменить БЭМ тем, что вы приводите как пример.
.select__item__icon - вот такого селектора вообще не может быть по БЭМ, у блока может быть только один элемент, или .select__item или .select__icon. Мы используем уровни переопределения по БЭМ (слои), с помощью которых дизайн (scss) полностью независим от компонентов (php+js). Мы знаем про SMACSS и OOCSS, но это не работает для методологии БЭМ. По БЭМу классы как раз таки короче, чем по SMACSS и OOCSS, например, если у меня есть модификатор цвета кнопки --primary, то я могу в CSS просто написать --primary {}, а не button-primary как это делают, например, в bootstrap.

Шаблонизаторы мы не используем, сам php это шаблонизатор. У нас есть один класс Component, который умеет делать рендер темплейта и использовать для рендера другие компоненты (блоки БЭМ).
Т.е. если нам нужно нарисовать, например, форму поиска с кнопкой, то класс Component создаст 3 дочерних компонента (инпут, кнопка, иконка) и сделает рендер формы из этих компонентов. Вся эта магия происходит в PHP. JavaScript должен только обеспечить взаимодействие между компонентами, когда они отрендерились на странице.

[Антон Спирин]

Dubrovin, насчет js вы сильно заблуждаетесь. Нет никакого смысла оставлять код в ES6. Так как, например, классы это лишь синтакисческий сахар над прототипами и ничего более.
Не знаю зачем вам ES6 в готовом коде, нет ни одной объективной причины не транслировать его в кроссбраузерный код, как делают все. К тому же для разработки вы можете добавить source maps. Сейчас ваш код не кроссбраузерный. Про полифилы, я полагаю, вы тоже не слышали.
Попробуйте найти хоть один объективный ответ на вопрос почему вы не транслируете код. Я думаю, что кроме каких-то придуманных суеверий не найдете, а минусы вашего подхода очевидны. Советую тестировать ваш код в разных версиях браузеров.

Насчет css-modules это уже вам точно не подходит, так как рендер у вас на беке. БЭМ не надо воспринимать как аксиому и набор истин, это лишь методология для стандартизации и изоляции css кода. Многие проекты использующие фреймворки давно от БЭМ отказались в пользу лаконичного, модульного css, с которым гораздо проще работать.

Зря не используете шаблонизаторы и фреймворки на бэке. Делаете много лишней работы которая реализована во фреймворках. Если ваш компонент Component завязан на реализации, а не абстрагирован от нее, то это очень плохо.

Еще вы неправильно используете let в коде. let принято использовать для значений которые изменяются, для не изменяющихся значений принято использовать const.
Так же не ясно чем вы руководствовались когда определяли _this, вместо того чтобы использовать стрелочные функции. И не ясно, что делает toggleValue в конструкторе. Не ясно почему не определен базовый компонент.

Вот вам навскидку, банальнейший, правда, сырой пример, как можно избежать дублирования и макарон в коде https://jsfiddle.net/rockon404/dwk7xsj4/
Не стоит использовать это решение не подумав и не доработав. Это так, поразмышлять.
Представьте как можно написать Switch унаследованный от Component, с приблизительно таким интерфейсом создания:

const checkBox = new Switch({
  el: ...,
  toggler: 'checkbox__input',
});

const mySwitch = new Switch({
  el: ...,
  toggler: 'checkbox__switch',
});

[Dubrovin]

Спасибо за пример! Вот только не понятно, какие общие свойства и методы кроме init и el уносить в класс компонент.

На счёт ES6 причина в том, чтобы сделать код как раз таки не поддерживаемым старыми браузерами. В CSS, например, мы используем CSS Grid, который также поддерживается не всеми браузерами. ES6 код в отличие от трансформированного бабелем будет весить на несколько Кб меньше.

По поводу БЭМ вы заблужаетесь, БЭМ это не про CSS, а про компонентный (блочный) подход к разработке приложения, про компонентное построение архитектуры приложения, включая PHP, JS, CSS и вообще любой другой язык, не важно как вы реализуете эту методологию. React в каком то смысле является реализацией БЭМ методологии (компонент = блок).

let = _this используем для того, чтобы не использовать .bind( this ).

Поразмышлял над вашим предложением использовать синтаксис import / export ES6, нашёл rollupjs как альтернативу webpack / browserify. Rollup умеет клеить файлы без лишнего кода и с учётом всех зависимостей.