Как реализовать библиотеку классов на JavaScript?

Question

[prishelec]

Хочу собрать для себя «библиотеку классов». Т.е., будет набор методов, а не некие компоненты и т.д. Создал образец. Всё работает. Не знаю почему, но смущает немного реализация. Хотелось бы услышать ваши мнения. Пролистал пару книг, ничего особо по данной теме не нашел. Образец:

(function (global, factory) {
	typeof define === 'function' && define.amd ? define(["jquery"], factory) :
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require("jquery")) :
	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.CRM = factory(global.jQuery));
}(this, function ($) {
	var CRM = {};
	
	CRM.Type = {
		isArray: function(value){
			return Array.isArray(value);
		}
	};
	
	CRM.Dialog = {
		show: function(value){
			if (CRM.Type.isArray(value))
				console.log(value.join(","));
		}
	};
	
	return CRM;
	
}));

CRM.Dialog.show([1,2,3]);

И ещё вопрос. Образец кода из Bitrix24. Что эта за такая реализация «класса Type»?

let Type = function () {
	function Type() {
		babelHelpers.classCallCheck(this, Type);
	}
	babelHelpers.createClass(Type, null, [
		{
			key: "isString",
			value: function isString(value) {
				return typeof value === 'string';
			}
		},
		{
			key: "isFunction",
			value: function isFunction(value) {
				return typeof value === 'function';
			}

		}
	]);
	return Type;
}();

Answer 1

[VoidVolker]

Правильнее так:

Type.js

class Type
{
    isArray() {}
}

export default Type

Dialog.js

class Dialog 
{
    show() {}
}

export default Dialog

CRM.js

import Type from './Type.js'
import Dialog from './Dialog.js'

export { Type, Dialog }

И далее исходный код скармливается сборщикам типа babel, gulp, rollup и прочим. И вот то, что вы привели - результат работы с кодом этих сборщиков для совместимости со старыми браузерами. Для ноды само собой сборщики не используются - там они не нужны. Простой пример реализации библиотеки для ноды/браузера с использованием сборщиков rollup и babel: @voidvolker/enum.

Comments

[prishelec]

Спасибо большое!
Буду иметь ввиду.

Answer 2

[Mikhail Osher]

Я не знаю, где Вы берете источники, которым следует подражать, однако текущие, в данном посте, устарели лет так на 20. Гуглите тему "modern npm package 2025".

И если Вы не понимаете приведенный код в посте, в плане что эти define/amd библиотеки делают, то бегом learn.javascript.ru вдоль и поперек изучать, особенно главу 13.

Comments

[prishelec]

Спасибо.за комментарий.

Я как-то все по старинке.

И если Вы не понимаете приведенный код в посте, в плане что эти define/amd библиотеки делают

Здесь не совсем понял что вы имели ввиду.? Спецификация umd или что-то вас смущает?

[Mikhail Osher]

prishelec, сейчас такие вещи руками не пишут. Обычно сборшику указывают таргет или билдят несколько таргетов.

[Stanislav]

Это разве не актуально для функционального подхода? Тут вроде бы речь про ООП