fe-util

前端常用的工具类库函数

安装与使用

npm install x-fe-util --save

import { getParameterByName } from 'x-fe-util'

const queryStr = '?foo=lorem&bar=&baz'
// returns  lorem
getParameterByName('foo', queryStr); // "lorem"

文档

Classes

Objects

Constants

Functions

Typedefs

EventEmitter

发布、订阅模式

Kind: global class

• EventEmitter
  • .on(event, callback)
  • .emit(event, ...args)
  • .off(event)
  • .once(event, callback)

eventEmitter.on(event, callback)

订阅

Kind: instance method of EventEmitter

| Param | Type | Description | | --- | --- | --- | | event | string | 事件名称 | | callback | function | 回调函数 |

eventEmitter.emit(event, ...args)

发布

Kind: instance method of EventEmitter

| Param | Type | Description | | --- | --- | --- | | event | string | 事件名称 | | ...args | any | 任意参数 传递给on callback当中 |

eventEmitter.off(event)

删除

Kind: instance method of EventEmitter

| Param | Type | Description | | --- | --- | --- | | event | string | 事件名称 |

eventEmitter.once(event, callback)

只执行一次

Kind: instance method of EventEmitter

| Param | Type | Description | | --- | --- | --- | | event | string | 事件名称 | | callback | function | 回调函数 |

cookies : object

cookie 相关操作 参考地址

Kind: global namespace

• cookies : object
  • .get(sKey) ⇒ sting | null
  • .set(sKey, sValue, vEnd, sPath, sDomain, bSecure)
  • .remove(sKey, sPath, sDomain)
  • .has(sKey) ⇒ boolean
  • .keys() ⇒ array

cookies.get(sKey) ⇒ sting | null

获取cookie的某个值

Kind: static method of cookies
Returns: sting | null - cookie的值，如无为null

| Param | Type | Description | | --- | --- | --- | | sKey | string | cookie的key |

cookies.set(sKey, sValue, vEnd, sPath, sDomain, bSecure)

设置cookie的某个值

Kind: static method of cookies

| Param | Type | Description | | --- | --- | --- | | sKey | string | 要创建或覆盖的cookie的名字 R | | sValue | string | cookie的值 R | | vEnd | Infinity | string | Date | object | null | 最大年龄的秒数 (一年为31536e3， 永不过期的cookie为Infinity) ，或者过期时间的GMTString格式或Date对象; 如果没有定义则会在会话结束时过期 (number – 有限的或 Infinity – string, Date object or null)。 | | sPath | string | null | 如果没有定义，默认为当前文档位置的路径。 | | sDomain | string | null | 域名 如果没有定义，默认为当前文档位置的路径的域名部分 | | bSecure | boolean | 域名 如果没有定义，默认为当前文档位置的路径的域名部分 |

cookies.remove(sKey, sPath, sDomain)

删除cookie的某个值

Kind: static method of cookies

| Param | Type | Description | | --- | --- | --- | | sKey | string | 要删除cookie的名字 R | | sPath | string | null | 如果没有定义，默认为当前文档位置的路径。 | | sDomain | string | null | 域名 如果没有定义，默认为当前文档位置的路径的域名部分 |

cookies.has(sKey) ⇒ boolean

判断cookie的某个值是否存在

Kind: static method of cookies
Returns: boolean - cookie的某个值是否存在

| Param | Type | Description | | --- | --- | --- | | sKey | string | 要判断cookie的名字 R |

cookies.keys() ⇒ array

获取cookie的key素组

Kind: static method of cookies
Returns: array - key的数组

getIEVer ⇒ number | string

获取ie版本号

Kind: global constant
Returns: number | string - ie版本信息 若不是ie，返回-1
Example

// chrome -> returns -1
getIEVer()
// ie11 -> returns 11
getIEVer()
// edge -> returns edge
getIEVer()

getParameterByName ⇒ string | null

获取url query key 对应的值，默认url为当localtion.href 参考地址

Kind: global constant
Returns: string | null - 返回对应的key，若无返回null

| Param | Type | Description | | --- | --- | --- | | name | string | 获取的query的key | | url | string | url地址 默认为当前href，也可传query string |

Example

const queryStr = '?foo=lorem&bar=&baz'
// returns  lorem
getParameterByName('foo', queryStr); // "lorem"
// returns  "" (present with empty value)
getParameterByName('bar', queryStr); 
// returns  "" (present with no value)
getParameterByName('baz', queryStr); 
// returns  null (absent)
getParameterByName('qux', queryStr); 

createIframe ⇒ HTMLElement

动态创建iframe

Kind: global constant
Returns: HTMLElement - iframe 创建的iframe dom元素

| Param | Type | Description | | --- | --- | --- | | id | string | iframe id | | url | string | iframe 地址 | | style | string | iframe 样式 |

hasClass ⇒ boolean

dom元素是否包含该class

Kind: global constant
Returns: boolean - 是否包含该class

| Param | Type | Description | | --- | --- | --- | | ele | HTMLElement | 元素 | | cls | string | class名称 |

addClass

元素添加class

Kind: global constant

| Param | Type | Description | | --- | --- | --- | | ele | HTMLElement | dom元素 | | cls | string | 添加的class名称 |

removeClass

元素删除class

Kind: global constant

| Param | Type | Description | | --- | --- | --- | | ele | HTMLElement | dom元素 | | cls | string | 删除的class名称 |

numWithCommas ⇒ string

千分位 参考地址

Kind: global constant
Returns: string - 千分位

| Param | Type | | --- | --- | | 数字 | string | number |

Example

// returns 123,456.23
numWithCommas(123456.23)

getValueWithKey ⇒ any

取值器 获取指定的key的值

Kind: global constant
Returns: any - 取值器得到的值

| Param | Type | Description | | --- | --- | --- | | data | object | 对象 | | keys | string | b.c |

Example

const a = {a:{ b: 1}}
// returns 1
getValueWithKey(a, 'a.b')
// returns {b: 1}
getValueWithKey(a, 'a')

parseUrl ⇒ oParseUrl

url 解析 参考地址

Kind: global constant

| Param | Type | Description | | --- | --- | --- | | url | string | url 或者 fullpath |

Example

// returns 
{
  hash: "#2"
  host: "www.baidu.com"
  hostname: "www.baidu.com"
  origin: "https://www.baidu.com"
  pathname: "/abc/def"
  port: ""
  protocol: "https:"
  query: {q: "1", a: "2"}
  search: "?q=1&a=2"
 }
parseUrl('https://www.baidu.com/abc/def?q=1&a=2#2')

validateEmail ⇒ boolean

校验邮箱 参考地址

Kind: global constant
Returns: boolean - 是否为邮箱

| Param | Type | | --- | --- | | email | string |

Example

// returns true
validateEmail('[email protected]')

validMobile ⇒ boolean

校验手机号

Kind: global constant
Returns: boolean - 是否为手机号

| Param | Type | | --- | --- | | phone | string |

Example

// returns true
validMobile(13288888888)
// returns false
validMobile(13288888)

validChineseName ⇒ boolean

校验中文名字

Kind: global constant
Returns: boolean - 是否为手机号

| Param | Type | Description | | --- | --- | --- | | name | string | 名字 | | length | number | 最大校验长度，默认16位 |

Example

// returns true
validChineseName('马云')

validPwd ⇒ boolean

密码复杂性 校验 6-18位，大小写字母、数字和符号 至少三种

Kind: global constant
Returns: boolean - 是否通过校验

| Param | Type | Description | | --- | --- | --- | | pwd | string | 密码 |

Example

// returns true
validPwd('qwe123.')
// returns false
validPwd('qwe123456')

getIdCardInfo(id) ⇒ oIdCardInfo

获取身份证号对应的性别生日年龄等信息

Kind: global function

| Param | Type | Description | | --- | --- | --- | | id | string | 身份证号 |

Example

// returns {gender: "M", birthday: "2002-01-01", age: 18}
getIdCardInfo('12010420020101253x')
// returns {}
getIdCardInfo('000')

debounce(fn, wait, immediate)

防抖函数(可用于防止重复提交) 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次， 如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数， 且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。

Kind: global function

| Param | Type | Description | | --- | --- | --- | | fn | function | 执行函数 | | wait | number | 间隔时间 ms | | immediate | boolean | 立即执行 |

Example

function a () {console.log(1)}
const fn = debounce(a, 2000, false)
// 2s后 打印1
fn()

throttle(fn, wait, options)

节流函数 当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发 小于既定值，函数节流会每隔这个时间调用一次 用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行 实现函数节流我们主要有两种方法：时间戳和定时器

Kind: global function

| Param | Type | Description | | --- | --- | --- | | fn | function | 执行函数 | | wait | number | 间隔时间 | | options | object | 立即执行 | | options.leading | object | false 表示禁用停止触发的回调 |

Example

function a () {console.log(1)}
const fn = throttle(a, 2000)
// 2s内只会执行一次
object.addEventListener("scroll", fn);

oIdCardInfo : object

身份证对应的性别生日年龄等相关信息

Kind: global typedef
Properties

| Name | Type | Description | | --- | --- | --- | | gender | string | 性别(man:M, female: F) | | birthday | string | 生日(yyyy-mm-dd) | | age | number | 年龄 |

oParseUrl : object

url转化为对象的信息

Kind: global typedef
Properties

| Name | Type | Description | | --- | --- | --- | | protocol | string | protocol | | host | string | host | | hostname | string | hostname | | origin | string | origin | | pathname | string | pathname | | port | string | port | | search | string | search | | query | object | query |