برنامه نویسی

💎 enum-plus: باور کنید یا نه ، این ممکن است آخرین کتابخانه enum JavaScript شما باشد

لوب

به علاوه


مثل عناوین بومی ، اما خیلی بهتر!

مقدمه | ویژگی ها | نصب | تعریف enum | API | استفاده | بومی سازی | پسوند جهانی

فهرست مطالب

مقدمه

enum-plus یک کتابخانه Enum Enum است که کاملاً با بومی سازگار است enum و آن را با ویژگی های قدرتمندی مانند متن نمایش ، بومی سازی ، اتصال کنترل UI ، موارد Enum Traversal و روش های پسوند مفیدتر گسترش می دهد. این کتابخانه سبک ، وابسته به صفر ، با هر چارچوب جلویی کار می کند.

با استفاده از قابلیت متن نمایش گسترده ، می توان از موارد Enum برای تولید کشویی ، کادر انتخاب و سایر کنترل های UI با یک خط کد استفاده کرد. با استفاده از روشهای پسوند enum ، می توانید به راحتی آرایه ای از موارد enum را طی کنید ، متن نمایشگر یک مقدار خاص را دریافت کنید ، تعیین کنید که آیا یک مقدار وجود دارد ، و غیره. متن نمایشگر مورد enum از محلی سازی پشتیبانی می کند ، که می تواند متن مربوطه را مطابق با محیط زبان فعلی بازگرداند ، و متن صفحه نمایش enum را با انعطاف پذیر تر و بیشتر در خط نیاز کاربر ایجاد کند.

چه ویژگی های هیجان انگیز دیگری وجود دارد؟ لطفا به کاوش ادامه دهید! یا می توانید ابتدا این فیلم استفاده را بررسی کنید.

giphy


ویژگی

  • سازگاری کامل با بومی enum رفتار
  • پشتیبانی از انواع مختلف داده از جمله number وت string
  • موارد Enum Enum با متن نمایشگر قابل تنظیم
  • قابلیت های محلی سازی داخلی که با هر کتابخانه i18n ادغام می شوند
  • تبدیل ساده از مقادیر enum به متن نمایشگر قابل خواندن انسان
  • طراحی گسترده ای که می تواند زمینه های سفارشی نامحدود را در موارد enum فراهم کند
  • ادغام یکپارچه با هر کتابخانه UI مانند طراحی مورچه ، ElementPlus ، Material-UI ، در یک خط کد واحد
  • Node.js سازگاری کامل با پشتیبانی SSR
  • وابستگی های صفر – اجرای خالص JavaScript قابل استفاده در هر چارچوب جلویی
  • پشتیبانی از نوع درجه یک با استنتاج نوع جامع
  • سبک وزن (فقط 2 کیلوبایت+ gzipped)

نصب

npm install enum-plus
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


تعریف

ارزشهای enum ، enum ایجاد می کند که از هر دو پشتیبانی می کند number وت string انواع

• با استفاده از سبک بومی ایجاد می کند

import { Enum } from 'enum-plus';

const Week = Enum({
  Sunday: 0,
  Monday: 1,
} as const);

Week.Monday; // 1
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• با استفاده از کلید ، مقدار و متن نمایش ایجاد می کند 👍 توصیه می شود

import { Enum } from 'enum-plus';

const Week = Enum({
  Sunday: { value: 0, label: 'Sunday' },
  Monday: { value: 1, label: 'Monday' },
} as const);

Week.Sunday; // 0
Week.label(1); // Monday (here is display text, not key)
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• از آرایه داده پویا ایجاد می کند

بعضی اوقات ما باید با استفاده از داده های برگشتی توسط API ، یک enum را به صورت پویا ایجاد کنیم ، در این حالت می توانیم از یک آرایه برای ایجاد enum استفاده کنیم.

import { Enum } from 'enum-plus';

const petTypes = await getPetsData();
// [   { value: 1, key: 'dog', label: 'Dog' },
//     { value: 2, key: 'cat', label: 'Cat' },
//     { value: 3, key: 'rabbit', label: 'Rabbit' }   ];
const PetTypes = Enum(petTypes);
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• از enum بومی ایجاد می کند ، که معادل روش های گسترش برای عناصر بومی است

