`@hyext/utils`

小程序业务开发工具库

Installation

$ npm i @hyext/utils -S

Usage

import { memory, createLogger, createSDKPolyfill  }  from '@hyext/utils'

下述的每个函数都可以参照上方import导入。

Summary

createLogger - 创建一个logger对象
createSDKPolyfill - 基于小程序SDK二次封装的SDK对象
createPromisfyFnWithCatch - Catch Promisy Func
once - once
throttle - 防抖
createPolling - 轮询
memory - 记忆函数
promiseTimeout - 超时promise
promiseRetry - 重试promise
isUndef (v: any): boolean - 判断值是否为undefined或null
isDef (v: any): boolean - 判断值不是undefined且不是null
isTrue (v: any): boolean - v === true
isFalse (v: any): boolean - v === false
isObject (v: any): boolean - 判断值是否是一个对象
isFunction (v: any): boolean - 判断值是否是一个函数
isArray (v: any): boolean - 判断值是否是一个数组
isPlainObject(v: any): boolean - 判断值是否是一个pure object
isRegExp (v: any): boolean - 判断值是否是一个RegExp
capitalize(v: string): string - 转首字母大写
camelize(v: string): string - 转驼峰
hyphenate(v: string): string - 转连字：xxA -> xx-a
toNumber (val: string): number | string - 尝试将val转成number，失败则返回原字符串
toString (val: any): string - 将任意值转成一个字符串
second2Minute (seconds: number): string - 秒转成mm:ss
delay (duration: number): Promise - 延迟
getTime(date:Date): string - date实例转成hh:mm:ss
patchNumber(v: number): string - 数字补0
second2Minute(seconds: number): string - 秒转·mm:ss·
limit(v: string|number): string - 收缩范围，1 - +00 -> 1 - 99+
isWebViewEnv() - 是否在webview环境。
scalePxOnWebView(px: number, base: number = 750) - 在 webview 环境中使用 scalePx 接口。

模块类

createLogger

createLogger(options: CreateLoggerOptions) - 创建一个logger对象
logger.log(msg: string, data: any) - 默认输出绿色字体的log
logger.info(msg: string, data: any) - 默认输出蓝色字体的log
logger.warn(msg: string, data: any) - 默认输出黄色字体的log
logger.error(msg: string, data: any) - 默认输出红色字体的log

入参解析

type CreateLoggerOptions = {
  onBefore?: (logInfo: LogInfo) => void // log之前触发，传入一个LogInfo
  onAfter?: (logInfo: LogInfo) => void // log之后触发，传入一个LogInfo
  prefix?: (() => string) | string // 打印日志前缀
  logColor?: LogColor // 每个接口的字体颜色配置
  enableLog?: boolean | ((logInfo: LogInfo) => boolean) // 是否打印原生log，传入一个LogInfo
}

type LogInfo = {
  prefix: string // CreateLoggerOptions.prefix中获取
  msg: string // logger接口传入的msg
  data: any // logger接口传入的data
  desc: string // desc = prefix + msg
}

type LogColor = {
  info?: string // 颜色，可以是颜色英文或hex： 例如：red, #cccccc
  warn?: string
  error?: string
  log?: string
}

Demo

// create
const logger = createLogger({
  onAfter(logInfo) {
    global.hyext.logger.log(logInfo.desc + ' ' + JSON.stringify(logInfo.data))
  },
  prefix () {
    return `miniappName * date:${Date.now()} uid: ${uid} sessionId:${sessionId} -`
  },
  enableLog(logInfo) {
    // 例如我们在APP只通过onAfter钩子打印sdk的log,
    // 禁止打印原生log，提高性能
    if (platform !== 'web') return false 
    return true
  }
})


// call
logger.log('oh my god~')

createSDKPolyfill

createSDKPolyfill(options: SDKPolyfillOptions) - 基于小程序SDK二次封装的SDK对象，补丁了错误的catch，可控制其接口的call，resolve, reject

参数解析

type SDKPolyfillOptions = {
  paths: string[] // 接口访问路径队列，例如： hyExt.advance.sendWup -> paths => ['advance.sendWup']
  SDK: SDKModel // 传入global.hyExt
  onError?: (errMsg: string, apiName: string, path: string) => void // SDK调用失败时 触发
  onCall?: (calledArgs: Array<any>, apiName: string, path: string) => void // SDK调用时 触发
  onSuccess?: (res: any, apiName: string, path: string) => void // SDK调用成功时 触发
}

type SDKModel = {
  [key: string]: any
}

