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

EventEmitter: 发布、订阅模式

Objects

cookies : object: cookie 相关操作参考地址

Constants

getIEVer ⇒ number | string: 获取ie版本号
getParameterByName ⇒ string | null: 获取url query key 对应的值，默认url为当localtion.href 参考地址
createIframe ⇒ HTMLElement: 动态创建iframe
hasClass ⇒ boolean: dom元素是否包含该class
addClass: 元素添加class
removeClass: 元素删除class
numWithCommas ⇒ string: 千分位参考地址
getValueWithKey ⇒ any: 取值器获取指定的key的值
parseUrl ⇒ oParseUrl: url 解析参考地址
validateEmail ⇒ boolean: 校验邮箱参考地址
validMobile ⇒ boolean: 校验手机号
validChineseName ⇒ boolean: 校验中文名字
validPwd ⇒ boolean: 密码复杂性校验 6-18位，大小写字母、数字和符号至少三种

Functions

getIdCardInfo(id) ⇒ oIdCardInfo: 获取身份证号对应的性别生日年龄等信息
debounce(fn, wait, immediate): 防抖函数(可用于防止重复提交) 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。
throttle(fn, wait, options): 节流函数当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行实现函数节流我们主要有两种方法：时间戳和定时器

Typedefs

oIdCardInfo : object: 身份证对应的性别生日年龄等相关信息
oParseUrl : object: url转化为对象的信息

EventEmitter

发布、订阅模式

Kind: global class

EventEmitter

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('xiaoguang_10@qq.com')

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

x-fe-util

fe-util

安装与使用

文档

Classes

Objects

Constants

Functions

Typedefs

EventEmitter

eventEmitter.on(event, callback)

eventEmitter.emit(event, ...args)

eventEmitter.off(event)

eventEmitter.once(event, callback)

cookies : object

cookies.get(sKey) ⇒ sting | null

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

cookies.remove(sKey, sPath, sDomain)

cookies.has(sKey) ⇒ boolean

cookies.keys() ⇒ array

getIEVer ⇒ number | string

getParameterByName ⇒ string | null

createIframe ⇒ HTMLElement

hasClass ⇒ boolean

addClass

removeClass

numWithCommas ⇒ string

getValueWithKey ⇒ any

parseUrl ⇒ oParseUrl

validateEmail ⇒ boolean

validMobile ⇒ boolean

validChineseName ⇒ boolean

validPwd ⇒ boolean

getIdCardInfo(id) ⇒ oIdCardInfo

debounce(fn, wait, immediate)

throttle(fn, wait, options)

oIdCardInfo : object

oParseUrl : object

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

cookies : `object`

cookies.get(sKey) ⇒ `sting` | `null`

cookies.has(sKey) ⇒ `boolean`

cookies.keys() ⇒ `array`

getIEVer ⇒ `number` | `string`

getParameterByName ⇒ `string` | `null`

createIframe ⇒ `HTMLElement`

hasClass ⇒ `boolean`

numWithCommas ⇒ `string`

getValueWithKey ⇒ `any`

parseUrl ⇒ `oParseUrl`

validateEmail ⇒ `boolean`

validMobile ⇒ `boolean`

validChineseName ⇒ `boolean`

validPwd ⇒ `boolean`

getIdCardInfo(id) ⇒ `oIdCardInfo`

oIdCardInfo : `object`

oParseUrl : `object`

Weekly Downloads