npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pps-tools

v1.0.9

Published

common methods

Downloads

1

Readme

pps-tools

Project setup

yarn

Run your tests

npm run test

使用

yarn add pps-tools -D

工作中常用的函数方法

接口请求

# import { Api,HTTP_METHODS,ApiConfig,HTTP_BODY_TYPES } from 'pps-tools/http'
# 接口返回格式规定为
# 可根据后台返回的(code且errno不存在)或者(res.data.code或res.data.success)等于后台定义的成功标识则表示请求成功

# 使用
const ppsApi = new api()
# ppsApi.setOptions(opt) // 可自行配置基础的请求设置,详细查看ApiConfig接口定义
# PPSApi.httpErrorHandle = message => {
#  ElMessage.error(message)
# } 自定义报错处理
function test () {
    return ppsApi.send({
      mock: {
        code: 200,
        data: {
          name: '1'
        },
        message: 'ene'
      }, # 可自行mock,不需要则注释即可请求后台接口
      url: '/api/system/upload-attachments/{id}', # 后台接口
      params, # 请求参数,会自动过滤url中携带的id
      method: HTTP_METHODS.POST, # 请求方法
      bodyType: HTTP_BODY_TYPES.FORM_DATA, # 请求body体
      errorText: '新增失败' # 报错前台在后台无message自定义的提示信息
    })
  }
const [res,rej] = await test1()
# 会自动进行错误信息toast
console.log(res) # 正确返回的数据
console.log(rej) # 失败返回的数据 需要进行特殊的报错处理

数组去重

# import ArrayOnly from 'pps-tools/array_only'
# 此方法也可以使用lodash相关数组去重方法。
# 场景: 数据唯一性处理,可处理普通数据和数组对象
const data = [{name: '章三',age: 12},{name: '李四',age: 12}, 3, 3, 4, NaN, 0,undefined, false, null,null, '']
const result = [{name: '章三',age: 12}, 3, 4, NaN, 0,undefined, false, null,'']
const res = ArrayOnly(data,['age'])
res = result
const result1 = [{name: '章三',age: 12},{name: '李四',age: 12}, 3, 4, NaN, 0,undefined, false, null,'']
const res1 = ArrayOnly(data)
res1 = result1

颜色值判定

# import IsColor from 'pps-tools/color'
# 场景: 当前值是否为颜色值
IsColor('#343434') # true
IsColor('rgb(123,123,3)') # true
IsColor('rgba(123,123,3, 1)') # true
IsColor('1') # false

运行环境判定

# import Environ from 'pps-tools/Environment'
# 场景: 当前运行环境
Environ('applets') # applets 微信小程序
Environ('weChat') # weChat 微信公众号
Environ('app') # ios/android/pc/''
Environ('pc') # ie/opera/safari/chrome/firefox/''

金额格式化

# import FormatAmount from 'pps-tools/format_amount'
# 场景:处理金额的格式
/** 格式化数据
 * @param num 原数据 12323
 * @param { isDecimal = true }是否取自定义的定制的小数位
 * @param { decimals = 2 } 最低保留小数位数 默认 2 位
 * @param { decPoint = '.' } 小数位符号 默认 .
 * @param { thousandsSep = ',' } 前分位符号 默认 ,
 * @param { isRound = false } 是否需要四舍五入 默认 false
 * @returns 格式化后的数据 "12,323.00"
 */
FormatAmount({ num: '12345.567' }) # 12,345.56
FormatAmount({ num: '12', isDecimal: false, decimals: 0 }) # 12
FormatAmount({ num: null }) # 0.00

数子百分比格式化

# import FormatPercent from 'pps-tools/format_percent'
# 场景: 需要对数据进行百分比化
/** 格式数据为百分比
 * @param num 原数据 0.122 (此处数据是需要乘以100的数据)
 * @param { isDecimal = true } 是否取自定义的定制的小数位
 * @param { decimals = 2 } 最低保留小数位数
 * @param { isRound = false } 是否四舍五入
 * @returns 返回百分比的数据 12.20%
 */
FormatPercent({ num: 0.124567 }) # 12.45%
FormatPercent({ num: 0.10,isDecimals: false, isRound: true }) # 10%
FormatPercent({ num: null }) # 0.00%

