js toolkit

@Studiometa/JS-Toolkit

JavaScript-attributes-attribut yang digerakkan kerangka mikro yang dikirim dengan banyak fungsi utilitas yang berguna untuk meningkatkan proyek Anda.

Instalasi

Instal versi terbaru melalui NPM:

npm install @studiometa/js-toolkit

Apa itu?

Proyek ini adalah kerangka mikro JavaScript (bersama dengan fungsi utilitasnya) yang tujuan utamanya adalah:

• Menegakkan praktik terbaik dan konsistensi antar proyek
• Menggunakan elemen dari DOM dengan mudah
• Mengaktifkan perilaku khusus pada inisialisasi komponen atau acara pengguna lainnya
• Menonaktifkan perilaku khusus pada perusakan komponen atau acara pengguna lainnya
• Menginisialisasi komponen di tempat yang tepat pada waktu yang tepat
• Mendefinisikan dependensi antar komponen

Kunjungi js-toolkit.studiometa.dev untuk mempelajari lebih lanjut, atau melompat langsung ke ui.studiometa.dev untuk menemukan komponen yang ada.

Tinjauan cepat

Kerangka kerja ini memungkinkan Anda mendefinisikan komponen sebagai kelas, dan mengikatnya ke DOM dengan data-… atribut. Misalnya, berikut adalah bagaimana komponen Counter akan didefinisikan dalam 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 ;
  }
}

Dan HTML yang menyertainya akan ditaburkan dengan data-… atribut untuk mengikat elemen dari DOM ke kelas 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 >

Anda dapat mendefinisikan opsi yang dapat ditentukan dengan data-option-... atribut juga. Pertama di 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;
    }
  }

Dan kemudian sesuaikan sesuai keinginan Anda di HTML Anda:

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

Kerangka kerja ini juga menawarkan cara untuk membuat instantiate komponen root sebagai aplikasi, dengan komponen anak sebagai dependensi:

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

Kunjungi Panduan "Memulai" kami untuk mempelajari lebih lanjut dan mencoba komponen di atas dengan mengunjungi taman bermain. Temukan pustaka komponen kami yang ada dengan memeriksa paket @Studiometa/UI.

Berkontribusi

Proyek ini mengikuti metodologi aliran Git untuk mengelola cabang dan fiturnya. Paket dan ketergantungannya dikelola dengan ruang kerja NPM. File -file tersebut dilapisi dengan eslint, ketik diperiksa dengan naskah dan diformat dengan lebih cantik.

Lisensi

Lihat lisensi.