js toolkitダウンロード-JS js toolkitソースコードのダウンロード

js toolkit

サードパーティ製コンポーネント

v2.12.1

ダウンロード

@Studiometa/JS-Toolkit

JavaScript Data-Attributes駆動型マイクロフレームワークは、プロジェクトを後押しするために多くの便利なユーティリティ機能を備えたものです。

インストール

NPM経由で最新バージョンをインストールします。

npm install @studiometa/js-toolkit

それは何ですか？

このプロジェクトは、主な目的が次のとおりです。

プロジェクト間のベストプラクティスと一貫性を実施します
DOMの要素を簡単に使用します
コンポーネントの初期化またはその他のユーザーイベントでカスタム動作を有効にする
コンポーネントの破壊やその他のユーザーイベントでのカスタム動作の無効化
適切な場所で適切なタイミングでコンポーネントを初期化する
コンポーネント間の依存関係の定義

js-toolkit.studiometa.devにアクセスして詳細を確認するか、ui.studiometa.devに直接ジャンプして既存のコンポーネントを発見してください。

簡単な概要

このフレームワークを使用すると、コンポーネントをクラスとして定義し、 data-…属性を使用してDOMにバインドできます。たとえば、JavaScriptでCounterコンポーネントがどのように定義されるかは次のとおりです。

 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には、DAMからJavaScriptクラスに要素を結合するためのdata-…が散布されます。

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