js toolkit

@studiometa/js-toolkit

จาวาสคริปต์ข้อมูล-attributes ขับเคลื่อนไมโครเฟรมเวิร์กที่ส่งมาพร้อมกับฟังก์ชั่นยูทิลิตี้ที่มีประโยชน์มากมายเพื่อเพิ่มโครงการของคุณ

การติดตั้ง

ติดตั้งเวอร์ชันล่าสุดผ่าน NPM:

npm install @studiometa/js-toolkit

มันคืออะไร?

โครงการนี้เป็น JavaScript Micro-Framework (พร้อมกับฟังก์ชั่นยูทิลิตี้) ซึ่งมีวัตถุประสงค์หลัก:

• การบังคับใช้การปฏิบัติที่ดีที่สุดและความสอดคล้องระหว่างโครงการ
• ใช้องค์ประกอบจาก DOM ได้อย่างง่ายดาย
• การเปิดใช้งานพฤติกรรมที่กำหนดเองในการเริ่มต้นส่วนประกอบหรือเหตุการณ์ผู้ใช้อื่น ๆ
• การปิดใช้งานพฤติกรรมที่กำหนดเองในการทำลายส่วนประกอบหรือเหตุการณ์อื่น ๆ ของผู้ใช้
• การเริ่มต้นส่วนประกอบในสถานที่ที่เหมาะสมในเวลาที่เหมาะสม
• การกำหนดการพึ่งพาระหว่างส่วนประกอบ

เยี่ยมชม js-toolkit.studiometa.dev เพื่อเรียนรู้เพิ่มเติมหรือข้ามโดยตรงไปยัง UI.studiometa.dev เพื่อค้นหาส่วนประกอบที่มีอยู่

ภาพรวมอย่างรวดเร็ว

เฟรมเวิร์กนี้ช่วยให้คุณกำหนดส่วนประกอบเป็นคลาสและผูกเข้ากับ DOM ด้วย data-… แอตทริบิวต์ ตัวอย่างเช่นนี่คือวิธีที่องค์ประกอบ 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 ที่มาพร้อมกับข้อมูลจะถูกโรยด้วย 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 พิมพ์ที่ตรวจสอบด้วย typeScript และจัดรูปแบบด้วย prettier

ใบอนุญาต

ดูใบอนุญาต