import { Enum } from 'enum-plus';

enum init {
  Sunday = 0,
  Monday,
  Tuesday,
  Wednesday,
  Thursday,
  Friday,
  Saturday,
}
const Week = Enum(init);

Week.Sunday; // 0
Week.Monday; // 1
Week.Saturday; // 6
Week.label('Sunday'); // Sunday
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


API

💎 یک مقدار enum را انتخاب می کند

Enum.XXX

مانند بومی کار می کند enum، به شما امکان دسترسی مستقیم به مقادیر enum را می دهد.

Week.Sunday; // 0
Week.Monday; // 1
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

💎 موارد

{ value, label, key, raw }[]

مجموعه ای از همه موارد enum فقط خواندنی را برمی گرداند. ساختار آرایه با مشخصات مؤلفه طراحی مورچه مطابقت دارد ، که باعث می شود منوهای کشویی ، کادر چک و سایر کنسرول های UI با تنها یک خط کد تولید شود. برای اطلاعات بیشتر ، لطفاً به مثال های استفاده در زیر مراجعه کنید.

💎 کلیدها

string[]

یک مجموعه فقط خواندنی از همه موارد enum را برمی گرداند key(ها)

💎 برچسب

[Function] label(keyOrValue?: string | number): string | undefined

متن نمایش یک مورد enum را بر اساس یک مقدار یا کلید خاص دریافت می کند. اگر بومی سازی تنظیم شده باشد ، متن بومی شده بازگردانده می شود.

Week.label(1); // Monday
Week.label('Monday'); // Monday (here is label, not key)
Week.label('Monday'); // 星期日, or show localized text if localization is set up
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

💎 کلید

[Function] key(value?: string | number): string | undefined

کلید یک مورد enum را بر اساس مقدار enum دریافت کنید ، اگر کلید پیدا نشده است ، برگردید undefinedبشر

Week.key(1); // Monday (here is key, not label)
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

💎

[Function] has(keyOrValue?: string | number): boolean

تعیین کنید که آیا یک مورد خاص (مقدار یا کلید) وجود دارد.

Week.has(1); // true
Week.has('Sunday'); // true
Week.has(9); // false
Week.has('Birthday'); // false
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

💎 انتخاب

[Function] toSelect(config?: OptionsConfig): {value, label}[]

toSelect شبیه به items، هر دو مجموعه ای از همه موارد enum را برمی گردانند. تفاوت در این است که عناصر برگشتی توسط toSelect فقط حاوی label وت value زمینه ها ، هیچ زمینه اضافی دیگری. در همان زمان ، toSelect روش اجازه می دهد تا یک عنصر پیش فرض را در ابتدای آرایه وارد کنید ، که به طور کلی برای گزینه پیش فرض استفاده می شود (این به معنی است همهبا هیچ کدام، یا نامحدود، و غیره) از کنترل انتخاب. البته می توانید این گزینه پیش فرض را سفارشی کنید.

💎 تومنو

[Function] toMenu(): { key, label }[]

مجموعه ای از همه موارد enum را که مطابق با مشخصات طراحی مورچه ها است ، برمی گرداند. از آن برای تولید استفاده می شود Menuبا Dropdown کنترل ها ، در یک خط کد واحد.

import { Menu } from 'antd';

<Menu items={Week.toMenu()} />;
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

قالب داده ها:

[
  { key: 0, label: 'Sunday' },
  { key: 1, label: 'Monday' },
];
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

tofilter

[Function] toFilter(): { text, value }[]

مجموعه ای از موارد enum را برمی گرداند که می توانند مستقیماً به مؤلفه جدول طراحی مورچه منتقل شوند filters خاصیت یک ستون. این برای اضافه کردن یک جعبه فیلتر کشویی در هدر جدول برای فیلتر کردن داده های جدول استفاده می شود.

قالب داده ها:

[
  { text: 'Sunday', value: 0 },
  { text: 'Monday', value: 1 },
];
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

💎 tovaluemap

[Function] toValueMap(): Record