Demo

// 与logger配合使用的例子，甩锅神器
const ployfillSDK = createSDKPolyfill({
  SDK: global.hyExt,
  paths: [
    'advance.sendWup'
  ],
  onCall(callArgs, apiName, path) {
    logger.log(`SDK.${path}开始调用`, callArgs)
  },
  onError(errMsg, apiName, path) {
    logger.log(`SDK.${path}调用失败`, errMsg)
  },
  onSuccess(res, apiName, path) {
    logger.log(`SDK.${path}调用成功`, res)
  },
  onPolyfill(polyfillSDK, apiName, apiFN) {
    // 补丁前触发, 可以拦截sdk进行二次处理。
    polyfillSDK[apiName] = jest.fn(apiFN)
  }
})

// ployfillSDK的每个接口只会resolve，因为内部已被catch错误，发生错误res是false
ployfillSDK.sendWup(options).then((res) => {
  if (!res) return; // 发生错误就跳过了

  // do something
})

高阶函数类

getSetModeWithQueueFn

背景: 小程序SDK原来的setMode方法, resolve后小程序马上会被显示. 但是在新版APP上, setMode resolve 并不表示马上会显示, 而是会在恰当的时候通过 hyExt.popup.onNoticeShow 通知小程序. 这个变更会给部分小程序带来影响, 比如你要10秒后关闭浮窗, 并不能在调用setMode之后开始倒计时, 而是在 onNoticeShow 回调中开始倒计时.

本函数封装了SDK中的以下方法:

setMode
onNoticeShow/offNoticeShow
onNoticeHide/offNoticeHide

getSetModeWithQueueFn 每次调用都会取消监听 noticeShow/noticeHide 事件, 再重新进行监听. 调用后返回 setModeWithQueue 函数

setModeWithQueue 函数是对setMode的封装, 用于支持 notice 排队.

对比setMode, 添加两个额外的参数:

onShow: 如果当前mode是NOTICE, 那么当收到终端的展示事件时, 会调用这个函数. 如果当前mode不是NOTICE, 则在 setMode resolve 后调用这个函数
onNoticeHide: 当notice超时被终端隐藏, 或者调用了setMode 切换到非NOTICE模式时 , 会调用这个函数.

setModeWithQueue 兼容性:

可以兼容老版本APP, 在老版本APP上和原始的 setMode 方式行为一致
可以兼容不同的mode, 'NOTICE'/'NORMAL'/'RIGHT_BOTTOM_BTN'

Demo

const setModeWithQueue = getSetModeWithQueueFn(msg => console.log(msg))

const App = () => {
  // 收到推送后才显示notice
  const dataPush = useMainSelector(s => s.dataPush)
  const [didShow, setShow] = useState(false)

  useEffect(() => {
    setModeWithQueue({ mode: dataPush ? 'NOTICE' : 'NORMAL' }, onShow: () => {console.log('show')})
  }, [dataPush])

  if (!dataPush) return null

  return (
    <View>
      <Text>我迟早会显示</Text>
    </View>
  )
}

参数

export function getSetModeWithQueueFn(logger: (msg: string) => void): SetModeWithQueueFn;

type SetModeWithQueueFn = (params: {
  mode: string,
  onShow?: Callback,
  onNoticeHide?: Callback,
  showTime?: number, // 期望展示的时间
  liveroomPopupKey?: string,
  waitAfterResetNormal?: number, // 重置为NORMAL后, 等待多久才调用setMode设置其他值, 默认800ms
  skipResetNormal?: boolean, // 是否跳过重置为NORMAL, 默认false
} & { [key: string]: any }) // 其他需要透传给hyExt.popup.setMode的参数
=> Promise<any>

createPromisfyFnWithCatch

createPromisfyFnWithCatch(options: PromisfyFnWithCatchOptions) - hack一个promisfy函数的Pending、Resolve、Reject过程，返回一个新promisfy函数。

参数解析

type PromisfyFn<T, U> = (...args: Array<T>) => Promise<U>

type PromisfyFnWithCatchOptions = {
  executePromiseFn: PromisfyFn<any, any>,
  onPending?: (callArgs: Array<any>) => void
  onResolve?: (response: any) => void
  onReject?: (error: Error) => void
}

Demo

// __tests__/func.test.ts
const mockFn = createMockFn(() => Promise.resolve({b: 'bar'}))
const mockCall = { a: 'foo' }