数据处理

# import { FilterApiData, SetData, getLabelWithList } from 'pps-tools/format_data'
# 场景:需要对后台给予的数据处理成想要的类型或者显示的定义格式
/** FilterApiData
 * 对后台返回的数据二次处理,可默认填充,可加前后缀
 * @param opt  参数
 * obj原数据, key需处理的字段key, defaultFill无值默认填充的, type数据区分日期类型, prefix,suffix前后缀
 * @returns 最终处理后的新数据
 */
 /**SetData
 * 解决后台返回数据类型跟前台定义不一致导致前台报错问题
 * 初始化数据为前台定义的数据类型
 * @param apiData 后台接口返回的数据
 * @param target 前台定义的数据
 */
 /**getLabelWithList
 * 通过 value 取对应的 name
 * @param params
 * getLabelWithList({target: [{sex:1, label: '章三'},{sex:2, label: '章三岁'}], key: 'sex', value: 1})
 * 章三
 */
const data = {
    name: [],
    body: {}
}
const form = {
    name: null,
    date: '2020/09/09',
    body: null,
    info: {
      age: 12,
      sex: null,
      from: '中国',
      img: []
    }
}
const labelData = [
    {name: '章三', age: 23},
    {name: '李四', age: 233},
]

FilterApiData({ target: form.info, key: 'age', suffix: '岁' }) # 12岁
FilterApiData({ target: form.info, key: 'img', type: 'normal'}) # []
FilterApiData({ target: form.info, key: 'from', prefix: '来自' }) # 来自中国
{ target: form, key: 'date', type: 'date', format: 'yyyy年MM月dd日' })
SetData(form, data) # {name: [], body: {}}
getLabelWithList({ target: labelData, key: 'age', value: 23, labelKey: 'name' }) # 章三
getLabelWithList({ target: labelData, key: 'age', value: [23,233], labelKey: 'name',connectStr: '/' }) # 章三/李四

日期格式化

# import { GetTimeText, FormatDate } from 'pps-tools/format_date'
# 日期格式化全能函数方法可使用dayjs
# 场景: 日期格式化
FormatDate('2020-09-09') # 2020-09-09
FormatDate('2020-09-09','yyyy年MM月dd日 hh时mm分ss秒') # 2020年09月09日 08时00分00秒
GetTimeText()  # 上午好/下午好/晚上好

中文转拼音

# import PY from 'pps-tools/pinyin'
# 场景:需要将中文转成拼音
/**
 * @typedef Option
 * @type Object
 * @property {Boolean} [checkPolyphone=false] 是否检查多音字
 * @property {Number} [charCase='titlecase'] 输出拼音的大小写模式,titlecase-首字母大写;lowercase-全小写;uppercase-全大写
 */
PY({str: '章三'}) # Zhangsan
PY({opt: {charCase: 'lowercase'}, str: '章三'}) # zhangsan
PY({str: '章三', isFull: false}) # ZS

随机字符

# import RandomString from 'pps-tools/random'
/** 生成随机字符串
 * @param n 随机生成位数
 * @param type 随机生成的参数类型,letter 只生成字母, number 只生成数字, all 包含字母数字
 * @param repeat 是否可重复
 * @returns 随机生成的指定位数的字符串
 */
console.log('16位随机不可重复字符)'+ RandomString(16,'all',false))
console.log('32位随机可重复字符'+ RandomString())
console.log('3位随机可重复数字'+ RandomString(3,'number'))
console.log('3位随机可重复字母'+ RandomString(3,'letter'))

中文名字分割成姓和名

import SplitName from 'pps-tools/split_name'
SplitName('张三') # {lastName: '张', firstName: '三'}
SplitName('慕容云海') # {lastName: '慕容', firstName: '云海'}
SplitName('林郑月娥') # {lastName: '林', firstName: '郑月娥'}

sotrage缓存数据

import { GetStorage, SetStorage, RemoveStorage } from 'pps-tools/storage'
# 场景: 缓存的存储和取值需要处理
GetStorage('key') # null
SetStorage('result', {name: '章三'})
GetStorage('result') # {name: '章三'}
RemoveStorage('result')
RemoveStorage('',true)