js toolkit

@Studiometa/JS-Toolkit

Ein JavaScript-Daten-Attributes-Micro-Framework wird mit zahlreichen nützlichen Nutzfunktionen verschickt, um Ihr Projekt zu steigern.

Installation

Installieren Sie die neueste Version über NPM:

npm install @studiometa/js-toolkit

Was ist das?

Dieses Projekt ist ein JavaScript-Micro-Framework (zusammen mit seinen Dienstprogrammfunktionen), dessen Hauptziele sind:

• Durchsetzung von Best-Practice und Beständigkeit zwischen Projekten
• Elemente aus dem DOM leicht verwenden
• Aktivieren Sie benutzerdefinierte Verhaltensweisen bei der Komponenteninitialisierung oder anderen Benutzerereignissen
• Deaktivieren von benutzerdefiniertem Verhalten bei der Zerstörung von Komponenten oder anderen Benutzerereignissen
• Initialisieren von Komponenten am richtigen Ort zur richtigen Zeit
• Definieren von Abhängigkeiten zwischen Komponenten

Besuchen Sie js-toolkit.studiometa.dev, um mehr zu erfahren, oder springen Sie direkt zu ui.studiometa.dev, um vorhandene Komponenten zu entdecken.

Schnelle Übersicht

Mit diesem Framework können Sie Komponenten als Klassen definieren und an das DOM mit data-… binden. Hier ist beispielsweise, wie eine Counter in JavaScript definiert wird:

 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 ;
  }
}

Und seine dazugehörige HTML würde mit data-… Attributen zur Bindung von Elementen vom DOM an die JavaScript-Klasse bestreut.

 < 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 >

Sie können Optionen definieren, die auch mit data-option-... Attributen angegeben werden können. Zuerst in 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;
    }
  }

Und dann passen Sie es an, wie Sie es in Ihrem HTML wünschen:

 - <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>

Das Framework bietet auch eine Möglichkeit, eine Stammkomponente als Anwendung mit untergeordneten Komponenten als Abhängigkeiten zu instanziieren:

 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 ) ;

Besuchen Sie unseren Leitfaden "Tun Start", um mehr zu erfahren und die oben genannte Komponente zu probieren, indem Sie den Spielplatz besuchen. Entdecken Sie unsere vorhandene Bibliothek mit Komponenten, indem Sie das @Studiometa/UI -Paket überprüfen.

Beitragen

Diese Projekte folgen der Git Flow -Methodik, um seine Zweige und Merkmale zu verwalten. Die Pakete und ihre Abhängigkeiten werden mit NPM -Arbeitsbereichen verwaltet. Die Dateien sind mit Eslint ausgegeben, mit TypeScript überprüft und mit schöneren Formatierungen formatiert.

Lizenz

Siehe Lizenz.