English · 中文

Installation

npm i chenxi-utils

# And

cnpm i chenxi-utils -S

utils export method

bool

// bool.js
export {
  notEmptyObject, // NON NULL OBJECT JUDGMENT ES5 WRITING
  isEmptyObject, // NON NULL OBJECT JUDGMENT ES6 WRITING
  hasOwnProperty, // Check if the object contains a property value inside
  stringComparisonSize, // string comparison size
  areTheyEqual, // compare two values
  isSupportPerformanceObserver, // whether performance testing is supported
  isSupportSendBeacon, // whether the signal is supported
}

• Example: Introduce bool.js and you can use it

import { isEmptyObject } from 'chenxi-utils/dist/utils/bool';

calc

export {
  calcReserveBits, // numeric number of digits retention method
  calcEndTime, // countdown
  getLocalDate, // get local dates
  timeIntervalFormat, // date and time formatting
  thousandClip, // thousand position split
  arrChunk, // array cutting
  strToBinary, // strings to binary
  binaryAgent, // binary to string
  passwordEncryption, // cryptographic encryption
  passwordDecryption, // password decryption
  memoize, // memory functions
};

• Example: Introduce calc.js and you can use it

import { memoize } from 'chenxi-utils/dist/utils/calc';

domAndBom

export {
  getURLParams, // get URL Search params
  encodeURIObject, // object transformation url parameter encryption
  // openPreviewView, // The preview file method --- is deprecated
  scrollToTop, // The scroll bar slides to the top
  scrollToBottom, // The scroll bar slides to the bottom
  smoothScroll, // Scroll the element to the visible area
  goToFullScreen, // Display elements in full screen
  goExitFullscreen, // Exit the browser fullscreen
  stopPropagation, // Stop bubbling events
  isMobile, // Whether it's on mobile
  getMobileModel, // Get the phone model
  textOverflowHide, // Text overflow hidden
  screenCapture, // Screen recording
  getExplorerInfo, // Get the browser type and its version
  onBFCacheRestore, // Listen for operations after the page is cached
  onBeforeunload, // Listen for operations before closing the page
  onHidden, // Listen to the page before hiding the callback
  onPageVisibilityChange, // Listen for callbacks displayed and hidden on the page
  executeAfterLoad, // Listen to the page after loading callbacks
  getPageURL, // Get the page address
  getSelectedText, // Gets the cursor selected text
  getDetectLanguage, // Gets the current default language
  isSupportsTouchEvents, // Check if the device supports touch events
  prefersDarkColorScheme, // View the user's preferred color scheme
  getIntersectionObserver, // Obtain cross-observation mode, mainly used for performance optimization, such as lazy loading, ad exposure detection, etc.
  getMutationObserver, // Get element structure observers, used when you need to monitor DOM structure or attribute changes
}

• Example: Introduce domAndBom.js and you can use it

import { getURLParams } from 'chenxi-utils/dist/utils/domAndBom';

file

export {
  transformFile, // File upload compression
  openPreviewView, // Preview file method
}

• Example: Introduce file.js and you can use it

import { transformFile } from 'chenxi-utils/dist/utils/file';

mock

export {
  getSmallWordsList, // Get the lowercase letter array ------- array class
  getBigWordsList, // Get an array of uppercase letters
  generateUppercaseLetter, // Automatically generate capital letter numbers
  randomNum, // Generate random numbers
  shuffleArray, // Scramble the array
  getRandomValue, // Get random numbers in an array
  generateYear, // Automatically generate an array of years
  generateMonth, // Automatically generate an array of months
  generateArray, // Array lengths are automatically generated

  testAreaExceeds, // Test whether the content is exceeded
  getUUID, // Universally Unique Identifier
  generateUniqueID, // Generate a unique ID

  randomString, // Generate a random string ------- string class
};

• Example: Introduce mock.js and you can use it

import { randomString } from 'chenxi-utils/dist/utils/mock';

validate

