Использование npm-пакетов

Slim.js — это лёгкая и современная библиотека для создания компонентного интерфейса на JavaScript, ориентированная на высокую производительность и минимальный объём кода. Для работы с ней через npm необходимо выполнить стандартную установку пакета:

npm install slim-js

После установки библиотеку можно импортировать в проект. В зависимости от среды использования доступно несколько вариантов:

// ES6-модули
import Slim from 'slim-js';

// CommonJS
const Slim = require('slim-js');

Импортированные объекты позволяют создавать компоненты, управлять их состоянием и реактивными свойствами.

Создание компонента

Компонент в Slim.js представляет собой класс, наследующийся от Slim. Для его определения используется метод Slim.tag, который связывает HTML-тег с функциональностью компонента:

Slim.tag('my-component', class extends Slim {
    constructor() {
        super();
        this.message = 'Привет, Slim.js!';
    }

    get template() {
        return `<div>{{message}}</div>`;
    }
});

Ключевые моменты:

  • Slim.tag принимает два аргумента: имя кастомного тега и класс компонента.
  • template — геттер, возвращающий HTML с привязками данных.
  • Любые свойства класса автоматически становятся реактивными: изменения в них обновляют DOM.

Реактивные свойства

Состояние компонентов управляется с помощью реактивных свойств. Для объявления реактивного свойства достаточно просто задать его в классе:

class Counter extends Slim {
    constructor() {
        super();
        this.count = 0;
    }

    increment() {
        this.count++;
    }

    get template() {
        return `
            <div>
                <span>{{count}}</span>
                <button click="increment">+</button>
            </div>
        `;
    }
}

Slim.tag('my-counter', Counter);

Особенности:

  • Любое обновление свойства автоматически отражается в DOM.
  • Методы можно привязывать к событиям через атрибуты тегов (click="increment").
  • Поддерживаются базовые выражения внутри шаблонов, например {{count * 2}}.

Работа с событиями

Slim.js обеспечивает удобное связывание событий с методами компонента. Атрибуты событий записываются как имя события и название метода:

<button click="handleClick">Нажми меня</button>

Метод handleClick будет вызван с контекстом компонента:

handleClick(event) {
    console.log('Клик по кнопке', this.count);
}

Допустимо использовать несколько событий и комбинировать их с реактивными свойствами.

Подключение внешних npm-пакетов

Slim.js интегрируется с любыми сторонними библиотеками через стандартный импорт. Например, использование lodash для работы с массивами:

import _ from 'lodash';

class ItemList extends Slim {
    constructor() {
        super();
        this.items = ['яблоко', 'банан', 'вишня'];
    }

    shuffleItems() {
        this.items = _.shuffle(this.items);
    }

    get template() {
        return `
            <ul>
                {{#items}}
                    <li>{{this}}</li>
                {{/items}}
            </ul>
            <button click="shuffleItems">Перемешать</button>
        `;
    }
}

Slim.tag('item-list', ItemList);

Особенности работы:

  • Любая библиотека, доступная через npm, может быть импортирована и использована внутри компонентов.
  • Реактивность Slim.js сохраняется даже при манипуляциях с массивами или объектами внешними методами.
  • Поддерживается работа с массивами через синтаксис {{#items}}…{{/items}} для повторения элементов.

Управление жизненным циклом компонента

Slim.js предоставляет методы жизненного цикла, которые вызываются в определённые моменты существования компонента:

  • onBeforeCreated — до создания компонента.
  • onCreated — сразу после создания и инициализации.
  • onBeforeUpdate — перед обновлением DOM.
  • onUpdated — после обновления DOM.
  • onBeforeRemoved — перед удалением компонента.
  • onRemoved — после удаления.

Пример использования:

class LoggerComponent extends Slim {
    constructor() {
        super();
        this.status = 'готов';
    }

    onCreated() {
        console.log('Компонент создан');
    }

    onUpdated() {
        console.log('Компонент обновлён, текущее состояние:', this.status);
    }

    get template() {
        return `<div>{{status}}</div>`;
    }
}

Slim.tag('logger-component', LoggerComponent);

Эти методы позволяют управлять сторонними ресурсами, синхронизировать данные и оптимизировать производительность.

Организация проекта с npm

Рекомендуется разделять логику компонентов по файлам и использовать сборщики вроде Webpack, Rollup или Vite. Пример структуры проекта:

src/
  components/
    counter.js
    item-list.js
  main.js
package.json

main.js может импортировать и регистрировать компоненты:

import './components/counter.js';
import './components/item-list.js';

Сборщик объединит их и обеспечит корректную работу в браузере.

Использование Slim.js с современным JavaScript

Slim.js полностью совместим с ES6+, поддерживает модульность и современные синтаксические конструкции:

  • Деструктуризация: const {count} = this;
  • Шаблонные строки: для динамического HTML и привязки данных
  • Асинхронные методы: для работы с API или отложенных вычислений
class AsyncComponent extends Slim {
    async fetchData() {
        const response = await fetch('https://api.example.com/data');
        this.data = await response.json();
    }

    get template() {
        return `<pre>{{JSON.stringify(data, null, 2)}}</pre>`;
    }
}

Slim.tag('async-component', AsyncComponent);

Реактивность автоматически обновляет DOM после изменения this.data.

Использование npm-пакетов с Slim.js позволяет строить современные, модульные, высокопроизводительные интерфейсы с минимальными усилиями, обеспечивая гибкость и интеграцию с экосистемой JavaScript.

Оглавление