js toolkit

@studiometa/JS-Toolkit

A JavaScript Data-Attributes مدفوعة الدفعة الدقيقة التي يتم شحنها مع الكثير من وظائف الأداة المساعدة المفيدة لزيادة مشروعك.

تثبيت

قم بتثبيت أحدث إصدار عبر NPM:

npm install @studiometa/js-toolkit

ما هذا؟

هذا المشروع عبارة عن عمل جافا سكريبت الدقيق (جنبًا إلى جنب مع وظائف الأداة المساعدة) التي تتمثل أهدافها الرئيسية في:

• إنفاذ أفضل الممارسات والاتساق بين المشاريع
• باستخدام عناصر من 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-... السمات أيضًا. الأول في جافا سكريبت:

  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 وتنسيق مع أجمل.

رخصة

انظر الترخيص.