یک شیء نقشه برداری با ارزش به متن را برمی گرداند ، که مقادیر enum را به متن نمایش خود نقشه می کند ، مطابق با مشخصات Pro Design Pro. این برای تولید منابع داده برای ProFormField کنترل های سری ، و ProTableبشر

قالب داده ها:

{
  0: { text: 'Sunday' },
  1: { text: 'Monday' },
}
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

💎 خام

[Override^1] raw(): Record
[Override^2] raw(keyOrValue: V | K): T[K]

در raw از روش برای بازگشت شیء اولیه اولیه مجموعه Enum استفاده می شود ، که شیئی است که برای ایجاد enum استفاده می شود.

از روش اضافه بار دوم برای بازگشت شی اولیه اولیه سازی یک مورد enum واحد استفاده می شود.

هدف اصلی raw روش برای به دست آوردن زمینه های سفارشی گسترده موارد enum است. تعداد نامحدودی از زمینه های سفارشی مجاز است.

const Week = Enum({
  Sunday: { value: 0, label: 'Sunday', happy: true },
  Monday: { value: 1, label: 'Monday', happy: false },
} as const);

Week.raw(0).happy; // true
Week.raw(0); // { value: 0, label: 'Sunday', happy: true }
Week.raw('Monday'); // { value: 1, label: 'Monday', happy: false }
Week.raw(); // { Sunday: { value: 0, label: 'Sunday', happy: true }, Monday: { value: 1, label: 'Monday', happy: false } }
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


⚡ ValueType [TypeScript ONLY]

value1 | value2 | ...

در TypeScript ، یک نوع اتحادیه را شامل می شود که شامل تمام مقادیر enum است ، محدودیت های نوع دقیقی را برای متغیرها و خصوصیات مؤلفه فراهم می کند. این جایگزین انواع اولیه اولیه مانند number یا string با مجموعه های ارزش دقیق ، جلوگیری از تکالیف نامعتبر ضمن افزایش خوانایی کد و ایمنی از نوع زمان کامپایل.

type WeekValues = typeof Week.valueType; // 0 | 1

const weekValue: typeof Week.valueType = 1; // ✅ Type correct, 1 is a valid week enum value
const weeks: (typeof Week.valueType)[] = [0, 1]; // ✅ Type correct, 0 and 1 are valid week enum values
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

توجه: این فقط یک نوع TypeScript است و در زمان اجرا قابل استفاده نیست. تماس با آن در زمان اجرا یک استثنا خواهد بود.

⚡ نوع کلید [TypeScript ONLY]

key1 | key2 | ...

شبیه valueType، یک نوع اتحادیه از همه enum را فراهم می کند key(ها)

type WeekKeys = typeof Week.keyType; // 'Sunday' | 'Monday'

const weekKey: typeof Week.keyType = 'Monday';
const weekKeys: (typeof Week.keyType)[] = ['Sunday', 'Monday']
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

توجه: این فقط یک نوع TypeScript است و در زمان اجرا قابل استفاده نیست. تماس با آن در زمان اجرا یک استثنا خواهد بود.

⚡ نوع خام [TypeScript ONLY]

{ value: V, label: string, [...] }

نوعی از شیء اولیه سازی اصلی مجموعه enum را ارائه می دهد.

توجه: این فقط یک نوع TypeScript است و در زمان اجرا قابل استفاده نیست. تماس با آن در زمان اجرا یک استثنا خواهد بود.


استفاده

• مقادیر enum را مطابق با عناصر بومی انتخاب می کند

const Week = Enum({
  Sunday: { value: 0, label: 'Sunday' },
  Monday: { value: 1, label: 'Monday' },
} as const);

Week.Sunday; // 0
Week.Monday; // 1
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• از نظرات JSDOC در مورد موارد enum پشتیبانی می کند

در ویرایشگر کد ، مکان نما را روی مورد enum قرار دهید تا نظرات JSDOC مفصل را در مورد آن مورد enum نمایش دهید ، بدون آنکه برای مشاهده آن به تعریف enum بروید.

const Week = Enum({
  /** Sunday */
  Sunday: { value: 0, label: 'Sunday' },
  /** Monday */
  Monday: { value: 1, label: 'Monday' },
} as const);

Week.Monday; // Hover over Monday
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

نمایشگاه JSDOC

