这个项目是基于个人兴趣所写的一个个人认为比较实用的代码库,收录了一些日常开发中比较常用的功能代码,通过使用这个工具库可以节省一些写工具函数的时间。
如果你想为这个项目做贡献,请参考一下说明:
尤其是在你写代码之前,请注意仔细阅读提交代码所要注意的事项。
此外,如果你有任何好的想法,欢迎在 issues 发布新的 issues。如果你想提供好的意见,增加实用的新功能,可以在已有的 New Features 下面留言。
首先,拷贝代码到本地:
$ git clone https://github.com/zhongdeming428/Jerry.git
然后切换文件夹、安装依赖:
$ cd Jerry && npm i
然后就可以通过运行 npm 脚本开始构建:
$ npm run build
另外,通过 npm run test
可以运行所有测试案例,通过 npm run eslint
可以检测代码风格是否符合规范。
使用 Jerry 的方式有两种,一是通过 script
标签引入,二是通过 npm
安装。
引入标签可以通过 unpkg 提供的 CDN 服务。
通过 unpkg 引入的话,只能通过 Jerry 这个变量来使用:
Jerry.isNumber(12); //true
当然,你可以把 Jerry 赋值给简短的符号:
const $ = window.Jerry;
npm 安装:
$ npm i jerrytools -S
使用的时候,通过 import
或者 require
引入就好了:
const $ = require('jerrytools');
// 或者 import $ from 'jerrytools';
// 然后就可以开始使用啦!
$.isNumber(123);
当然也可以通过如下方式使用,这样就可以把第一个参数构造为一个 Jerry 对象,在某些时候可以进行链式调用。
$(123).isNumber(); // true
以下代码的前提是已经引入了
repeat
将指定字符串重复 n 次
@param {String} str 要重复的字符串
@param {Number} num 要重复的次数
返回新字符串
使用示例:
$.repeat('abc', 2); // 'abcabc'
$('123').repeat(3); // '123123123'
insertStr
对指定字符串从尾部开始按一定间隔插入指定字符
@param {String} str 被处理的字符串
@param {String} notation 要插入的符号
@param {Number} distance 每隔几个字符插入
返回新的字符串
使用示例:
$.insertStr('13873788888', '-', '4'); // 138-7378-8888
$('13873788888').insertStr('-', 4); // 138-7378-8888
trimLeft
去除字符串左侧的空白
@param {String} str 要处理的字符串
返回新的字符串
使用示例:
$.trimLeft(' 123'); // '123'
$.trimLeft('\r\n\t123'); // '123'
trimRight
去除字符串右侧的空白
@param {String} str 要处理的字符串
返回新的字符串
使用示例请参考 trimLeft
。
trim
去除字符串两侧的空白
@param {String} str 要处理的字符串
返回新的字符串
使用示例请参考 trimLeft
。
toPsw
将字符串密码化,可以充当某些输入框的过滤器
@param {String} str 要转化的字符串
返回密码化后的字符串
使用实例:
$.toPsw('abc123'); // '******'
getUrlParam
解析出 URL 中的对应参数
@param {String} url URL 字符串
@param {String} key 参数名
使用示例:
$.getUrlParam('http://www.baidu.com/?name=test', 'name') // 'test'
setUrlParam
根据传入的对象的键值对构造一个 URL 参数字符串
@param {Object} obj 包含参数键值对的对象
使用示例:
$.setUrlParam({name: 'test', age: 12}); // 'name=test&age=12'
curStr
将字符串按指定间隔切割,返回字符串数组
@param {String} str 要切割的字符串
@param {Number} distance 切割间距,表示每隔几个字符切割
@param {Number} direction 切割方向 1 为正序切割,-1 为逆序切割,默认为 1,即正向切割
使用示例:
$.cutStr('abc', 1, 1); // ['a', 'b', 'c']
$.cutStr('abc', 2, 1); // ['ab', 'c']
$.cutStr('abc', 2, -1); // ['a', 'bc']
truncate
按指定长度截断字符串,多余部分用省略号代替
@param {String} str 要截断的字符串
@param {Number} len 留下的长度
使用示例:
$.truncate('123', 2); // '12……'
$.truncate('SJFDSKHGNVNJFKLkjsfdlkjdskgsdoiewjgkds', 12); // 'SJFDSKHGNVNJ……'
mask
按指定格式遮掩字符串的部分字符
@param {String} str 要遮掩的字符串
@param {String} format 指定遮掩格式的字符串,与 str 等长,'*' 为遮掩符,不传值时遮盖 str 的所有字符
使用示例:
$.mask('123', '2*2'); // '1*3'
$.mask('19828288282', '111****1111'); // '198****8282'
randomColor
返回随机颜色字符串
@param {Boolean} isRGB 是否返回 rgb 字符串,默认为否
使用示例:
$.randomColor(true); // 'rag(12, 23, 238)'
$.randomColor(); // '#d23f18'
reverseStr
反转字符串
使用示例:
$.reverseStr('abc'); // 'cba'
$.reverseStr('123'); // '321'
capitalize
字符串首字母大写
@param {String} param0 要转换的字符串
@param {Boolean} lowerRest 是否将首字母外的字母全部转化为小写
使用示例:
$.capitalize('abC'); // 'AbC'
capitalizeEveryWord
所有单词首字母大写
使用示例:
$.capitalizeEveryWord('abc def'); // 'Abc Def'
$.capitalizeEveryWord('hello world'); // 'Hello World'
escapeHTML
对 HTML 字符转义
使用案例:
$.escapeHTML("<h1>'Hello'</h2>"); // '<h1>'Hello'</h2>'
$.escapeHTML("<h1>'Hello' & " + 'world"</h2>'); // '<h1>'Hello' & world"</h2>'
unescapeHTML
对 HTML 转义字符进行还原
使用案例:
$.unescapeHTML("<h1>'Hello'</h2>"); // "<h1>'Hello'</h2>"
$.unescapeHTML("<h1>'Hello' & world"</h2>"); // "<h1>'Hello' & " + 'world"</h2>'
fromCamelCase
将驼峰字符串转化为用指定间隔符隔开的字符串
@param {String} str 驼峰风格的字符串
@param {String} delimeter 间隔符,默认为"_"
使用示例:
$.fromCamelCase('fromCamelCase'); // 'from_camel_case'
$.fromCamelCase('getFullYear', '-'); // 'get-full-year'
isAnagram
判断两字符串是否是同字母异序字符串,忽略大小写
使用示例:
$.isAnagram('fromCamelCase', 'camelfromcase'); // true
$.isAnagram('isModuleNamed', 'moduleISnamed'); // true
camelize
将字符串转化为驼峰风格
使用示例:
$.camelize('grid-container'); // 'gridContainer'
$.camelize('css_style_name'); // 'cssStyleName'
$.camelize('hello world test'); // 'helloWorldTest'
$.camelize('underscore_name-style_mix'); // 'underscoreNameStyleMix'
dasherize
将字符串转化为连字符风格
使用示例:
$.dasherize('gridContainer'); // 'grid-container'
$.dasherize('cssStyleName'); // 'css-style-name'
$.dasherize('hello_world_test'); // 'hello-world-test'
$.dasherize('underscore_nameStyle_mix'); // 'underscore-name-style-mix'
underscored
将字符串转化为下划线风格
使用示例:
$.underscored('gridContainer'); // 'grid_container'
$.underscored('cssStyleName'); // 'css_style_name'
$.underscored('hello-world-test'); // 'hello_world_test'
$.underscored('underscore nameStyle-mix'); // 'underscore_name_style_mix'
add
不损失精度的加法函数,支持多个参数相加
使用示例:
$.add(0.1, 0.2); // 0.3
$.add(1, 2, 3, 4); // 10
sub
不损失精度的减法函数,支持多参数相减
使用示例:
$.sub(0.54, 0.19); // 0.35
$.sub(0.5, 0.1, 0.1); // 0.3
mul
不损失精度的乘法,支持多参数相乘
使用示例:
$.mul(1, 2, 3); // 6
$.mul(0.55, 100); // 55
div
不损失精度的除法,支持多参数相除
使用示例:
$.div(100, 2, 5); // 10
factorial
阶乘函数,支持计算非负整数的阶乘
@param {Number} num 一个非负整数
使用示例:
$.factorial(5); // 120
toCurrency
将数字进行千分位格式化,可以指定金币符号
@param {Number} num 要转化的数字
@param {String} notation 货币的符号,默认是‘¥’
@param {Number} precision 转化精度,默认为 2
返回格式化后的金额字符串
使用示例:
$.toCurrency(9818.9); // '¥9,818.90'
$.toCurrency(9818.9, '$', 3); // '$9,818.900'
toChineseAmount
将金额数字转化为大写汉字金额字符串
@param {Number} num 要转化的金额数字
使用示例:
$.toChineseAmount(0.12); // '壹角贰分'
$.toChineseAmount(316.09); // '叁佰壹拾陆圆零玖分'
toPhoneNumber
将 7 位或者 11 位的数字转化为电话格式的字符串
@param {Number} num 要转化的数字
使用示例:
$.toPhoneNumber(12345678998); // '123-4567-8998'
$.toPhoneNumber(8861792); // '8861-792'
toDate
将 8 位数字转化为日期格式的字符串
@param {Number} num 要转化的数字
@param {String} delimeter 指定分隔符
使用示例:
$.toDate(20181212, '-'); // '2018-12-12'
$.toDate(20181212, '/'); // '2018/12/12'
randomInt
返回指定区间的随机整数,左闭右闭,即返回结果位于 [start, end]
@param {Number} start 最小值
@param {Number} end 最大值
使用示例:
$.randomInt(5, 7); // 5 or 6 or 7
dateAdd
计算给定日期在给定天数之后的日期
@param {Date} date 基准日期
@param {Number} days 后延天数
使用示例:
$.dateAdd(new Date(), 20); // Fri Jan 11 2019 12:37:21 GMT+0800 (中国标准时间)
dateSub
计算给定日期在给定天数之前的日期
@param {Date} date 基准日期
@param {Number} days 提前天数
使用示例:
$.dateSub(new Date(), 20); // Sun Dec 02 2018 12:38:51 GMT+0800 (中国标准时间)
getDatePeriod
获取当前日期所在月的第一天的日期
使用示例:
$.getDatePeriod(new Date('2018-12-10'), new Date('2018-12-20')); // 10
getFirstDateInMonth
获取当前日期所在月的第一天的日期
使用示例:
$.getFirstDateInMonth(new Date('2018-12-12')); // Sat Dec 01 2018 00:00:00 GMT+0800 (中国标准时间)
getLastDateInMonth
计算当前日期所在月的最后一天
使用示例:
$.getLastDateInMonth(new Date(2018, 11, 12)); // Mon Dec 31 2018 00:00:00 GMT+0800 (中国标准时间)
getDaysInMonth
计算当前日期所在月的天数
使用示例:
$.getDaysInMonth(new Date('2018-12-12')); // 31
isLeapYear
判断当前日期所在年是否是闰年
使用示例:
$.isLeapYear(new Date('2018-12-12')); // false
$.isLeapYear(new Date('2016-12-12')); // true
getFirstDateInQuarter
获取当前日期所在季度的第一天
使用示例:
$.getFirstDateInQuarter(new Date(2018, 1, 12)); // Mon Jan 01 2018 00:00:00 GMT+0800 (中国标准时间)
getLastDateInQuarter
获取当前日期所在季度的最后一天
使用示例:
$.getLastDateInQuarter(new Date(2018, 5, 12)); // Sat Jun 30 2018 00:00:00 GMT+0800 (中国标准时间)
max
求数组中的最大值
使用示例:
$.max([1, 2, 3]); // 3
min
求数组中的最小值
使用示例:
$.min([1, 2, 3]); // 1
sum
求数组中所有元素的和
使用示例:
$.sum([1, 2, 3]); // 6
avg
求数组中所有元素的平均值
使用示例:
$.avg([1, 2, 3]); // 2
variance
求数组中所有元素的方差
使用示例:
$.variance([1, 2, 3]); // 0.6666...
intersection
求多个数组的交集
使用示例:
$.intersection([1, 2, 3], [1], [1, 2]); // [1]
union
求多个数组的并集
使用示例:
$.union([1, 2], [3, 4], [false]); // [1, 2, 3, 4, false]
difference
求多个数组的差集
使用示例:
$.difference([1, 2, 3], [1], [2]); // [3]
flatten
展开多维数组为一维数组
@param {Array} arr 要展开的数组
@param {Boolean} shallow true 代表只展开一层,false 代表展开所有层,默认为 false
使用示例:
$.flatten([1, 2, [4, [5, 6]], 3]); // [1, 2, 4, 5, 6, 3]
$.flatten([1, 2, [4, [5, 6]], 3], true); // [1, 2, 4, [5, 6], 3]
removeDup
对数组进行去重
使用示例:
$.removeDup([1, 2, 3, 2, 4]); // [1, 2, 3, 4]
groupBy
根据回调函数的结果对数组元素进行归类,返回一个对象,每个属性都是一个类别,值为该分类元素组成的数组。
@param {Array} arr 要归类的数组
@param {Function} callback 返回类别的回调函数,接受三个标准参数(v, k, o)
使用示例:
$.groupBy([1, 2, 3], v => String(1)); // { '1' : [1, 2, 3] }
$.groupBy([1, 2, 3], v => String(v)); // { '1': [1], '2': [2], '3': [3] }
shuffle
数组随机洗牌,返回一个新数组,采用 Fisher–Yates shuffle 的改进算法
使用示例:
$.shuffle([1, 2, 3]); // [1, 3, 2]...
compact
去除数组中的 falsy 值(NaN/false/''/undefined/null
),返回新数组
使用示例:
$.compact([1, undefined, 2, null, 3, '', 4, false, 5, NaN]); // [1, 2, 3, 4, 5]
pluck
对数组里的对象取同一属性的值
@param {Array} arr 数组参数
@param {String} key 对象属性
使用示例:
$.pluck([
{
name: 'Jerry',
age: 12
},
{
name: 'Tom',
age: 13
}
], 'name'); // ['Jerry', 'Tom']
pick
返回数组中的随机一项
使用示例:
$.pick([1, 2, 3]); // 1 or 2 or 3
throttle
函数节流,被节流过的函数在指定时间间隔内只能触发一次
@param {Function} fn 需要包装的函数
@param {Number} interval 时间间隔
使用示例:
let throttled = $.throttle(() => {
console.log('function executed!');
}, 1000);
while (true) {
throttled(); // 每秒将会输出一次 'function executed!'
}
debounce
函数去抖,被处理过的函数,只有在执行之后的指定时间间隔后才会触发。如果第二次执行函数没有超过指定的时间间隔,那么计时器刷新。
@param {Function} fn 需要包装的函数
@param {Number} delay 延迟执行时间
使用示例:
let debounced = $.debounce(() => {
console.log('function executed!');
}, 1000);
debounced(); // 1 秒后输出...
while (true) {
debounced(); // 永远不会有输出
}
curry
函数柯里化
@param {Function} fn 要柯里化的函数
@param {Number} length 要柯里化的函数的参数个数
使用示例:
let add = $.curry(function(a, b, c) {
return a + b + c;
});
add(1, 2, 3); // 6
add(1, 2)(3); // 6
add(1)(2, 3); // 6
add(1)(2)(3); // 6
addEvent
兼容模式的事件绑定函数,支持 IE
@param {Element} el 要绑定事件的 DOM 元素
@param {String} eventType 事件类型
@param {Function} callback 事件处理函数
使用示例:
$.addEvent(document, 'click', () => {
console.log('clicked!');
});
removeEvent
兼容模式的事件解绑函数,支持 IE
@param {Element} el 要解绑事件的 DOM 元素
@param {String} eventType 事件类型
@param {Function} callback 事件处理函数
使用示例:
$.removeEvent(document, 'click', handler); // 注意 handler 必须是之前绑定的同一个函数变量
CustomEvents
自定义事件类,它允许用户实例化一个事件中心,然后自定义事件,类似于 Node 中的 EventEmitter。
CustomEvents 的实例包含三个方法:
subscribe(eventType, callback)
订阅函数,接受事件类型和事件处理回调unsubscribe(eventType, callback)
取消订阅事件函数,接受事件类型和事件处理回调dispatch(event, data)
事件派发函数,接受事件类型和数据使用示例:
const ee = new $.CustomEvents();
let handler = (e) => {
console.log(e.eventType, e.data);
}
ee.subscribe('test', handler);
ee.dispatch('test'); // handler 会执行
ee.unsubscribe('test', handler);
ee.dispatch('test'); // handler 不再执行
建议在使用 CustomEvents
类时,创建一个专门的模块用于实例化 CustomEvents
,这样做可以使全局方法都使用同一个事件中心。
// event.js
const { CustomEvents } = require('jerrytools');
module.exports = new CustomEvents();
ready
document.ready 事件,接受回调函数,在 DOM 渲染完成时执行接收的所有回调函数,类似于 jQuery.ready 函数。
使用示例:
$.ready(() => {
console.log('Dom Content Loaded!'); // 会在 DOM 渲染完成时输出
});
isFunction
判断传入变量是否是函数
使用示例:
$.isFunction(''); // false
$.isFunction(function() {}); // true
isNumber
判断传入变量是否是数字
使用示例:
$.isNumber(12); // true
$.isNumber('12'); // false
$.isNumber(NaN); // false
isPlainObject
判断是否是纯对象(构造函数是 Object)
使用示例:
$.isPlainObject({}); // true
// 假设 Person 是一个自定义的类:
$.isPlainObject(new Person()); // false
isObject
判断是否是对象(可以使自定义类的示例)
使用示例:
$.isObject({}); // true
$.isObject(new Function()); // false
// 假设 Person 是一个自定义类:
$.isObject(new Person()); // true
isString
判断是否是字符串
使用示例:
$.isString(''); // true
$.isString(1); // false
isArray
判断是否是数组
使用示例:
$.isArray([]); // true
isArrayLike
判断是否是类数组对象(length 属性是一个数字的对象,数组不是类数组对象)
使用示例:
$.isArrayLike('123'); // true
$.isArrayLike({'0': 12, length: 1}); // true
$.isArrayLike([1, 2, 3]); // false
isNaN
判断是否是 NaN
使用示例:
$.isNaN(NaN); // true
$.isNaN('a123'); // false
isSymbol
判断是否是 Symbol 类型
使用示例:
$.isSymbol(Symbol(12)); // true
isRegExp
判断是否是正则表达式类型
使用示例:
$.isRegExp(/\.test$/); // true
isDate
判断是否是日期类型
使用示例:
$.isDate(new Date()); // true
isUndefined
判断是否是 undefined
使用示例:
$.isUndefined(); // true
$.isUndefined(null); // false
isNull
判断是否是 null
使用示例:
$.isNull(undefined); // false
$.isNull(null); //true
isInt
判断是否是整数类型
使用示例:
$.isInt(12); // true
$.isInt(12.00); // true
$.isInt(12.1); // false
isFalsy
判断是否是 null/undefined/''/0/false/NaN
使用示例:
$.isFalsy(null); // true
$.isFalsy(undefined); // true
$.isFalsy(''); // true
$.isFalsy(0); // true
$.isFalsy(NaN); // true
$.isFalsy(false); // true
isElement
判断是否是 DOM 元素节点
使用示例:
$.isElement(document.querySelector('#test')); // true
$.isElement({}); // false
mixin
混淆函数,可以进行浅拷贝
@param {Object} des 拷贝的目标对象
@param {Object} source 拷贝的源对象
使用示例:
let dest = {name: 'test'};
$.mixin(dest, { age: 1 }); // dest 变成 { name: 'test', age: 1 };
each
遍历数组、类数组对象或纯对象
@param {Object|Array} param 要遍历的对象或数组
@param {Function} callback 回调函数,接受三个参数:v 当前遍历项;k 当前索引或属性名; o 当前遍历的对象
使用示例:
$.each({name: 'test', age: 1}, function(v, k, o) {
console.log(v, k, o)
});
map
遍历数组、类数组对象或纯对象,返回一个结果数组
@param {Object|Array} param 要遍历的对象、数组或类数组对象
@param {Function} callback 要使用的回调函数,接受三个参数:v 当前遍历项;k 当前索引或属性名; o 当前遍历的对象
使用示例:
$.map({name: 'Jerry'}, function(v, k, o) {
return v;
}); // ['Jerry']
reduce
遍历数组、类数组对象或纯对象,返回一个累计值结果
@param {Object|Array} param 要迭代的数组、类数组对象或对象
@param {Function} callback 对每一项进行操作的回调函数,接收四个参数:acc 累加值、v 当前项、k 当前索引、o 当前迭代对象
@param {Any} initVal 传入的初始值
使用示例:
$.reduce({name: 'Jerry', friend: 'Tom'}, function(acc, v, k, o) {
return acc + v;
}); // 'JerryTom'
// 传递一个初始值
$.reduce({name: 'and', friend: 'Tom'}, function(acc, v, k, o) {
return acc + v;
}, "Jerry"); // 'JerryandTom'
contains
检测字符串或数组或类数组对象是否包含某个项
@param {String|Array} param 要检测的数组或类数组对象
@param {Any} subItem 要检测的项
使用示例:
$.contains([1, 2, 3], 3); // true
$.contains('123345', '33'); //true
keys
返回对象所有属性名组成的数组
@param {Any} obj 要查询的对象
使用示例:
$.keys({name: 'Jerry'}); // ['name']
has
判断某个对象自身(不是位于原型链)是否包含某个属性
@param {Any} obj 任意值
@param {String|Array} key 属性名
使用示例:
$.has({name: 'Jerry'}, 'name'); // true
$.has({name: 'Jerry'}, 'age'); // false
equals
判断两个变量是否相等
使用示例:
$.equals({}, {}); // true
$.equals({name: 'Jerry'}, {name: 'Jerry'}); // true
$.equals(NaN, NaN); // true
$.equals(0, -0); // false
$.equals(/\.Jerry$/gi, /\.Jerry$/ig); // true
$.equals([1, 2, 3], [1, 2, 3]); // true
getType
获取变量的类型字符串
使用示例:
$.getType({}); // 'Object'
$.getType(''); // 'String'
$.getType(false); // 'Boolean'
$.getType(12); // 'Number'
// ...
deepClone
深拷贝函数
使用示例:
let Jerry = {
name: 'Jerry',
fs: [1, 2, 3]
};
let _Jerry = $.deepClone(Jerry);
_Jerry.fs.push(4);
console.log(_Jerry.fs); // [1, 2, 3, 4]
console.log(Jerry.fs); // [1, 2, 3]
getCookie
获取 cookie 的值
@param {String} key cookie 名称
使用示例:
$.getCookie('token'); // 'ksaldjfklhj1234klhjkasfh'
setCookie
设置 cookie
@param {String} key cookie 名称
@param {String} value cookie 的值
@param {Number} day 有效时长(单位是天)
使用示例:
$.setCookie('name', 'Jerry', 365);
delCookie
删除 cookie
@param {String} key cookie 名称
使用示例:
$.delCookie('name');
更多功能,持续更新中……