:desktop_computer: Working method library

中文 | English

| Method name | Describe | | :------------------------------------------: | --------------------- | |chunkArray | Array chunking | |copyToClipboard | Hijack the clipboard | |countChar | Character statistics | |curryIt | function currying | |debounce | Debounce | |downloadData | Download data to local file| |exitFullscreen | Exit fullscreen| |flattenArray | Multidimensional array flattening | |formatDate | Handling date format functions | |fullscreen | Make the element fullscreen | |generateHexColor | into a random hexadecimal color | |generateID | Get a random unique ID | |getIDCity | Get ID City | |getScrollCoordinates | Get the scroll coordinates | |getUrlParam | Get address parameters| |getValueType | Get data type | |isAvailableEmail | Verify Email Format | |isInViewport | Determine if the element is in the field of view | |isURL | Is it an address | |monitorFullscreen | Monitor F11 keyboard events in full screen state | |oneBecomesTwo | One-digit time change to two-digit| |stopBubble | Compatibility code to cancel bubbling | |throttle | Throttle | |unifiedStorage | Unified storage data to browser |

code demo

chunkArray(arr, size)

• arr: array
• size: number

:hibiscus: Example:

import { chunkArray } from 'js-ways';

const arr = [1, 2, 3, 4, 5, 6, 7];
const size = 5;
const v = chunkArray(arr, size);
console.log('v', v);
// Output: [[1, 2, 3, 4, 5], [6, 7]]

:top:top

copyToClipboard({ value, callback})

• value: string
• callback: function

:hibiscus: Example:

import { copyToClipboard } from 'js-ways';

copyToClipboard({
  value: 'test copyToClipboard...',
  callback: () => {
    console.log('Copy end.');
  }
})
// Output: Copy end.
// Others: the content has been set to the pasteboard

:top:top

countChar(str)

• str: string

:hibiscus: Example:

import { countChar } from 'js-ways';

