js-ways

🖥️ 工作方法库

中文 | English

Method name	Describe
chunkArray	数组分块
copyToClipboard	劫持粘贴板
countChar	字符统计
curryIt	函数柯里化
debounce	防抖
downloadData	下载数据成文件到本地
exitFullscreen	退出全屏
flattenArray	多维数组扁平化
formatDate	处理日期格式函数
fullscreen	使元素全屏
generateHexColor	成随机的十六进制颜色
generateID	获取随机唯一ID
getIDCity	获取身份证城市
getScrollCoordinates	获取滚动的坐标
getUrlParam	获取地址的参数
getValueType	获取数据类型
isAvailableEmail	验证邮箱格式
isInViewport	判断元素是否在视野范围内
isURL	是否是地址
monitorFullscreen	监听全屏状态下的F11键盘事件
oneBecomesTwo	时间个位数变两位数
stopBubble	取消冒泡的兼容代码
throttle	节流
unifiedStorage	统一存储数据到浏览器

代码演示

chunkArray(arr, size)

• arr: array
• size: number

🌺 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

copyToClipboard({ value, callback})

• value: string
• callback: function

🌺 Example:

import { copyToClipboard } from 'js-ways';

copyToClipboard({
  value: 'test copyToClipboard...',
  callback: () => {
    console.log('Copy end.');
  }
})
// Output: Copy end.
// Others: 内容已经设置到粘贴板

🔝 top

countChar(str)

• str: string

🌺 Example:

import { countChar } from 'js-ways';

const c = countChar('你好 我是燕燕')
console.log('c', c)
// Output: { "你": 1, "好": 1, " ": 1, "我": 1, "是": 1, "燕": 2 }

🔝 top

curryIt(fn)

• fn: function

🌺 Example:

import { curryIt } from 'js-ways';

function sayHello(name, age, fruit) {
  console.log(`我叫 ${name},我 ${age} 岁了, 我喜欢吃 ${fruit}`);
}
const betterShowMsg = curryIt(sayHello);
betterShowMsg('小小', 20, '西瓜');
betterShowMsg('阿棱')(25, '葡萄');
betterShowMsg('明明', 22)('苹果');
betterShowMsg('小红')(28)('牛油果');

/* Output: 
我叫 小小,我 20 岁了, 我喜欢吃 西瓜
我叫 阿棱,我 25 岁了, 我喜欢吃 葡萄
我叫 明明,我 22 岁了, 我喜欢吃 苹果
我叫 小红,我 28 岁了, 我喜欢吃 牛油果
*/

🔝 top

debounce({fn, delay})

• fn: function
• delay: number

🌺 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 (中国标准时间)❤❤❤❤❤❤❤❤❤❤❤❤

🔝 top

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

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

🌺 Example:

import { downloadData } from 'js-ways';

downloadDataToLocal({
  jsonArr: [
    {
      name: '阿棱',
      age: 20
    },
    {
      name: '明明',
      age: 3
    },
    {
      name: '小红',
      age: 35
    },
  ],
  fileName: '❤',
  columnHeader: '名字,\t年龄',
  suffix: 'txt'
})
// Output: 无
// Others: 文件已下载到本地
// Notice: 注意columnHeader要使用,(英文逗号)!

🔝 top

exitFullscreen()

• nothing

🌺 Example:

import { exitFullscreen } from 'js-ways';

exitFullscreen()
// Output: 无
// Others: 元素退出全屏

🔝 top

flattenArray(arr)

• arr: array

🌺 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

formatDate(date,joiner)

• date: Date
• joiner: string

🌺 Example:

import { formatDate } from 'js-ways';

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

🔝 top

fullscreen(id)

• id: string

🌺 Example:

import { fullscreen } from 'js-ways';

fullscreen("elem-id")
// Output: 无
// Others: 元素变成全屏

🔝 top

generateHexColor()

• nothing

🌺 Example:

import { generateHexColor } from 'js-ways';

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

🔝 top

generateID(random)

• random: boolean

🌺 Example:

import { generateID } from 'js-ways';

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

🔝 top

getIDCity(judgeID)

• judgeID: string/number

🌺 Example:

import { getIDCity } from 'js-ways';

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

🔝 top

getScrollCoordinates(el)

• el: element

🌺 Example:

import { getScrollCoordinates } from 'js-ways';

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

🔝 top

getUrlParam({url, key})

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

🌺 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: "年月日\n时分秒", op: "translate" }

🔝 top

getValueType(v)

• v: any type

🌺 Example:

import { getValueType } from 'js-ways';

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

🔝 top

isAvailableEmail(email)

• email: string

🌺 Example:

import { isAvailableEmail } from 'js-ways';

const b = isAvailableEmail('[e-mail]')
console.log('b', b);
// Output: true

🔝 top

isInViewport(id)

• id: string (element id)

🌺 Example:

import { isInViewport } from 'js-ways';

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

🔝 top

isURL(url)

• url: string

🌺 Example:

import { isURL } from 'js-ways';

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

🔝 top

monitorFullscreen(fn)

• fn: function

🌺 Example:

import { monitorFullscreen } from 'js-ways';

monitorFullscreen(() => console.log('全屏状态改变时执行的事件...'))
// Output: 全屏状态改变时执行的事件...

🔝 top

oneBecomesTwo(num)

• num: number | string(number)

🌺 Example:

import { oneBecomesTwo } from 'js-ways';

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

🔝 top

stopBubble(e)

• e: event

🌺 Example:

import { stopBubble } from 'js-ways';

stopBubble(event);
// Output: 无
// Others: 阻止子元素的事件冒泡到父元素

🔝 top

throttle({fn, delay})

• fn: function
• delay: number (ms, 毫秒)

🌺 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 (中国标准时间)❤❤❤❤❤❤❤❤❤❤❤❤

🔝 top

unifiedStorage(name)

• name: string

🌺 Example:

import { unifiedStorage } from 'js-ways';

const store = unifiedStorage('school');

store.set({ 'teacher': '阿棱' });
store.set({ 'student': '明明' });
store.set({ 'someone': '小红' });

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

store.clear('someone');
// Output: 阿棱
// Others: localStorage里存储了 {teacher: "阿棱", student: "明明"}

🔝 top

测试结果

使用Jest测试所有方法，全部通过。