ویترین jsdoc در vscode

می بینید که این عملکرد شناور ، هر دو مقادیر مستندات و مقادیر enum را همزمان نشان می دهد ، بدون اینکه موقعیت فعلی خود را در کد بگذارد.

• آرایه ای از موارد خواندن فقط خواندنی دریافت می کند

Week.items; // The output is:
// [
//  { value: 0, label: 'Sunday', key: 'Sunday', raw: { value: 0, label: 'Sunday' } },
//  { value: 1, label: 'Monday', key: 'Monday', raw: { value: 1, label: 'Monday' } },
// ]
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• اولین مقدار enum را دریافت می کند

Week.items[0].value; // 0
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• بررسی می کند که آیا یک مقدار یک مقدار معتبر enum است

Week.has(1); // true
Week.items.some((item) => item.value === 1); // true
1 instanceof Week; // true
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

instanceof عملگر

1 instanceof Week; // true
'1' instanceof Week; // true
'Monday' instanceof Week; // true
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• پشتیبانی از آرایه موارد enum را پشتیبانی می کند

Week.items.length; // 2
Week.items.map((item) => item.value); // [0, 1], ✅ Traversable
Week.items.forEach((item) => {}); // ✅ Traversable
for (let item of Week.items) {
  // ✅ Traversable
}
Week.items.push({ value: 2, label: 'Tuesday' }); // ❌ Not allowed, read-only
Week.items.splice(0, 1); // ❌ Not allowed, read-only
Week.items[0].label = 'foo'; // ❌ Not allowed, read-only
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• متن نمایش Enum را بر اساس مقدار (یا کلید) دریافت می کند

Week.label(1); // Monday, here is label, not key
Week.label(Week.Monday); // Monday, here is label, not key
Week.label('Monday'); // Monday, get label by key
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• کلید Enum را با ارزش دریافت می کند

Week.key(1); // 'Monday'
Week.key(Week.Monday); // 'Monday'
Week.key(9); // undefined, because it does not exist
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• تعداد نامحدودی از زمینه های سفارشی را گسترش می دهد

const Week = Enum({
  Sunday: { value: 0, label: 'Sunday', active: true, disabled: false },
  Monday: { value: 1, label: 'Monday', active: false, disabled: true },
} as const);

Week.raw(0).active; // true
Week.raw(Week.Sunday).active; // true
Week.raw('Sunday').active; // true
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• به کنترل های UI تبدیل می شود

Enum.items می تواند به عنوان منابع داده کنترل مصرف شود (با استفاده از انتخاب به عنوان نمونه)

کتابخانه های UI مبتنی بر واکنش

طراحی مورچه | طراحی ARCO را انتخاب کنید

  import { Select } from 'antd';

  <Select options={Week.items} />;
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

مواد-UI را انتخاب کنید

  import { MenuItem, Select } from '@mui/material';

  <Select>
    {Week.items.map((item) => (
      <MenuItem key={item.value} value={item.value}>
        {item.label}
      MenuItem>
    ))}
  Select>;
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

kendo ui را انتخاب کنید

  import { DropDownList } from '@progress/kendo-react-dropdowns';

  <DropDownList data={Week.items} textField="label" dataItemKey="value" />;
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

کتابخانه های UI مبتنی بر VUE

ElementPlus را انتخاب کنید

  <el-select>
    <el-option v-for="item in Week.items" v-bind="item" />
  el-select>
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

طراحی مورچه VUE | طراحی قوس را انتخاب کنید

  <a-select :options="Week.items" />
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

VUETIFY را انتخاب کنید

  <v-select :items="Week.items" item-title="label" />
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

کتابخانه های UI مبتنی بر زاویه ای

مواد زاویه ای را انتخاب کنید

  
     *ngFor="let item of Week.items" [value]="item.value">{{ item.label }}
  
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

از Zorro را انتخاب کنید

  
     *ngFor="let item of Week.items" [nzValue]="item.value">{{ item.label }}
  
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

toMenu از روش برای تولید منابع داده برای طراحی مورچه استفاده می شود Menuبا Dropdown مؤلفه ها

import { Menu } from 'antd';

<Menu items={Week.toMenu()} />;
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

toFilter روش برای افزودن جعبه فیلتر کشویی در طراحی مورچه استفاده می شود Table هدر برای فیلتر کردن داده های جدول.

import { Table } from 'antd';

const columns = [
  {
    title: 'week',
    dataIndex: 'week',
    filters: Week.toFilter(),
  },
];
// Add column filter at table header
<Table columns={columns} />;
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

toValueMap از روش برای تولید منابع داده برای اتصال به طراحی مورچه استفاده می شود ProFormField کنترل های سری ، و ProTableبشر

import { ProFormCheckbox, ProFormRadio, ProFormSelect, ProFormTreeSelect, ProTable } from '@ant-design/pro-components';

<ProFormSelect valueEnum={Week.toValueMap()} />; // Select
<ProFormCheckbox valueEnum={Week.toValueMap()} />; // Checkbox
<ProFormRadio.Group valueEnum={Week.toValueMap()} />; // Radio
<ProFormTreeSelect valueEnum={Week.toValueMap()} />; // TreeSelect
<ProTable columns={[{ dataIndex: 'week', valueEnum: Week.toValueMap() }]} />; // ProTable
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• ادغام دو enum (یا گسترش یک enum)

const myWeek = Enum({
  ...Week.raw(),
  Friday: { value: 5, label: 'Friday' },
  Saturday: { value: 6, label: 'Saturday' },
});
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

• باریک شدن number به توالی های ارزش [TypeScript ONLY]

با استفاده از valueType محدودیت را تایپ کنید ، می توانید انواع متغیر را از بدوی های گسترده مانند باریک کنید number یا string برای دقیق اتحادیه های ارزشمند. باریک شدن این نوع نه تنها از تکالیف نامعتبر در زمان کامپایل جلوگیری می کند ، بلکه در حالی که ضمانت های ایمنی از نوع قوی تری را نیز ارائه می دهد ، خوانایی کد و مستندسازی را نیز تقویت می کند.

const weekValue: number = 8; // 👎 Any number can be assigned to the week enum, even if it is wrong
const weekName: string = 'Birthday'; // 👎 Any string can be assigned to the week enum, even if it is wrong

const goodWeekValue: typeof Week.valueType = 1; // ✅ Type correct, 1 is a valid week enum value
const goodWeekName: typeof Week.keyType = 'Monday'; // ✅ Type correct, 'Monday' is a valid week enum name

const badWeekValue: typeof Week.valueType = 8; // ❌ Type error, 8 is not a valid week enum value
const badWeekName: typeof Week.keyType = 'Birthday'; // ❌ Type error, 'Birthday' is not a valid week enum name

type FooProps = {
  value?: typeof Week.valueType; // 👍 Component property type constraint, prevent erroneous assignment, and also prompts which values are valid
  names?: (typeof Week.keyType)[]; // 👍 Component property type constraint, prevent erroneous assignment, and also prompts which values are valid
};
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


بومی سازی

در حالی که enum-plus شامل قابلیت های بین المللی داخلی نمی شود ، محلی سازی انعطاف پذیر را از طریق اختیاری ارائه می دهد localize پارامتر این به شما امکان می دهد یک تابع محلی سازی سفارشی را اجرا کنید که enum را تغییر می دهد label مقادیر در متن ترجمه شده مناسب بر اساس متن زبان فعلی. مدیریت دولت زبان مسئولیت شما است ، با شما localize روش تعیین کدام متن بومی شده برای بازگشت. برای برنامه های تولید ، ما اکیداً توصیه می کنیم که از کتابخانه های بین المللی مستقر مانند استفاده کنید i18next به جای ایجاد راه حل های سفارشی.

در زیر یک مثال ساده برای اهداف تصویر آورده شده است. توجه داشته باشید که به دلیل انعطاف پذیری محدود ، روش اول برای استفاده از تولید توصیه نمی شود – این فقط برای نشان دادن مفهوم اساسی است.

import { Enum } from 'enum-plus';
import i18next from 'i18next';
import Localize from './Localize';

let lang = 'zh-CN';
const setLang = (l: string) => {
  lang = l;
};

