js toolkit

@Studiometa/JS-Toolkit

JavaScript Data-Attributes, управляемая микрофровой, поставляется с множеством полезных полезных функций для повышения вашего проекта.

Установка

Установите последнюю версию через NPM:

npm install @studiometa/js-toolkit

Что это такое?

Этот проект представляет собой микрофромскую работу JavaScript (наряду с функциями утилиты), основные цели, являются:

• Обеспечение соблюдения наилучшей практики и последовательности между проектами
• Использование элементов из DOM легко
• Включение пользовательского поведения при инициализации компонента или других пользовательских событиях
• Отключение пользовательского поведения при разрушении компонентов или других пользовательских событиях
• Инициализация компонентов в нужном месте в нужное время
• Определение зависимостей между компонентами

Посетите js-toolkit.studiometa.dev, чтобы узнать больше или прыгнуть непосредственно на UI.Studiometa.DEV, чтобы открыть для себя существующие компоненты.

Быстрый обзор

Эта структура позволяет вам определять компоненты как классы и связывать их с DOM с атрибутами data-… . Например, вот как будет определяться Counter встречи в JavaScript:

 import { Base } from '@studiometa/js-toolkit' ;

export default class Counter extends Base {
  static config = {
    name : 'Counter' ,
    refs : [ 'add' , 'remove' , 'count' ] ,
  } ;

  get counter ( ) {
    return this . $refs . count . valueAsNumber ;
  }

  set counter ( value ) {
    this . $refs . count . value = value ;
  }

  onAddClick ( ) {
    this . counter += 1 ;
  }

  onRemoveClick ( ) {
    this . counter -= 1 ;
  }
}

И его сопровождающий HTML будет посыпать data-… атрибутами для привязки элементов от DOM к классу JavaScript.

 < div data-component =" Counter " >
  < button data-ref =" add " > Add </ button >
  < button data-ref =" remove " > Remove </ button >
  < input data-ref =" count " type =" number " value =" 0 " />
</ div >

Вы можете определить параметры, которые могут быть указаны с помощью data-option-... атрибуты. Сначала в JavaScript:

  class Counter extends Base {
    static config = {
      name: 'Counter',
      refs: ['add', 'remove', 'count'],
+     options: {
+       step: {
+         type: Number,
+         default: 1,
+       },
+     },
    };

    onAddClick() {
-     this.counter += 1;
+     this.counter += this.$options.step;
    }

    onRemoveClick() {
-     this.counter -= 1;
+     this.counter -= this.$options.step;
    }
  }

А затем отрегулируйте его так, как вы хотите в HTML:

 - <div data-component="Counter">
+ <div data-component="Counter" data-option-step="2">
    <button data-ref="add">Add</button>
    <button data-ref="remove">Remove</button>
    <input data-ref="count" type="number" value="0">
  </div>

Структура также предлагает способ создания корневого компонента в качестве приложения, с дочерними компонентами в качестве зависимостей:

 import { Base , createApp } from '@studiometa/js-toolkit' ;
import Counter from './components/Counter.js' ;

class App extends Base {
  static config = {
    name : 'App' ,
    components : {
      Counter ,
    } ,
  } ;
}

export default createApp ( App ) ;

Посетите наше руководство «Начало работы», чтобы узнать больше и попробовать приведенный выше компонент, посетив игровую площадку. Откройте для себя нашу существующую библиотеку компонентов, проверив пакет @Studiometa/UI.

Внося

Эти проекты следует методологии GIT Flow для управления своими ветвями и функциями. Пакеты и их зависимости управляются с рабочими пространствами NPM. Файлы считан с помощью ESLINT, тип, проверенный с помощью TypeScript и отформатированы с красивым.

Лицензия

Смотрите лицензию.