const fn = createPromisfyFnWithCatch({
  executePromiseFn: mockFn,
  onPending(args: any) {
    expect(args[0]).toBe(mockCall)
  },
  onResolve(res: any) {
    expect(res).toMatchObject({b: 'bar'})
  }
})

fn(mockCall).then((res) => {
  expect(res).toBeTruthy()
  expect(mockFn.mock.calls.length).toBe(1)
  done()
})

once

once(fn) - 返回一个cache函数，缓存fn首次调用的结果，fn只会执行一次。

// __tests__/func.test.ts
const mockFn = createMockFn(() => true)
const mockFnOnce = once(mockFn)

const result1 = mockFnOnce()
const result2 = mockFnOnce()

expect(mockFn.mock.calls.length).toBe(1)
expect(result1 === result2).toBe(true)

createPolling

createPolling(options: PollingOptions) - 返回一个轮询函数

参数解析

type PollingOptions = {
  intervalTime: number // 轮询周期。
  fn: (...args:  Array<any>) => boolean // 执行函数，返回一个是否继续轮询的标记，true代表继续，false代表结束。
  immediately?: boolean // 默认是true, 轮询函数调用就马上执行fn；false，要等到intervalTime时间到达时执行fn。
  onEnd?: NormalFn // 轮询结束时调用。
}

Demo

// __tests__/func.test.ts
let callCount = 0
const mockFn = createMockFn((res: any) => {
  expect(res).toBe(1)
  callCount += 1
  return callCount > 1 ? false : true
})

const pollingFn = createPolling({
  intervalTime: 500,
  fn: mockFn,
  onEnd() {
    expect(callCount).toBe(2)
    done()
  }
})

pollingFn(1)

throttle

throttle(delay: number, fn: NormalFn) - 返回一个防抖函数， delay代表延时触发的时间，fn代表执行函数

Demo

// __tests__/func.test.ts
const mockFn = createMockFn((res:any) => {
  expect(res).toBe(1)
  expect(mockFn.mock.calls.length).toBe(1)
  done()
})
const throttleFn =  throttle(1000, mockFn)

throttleFn(1)
throttleFn(1)

memory

memory(fn) - 返回一个缓存每次调用的结果并输出结果的函数，fn代表纯函数，入参成员必须是 number | string, 输出可以是any。

Demo

// __tests__/func.test.ts
const mockFn = createMockFn((str: string, num: number) => {
    return str + num
  })
  const cacheFn = memory<[string, number], string>(mockFn)
  const result1 = cacheFn('alex', 1)
  const result2 = cacheFn('alex', 1)
  expect(result1 === result2).toBe(true)
  expect(mockFn.mock.calls.length).toBe(1)
})

Promise风格函数

promiseTimeout

promiseTimeout(ms: number, promise: Promise) - 返回一个promise，超时会reject一个超时字符串。

Demo

it('promiseTimeout pass', (done) => {
  const passPromise = createDelayPromise(200);
  promiseTimeout(500, passPromise).then((res) => {
    expect(res).toBe(true)
    done()
  }).catch(done)
})

 it('promiseTimeout timeout', (done) => {
    const failPromise = createDelayPromise(200);
    const timeout = 100
    promiseTimeout(timeout, failPromise).catch((err) => {
      expect(err).toMatch(`Timed out in ${timeout}ms.`)
      done()
    })
  })

promiseRetry

promiseTimeout(maxExeCount: number, interval: number, cb: RetryHandleCallback) - 返回一个promise，超过调用数会reject一个错误。

参数解析

type RetryResult = { 
  isDone: boolean
  payload: any
}

type RetryHandleCallback = (currExeCount: number) => Promise<RetryResult>

Demo

 it('retry resolve', (done) => {
    const fn = jest.fn(async (count) => {
      return {
        isDone: count === 3 ? true : false,
        payload: { foo: 'bar' }
      }
    })

    const promise = promiseRetry(3, 100, fn)
    promise.then((payload) => {
      expect(fn).toBeCalledTimes(3)
      expect(payload).toMatchObject({ foo: 'bar' })
      done()
    }).catch(done)
  })

@hyext/utils

@hyext/utils

Installation

Usage

Summary

模块类

createLogger

入参解析

Demo

createSDKPolyfill

参数解析

Demo

高阶函数类

getSetModeWithQueueFn

Demo

参数

createPromisfyFnWithCatch

参数解析

Demo

once

createPolling

参数解析

Demo

throttle

Demo

memory

Demo

Promise风格函数

promiseTimeout

Demo

promiseRetry

参数解析

Demo

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

`@hyext/utils`

Weekly Downloads