js toolkit 다운로드 -JS js toolkit 소스 코드 다운로드

js toolkit

타사 구성 요소

v2.12.1

다운로드

@studiometa/js-toolkit

JavaScript Data-Attributes Driven Micro Framework에는 프로젝트를 늘리기 위해 유용한 유용한 기능이 많이 제공됩니다.

설치

NPM을 통해 최신 버전을 설치하십시오.

npm install @studiometa/js-toolkit

무엇입니까?

이 프로젝트는 주요 목표가 다음과 같은 JavaScript Micro-Framework (유틸리티 기능과 함께)입니다.

프로젝트 간의 최고 실습과 일관성을 시행합니다
DOM의 요소를 쉽게 사용합니다
구성 요소 초기화 또는 기타 사용자 이벤트에서 사용자 정의 동작 활성화
구성 요소 파괴 또는 기타 사용자 이벤트에 대한 사용자 정의 동작 비활성화
적시에 적절한 위치에서 구성 요소 초기화
구성 요소 간의 종속성 정의

js-toolkit.studiometa.dev를 방문하여 자세한 내용을 배우거나 UI.studiometa.dev로 직접 이동하여 기존 구성 요소를 발견하십시오.

빠른 개요

이 프레임 워크를 사용하면 구성 요소를 클래스로 정의하고 data-… 사용하여 DOM에 바인딩 할 수 있습니다. 예를 들어, Counter 구성 요소가 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 ;
  }
}

그리고 그 수반되는 HTML에는 DOM에서 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 ) ;