x-fe-util

fe util

Usage no npm install needed!

<script type="module">
  import xFeUtil from 'https://cdn.skypack.dev/x-fe-util';
</script>

README

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.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.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