资讯专栏INFORMATION COLUMN

utilscoreJS 前端业务代码工具库(不定时更新)

Kosmos / 629人阅读

摘要:前端业务代码工具库不定时更新目的高效率完成前端业务代码业务开发过程中,会经常用到扩展方法浏览器类型判断表单验证常用方法等常用函数,为避免不同项目多次复制粘贴的麻烦,这里统一封装,并发布到,以提高开发效率。

utilscoreJS

前端业务代码工具库(不定时更新)

目的:高效率完成前端业务代码

业务开发过程中,会经常用到String,Number,Array,Object,Function,Date扩展方法浏览器类型判断base64表单验证url常用方法等常用函数,为避免不同项目多次复制粘贴的麻烦,这里统一封装,并发布到npm,以提高开发效率。如果你也有常用的代码,欢迎为本项目提交pr.

安装使用

直接下载dist目录下的index.js使用,支持UMD,CMD,AMD各模块化规范。

使用npm/yarn/cnpm安装。

浏览器:


npm
$ npm i utilscore
yarn
$ yarn add utilscore
cnpm
$ cnpm i utilscore

React、VueJS,小程序等javascript环境

// 完整引入
import utilscore from "utilscore"
let txt = utilscore.mask("12398765432",3,7) 
console.log(txt) // => "123****5432"

推荐使用方法

你真的不需要完整引入所有函数,所以只引入需要使用的方法即可。

import { mask } from "utilscore"
let txt = mask("12398765432",3,7) 
console.log(txt) // => "123****5432"
API文档
Object

deepClone 深度克隆。

orderBy 返回按属性(props)和顺序(orders)排序的对象数组,用于数据排序。

findPathByLeafId 根据 key 递归查找链带关系。

Array

uniqueBy 根据属性去重数组。

unique 普通数组去重。

maxNumBy 找出数组中该属性最大值的一列。

minNumBy 找出数组中该属性最小值的一列。

maxNum 数组中的最大值。

mixNum 数组中的最小值。

Date

formatTime 格式化时间。

formatHMS 将秒数转为 xx小时xx分钟xx秒 例如1h0m10s。

Function

debounceStart 函数防抖 (立即执行版)。

debounceEnd 函数防抖 (非立即执行版)。

debounce 函数防抖 (完全版)。

throttle 函数节流

String

mask 根据位置,使用 * 遮蔽字符串。

maskLeft 从位置左边开始,使用 * 遮蔽字符串。

maskRight 从位置右边开始,使用 * 遮蔽字符串。

randomHexColorCode 生成一个随机的十六进制颜色代码。

getCounts 返回元素出现的次数。

uuid 全局唯一标识符 UUID

guid GUID:128位的数字标识符

Number

randomNum 返回指定范围内的随机整数。

round 将数字四舍五入到指定的小数位数。

sum 返回两个或两个以上数字/数字数组中元素之和。

sumBy 根据函数映射每个元素,然后返回数组的和。

toDecimalMark 将数字转化为千分位格式,将数字转化为千分位格式,可以在数字前面加上符号。

TypeOf

isNull 判断类型Null。

isUndefined 判断类型Undefined。

isBoolean 判断类型Boolean。

isNumber 判断类型Number。

isString 判断类型String。

isSymbol 判断类型Symbol。

isObject 判断类型Object。

isRegExp 判断类型RegExp。

isArray 判断类型Array。

isFunction 判断类型Function。

getType 获取类型,全能型的typeOf。

url

insertUrl 根据对象中的参数匹配插入到url中。

URLSearchParams url 序列化和反序列化。

Url 返回网址的相关信息,模拟了 浏览器的 new URL(urlString) 部分功能

validator

graceChecker 表单验证。

base64

encode base64加密。

decode base64解密。

prototype

match_all 扩展 String的原型方法 es2019的matchAll(未兼容浏览器)。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109575.html

相关文章

  • 从零到百亿互联网金融架构发展史

    摘要:总体介绍在互联网金融行业一百多亿其实也算不上大平台,也就是二级阵营吧,其实每次的架构升级都是随着业务重大推进而伴随的,在前一代系统架构上遇到的问题,业务开发过程中积累一些优秀的开发案例,在下一代系统开发中就会大力推进架构升级。 回想起从公司成立敲出的第一行代码算起到现在也快三年了,平台的技术架构,技术体系也算是经历了四次比较重大的升级转化(目前第四代架构体系正在进行中),临近年底也想抽...

    mrcode 评论0 收藏0
  • 从零到百亿互联网金融架构发展史

    摘要:总体介绍在互联网金融行业一百多亿其实也算不上大平台,也就是二级阵营吧,其实每次的架构升级都是随着业务重大推进而伴随的,在前一代系统架构上遇到的问题,业务开发过程中积累一些优秀的开发案例,在下一代系统开发中就会大力推进架构升级。 回想起从公司成立敲出的第一行代码算起到现在也快三年了,平台的技术架构,技术体系也算是经历了四次比较重大的升级转化(目前第四代架构体系正在进行中),临近年底也想抽...

    U2FsdGVkX1x 评论0 收藏0
  • 如何工程化开发大型angular2项目(上篇)

    摘要:首先我们得有一个主心库,这个库十分重要,里面没有业务逻辑的代码,主要是平时开发时所需要的所有脚本,以及的一些基本依赖。创建衍生库因为我们所有项目围绕主心库而衍生出来的,所以衍生库和主心库的关心和关系一致。 如何工程化开发大型angular2项目(上篇) 前请提要 目前前端项目越来越复杂,管理一个前端项目需要考虑的方面越来越多,例如工具选择、项目构建、代码自动review工具、代码打包上...

    codeKK 评论0 收藏0
  • 大话后端开发的奇淫技巧大集合

    摘要:,大家好,很荣幸有这个机会可以通过写博文的方式,把这些年在后端开发过程中总结沉淀下来的经验和设计思路分享出来模块化设计根据业务场景,将业务抽离成独立模块,对外通过接口提供服务,减少系统复杂度和耦合度,实现可复用,易维护,易拓展项目中实践例子 Hi,大家好,很荣幸有这个机会可以通过写博文的方式,把这些年在后端开发过程中总结沉淀下来的经验和设计思路分享出来 模块化设计 根据业务场景,将业务...

    CloudwiseAPM 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<