Package Exports
- kayran
- kayran/dist/style.css
Readme
kayran / 七零八碎工具函数合集
Installation

awaitFor / 以优雅方式书写await
/**
* @param {Promise} 需要包装的Promise
* @return {array}
* {[0]} Promise.prototype.then返回的结果
* {[1]} Promise.prototype.catch返回的结果
*/
import { awaitFor } from 'kayran'
const [res] = await awaitFor(new Promise((resolve, reject) => {
resolve('res')
}))
console.log(res) // 'res'
const [, err] = await awaitFor(new Promise((resolve, reject) => {
reject('err')
}))
console.log(err) // 'err'getPropByPath / 对象深层属性访问
/**
* @param {object} 对象
* @param {string} 属性名 支持点运算符获取深层属性 可选
* @return {any} 属性值 如果第二个参数为空 则返回对象本身
*/
import { getPropByPath } from 'kayran'
const obj = {
a: {
b: 'c'
}
}
getPropByPath(obj, 'a.b') // 'c'
getPropByPath(obj) // 返回obj本身highlightError / 高亮提示错误(可用于校验失败的表单项)
/**
* @param {string|Element|NodeList} 错误元素或其DOMString 默认为'.el-form .el-form-item.is-error'
*/
import 'kayran/dist/style.css'
import { highlightError } from 'kayran'
highlightError()平滑滚动至校验失败的第一个表单项、并对所有校验失败的表单项产生震动效果
isEllipsis / 判断dom是否触发溢出省略(text-overflow: ellipsis)
/**
* @param {Element} 需要判断的元素
* @return {boolean} 是否触发溢出省略
*/
import { isEllipsis } from 'kayran'
isEllipsis(document.querySelector('.text'))isEmpty & notEmpty / 判空 & 判非空
notEmpty() 等同于 !isEmpty()
/**
* @param {any} 需要判断的变量
* @return {boolean} 结果
*/
import { isEmpty, notEmpty } from 'kayran'
isEmpty(0) // false
isEmpty({}) // true
isEmpty([]) // truejsonToFormData / json转FormData
/**
* @param {object} 需要转换的对象
* @return {FormData} 结果
*/
import { jsonToFormData } from 'kayran'
const formData = jsonToFormData({
a: 1
})
formData.get('a') // 1loadLink / 动态加载link
/**
* @param {string|object} src - link url
* @return {Promise}
*/
import { loadLink } from 'kayran'
await loadLink('https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css')loadScript / 动态加载js
/**
* @param {string|object} src - 脚本url
* @return {Promise}
*/
import { loadScript } from 'kayran'
loadScript('https://cdn.jsdelivr.net/npm/vue/dist/vue.js').then(e => {
console.log(Vue)
})loadStyle / 动态加载style
/**
* @param {string|object|HTMLElement} arg - style元素的innerText 或传对象指定style的各项属性 或style元素本身
* @return {Promise<HTMLElement>}
*/
import { loadStyle } from 'kayran'
await loadStyle(`
ul {
list-style: none;
}
`)paramFilter / 接口参数过滤器
/**
* @param {object} innerText - style标签的innerText 或传对象指定style的各项属性
* @return {Promise<Element>}
*/
import { paramFilter } from 'kayran'
await paramFilter({
a: 1,
b: NaN
})parseQueryString / 获取当前url某个查询参数的值
/**
* 获取当前url某个查询参数的值
* 支持微信公众号授权特例:授权后会重定向回来并在链接中加入一个code参数 但微信没有考虑hash路由的情况 所以获取这个code需要特殊处理
* @param {object}
* {string} key - 查询参数的key 如果为空 则返回查询参数映射的对象 可以解构使用
* {string} mode - router模式 可选值'history'/'hash' 默认'hash'
* {boolean} del - 是否在url中删除该值(删除会引发页面刷新)
* @return {string|object} 查询参数中key对应的value / 如果key为空 则返回查询参数整个对象
*/
import { parseQueryString } from 'kayran'
const code = parseQueryString('code')
//or
const { code } = parseQueryString()注意:如果search和hash中同时包含code 如http://localhost:8080/?code=1#/?code=2 取的是search中的code 即返回1
validator / 输入校验
/**
* @param {string} 需要校验的内容
* @return {string} 校验失败提示信息 如果校验通过则返回''
*/
import { validator } from 'kayran'
const { idCard } = validator
const errMsg = idCard('xxx')
if (errMsg) {
Toast(errMsg) // '格式不正确'
return
}该方法不是通过true和false来标识校验是否通过 因为错误往往需要一个友好的原因提示
// 如果仅仅想知道是否校验通过
!idCard('xxx') // true通过 false失败lng / 经度
/**
* @param {string|number} 需要判断的值
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { lng } = validatorlat / 纬度
/**
* @param {string|number} 需要判断的值
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { lat } = validatorphone / 手机
/**
* @param {string|number} 需要判断的值
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { phone } = validatoripv4
/**
* @param {string} 需要判断的值
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { ipv4 } = validatoripv6
/**
* @param {string} 需要判断的值
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { ipv6 } = validatorurl
含ipv4 不含ipv6
/**
* @param {string} 需要判断的值
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { url } = validatorbase64 / 判断是否为base64编码字符串
/**
* @param {string} 需要判断的字符串
* @param {object}
* {string} mediaType - 媒体类型 可选值参考 https://en.wikipedia.org/wiki/Data_URI_scheme
* {boolean} scheme - 是否包含前缀 默认true
* @return {boolean} 结果
*/
import { validator } from 'kayran'
const { base64 } = validator
base64(1, {
mediaType: 'image',
scheme: false
}) // falseidCard / 身份证
/**
* @param {string|number} 需要判断的值
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { idCard } = validatorpostcode / 邮编
/**
* @param {string|number} 需要判断的值
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { postcode } = validatortel / 座机
/**
* @param {string|number} 需要判断的值
* @param {object}
* {boolean} multiple - 是否允许多个 默认true
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { tel } = validatoremail / 邮箱
/**
* @param {string} 需要判断的值
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { email } = validatorlen / 字符长度
/**
* @param {string} 需要判断的值
* @param {
* number |
* [number, number] |
* {
* min?: number
* max?: number
* }
* }
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { len } = validator
len('123', [1, 3])int / 整数
/**
* @param {string|number} 需要判断的值
* @param {
* string |
* {
* range?: string
* positiveSign?: boolean
* }
* }
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { int } = validator
int(0, '(0,2)')decimal / 小数
/**
* @param {string|number} 需要判断的值
* @param {
* string |
* {
* range?: string,
* decimalPlaces?: number | [number, number]
* }
* }
* @return {string} 判断结果
*/
import { validator } from 'kayran'
const { decimal } = validator
decimal(80, '[80,+∞]')
decimal('80.1', {
decimalPlaces: [0, 1]
})typeOf / 获取变量的精确类型
动机:原生js的typeof等类型检测手段都存在各种缺陷
/**
* @param {any} 需要判断的变量
* @return {string} 变量类型(全小写) 如string null undefined file...
*/
import { typeOf } from 'kayran'
typeOf(1) // 'number'