Данная библиотека является идеей, и носит демонстрационный характер.

util

import { util } from "bakugan";
Предоставляет дополнительные функции
Свойства
empty
Хранит пустые константы
подробней
Параметры:
  • STRING - пустая строка
  • OBJECT - пустой объект
  • ARRAY - пустой массив
  • FUNCTION - пустая функция
import { util } from "bakugan";

console.log(util.empty.STRING); // ""
console.log(util.empty.OBJECT); // {}
console.log(util.empty.ARRAY); // []
console.log(util.empty.FUNCTION); // function() {}
смотреть пример: web | github
Функции
merge(to: IHashMapAny, ...args: IHashMapAny[]): IHashMapAny
Копирует свойства объектов
подробней
Параметры:
  • to: IHashMapAny - куда копировать свойства
  • ...args: IHashMapAny[] - откуда копировать свойства
import { util } from "bakugan";

const obj: any = util.merge({
    prop1: 123,
}, {
    prop1: 1,
    prop2: 2,
}, {
    prop3: 3,
});

console.log(obj); // { prop1: 1, prop2: 2, prop3: 3 }
смотреть пример: web | github
createDOM(markup: { html: string }, parent?: Node): HTMLElement
Создает DOM из html строки
подробней
Параметры:
  • markup: { html: string } - html строка обернутая в объект
  • parent?: Node - необязательный параметр parent, у которого берется имя тега. По умолчанию создается div элемент и в него записывается html строка. Если передать параметр parent, то узел верхнего уровня будет создан с таким же именем
import { util } from "bakugan";

const tr: HTMLTableRowElement = document.createElement("tr");

const markup: { html: string } = { html: `<td>1</td><td>2</td>` };

const newTr: HTMLTableRowElement = util.createDOM(markup, tr) as HTMLTableRowElement;

console.log(newTr); // tr
console.log(newTr === tr); // false
смотреть пример: web | github
event.on(element: HTMLElement, listeners: IHashMap<(event: Event) => void>): void
Добавляет события в элемент
подробней
Параметры:
  • element: HTMLElement - DOM элемент к которому будут добавлены события
  • listeners: IHashMap<(event: Event) => void> - список событий, которые будут добавлены. где ключ является именем события, а значение - это функция, которая будет обрабатывать данное событие
import { util } from "bakugan";

const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = "text";

const events = {
    click(event: MouseEvent): void {
        console.log(event);

        util.event.off(div, events);
    },
};

util.event.on(div, events);
смотреть пример: web | github
event.off(element: HTMLElement, listeners: IHashMap<(event: Event) => void>): void
Удаляет события из элемента
подробней
Параметры:
  • element: HTMLElement - DOM элемент из которого будут удалены события
  • listeners: IHashMap<(event: Event) => void> - список событий, которые будут удалены. где ключ является именем события, а значение - это функция, которая будет удалена
import { util } from "bakugan";

const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = "text";

const events = {
    click(event: MouseEvent): void {
        console.log(event);

        util.event.off(div, events);
    },
};

util.event.on(div, events);
смотреть пример: web | github
glob.add(tagName: string, klass: ICtorBaseComponent): void
Добавляет компонент в глобальную область видимости. Не рекомендуется использовать
подробней
Параметры:
  • tagName: string - имя тега
  • klass: ICtorBaseComponent - класс, который будет добавлен в глобальную область
import { Component, template, util } from "bakugan";

@template({
    html: `<span>Hello World</span>`,
})
class Hello extends Component { }

util.glob.add("b-hello", Hello);

@template({
    html: `
        <div>
            <b-hello></b-hello>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);
смотреть пример: web | github