utils.js 文件 工具类 方法分享

陈发良 等级 767 0 0
标签: Javascript
/**
 * 时间解析工具
 * @param {(Object|string|number)} time
 * @param {string} cFormat
 * @returns {string | null}
 */
export function parseTime(time, cFormat) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string')) {
      if ((/^[0-9]+$/.test(time))) {
        // support "1548221490638"
        time = parseInt(time)
      } else {
        // support safari
        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
        time = time.replace(new RegExp(/-/gm), '/')
      }
    }

    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
    return value.toString().padStart(2, '0')
  })
  return time_str
}



/**
 * @param {number} time
 * @param {string} option
 * @returns {string}
 */
export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000
  } else {
    time = +time
  }
  const d = new Date(time)
  const now = Date.now()

  const diff = (now - d) / 1000

  if (diff < 30) {
    return '刚刚'
  } else if (diff < 3600) {
    // less 1 hour
    return Math.ceil(diff / 60) + '分钟前'
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
  } else if (diff < 3600 * 24 * 2) {
    return '1天前'
  }
  if (option) {
    return parseTime(time, option)
  } else {
    return (
      d.getMonth() +
      1 +
      '月' +
      d.getDate() +
      '日' +
      d.getHours() +
      '时' +
      d.getMinutes() +
      '分'
    )
  }
}



/**
 *  查被选元素是否包含指定的 class
 * @param {HTMLElement} elm
 * @param {string} cls
 * @returns {boolean}
 */
export function hasClass(ele, cls) {
  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}

/**
 *  添加class到dom
 * @param {HTMLElement} elm
 * @param {string} cls
 */
export function addClass(ele, cls) {
  if (!hasClass(ele, cls)) ele.className += ' ' + cls
}

/**
 * 删除class到dom
 * @param {HTMLElement} elm
 * @param {string} cls
 */
export function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
    ele.className = ele.className.replace(reg, ' ')
  }
}



/**
 * 对象深拷贝
 * @param {Object} source
 * @returns {Object}
 */
export function deepClone(source) {
  if (!source && typeof source !== 'object') {
    throw new Error('error arguments', 'deepClone')
  }
  const targetObj = source.constructor === Array ? [] : {}
  Object.keys(source).forEach(keys => {
    if (source[keys] && typeof source[keys] === 'object') {
      targetObj[keys] = deepClone(source[keys])
    } else {
      targetObj[keys] = source[keys]
    }
  })
  return targetObj
}



/**
* 防抖函数
 * @param {Function} func
 * @param {number} wait
 * @param {boolean} immediate
 * @return {*}
 */
export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在,重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }

    return result
  }
}




/**
* url参数解析
 * @param {string} url
 * @returns {Object}
 */
export function getQueryObject(url) {
  url = url == null ? window.location.href : url
  const search = url.substring(url.lastIndexOf('?') + 1)
  const obj = {}
  const reg = /([^?&=]+)=([^?&=]*)/g
  search.replace(reg, (rs, $1, $2) => {
    const name = decodeURIComponent($1)
    let val = decodeURIComponent($2)
    val = String(val)
    obj[name] = val
    return rs
  })
  return obj
}


收藏
评论区

相关推荐

JavaScript中的类型
JavaScript中的类型 一、关于类型 什么叫做类型?简单地说,类型就是把内存中的一个二进制序列赋予某种意义。比如,二进制序列0100 0000 0111 0000 0001 0101 0100 1011 1100 0110 1010 0111 1110 1111 1001 1110如果看作是64位无符号整数类型就是4
utils.js 文件 工具类 方法分享
javascript / 时间解析工具 @param {(Object|string|number)} time @param {string} cFormat @returns {string | null} / export function parseTime(time, cFormat) { if (arguments.leng
js-Answers一
JavaScript的组成 JavaScript 由以下三部分组成: 1. ECMAScript(核心):JavaScript 语言基础 2. DOM(文档对象模型):规定了访问HTML和XML的接口 3. BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法 JS的基本数据类型和引用数据类型
了解什么是 TypeScript
内容纲要 了解什么是 TypeScript TypeScript 基本语法 TypeScript 介绍 TypeScript 是什么TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并
JS 面相对象编程
提起面向对象我们就能想到类,对象,封装,继承,多态。在《javaScript高级程序设计》(人民邮电出版社,曹力、张欣译。英文名字是:Professional JavaScript for Web Developers)这本书中描述的还算比较详细。我们看看JavaScript中定义类的各种方法。 1.工厂方式 javaScript中创建自己的类和对象,我们应
JS篇(004)
答案: 1.**脚本语言**。JavaScript 是一种解释型的脚本语言,C、C++等语言先编译后执行,而 JavaScript 是在程序的运行过程中逐行进行解释。 2.**基于对象**。JavaScript 是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。 3.**简单**。JavaScript 语言中采用的是弱类型的变量
GitHub上的7个热门TypeScript项目,要不要学一下呢?
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)由微软开发的自由和开源的编程语言。设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。 **语言特性** -------- TypeScript 是一种
JS nodeJs 的日期计算
date-utils ========== 前端引用 <script type="text/javascript" src="date-utils.min.js"></script> 下载传送门,[猛击我](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.co
JavaScript 对象和包装类
对象的创建方法 ------- * {} var obj = {} * 系统自带的构造函数 var obj = new Object()//Array()//Number() * 自定义的构造函数 function Person(){ } var person1 = new Pe
JavaScript 类型总览
![](http://static.oschina.net/uploads/space/2012/0201/114018_D7x6_119416.png) 此图来自于《JavaScript语言精髓与编程实践》第三章P184页。最近在改第二版,这张图重做了,需要的可以对照着看。 此外,补充一下图中用到的概念: 1、内置(Build-in)对象与原生(Na
JavaScript的 基本数据类型
**第一:Javascript对象是** **第二:Javascript中** **第三:Javascript的对象是数据;** **第四:JavaScript 中的对象可以简单理解成"名称:值"对(name:value)。名称(name):"名称"部分是一个 JavaScript 字符串** **参考----------https://www
Javascript 构造函数和类
###1.构造函数 构造函数的名称一般都是首字母大写 挂载在this上面的属性为实例属性,实例属性再每个实例间都是独立的 原型链属性通过prototype添加,他是所有实例共享的 类方法/静态属性只能由构造函数本身访问 当实例属性和原型链上的属性重名时,优先访问实例属性,没有实例属性再访问原型属性 大多数浏览器的 ES5 实现之中,每一个对象都有\_\_pr
Javascript中,实现类与继承的方法和优缺点分析
Javascript是一种弱类型语言,不存在类的概念,但在js中可以模仿类似于JAVA中的类,实现类与继承 第一种方法:利用Javascript中的原型链 1 //首先定义一个父类 2 3 function Animal(name,age){ 4 //定义父类的属性 5 thi
Javascript数据验证类
/* 用途:检查输入字符串是否符合金额格式,格式定义为带小数的正数,小数点后最多三位 输入:s:字符串 返回:如果通过验证返回true,否则返回false */ function isMoney( s ) { var regu = "^[0-9]+[\.][0-9]{
TypeScript学习笔记
TypeScript学习笔记 -------------- TypeScript是JavaScript的超集,任何合法的JS程序都是合法的TypeScript程序 TypeScript通过向JavaScript增加可选的静态类型声明来把JavaScript变成强类型程序语言。 静态类型声明可约束函数、变量、属性等程序实体。 TypeScript语言内

热门文章

总结:常用js方法工作问题记录总结2021--2工作问题记录总结2021--1

最新文章

总结:常用js方法工作问题记录总结2021--2工作问题记录总结2021--1