type validateProps = {
  // 链接
  isExternal: (_val: any) => boolean;
  // 邮箱
  isEmail: (_val: any) => boolean;
  // 邮政编码
  isZipCode: (_val: any) => boolean;
  // 座机
  isTel: (_val: any) => boolean;
  // 手机
  isPhone: (_val: any) => boolean;
  // 手机加区号
  isPhoneUser: (_val: any) => boolean;
  isUSCC: (_val: any) => boolean;
  // 身份证
  isIdCardNo: (_val: any) => boolean | undefined;
  // 密码校验 - 英文大小写和数字，长度为 6-20 位
  isPassword: (_val: any) => boolean;
  // 卡片校验 - 长度 12-20 位
  isBandcard: (_val: any) => boolean;
  // 普通字符 6-20 位
  isCommonChar: (_val: any) => boolean;
  // 普通中文字符集 和 大小写英文 外加 数字
  isNormalChar: (_val: any) => boolean;
  // 非普通中文字符集
  isNotZhCN: (_val: any) => boolean;
  // 普通中文字符集
  isZhCN: (_val: any) => boolean;
  // 出生类型
  isBirthType: (_val: any) => boolean;
  // 缩写
  isAbbrev: (_val: any) => boolean;
  // 护照类型
  isPassportType: (_val: any) => boolean;
  isUSCCPolicy: (_val: any) => boolean;
  isOCC: (_val: any) => boolean;
  // 营业执照
  isBusinessLicense: (_val: any) => boolean;
  // 小写字母 和 数字
  isAlphabetNumber: (_val: any) => boolean;
  // 小写字母 和 数字 及 一些特殊字符
  isAlphabetNumberOrSpecial: (_val: any) => boolean;
  // 纯数字
  isNumber: (_val: any) => boolean;
  // 校验数字和保留两位小数
  isReserveTwoPlaces: (_val: any) => boolean;
  // 地址
  isAddress: (_val: any) => boolean;
  // html 标签
  isHtmlLabel: (_val: any) => boolean;
  /** isDateValid (检查日期是否有效)方法说明
   * @author: JasonStandFer
   * @description Desc::
   * @return boolean
   * @example::
   isDateValid('December 17, 1995 03:24:00'); // true
   isDateValid('1995-12-17T03:24:00'); // true
   isDateValid('1995-12-17 T03:24:00'); // false
   isDateValid('Duck'); // false
   isDateValid(1995, 11, 17); // true
   isDateValid(1995, 11, 17, 'Duck'); // false
   isDateValid({}); // false
   **/
  isDateValid: (..._val: any[]) => boolean;
}

• Example: Introduce validate.js and you can use it

import { isAddress } from 'chenxi-utils/dist/utils/validate';

tool

// tool.js
export {
  copyToClipboard, // Copied to clipboard
  validateDataType, // Detect the data type
  getFileType, // Get the file type
  getBase64, // Get the base64 file encoding of the file
  deepClone, // Easy deep copying
  debounce, // debounce
  debounceMax, // debounce-Execute it now
  throttle, // throttle
  exportFile, // exportFile
  resetTargetObject, // reset Target Object
  recursionBeforeMark, // treeMarkers --- deprecated
  treeToArray, // The tree structure is flattened
  arrayToTree, // Arrays are converted to tree structures
  foreachTree, // Tree node traversal
  fuzzyQueryArray, // Fuzzy query arrays
  uniqueArrayObject, // Array objects are deduplicated based on fields
  desensitizationPhone, // The mobile phone number is desensitized
  desensitizationText, // Character desensitivity
  constantListMapping, // Constant enumeration mappings
  JSON_Parser, // json parse
  pickObjectAttr, // Select the object attribute ES5
  omitObjectAttr, // Excludes object attribute ES5
};

• Example: Introduce tool.js and you can use it

import { isEmptyObject } from 'chenxi-utils/dist/utils/tool';

#UpdateLog

2024

05-24

• calc file new add...
  • [x] passwordEncryption, // cryptographic encryption
  • [x] passwordDecryption, // password decryption

05-25

• cals file update passwordDecryption method: Solve passwordDecryption method subscript exception problem

05-27

• tool file optimization, Resolve the debounce, debounceMax, and throttle arguments parameter orientation problem

07-07

• domAndBom file new add...
  • [x] onPageVisibilityChange, // Listen for callbacks displayed and hidden on the page

07-08

• domAndBom 文件新增...
  • [x] getIntersectionObserver, // Obtain cross-observation mode, mainly used for performance optimization, such as lazy loading, ad exposure detection, etc.
  • [x] getMutationObserver, // Get element structure observers, used when you need to monitor DOM structure or attribute changes