Package Exports
- any-utils
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (any-utils) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
any-utils
纯 JS utils 库,适用前端任何场景
Installment
npm install any-utils --saveDocumentation
1. get
访问嵌套对象,避免代码中出现类似 a && a.b ? a.b.c : null 的代码
Usage
import { get } from 'any-utils';
const data = [{
id: 101,
email: 'jack@dev.com',
personalInfo: {
name: 'Jack',
address: {
line1: 'westwish st',
line2: 'washmasher',
city: [],
state: 'WX'
}
}
}];
// 获取 data[0].personalInfo.address.line1
get(data, [0, 'personalInfo', 'address', 'line1']); // westwish st
// 获取 data[0].personalInfo.address.line2 不存在的属性 wx
get(data, [0, 'personalInfo', 'address', 'line2', 'wx']); // undefined
// 取不到的情况先默认返回 undefined,也可以设置
get(data, [0, 'personalInfo', 'address', 'line2', 'wx'], '我是默认值'); // 我是默认值2. isEmpty
判断是不是空对象或者空数组
Usage
import { isEmpty } from 'any-utils';
// 判断空数组
isEmpty([]); // true
// 判断空对象
isEmpty({}); // true
// 判断非空对象
isEmpty({ a:1 }); // false
// 判断非空数组
isEmpty([1]); // false
// 判断非数组或对象
isEmpty(1); // false3. query 类
和 url 相关的方法
parseQuery
将类似 key1=18127873881&key2=2 格式的数据解析为 { key1: '18127873881', key2: 2 }
Usage
import { parseQuery, getQueryString } from 'any-utils';
// 解析 key1=18127873881&key2=2
parseQuery('key1=18127873881&key2=2') // { key1: '18127873881', key2: '2' }
// 解析空字符串
parseQuery('') // {}
// 获取 url 上面参数
// Location.href = https://www.baidu.com/s?ie=UTF-8
getQueryString('ie') // UTF-8
// 将 url 上面参数转换成对象
// Location.href = https://www.baidu.com/s?ie=UTF-8&name=allen
queryToObject() // { ie: 'UTF-8', name: 'allen'}4. 判断数据类型
判断数据类型
Usage
import { getTypeof, isString, isBoolean, isObject, isArray, isFunction, isDate, isJSON } from '../src/typeof';
// 判断是否为数组
getTypeof([1, 2])); // array
isArray([1, 2]); // true
isArray({}); // false
// 判断是否为字符串
getTypeof('我是字符串'); // string
isString('我是字符串'); // true
isString(false); // false
// 判断是否为对象
getTypeof({a: 2}); // object
isObject({a: 2}); // true
isObject(false); // false
// 判断 null 的类型
getTypeof(null); // null
// 判断是否为 boolean
getTypeof(false); // boolean
isBoolean(false); // true
isBoolean({a: 2}); // false
// 判断 number 类型
getTypeof(1); // number
// 判断 function
getTypeof(() => {}); // function
isFunction(() => {}); // true
isFunction(false); // false
// 判断 date
const date = new Date();
getTypeof(date); // date
isDate(date); // true
isDate(false); // false
// 判断是否是 JSON 字符串
isJSON('123'); // flase
isJSON('{}'); // true
isJSON('[1, 2, 3]'); // true
isJSON('{"a":1,"b":2}'); // true
isJSON(1); // false5. dom 类方法
dom 类方法
Usage
<div class="demo" id="demo" data-index="1"></div>import { isHTMLElement, hasClass, addClass, getDataByAttribute, bindEvent } from '../src/typeof';
const dom = document.getElementById('demo');
// 判断是否为 dom
isHTMLElement(dom, ); // true
// 判断元素是不是有某个 className
hasClass(dom, 'demo'); // true
// 给某个元素添加 className
addClass(dom, 'newClass'); // <div class="demo" id="demo newClass"></div>
// 在 Attribute 属性里面取 data- 开头的属性
getDataByAttribute(dom, 'index'); // 1
// 通用事件绑定函数 bindEvent(elem, type, selector, fn)
// 普通绑定
let dom = document.getElementById('custom-bg');
bindEvent(dom, 'click', function(event) {
console.log('我是普通绑定')
})
// 代理绑定
bindEvent(dom, 'click', '.selector', function(event) {
console.log('我只是绑定了 dom 下面 class 名称为 selector 的元素')
})6. deepClone
深拷贝数组或对象
Usage
import { deepClone } from 'any-utils';
const source = {
age: 20,
name: 'allen',
address: {
city: 'shanxi',
},
arr: [1, 'a', ['c', 2, {a: 2}]],
};
const deepCloneObj = deepClone(source);
deepCloneObj.address.city = '南京';
const input = source.address.city;
const expectation = 'shanxi';
input === expectation // true7. createCache
缓存数据
Usage
import { createCache } from 'any-utils';
// 创建一个缓存容器
const c = createCache();
// 设置缓存数据
c.set('name', 'allen');
// 获取缓存数据
c.get('name');8. debounce
防抖
Usage
import { debounce } from 'any-utils';
// 事件处理函数,回掉函数支持传参
function handle(...values) {
console.log('-- do something --', values);
}
// 延时 1000ms
debounce(handle, 1000, this);9. throttle
节流
Usage
import { throttle } from 'any-utils';
// 事件处理函数,回掉函数支持传参
function handle(...values) {
console.log('-- do something --', values);
}
// 延时 1000ms
throttle(handle, 1000, this);10. safeJSONParse
解析 JSON 字符串
Usage
import { safeJSONParse } from 'any-utils';
// 解析 JSON 格式字符串
const objStr = '{"a":1,"b":2}';
safeJSONParse(objStr); // { a: 1, b: 2}
// 解析数组字符串
const arrStr = '[1, 2, "Jack"]';
safeJSONParse(arrStr); // [1, 2, "Jack"]
// 解析非 JSON 数据格式字符串
const str = 'abc';
// 解析失败默认返回 {}
safeJSONParse(str); // {}
// 也可以自定义返回值
safeJSONParse(str, '我是默认值'); // 我是默认值11. includes
判断字符串或数组的包含关系,兼容不支持 includes 的场景
Usage
import { includes } from 'any-utils';
includes([1, 2, 3], 1) // true
includes(['2', '1', '3'], '1') // true
includes('我是字符串', '字符串') // true
includes('我是字符串', '其他') // false12. fetchEnv
根据 url 是否包含 dev、test、pre、prod 判断是否为 dev、test、pre、prod 环境
Usage
import { fetchEnv } from 'any-utils';
fetchEnv('https://www.imooc.dev.com/') // dev
fetchEnv('https://www.imooc.test.com/') // test
fetchEnv('https://www.imooc.pre.com/') // pre
fetchEnv('https://www.imooc.prod.com/') // prod
// 支持直接读 window.location.href
fetchEnv() // 相当于 fetchEnv(window.location.href)13. 判断当前系统类型
根据 navigator.userAgent 判断当前系统类型
Usage
import { isIos, isChrome } from 'any-utils';
isIos() // 返回一个 boolean 值,是否为 isIos 系统
isChrome() // 返回一个 boolean 值,是否为谷歌浏览器14. isEqual
判断两个对象是否相等
Usage
import { isEqual } from 'any-utils';
isEqual({ a: 1, b: {a: 1}}, {a: 1, b: {a: 1}}) // true
isEqual({ a: 1}, {a: 1, b: {a: 1}}) // false15. flat
数组拍平
Usage
import { flat } from 'any-utils';
flat([1, 2, 3, [1, 2, [1, 2]]]) // [1,2,3,1,2,1,2]16. unique
数组去重
Usage
import { unique } from 'any-utils';
unique([1, 2, 3, 3, 3, 3]) // [1,2,3]Development
Build with TypeScript and tested by jest.
Checklist:
- 每个对外公开的函数必须经过单测
- 每个对外公开的函数必须在 README 添加文档
Publish
- npm version patch(向后兼容的 bug fix)/ minor (新需求且向后兼容) / major(不兼容)/ prerelease --preid=alpha(测试版本)
- npm publish
- git push && git push --tags
commit 规范
格式:
type 说明
- feat(feature,新功能,能够让用户觉察到的变化)
- fix(bug fix,修复 bug)
- docs(documentation,有关文档的更新,注释的更新)
- style(code formatting, missing semi colons, … 代码样式调整,对逻辑无影响,比如为符合 eslint 要求修改代码格式)
- refactor(重构,不影响或添加功能,比如文件、变量重命名、代码抽象为函数,消除魔法数字)
- test(when adding missing tests 写测试)
- chore(maintain 维护代码,比如构建脚本 webpack gulp、测试工具更新)
- perf (性能提升)
- ci(ci 脚本有关变更)
- temp(temp: 不计入 CHANGELOG。比如测试下真机上 transparent title 启动参数是否设置成功)