apec-fe-utils

APEC 前端开发工具库

基础用法

安装

npm install apec-fe-utils

全量引入

import * as utils from 'apec-fe-utils';

使用示例:
utils.url.getQueryString('date');

或者

按需引入

import { url, https } from 'apec-fe-utils';

使用示例:
url.getQueryString('date');

所有方法

日期时间格式化

1. formatTime
  /**
   * 时间戳转日期时间 eg: 1505174400000 => 2017-09-12 14:34:23
   * @param  {String} timestamp 时间戳
   * @return {String}           日期时间
   */

2. formatDate
  /**
   * 时间戳转日期 eg: 1505174400000 => 2017-09-12
   * @param  {String} timestamp 时间戳
   * @return {String}           日期
   */

3. formatTimeObj
  /**
   * 时间戳转日期 eg: 1505174400000 => 2017-09-12
   * @param  {String} timestamp 时间戳
   * @return {Object}           时间日期
   */

4. unixTime
  /**
   * 日期转时间戳 eg: 2017-09-12 => 1505174400000
   * @param  {String} datetime 日期字符串
   * @return {number}          时间戳
   */

5. getTimestamp
  /**
   * 获取当前时间戳
   * @return {number} 时间戳
   */

6. getTimeDetailRemain
  /**
   * 根据时间戳返回 距离此时间戳还有多少时分秒【倒计时用】
   * @param  {string} timestamp 时间戳
   * @return {object}           时间对象
   */

cookie操作

1. getCookie
  /**
   * 获取cookie
   * @param  {String} name  cookie名
   * @return {String} value cookie值
   */

2. setCookie
  /**
   * 设置cookie值
   * @param {String} name cookie名
   * @param {String} val  cookie值
   * @param {String} sec  失效时间
   */

3. clearCookie
  /**
   * 清除指定cookie
   * @param {String} name cookie名
   * @return {null}      无
   */

4. clearAllCookie
  /**
   * 清除所有cookie
   * @return {null}      无
   */

5. getValue
  // 获取存在localstorage或者cookie中的值

6. setValue
  /**
   * 将值存入localStorage
   * @param {String} name localStorage名
   * @param {String} val  localStorage值
   */

7. removeValue
  /**
   * 将值从localStorage删除
   * @param {String} name localStorage名
   */

url操作

1. getQueryString
  /**
   * 获取链接中指定键名对应的键值 当url不传时取window.location.href
   * @param  {String} name 键名
   * @param  {String} url  链接地址[可不传]
   * @return {String}      键值
   */

2. getQueryName
  /**
   * getQueryString方法的正则辅助方法
   * @param  {String} name 键名
   * @param  {String} url  链接地址[可不传]
   * @return {String}      键值
   */

3. updateQueryString
  /**
   * 更新链接中某一键值对的值(当匹配不到时往链接中添加该键值对) 当url不传时取window.location.href
   * @param  {String} name  键名
   * @param  {String} value 键值
   * @param  {String} url   链接地址[可不传]
   * @return {String}       链接地址
   */

4. parseURL
  /**
   * 获取链接的属性
   * @param  {String} url 链接地址
   * @return {Object}     链接的属性值
   */

5. getFullPath
  /**
   * 获取url的完整路径
   * @return {String} 完整路径 eg: http://heygeys.cn/test/index.html/#/home => http://heygeys.cn/test/
   */

表单校验 validator

使用方法: 将 rule 替换为方法名, param 替换为需要进行验证的参数

validator[rule](param); // true 通过, false 不通过

规则 (rule) 枚举

方法名	验证规则
intNum	整数
priceNum	至多两位小数数字（多用于价格和金额）
phone	手机号
tel	座机号码
url	网址
email	电子邮箱
confirmPassword	确认密码
amount	金融数字
dateTime	日期时间
idCard	身份证号

金额格式化

toFinancialNum
  /**
   * 将参数格式化为千分位金额
   * @param  {String | Number} num 待格式化数字
   * @param  {Number} digit = 2 保留小数位数, 默认2位
   * @param  {String} symbol = '￥' 格式化符号, 默认为人民币
   * @return {String} financialNum 格式化后金额 16937.6588 => ￥16,937.66
   */
smalltoBIG
  /**
   * 将小写金额转成大写
   * @param  {String | Number} num 待格式化数字
   * @return {String} smalltoBIG 格式化后金额 10.04 => 壹拾元肆分
   */

自动文本框

autoTextarea
  /**
    * 文本框根据输入内容自适应高度
    * @param                {HTMLElement}            输入框元素
    * @param                {Number}                设置最大高度(可选)
    * @param                {Number}                设置光标与输入框保持的距离(默认0)
    */

键值匹配器

keyMatcher
  /**
    * 键值匹配器
    * @param {String} val 待匹配原始值
    * @param {Array} list 匹配枚举对象数组
    * @param {String} key = 'key' 对应输入键的字段名
    * @param {String} name = 'name' 对应输出文字的字段名
    * @return {Object} result = {
    *   name,
    *   info: {},
    * }
    * */

axios基础配置 https

主要用法:

https.post(url, param, configs).then(res => {}).catch(err => {})
https.get(url, param, configs).then(res => {}).catch(err => {})

/**
 * @param {String} url 请求地址
 * @param {Object} param 请求参数, 直接使用对象即可
 * @param {Object} configs 额外配置, 支持axios的所有配置项, 详见axios文档: https://github.com/axios/axios/blob/master/README.md#request-config
 * @return {Promise} 返回Promise链, 用户需自行.then(res => {}).catch(err => {})
 *
 * */

备注: 直接then的res为请求响应对象, 后续then需用户自行return res

此外，还保留axios所有其他属性，例如interceptor拦截器，用法同axios

检测精准的JS数据类型 detectType

主要用法:

const targetValue = '待检测的值';
const targetObj = {
  a: 'aa',
  b: 1
};

detectType(targetValue); // 'string', 返回类型值
detectType(targetObj) === 'object'; // true, 判断类型值

返回值type枚举 (type为字符串类型):

类型	对象	字符串	数组	数字	函数	布尔值	日期	正则	set	map	undefined	null	非数字	标识符
返回值	object	string	array	number	function	boolean	date	regExp	set	map	undefined	null	NaN	symbol

备注: 内部使用了 Object.prototype.toString() 方法, 可检测除 NaN 以外的数据类型;

NaN 是在 [object Number] 类型中再次判断 Number.isNaN() 来检测.

PDF.js

主要用法: 直接引入库, 本方法仅仅修改源码使之避免签章被隐藏, 与原库用法一致 PDF.js 修改源码位置: pdfjs-dist/build/pdf.worker.js :23179 注释掉 _this2.setFlags(_util.AnnotationFlag.HIDDEN);