// 👎 Not a good example, just for demonstration - not recommended for production
const sillyLocalize = (content: string) => {
  if (lang === 'zh-CN') {
    switch (content) {
      case 'enum-plus.options.all':
        return '全部';
      case 'week.sunday':
        return '星期日';
      case 'week.monday':
        return '星期一';
      default:
        return content;
    }
  } else {
    switch (content) {
      case 'enum-plus.options.all':
        return 'All';
      case 'week.sunday':
        return 'Sunday';
      case 'week.monday':
        return 'Monday';
      default:
        return content;
    }
  }
};
// 👍 Recommended to use i18next or other internationalization libraries
const i18nLocalize = (content: string | undefined) => i18next.t(content);
// 👍 Or encapsulate it into a basic component
const componentLocalize = (content: string | undefined) => <Localize value={content} />;

const Week = Enum(
  {
    Sunday: { value: 0, label: 'week.sunday' },
    Monday: { value: 1, label: 'week.monday' },
  } as const,
  {
    localize: sillyLocalize,
    // localize: i18nLocalize, // 👍  Recommended to use i18n
    // localize: componentLocalize, // 👍  Recommended to use component
  }
);
setLang('zh-CN');
Week.label(1); // 星期一
setLang('en-US');
Week.label(1); // Monday
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید

برای برنامه های کاربردی با نیاز محلی سازی مداوم ، Enum.localize روش یک روش مناسب برای تنظیم محلی سازی در سطح جهان به جای پیکربندی هر یک از عناصر به صورت جداگانه ارائه می دهد. هنگامی که گزینه های محلی سازی اختصاصی در هنگام اولیه سازی ارائه می شود ، این تنظیمات جهانی را نادیده می گیرد.

Enum.localize = i18nLocalize;
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


پسوند جهانی

در حالی که Enum مجموعه ای جامع از روش های داخلی را ارائه می دهد ، می توانید با استفاده از روش های سفارشی عملکرد آن را گسترش دهید Enum.extends API این پسوندها در سطح جهانی برای همه موارد enum ، از جمله موارد ایجاد شده قبل از استفاده از پسوند ، اعمال می شود و بلافاصله بدون نیاز به تنظیم دستی ، بلافاصله اعمال می شوند.

Enum.extends({
  toMySelect(this: ReturnType<typeof Enum>) {
    return this.items.map((item) => ({ value: item.value, title: item.label }));
  },
  reversedItems(this: ReturnType<typeof Enum>) {
    return this.items.reverse();
  },
});

Week.toMySelect(); // [{ value: 0, title: 'Sunday' }, { value: 1, title: 'Monday' }]
حالت تمام صفحه را وارد کنید

از حالت تمام صفحه خارج شوید


سازگاری

  • محیط های مرورگر:

    • دسته های مدرن: با بسته های پشتیبانی کننده از قسمت صادرات (Webpack 5+ ، Vite ، Rollup) ، اهداف Enum-Plus ES2020بشر برای پشتیبانی مرورگر گسترده تر ، با استفاده از نحو قبلی انتقال دهید @babel/preset-env در طی مراحل ساخت شما
    • دسته های میراث: برای ابزارهای بدون exports پشتیبانی میدانی (مانند Webpack 4) ، Enum-Plus به طور خودکار به main نقطه ورود میدانی ، که هدف قرار می دهد ES2016بشر
    • استراتژی: کشتی های Enum-Plus بدون پلی پلی برای به حداقل رساندن اندازه بسته. برای پشتیبانی از مرورگر میراث ، ترکیب کنید:
    • core-js
    • @babel/preset-env با مناسب useBuiltIns تنظیمات
    • پیاده سازی های جایگزین پلی فیلی
  • سازگاری Node.js: enum-plus به حداقل نیاز دارد ES2016 ویژگی ها ، سازگار با node.js v7.x و بالاتر


هنوز بیشتر می خواهید؟ برای کشف نکات و تکنیک های پیشرفته تر به Enum-Plus مراجعه کنید. اگر این پروژه را دوست دارید ، لطفاً آن را در GitHub ستاره کنید. به توسعه دهندگان بیشتر کمک کنید تا آن را کشف کنند.

به من اعتماد کن ، آرزو می کنی زودتر آن را کشف کرده بودی!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا