# 文档

# Binder Class

import { Binder } from '@bougiel/utils'

说明
React 受控表单绑定器。
类型

interface IComponentInstance {
  state: object
  setState: (obj: object) => void
}

构造器参数
componentInstance: IComponentInstance: 组件this实例。
实例方法
- value(prop: string): 绑定 value 和 onChange 属性。
- checked(prop: string): 绑定 checked 和 onChange 属性。
示例

class Form extends React.Component {
  binder = new Binder(this)
  state = {
    value: '',
    checked: ''
  }
  render() {
    return (
      <form>
        <input {...this.binder.value('value')} />
        <input type="checkbox" {...this.binder.checked('checked')} />
      </form>
    )
  }
}

# cloneDeep

import { cloneDeep } from '@bougiel/utils'

说明
递归拷贝 value，仅克隆可枚举属性。
类型

declare const cloneDeep: <T>(source: T) => T

参数
<T>(source: T): 要深拷贝的值。
返回
T: 返回拷贝后的值。
示例

const objects = [{ a: 1 }, { b: 2 }]
const deep = cloneDeep(objects)

assert.notStrictEqual(deep[0], objects[0])

# compose

import { compose } from '@bougiel/utils'

说明
组合多个函数。
类型

declare const compose: (...funcs: Function[]) => Function

参数
(...funcs: Function[]): 需要组合的函数。
返回
Function: 组合后的函数。
示例

compose(funcA, funcB, funcC)(...params)
// equal
funcA(funcB(funcC(...params)))

# dateFormat

import { dateFormat } from '@bougiel/utils'

说明
日期时间格式化。
类型

declare type TDate = string | number | Date
declare const dateFormat: (date: TDate, formatter: string) => string

参数
date: TDate: 日期字符串或时间戳或日期对象。
formatter: string: 格式化模板。
返回
string: 格式化结果。
示例

const formattedDate = dateFormat(1569888000000, 'yyyy/MM/dd hh:mm:ss')

assert.strictEqual(formattedDate, '2019/10/01 08:00:00')

# debounce

import { debounce } from '@bougiel/utils'

说明
防抖一个函数。
类型

declare const debounce: (func: Function, interval: number) => Function

参数
func: Function: 需要防抖的函数。
interval: number: 等待时间。
返回
Function: 防抖动的函数。
示例

window.addEventListener('resize', debounce(calcLayout, 200))

# EventEmitter Class1.1.0+

import { EventEmitter } from '@bougiel/utils'

说明
发布订阅事件中心。
类型

interface IInitialEvents {
  [name: string]: Function
}

构造器参数
initialEvents: IInitialEvents: 默认初始化事件。
实例方法
- on(name: string, func: Function): 添加一个事件监听，返回一个包含 remove 方法的对象。
- un(name: string): 删除一个监听。
- clear(): 删除所有监听。
- emit(name: string, ...params: any[]): 触发一个事件监听。
示例

const emitter = new EventEmitter({
  foo: (...params) => params,
  bar: (param) => param
})
assert.deepStrictEqual(emitter.emit('foo', 1, 2, 3), [1, 2, 3])

# get

import { get } from '@bougiel/utils'

说明
根据索引获取对象的值。
类型

declare const get: (obj: object, path: string | string[]) => any

参数
obj: object: 目标对象。
path: string | string[]: 索引字符串或数组。
返回
any: 需要获取的 value。
示例

const obj = [{ a: { b: [{ c: 1 }] } }]
const value1 = get(obj, '0.a.b.0.c')
const value2 = get(obj, ['0', 'a', 'b', '0', 'c'])

assert.ok(value1 === 1 && value2 === 1)

# isEqual

import { isEqual } from '@bougiel/utils'

说明
判断两个对象是否相等，仅对比可枚举属性。
类型

declare const isEqual: (source: any, target: any) => boolean

参数
source: any: 对象一。
target: any: 对象二。
返回
boolean: 是否相等。
示例

const obj1 = [{ a: { b: [{ c: 1 }] } }]
const obj2 = [{ a: { b: [{ c: 1 }] } }]

assert.ok(obj1 !== obj2)
assert.ok(isEqual(obj1, obj2))

# objectMerge 1.5.0+

同 webpackMerge

# ResizeObserve Class1.2.0+Dom

import { ResizeObserve } from '@bougiel/utils'

说明
窗口 resize 监听器，使用发布订阅模式仅设立一个监听器，优化性能。
构造器参数
delay: number: 防抖时间，默认为 300ms。
实例方法
- subscribe(func: Function): number: 订阅 resize 事件，func 回调值为当前窗口宽度，返回一个 subscribeId。
- unsubscribe(subscribeId: number): void: 根据 subscribeId 取消订阅。
示例

const resizeObserve = new ResizeObserve()

function App() {
  useEffect(() => {
    const subscribeId = resizeObserve.subscribe(handleWindowResize)
    return () => {
      resizeObserve.unsubscribe(subscribeId)
    }
  }, [])
  return <App />
}

# ResponsiveObserve Class1.2.0+Dom

import { ResponsiveObserve } from '@bougiel/utils'

说明
媒体查询器，使用 window.matchMedia 判断当前设备尺寸，采用发布订阅模式仅设立一个监听器，优化性能。
类型

interface IResponsiveMap {
  xs?: string
  sm?: string
  md?: string
  lg?: string
  xl?: string
  xxl?: string
}

构造器参数
responsiveMap: IResponsiveMap: 响应式尺寸。默认为：

const defaultResponsiveMap = {
  xs: '(max-width: 576px)',
  sm: '(min-wdth: 576px)',
  md: '(min-width: 768px)',
  lg: '(min-width: 992px)',
  xl: '(min-width: 1200px)',
  xxl: '(min-width: 1600px)'
}

实例方法
- subscribe(func: Function): number: 订阅设备尺寸变化事件，func 回调值为当前窗口尺寸类型，返回一个 subscribeId。
- unsubscribe(subscribeId: number): void: 根据 subscribeId 取消订阅。
示例

const responsiveObserve = new ResponsiveObserve()

function App() {
  useEffect(() => {
    const subscribeId = responsiveObserve.subscribe(handleWindowResize)
    return () => {
      responsiveObserve.unsubscribe(subscribeId)
    }
  }, [])
  return <App />
}

# ScrollObserve Class1.4.0+Dom

import { ScrollObserve } from '@bougiel/utils'

说明
元素滚动事件监听器，使用发布订阅模式仅设立一个监听器，优化性能。
构造器参数 _attachElement: Element | Document: 绑定事件的元素，默认为 document。 _delay: number_: 防抖时间，默认为 300ms。
实例方法
- subscribe(func: Function): number: 订阅 scroll 事件，func 回调值为当前事件绑定元素中滚动子元素的 scollTop。返回一个 subscribeId。
- unsubscribe(subscribeId: number): void: 根据 subscribeId 取消订阅。
示例

const scrollObserve = new ScrollObserve()

function App() {
  useEffect(() => {
    const subscribeId = scrollObserve.subscribe(handleDocumentScroll)
    return () => {
      scrollObserve.unsubscribe(subscribeId)
    }
  }, [])
  return <App />
}

# set

import { set } from '@bougiel/utils'

说明
设置深层对象 value。
类型

declare const set: (obj: object, path: string | string[], value: any) => void

参数
obj: object: 需要设置 value 的对象。
path: string | string[]: key 索引，为字符串时用.隔开。 value: any: 设置的 value 值。
返回
空
示例

const obj = [{ a: { b: [{ c: 1 }] } }]

set(obj, '0.a.b.0.c', 2)
assert.strictEqual(obj[0].a.b[0].c, 2)

set(obj, ['0', 'a', 'b', '0', 'c'], 3)
assert.strictEqual(obj[0].a.b[0].c, 3)

# throttle

import { throttle } from '@bougiel/utils'

说明
节流一个函数。
类型

declare const throttle: (func: Function, interval: number) => Function

参数
func: Function: 需要节流的函数。
interval: number: 多久时间执行一次。
返回
Function: 节流后的函数。
示例

window.addEventListener('resize', throttle(calcLayout, 200))

# webpackMerge

import { webpackMerge } from '@bougiel/utils'

WARNING

webpackMerge 会修改 base 对象。如果不想修改 base 对象，请先将 base 对象深克隆一份。

说明
合并两个对象。
类型

declare const webpackMerge: (base: object, extend: object) => {} & object

参数
base: object: 基础对象。
extend: object: 拓展对象。
返回
{} & object: 合并结果。
示例

const source = {
  a: {
    b: [1],
    c: 2
  },
  d: [3, 4],
  e: 5
}
const target = {
  a: {
    b: [1, 2],
    c: 2
  },
  d: [3, 4, 6],
  e: 5
}

// rewrite
const extend1 = {
  'a.b': [1, 2],
  d: [3, 4, 6]
}
assert.deepStrictEqual(webpackMerge(cloneDeep(source), extend1), target)

// update
const extend2 = {
  'a.b': (prev) => [...prev, 2],
  d: (prev) => [...prev, 6]
}
assert.deepStrictEqual(webpackMerge(cloneDeep(source), extend2), target)

← 写在前面更新日志 →