@haluo/util 1.0.5 → 1.0.8

package/src/modules/date/index.ts

@@ -0,0 +1,196 @@
+/**
+ * @file date 格式化
+ * @Author: wanghui
+ * @createBy: @2020.05.21
+ */
+ 'use strict'
+
+ import { IObjectKey } from '../../types/index'
+
+ /**
+  * 格式化时间  详情内容里的时间格式
+  * @param {Object} data 格式，可参考format 中的o属性
+  * @param {String} fmt  想要格式化的格式 'YYYY-MM-DD HH:mm:ss'、'YYYY-MM-DD'、'YYYY年MM月DD日 HH时mm分ss秒'、'YYYY年MM月DD日'
+  * @return 返回fmt 格式 时间
+  */
+ function replacementDate(data: IObjectKey<any>, fmt: string) {
+   for (var k in data) {
+     if (new RegExp('(' + k + ')').test(fmt)) {
+       fmt = fmt.replace(RegExp.$1,
+         (RegExp.$1.length === 1) ? (data[k]) : ((`00${data[k]}`).substr(('' + data[k]).length))
+       )
+     }
+   }
+   return fmt
+ }
+
+ /**
+  * 格式化年份
+  * @param {String} date Date 格式
+  * @param {String} fmt 想要格式化的格式 'YYYY-MM-DD HH:mm:ss'、'YYYY-MM-DD'、'YYYY年MM月DD日 HH时mm分ss秒'、'YYYY年MM月DD日'
+  * @return 仅返回年份
+  */
+ function replacementYear(date: Date, fmt: string) {
+   if (/(Y+)/.test(fmt)) {
+     fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+   }
+   return fmt
+ }
+
+ class DateClass {
+   /**
+    * 格式化时间
+    * @param {String|Number} date 需要格式化的时间 2017-11-11、2017/11/11、linux time
+    * @param {String} fmt 想要格式化的格式 'YYYY-MM-DD HH:mm:ss'、'YYYY-MM-DD'、'YYYY年MM月DD日 HH时mm分ss秒'、'YYYY年MM月DD日'
+    * date.format(new Date())  // 默认格式 'YYYY-MM-DD HH:mm:ss'
+    * date.format(1586840260500)  // 默认格式，传参为linux时间
+    * date.format(new Date(), 'YYYY:MM:DD')  // 自定义格式 'YYYY:MM:DD'
+    * @return {String} fmt 'YYYY-MM-DD HH:mm:ss'
+    */
+   format(date: string, fmt: string = 'YYYY-MM-DD HH:mm:ss') {
+     if (!date) return ''
+     let timeData: any = typeof date === 'string' ? new Date(date.replace(/-/g, '/')) : date
+     timeData = typeof date === 'number' ? new Date(date) : timeData
+     var o: IObjectKey<number> = {
+       'M+': timeData.getMonth() + 1,
+       'D+': timeData.getDate(),
+       'h+': timeData.getHours() % 12 === 0 ? 12 : timeData.getHours() % 12,
+       'H+': timeData.getHours(),
+       'm+': timeData.getMinutes(),
+       's+': timeData.getSeconds(),
+       'q+': Math.floor((timeData.getMonth() + 3) / 3),
+       'S': timeData.getMilliseconds()
+     }
+
+     const week: IObjectKey<string> = {
+       '0': '\u65e5',
+       '1': '\u4e00',
+       '2': '\u4e8c',
+       '3': '\u4e09',
+       '4': '\u56db',
+       '5': '\u4e94',
+       '6': '\u516d'
+     }
+
+     fmt = replacementYear(timeData, fmt)
+     if (/(E+)/.test(fmt)) {
+       fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[`${timeData.getDay()} `])
+     }
+     return replacementDate(o, fmt)
+   }
+
+   /**
+    * 天数加减
+    * @param {string | Date} date 传入的时间 2020-10-15 or Date
+    * @param {String} days  天数
+    * addDaysToDate('2020-10-15', 10) // '2020-10-25'
+    * addDaysToDate('2020-10-15', -10) // '2020-10-05'
+    * @return {String} fmt 'YYYY-MM-DD'
+    */
+   addDaysToDate(date: string | Date, days: number) {
+     const d = typeof date === 'object' ? date : new Date(date)
+     d.setDate(d.getDate() + days)
+     return d.toISOString().split('T')[0]
+   }
+
+   /**
+    * 获取倒计时剩余时间
+    * @param {Date | Number} endTime 截止时间
+    * @param {Date | Number} startTime 开始时间，默认取客户端当前时间
+    * date.format(new Date())  // 返回 {dd: '天', hh: '时', mm: '分', ss: '秒'}
+    * date.format(1586840260500)  // 返回 {dd: '天', hh: '时', mm: '分', ss: '秒'}
+    * @return {object | boolean} {dd: '天', hh: '时', mm: '分', ss: '秒'}
+    */
+   remainTime(endTime: Date | Number, startTime: Date | Number = new Date()) : object | boolean {
+     const ts: number = Number(endTime) - Number(startTime) // 计算剩余的毫秒数
+     let dd = Math.floor(ts / 1000 / 60 / 60 / 24) // 计算剩余的天数
+     let hh = Math.floor(ts / 1000 / 60 / 60 % 24) // 计算剩余的小时数
+     let mm = Math.floor(ts / 1000 / 60 % 60) // 计算剩余的分钟数
+     let ss = Math.floor(ts / 1000 % 60) // 计算剩余的秒数
+     if (ts <= 0) return false
+     return {
+       dd: (dd < 10 ? `0${dd}` : dd),
+       hh: (hh < 10 ? `0${hh}` : hh),
+       mm: (mm < 10 ? `0${mm}` : mm),
+       ss: (ss < 10 ? `0${ss}` : ss)
+     }
+   }
+
+   /**
+    * 格式化现在的已过时间
+    * @param {Number} startTime
+    * @return {String} *年前 *个月前 *天前 *小时前 *分钟前 刚刚
+    */
+   formatPassTime(startTime: any) {
+     const currentTime: any = new Date();
+     const time: any = currentTime - startTime;
+     const year = Math.floor(time / (1000 * 60 * 60 * 24) / 30 / 12);
+     if (year) return `${year}年前`;
+     const month = Math.floor(time / (1000 * 60 * 60 * 24) / 30);
+     if (month) return `${month}个月前`;
+     const day = Math.floor(time / (1000 * 60 * 60 * 24));
+     if (day) return `${day}天前`;
+     const hour = Math.floor(time / (1000 * 60 * 60));
+     if (hour) return `${hour}小时前`;
+     const min = Math.floor(time / (1000 * 60))
+     if (min) return `${min}分钟前`;
+     else return '刚刚';
+   }
+
+   /**
+    * 格式化时间  列表里的时间内容格式 待废弃，统一时间格式
+    * @param {Number} time 1494141000*1000
+    * @return {String} *年*月*日 *月*日 刚刚(1-60秒) 1-60分钟前 1-24小时前 1-3天前
+    */
+   formatPassTimeForList(time: string) {
+     return DateClass.prototype.formatPassTimeForDetail(time, 'YYYY年MM月DD日', true)
+   }
+
+   /**
+    * 格式化时间  详情内容里的时间格式
+    * @param {Number} time 1494141000*1000
+    * @param {String} fmt 想要格式化的格式
+    * @param {Boolean} noYear 是否显示年
+    * @return {String} *年*月*日 *月*日 刚刚(1-60秒) 1-60分钟前 1-24小时前 1-3天前
+    */
+   formatPassTimeForDetail(time: string, fmt: string = 'YYYY-MM-DD', noYear: Boolean) {
+     const date = (typeof time === 'number') ? new Date(time) : new Date((time || '').replace(/-/g, '/'));
+     const diff = (((new Date()).getTime() - date.getTime()) / 1000);
+     const dayDiff = Math.floor(diff / 86400);
+     const isValidDate = Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
+
+     if (!isValidDate) return '';
+
+     const formatDate = function () {
+       const today = new Date(date);
+       var o: IObjectKey<string | number> = {
+         'Y+': today.getFullYear(),
+         'M+': ('0' + (today.getMonth() + 1)).slice(-2),
+         'D+': ('0' + today.getDate()).slice(-2)
+       };
+       fmt = replacementYear(date, fmt)
+       const year = today.getFullYear();
+
+       if (!(new Date().getFullYear() > year) && noYear) {
+         const backData = replacementDate(o, fmt);
+         return backData.split('年')[1];
+       }
+       return replacementDate(o, fmt);
+     };
+
+     if (dayDiff === -1) {
+       return '刚刚';
+     } else if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 15) {
+       return formatDate();
+     }
+
+     return (dayDiff === 0 && (
+       (diff < 60 && '刚刚') ||
+       (diff < 120 && '1分钟前') ||
+       (diff < 3600 && Math.floor(diff / 60) + '分钟前') ||
+       (diff < 7200 && '1小时前') ||
+       (diff < 86400 && Math.floor(diff / 3600) + '小时前'))) || (dayDiff < 16 && dayDiff + '天前');
+   }
+ }
+
+ module.exports = new DateClass()

package/src/modules/dom/index.ts

@@ -0,0 +1,78 @@
+/**
+ * @file Cookie
+ * @Author: wanghui
+ * @createBy: @2021.08.17
+ */
+'use strict'
+
+import { IObjectKey } from '../../types/index'
+
+interface IDom {
+  name: string,
+  innerHTML?: string,
+  style?: IObjectKey<string>,
+  parent?: string,
+}
+
+class DomClass {
+  /**
+   * 创建一个子元素并添加至父节点
+   * @param {Object} { name = 'div', innerHTML = '', style = {}, parent, }
+   * @return {String}
+   */
+  createElement({
+    name = 'div',
+    innerHTML = '',
+    style = {},
+    parent,
+  }: IDom) {
+    if (!(window && window.document)) {
+      return new Error('仅支持浏览器')
+    }
+
+    const element: any = document.createElement(name)
+
+    element.innerHTML = innerHTML
+    Object.keys(style).map((_: string) => element.style[_] = style[_])
+    if (parent) {
+      const body = document.querySelector(parent)
+      body && body.append(element)
+    }
+    return element
+  }
+
+  /**
+   * 获取文本中的url并用a标签包裹
+   * @param {Object} ICookie
+   */
+  wrapperA(text: string) {
+    if (!(window && window.document)) {
+      return new Error('仅支持浏览器')
+    }
+
+    return text.replace(/((https|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g, '<a href="$1">$1</a>')
+  }
+
+  /**
+   * 对象转化为formdata
+   * getFormData({a: 1, b: 2})
+   * @param {Object} object
+   */
+  getFormData(object: IObjectKey<any>) {
+    const formData = new FormData()
+    Object.keys(object).forEach(key => {
+      const value = object[key]
+      if (Array.isArray(value)) {
+        value.forEach((subValue, i) =>
+          formData.append(key + `[${i}]`, subValue)
+        )
+      } else {
+        formData.append(key, object[key])
+      }
+    })
+    return formData
+  }
+}
+
+module.exports = new DomClass()
+

package/src/modules/filter/index.ts

@@ -0,0 +1,57 @@
+/**
+ * @file 过滤器
+ * @Author: wanghui
+ * @createBy: @2020.05.28
+ */
+/**
+ * 示例：注入所有过滤器
+ * import { filter as filters } from '@haluo/util'
+ * Object.keys(filters).forEach(key => {
+ *   Vue.filter(key, filters[key])
+ * })
+ */
+'use strict'
+
+const dateClass = require('../date')
+const numberClass = require('../number')
+const toolsClass = require('../tools')
+
+class FilterClass {
+  /**
+   * 格式化时间，示例：1586840260500 | format('YYYY-MM-DD HH:mm:ss')
+   * @param {String|Number} date
+   * @param {String} fmt 'YYYY-MM-DD HH:mm:ss'
+   * @return {String} 'YYYY-MM-DD HH:mm:ss'
+   */
+  format(date: string | number, fmt: string = 'YYYY-MM-DD HH:mm:ss') {
+    return dateClass.format(date, fmt)
+  }
+
+  /**
+   * 格式化金额，示例：123456 | formatMoney
+   * @param {Number} num
+   * @return {String} 123,456
+   */
+  formatMoney(money: number | string): string {
+    return numberClass.formatMoney(money)
+  }
+
+  /**
+   * 截取数组或字符串，示例：'1234' | slice(3)
+   * @param {Array|String} target 数组或字符串
+   * @param {Number} length 截取长度，从0开始
+   * @return {any}
+   */
+  slice(target: Array<any> | string = '', length: number = 0) {
+    return toolsClass.slice(target, length)
+  }
+
+  install(Vue: any) {
+    const _this = this
+    Vue.filter('format', _this.format)
+    Vue.filter('formatMoney', _this.formatMoney)
+    Vue.filter('slice', _this.slice)
+  }
+}
+
+module.exports = new FilterClass()

package/src/modules/format/index.ts

@@ -0,0 +1,19 @@
+interface Obj {
+  [prop: string]: any
+}
+class Format {
+  /**
+   * @desc 对于对象非数字与布尔值的value，当其为falsy时，转换成separator
+   * @param {object} obj 传入的对象
+   * @param {string} separator 替换后的值
+   * transformObjectNullVal({ a: null, b: 0}, '23') // {a: "23", b: 0}
+   * @return {object}
+   */
+  transformObjectNullVal<T extends Obj>(obj: T, separator: string = '-'): T {
+    return Object.keys(obj).reduce((cur, key) => {
+      (cur as Obj)[key] = obj[key] || ((obj[key] === 0 ||  obj[key] === false) ? obj[key] : separator)
+      return cur
+    }, {} as { [key in keyof T]:  T[key] })
+  }
+}
+module.exports = new Format()

package/src/modules/match/index.ts

@@ -0,0 +1,31 @@
+
+/**
+ * @file: tools 常用的工具函数
+ * @Author: wanghui
+ */
+'use strict'
+import { IObjectKey } from '../../types/index'
+
+class MatchClass {
+  /**
+   * 根据类型返回正则
+   * @param {String} str 检测的内容
+   * @param {String} type 检测类型
+   * checkType('10.120.33.11', 'ip') // true
+   * @return {Boolean} true or false
+   */
+  checkType(str: string, type: string): boolean {
+    const regexp: IObjectKey<boolean> = {
+      'ip': /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/.test(str),
+      'port': /^(\d|[1-5]\d{4}|6[1-4]\d{3}|65[1-4]\d{2}|655[1-2]\d|6553[1-5])$/.test(str),
+      'phone': /^1[3|4|5|6|7|8][0-9]{9}$/.test(str), // 手机号
+      'number': /^[0-9]+$/.test(str), // 是否全数字
+      'email': /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(str),
+      'IDCard': /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(str),
+      'url': /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/i.test(str)
+    };
+    return regexp[type];
+  }
+}
+
+module.exports = new MatchClass()

package/src/modules/monitor/index.ts

@@ -0,0 +1,8 @@
+import { injectJsError } from './lib/jsError'
+import injectXhrError from './lib/xhr'
+// import timing from './lib/timing'
+export default function setup() {
+  injectJsError()
+  injectXhrError()
+}
+// timing()

package/src/modules/monitor/lib/jsError.ts

@@ -0,0 +1,54 @@
+import track from '../utils/tracker'
+export function injectJsError () {
+  window.addEventListener('error', (e: any) => {
+    console.log(e);
+    if (e.target && (e.target.src || e.target.href)) {
+      track.send({
+        kind: 'stability',
+        type: 'error',
+        errorType: 'resourceError',
+        filename: e.target.src || e.target.href,
+        tagName: e.target.tagName
+        // selector: lastEvent ? get
+      })
+      return
+    }
+    track.send({
+      kind: 'stability',
+      type: 'error',
+      errorType: 'jsError',
+      message: e.message,
+      filename: e.filename,
+      position: `${e.lineno}:${e.colno}`,
+      stack: e.error.stack,
+      // selector: lastEvent ? get
+    })
+  }, true)
+
+  window.addEventListener('unhandledrejection', (e) => {
+    let message, filename, line, column, stack
+    const reason = e.reason
+    if (typeof reason === 'string') {
+      message = reason
+    } else if (typeof reason === 'object') {
+      if (reason.stack) {
+        const matchResult = reason.stack.match(/at\s+(.+):(\d+):(\d+)/)
+        filename = matchResult[1]
+        line = matchResult[2]
+        column = matchResult[3]
+      }
+      message = reason.message
+      stack = reason.stack
+    }
+    track.send({
+      kind: 'stability',
+      type: 'error',
+      errorType: 'promiseError',
+      message,
+      filename,
+      position: `${line}:${column}`,
+      stack
+      // selector: lastEvent ? get
+    })
+  })
+}

package/src/modules/monitor/lib/timing.ts

@@ -0,0 +1,75 @@
+import onload from '../utils/onload'
+import tracker from '../utils/tracker';
+export default function timing() {
+  let FMP:any, LCP:any
+  new PerformanceObserver((entryList, observer) => {
+    const perfEntries = entryList.getEntries()
+    FMP = perfEntries[0]
+    observer.disconnect() // 不再观察
+  }).observe({ entryTypes: ['element'] }) // 观察页面中有意义的元素
+  new PerformanceObserver((entryList, observer) => {
+    const perfEntries = entryList.getEntries()
+    LCP = perfEntries[0]
+    observer.disconnect() // 不再观察
+  }).observe({ entryTypes: ['largest-contentful-paint'] }) // 观察页面中最大的元素
+  new PerformanceObserver((entryList, observer) => {
+    const firstInput:any = entryList.getEntries()
+    console.log('FID', firstInput);
+    if(firstInput) {
+      let inputDelay = firstInput.processingStart - firstInput.startTime
+      const duration = firstInput.duration
+      if(inputDelay > 0 ||  duration >0) {
+        tracker.send({
+          kind: 'experience',
+          type: 'firstInputDelay',
+          inputDelay, // 延迟时间
+          duration, // 处理时间
+          startTime: firstInput.startTime
+        })
+      }
+    }
+    observer.disconnect() // 不再观察
+  }).observe({ type: 'first-input', buffered: true }) // 观察页面中最大的元素
+  onload(function() {
+    setTimeout(() => {
+      console.dir(window.performance);
+      const {
+        fetchStart,
+        connectStart,
+        connectEnd,
+        requestStart,
+        responseStart,
+        responseEnd,
+        domInteractive,
+        domContentLoadedEventStart,
+        domContentLoadedEventEnd,
+        loadEventStart,
+        // loadEventEnd
+      } = performance.getEntriesByType('navigation')[0] as any
+      tracker.send({
+        kind: 'experience',
+        type: 'timing',
+        connectTime: connectEnd - connectStart, // 连接时间
+        ttfbTime: responseStart - requestStart, // 首字节到达时间
+        responseTime: responseEnd - responseStart, // 响应的读取时间
+        domContentLoadedTime: domContentLoadedEventEnd - domContentLoadedEventStart,
+        timeToInteractive: domInteractive - fetchStart,// 首次可交互时间
+        loadTime: loadEventStart - fetchStart // 完整的页面加载时间
+      })
+      let FP = performance.getEntriesByName('first-paint')[0]
+      let FCP = performance.getEntriesByName('first-contentful-paint')[0]
+      console.log('FP', FP);
+      console.log('FCP', FCP);
+      console.log('FMP', FMP);
+      console.log('LCP', LCP);
+      tracker.send({
+        kind: 'experience',
+        type: 'paint',
+        FP: FP.startTime,
+        FCP: FCP.startTime,
+        FMP: FMP.startTime,
+        LCP: LCP.startTime,
+      })
+    }, 3000);
+  })
+}

package/src/modules/monitor/lib/xhr.ts

@@ -0,0 +1,35 @@
+import tracker from "../utils/tracker"
+
+export default function injectXHR(){
+  let XMLHttpRequest:any = window.XMLHttpRequest
+  let oldOpen = XMLHttpRequest.prototype.open as any
+  XMLHttpRequest.prototype.open = function(method: string, url:string, async:boolean) {
+    this.logData = { method, url, async }
+    return oldOpen.apply(this, arguments)
+  }
+  let oldSend = XMLHttpRequest.prototype.send
+  XMLHttpRequest.prototype.send = function(body:any) {
+    if(this.logData) {
+      const startTime = Date.now()
+      const handler = (type:string) => (event:any) => {
+        let duration = Date.now() - startTime
+        let status = this.status
+        let statusText = this.statusText
+        tracker.send({
+          kind: 'stability',
+          type: 'xhr',
+          eventType: event.type,
+          pathname: this.logData.url,
+          status: status + '-'+statusText,
+          duration,
+          response: this.response ? JSON.stringify(this.response) : '',
+          params: body || ''
+        })
+      }
+      this.addEventListener('load', handler('load'), false)
+      this.addEventListener('error', handler('error'), false)
+      this.addEventListener('abort', handler('abort'), false)
+    }
+    return oldSend.apply(this, arguments)
+  }
+}

package/src/modules/monitor/utils/onload.ts

@@ -0,0 +1,8 @@
+export default function onload(cb:any) {
+  if(document.readyState) {
+    cb()
+  } else {
+
+    window.addEventListener('load', cb)
+  }
+}

package/src/modules/monitor/utils/tracker.ts

@@ -0,0 +1,22 @@
+const Parser = require('ua-parser-js');
+class SendTracker {
+  url: string
+  xhr: XMLHttpRequest
+  constructor() {
+    this.url = ''
+    this.xhr = new XMLHttpRequest()
+  }
+  send(data = {}) {
+    const log = { ...getExtraData(), ...data }
+    console.log(log);
+  }
+}
+function getExtraData() {
+  return {
+    title: document.title,
+    url: location.href,
+    timestamp: Date.now(),
+    userAgent: new Parser().getResult()
+  }
+}
+export default new SendTracker()