const c = countChar('Hello, I'm Yanyan')
console.log('c', c)
// Output: { "you": 1, "good": 1, " ": 1, "me": 1, "yes": 1, "yan": 2 }

:top:top

curryIt(fn)

• fn: function

:hibiscus: Example:

import { curryIt } from 'js-ways';

function sayHello(name, age, fruit) {
  console.log(`My name is ${name}, I am ${age} old, I like to eat ${fruit}`);
}
const betterShowMsg = curryIt(sayHello);
betterShowMsg('Little', 20, 'Watermelon');
betterShowMsg('Aleng')(25, 'Grape');
betterShowMsg('Mingming', 22)('Apple');
betterShowMsg('Xiaohong')(28)('Avocado');

/* Output:
My name is Xiaoxiao, I am 20 years old, I like to eat watermelon
My name is Aleng, I am 25 years old, I like to eat grapes
My name is Mingming, I am 22 years old, I like to eat apples
My name is Xiaohong, I am 28 years old, I like to eat avocado
*/

:top:top

debounce({fn, delay})

• fn: function
• delay: number

:hibiscus: Example:

import { debounce } from 'js-ways';

const fn = () => console.log(`❤❤❤❤❤❤❤❤❤❤❤❤${new Date()}❤❤❤❤❤❤❤❤❤❤❤`);

debounce({
  fn,
  delay: 3000
})()
// Output: ❤❤❤❤❤❤❤❤❤❤❤Tue Jun 21 2022 10:43:34 GMT+0800 (China Standard Time)❤❤❤❤❤❤❤❤❤❤❤

:top:top

downloadData({jsonArr, fileName, columnHeader, suffix})

• jsonArr: array
• fileName: string -columnHeader: string
• suffix: "xlsx"(default)/"csv"/"txt"

:hibiscus: Example:

import { downloadData } from 'js-ways';

downloadDataToLocal({
  jsonArr: [
    {
      name: 'Aleng',
      age: 20
    },
    {
      name: 'Mingming',
      age: 3
    },
    {
      name: 'Xiaohong',
      age: 35
    },
  ],
  fileName: '❤',
  columnHeader: 'name,\tage',
  suffix: 'txt'
})
// Output: none
// Others: The file has been downloaded locally
// Notice: Note that columnHeader should be used, (English comma)!

:top:top

exitFullscreen()

• nothing

:hibiscus: Example:

import { exitFullscreen } from 'js-ways';

exitFullscreen()
// Output: none
// Others: element exits fullscreen

:top:top

flattenArray(arr)

• arr: array

:hibiscus: Example:

import { flattenArray } from 'js-ways';

const a = flattenArray([1, 2, 3, [4, [5, [6], 7]]])
console.log('a', a)
// Output: [ 1, 2, 3, 4, 5, 6, 7 ]

:top:top

formatDate(date,joiner)

• date: Date
• joiner: string

:hibiscus: Example:

import { formatDate } from 'js-ways';

const c = formatDate()
console.log('c', c);
// Output: 2022/06/21

:top:top

fullscreen(id)

• id: string

:hibiscus: Example:

import { fullscreen } from 'js-ways';

fullscreen("elem-id")
// Output: none
// Others: element becomes full screen

:top:top

generateHexColor()

• nothing

:hibiscus: Example:

import { generateHexColor } from 'js-ways';

const r = generateHexColor();
console.log('r', r);
// Output: #d36df4

:top:top

generateID(random)

• random: boolean

:hibiscus: Example:

import { generateID } from 'js-ways';

const g = generateID()
console.log('g', g);
// Output: l4nl3sx0

:top:top

getIDCity(judgeID)

• judgeID: string/number

:hibiscus: Example:

import { getIDCity } from 'js-ways';

const g4 = getIDCity('440802200005223520')
console.log('g4', g4);
// Output: Guangdong

:top:top

getScrollCoordinates(el)

• el: element

:hibiscus: Example:

import { getScrollCoordinates } from 'js-ways';

const g = getScrollCoordinates('scroll-elem-id');
console.log('g', g);
// Output: { x: 0, y: 0 }

:top:top

getUrlParam({url, key})

• url: string
• key: string
• getObj: boolean

:hibiscus: Example:

import { getUrlParam } from 'js-ways';

const g = getUrlParam(
  {
    url: 'https://translate.google.cn/?sl=zh-CN&tl=en&text=%E5%B9%B4%E6%9C%88%E6%97%A5%0A%E6%97%B6%E5 %88%86%E7%A7%92&op=translate',
    getObj: true
  }
)
console.log('g,', g);
// Output: { sl: "zh-CN", tl: "en", text: "year month day\nhour minute second", op: "translate" }

:top:top

getValueType(v)

• v: any type

:hibiscus: Example:

import { getValueType } from 'js-ways';

const g = getValueType([]);
console.log('g', g);
// Output: Array

:top:top

isAvailableEmail(email)

• email: string

:hibiscus: Example:

import { isAvailableEmail } from 'js-ways';

const b = isAvailableEmail('[email protected]')
console.log('b', b);
// Output: true

:top:top

isInViewport(id)

• id: string (element id)

:hibiscus: Example:

import { isInViewport } from 'js-ways';

const b = isInViewport('elem-id');
console.log('b', b);
// Output: false

:top:top

isURL(url)

• url: string

:hibiscus: Example:

import { isURL } from 'js-ways';

const b = isURL('https://baidu.com.cn')
console.log('b', b);
// Output: true

:top:top

monitorFullscreen(fn)

• fn: function

:hibiscus: Example:

import { monitorFullscreen } from 'js-ways';

monitorFullscreen(() => console.log('Events executed when the fullscreen state changes...'))
// Output: Event executed when the fullscreen state changes...

:top:top

oneBecomesTwo(num)

• num: number | string(number)

:hibiscus: Example:

import { oneBecomesTwo } from 'js-ways';

const o = oneBecomesTwo(1);
console.log('o', o);
// Output: 01

:top:top

stopBubble(e)

• e: event

:hibiscus: Example:

import { stopBubble } from 'js-ways';

stopBubble(event);
// Output: none
// Others: Prevent child element's events from bubbling to parent element

:top:top

throttle({fn, delay})

• fn: function
• delay: number (ms, milliseconds)

:hibiscus: Example:

import { throttle } from 'js-ways';

const fn = () => console.log(`❤❤❤❤❤❤❤❤❤❤❤❤${new Date()}❤❤❤❤❤❤❤❤❤❤❤`);
throttle({
  fn,
  delay: 3000
})()
// Output: ❤❤❤❤❤❤❤❤❤❤❤Tue Jun 21 2022 11:24:59 GMT+0800 (China Standard Time)❤❤❤❤❤❤❤❤❤❤❤

:top:top

unifiedStorage(name)

• name: string

:hibiscus: Example:

import { unifiedStorage } from 'js-ways';

const store = unifiedStorage('school');

store.set({ 'teacher': 'Aleng' });
store.set({ 'student': 'Mingming' });
store.set({ 'someone': 'Xiaohong' });

const s = store.get('teacher');
console.log('s', s)

store.clear('someone');
// Output: Aleng
// Others: {teacher: "Aleng", student: "Mingming"} is stored in localStorage

:top:top

Test Results

Tested all methods with Jest, all passed.