1.0.11 • Published 2 years ago

js-ways v1.0.11

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

:desktop_computer: Working method library

中文 | English

Version License: MIT npm.io

Method nameDescribe
chunkArrayArray chunking
copyToClipboardHijack the clipboard
countCharCharacter statistics
curryItfunction currying
debounceDebounce
downloadDataDownload data to local file
exitFullscreenExit fullscreen
flattenArrayMultidimensional array flattening
formatDateHandling date format functions
fullscreenMake the element fullscreen
generateHexColorinto a random hexadecimal color
generateIDGet a random unique ID
getIDCityGet ID City
getScrollCoordinatesGet the scroll coordinates
getUrlParamGet address parameters
getValueTypeGet data type
isAvailableEmailVerify Email Format
isInViewportDetermine if the element is in the field of view
isURLIs it an address
monitorFullscreenMonitor F11 keyboard events in full screen state
oneBecomesTwoOne-digit time change to two-digit
stopBubbleCompatibility code to cancel bubbling
throttleThrottle
unifiedStorageUnified 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('2829139244@qq.com')
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.

test

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago