js toolkit

@studiometa/js-toolkit

JavaScript數據屬性驅動的微型框架運輸了大量有用的實用功能，以增強您的項目。

安裝

通過NPM安裝最新版本：

npm install @studiometa/js-toolkit

這是什麼？

該項目是JavaScript微型框架（及其實用程序功能），其主要目標是：

• 在項目之間執行最佳實踐和一致性
• 輕鬆使用來自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將撒上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流量方法來管理其分支和功能。軟件包及其依賴項由NPM工作區管理。將文件用ESLINT覆蓋，用打字稿檢查並用漂亮的格式進行了格式。

執照

請參閱許可證。