javascript日期处理函数,性能优化批处理


Posted in Javascript onSeptember 06, 2015

其实网上写javascript日期格式化的博文很多,大体都看了看,都还不错。唯一遗憾的是只顾着实现了功能,没对函数进行性能优化。
俗话说:不要重复造轮子。google上找了一个比较不错的日期格式化函数,来开始我的优化之旅吧!
google上找的这个日期函数化函数,估计大家都很眼熟,以前我也一直在用。先看看优化后和优化前的效率对比吧!
1、优化之前的toDate函数(字符串转换成Date对象),重复执行1万次,耗时660毫秒

javascript日期处理函数,性能优化批处理

2、优化之前的dateFormat函数(Date对象格式化成字符串),重复执行1万次,耗时676毫秒

javascript日期处理函数,性能优化批处理

3、优化过后的toDate函数,重复执行1万次,耗时122毫秒

javascript日期处理函数,性能优化批处理

4、优化后的dateFormat函数,重复执行1万次,耗时160毫秒

javascript日期处理函数,性能优化批处理

为什么前后差别这么大,其实我也没做多少处理,只是为批处理做了一些缓存而已,认真观察所有网上那些日期格式函数,其实都是用正则进行匹配和替换。其实正则是很耗性能的,于是我在正则匹配的地方做了缓存,把匹配值建立索引。以后就不用每次都去做正则匹配了。

无代码无真相,接下来看看真相吧!

(function(window) {
  var sinojh = {
    Version : "1.2",
    Copyright : "Copyright© sino-jh 2012",
    Author : "Jeff Lan",
    Email : "jefflan@live.cn"
  };
  /**
   * 方便于添加和重写类的属性
   * @param {Object} attributes 添加的属性
   */
  Function.prototype.prototypes = function(attributes) {
    for ( var a in attributes) {
      this.prototype[a] = attributes[a];
    }
  };
  /**
   * 获取Url参数
   * @param {String} parameter 参数名
   * @return {String} 参数值
   */
  sinojh.getUrlParameter = function(parameter) {
    if (!sinojh.getUrlParameter.cache) {
      var url = window.location.href;
      var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
      var cache = {};
      for ( var i in paraString) {
        var j = paraString[i];
        cache[j.substring(0, j.indexOf("="))] = j.substring(j.indexOf("=") + 1, j.length);
      }
      sinojh.getUrlParameter.cache = cache;
    }
    return sinojh.getUrlParameter.cache[parameter];
  };
  /**
   * 日期格式化
   * @param {Date} date 日期对象
   * @param {String} formatStyle 格式化样式
   * @return {String} 日期型字符串
   */
  sinojh.dateFormat = function(date, formatStyle) {
    formatStyle = formatStyle ? formatStyle : sinojh.dateFormat.settings.formatStyle;
    var time = {
      "M+" : date.getMonth() + 1,
      "d+" : date.getDate(),
      "h+" : date.getHours(),
      "m+" : date.getMinutes(),
      "s+" : date.getSeconds(),
      "S" : date.getMilliseconds()
    };
    if (formatStyle == sinojh.dateFormat.formatStyleCache) {
      var replaceCache = sinojh.dateFormat.replaceCache;
      if (replaceCache["y+"]) {
        formatStyle = formatStyle.replace(replaceCache["y+"].replace, (date.getFullYear() + "").substring(replaceCache["y+"].index));
      }
      for ( var k in time) {
        if (replaceCache[k]) {
          formatStyle = formatStyle.replace(replaceCache[k].replace, replaceCache[k].replace.length == 1 ? time[k] : ("00" + time[k]).substring(("" + time[k]).length));
        }
      }
    } else {
      sinojh.dateFormat.formatStyleCache = formatStyle;
      var replaceCache = {};
      if (new RegExp("(y+)").test(formatStyle)) {
        var index = 4 - RegExp.$1.length;
        replaceCache["y+"] = {
          replace : RegExp.$1,
          index : index
        };
        formatStyle = formatStyle.replace(RegExp.$1, (date.getFullYear() + "").substring(index));
      }
      for ( var k in time) {
        if (new RegExp("(" + k + ")").test(formatStyle)) {
          replaceCache[k] = {
            replace : RegExp.$1
          };
          formatStyle = formatStyle.replace(RegExp.$1, RegExp.$1.length == 1 ? time[k] : ("00" + time[k]).substring(("" + time[k]).length));
        }
      }
      sinojh.dateFormat.replaceCache = replaceCache;
    }
    return formatStyle;
  };
  sinojh.dateFormat.settings = {
    formatStyle : "yyyy-MM-dd hh:mm:ss"
  };
  /**
   * 将日期格式的字符串转换成Date对象
   * @param {String} dateStr 日期格式字符串
   * @param {String} dateStyle 日期格式
   * @return {Date} 日期对象
   */
  sinojh.toDate = function(dateStr, dateStyle) {
    dateStyle = dateStyle ? dateStyle : sinojh.toDate.settings.dateStyle;
    var compare = sinojh.toDate.compare;
    var result = new sinojh.toDate.result();
    if (dateStyle == sinojh.toDate.settings.dateStyleCache) {
      var indexCache = sinojh.toDate.indexCache;
      for ( var k in compare) {
        if (indexCache[k]) {
          result[compare[k]] = dateStr.substring(indexCache[k].index, indexCache[k].index + indexCache[k].length);
        }
      }
    } else {
      var indexCache = {};
      for ( var k in compare) {
        if (new RegExp("(" + k + ")").test(dateStyle)) {
          var index = dateStyle.indexOf(RegExp.$1);
          var length = RegExp.$1.length;
          indexCache[k] = {
            index : index,
            length : length
          };
          result[compare[k]] = dateStr.substring(index, index + length);
        }
      }
      sinojh.toDate.indexCache = indexCache;
      sinojh.toDate.settings.dateStyleCache = dateStyle;
    }
    return new Date(result["y"], result["M"] - 1, result["d"], result["h"], result["m"], result["s"], result["S"]);
  };
  sinojh.toDate.compare = {
    "y+" : "y",
    "M+" : "M",
    "d+" : "d",
    "h+" : "h",
    "m+" : "m",
    "s+" : "s",
    "S" : "S"
  };
  sinojh.toDate.result = function() {
  };
  sinojh.toDate.result.prototypes( {
    "y" : "",
    "M" : "",
    "d" : "",
    "h" : "00",
    "m" : "00",
    "s" : "00",
    "S" : "000"
  });
  sinojh.toDate.settings = {
    dateStyle : "yyyy-MM-dd hh:mm:ss"
  };
  delete Function.prototype.prototypes;
  window.jh = sinojh;
}(this);
Javascript 相关文章推荐
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
Vue实现6位数密码效果
Aug 18 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 #Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 #Javascript
基于jquery实现的树形菜单效果代码
Sep 06 #Javascript
jQuery.extend 函数及用法详细
Sep 06 #Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 #Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 #Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 #Javascript
You might like
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
MSN消息提示类
2006/09/05 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
js实现二级联动简单实例
2020/01/11 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
Python导入模块时遇到的错误分析
2017/08/30 Python
Python编程实现的简单神经网络算法示例
2018/01/26 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
Python celery原理及运行流程解析
2020/06/13 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
酒店总经理工作职责
2013/12/13 职场文书
请假条范文大全
2014/04/10 职场文书
2016公司年会通知范文
2015/04/25 职场文书
小学生读书笔记范文
2015/06/30 职场文书
总结会主持词
2015/07/02 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS