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覆盖，用打字稿检查并用漂亮的格式进行了格式。

执照

请参阅许可证。