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的map与get方法详解
Nov 04 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
利用fecha进行JS日期处理
Nov 21 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 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变量范围介绍
2012/10/15 PHP
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
2015/12/08 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[04:11]DOTA2上海特级锦标赛主赛事首日TOP10
2016/03/03 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
python判断变量是否为列表的方法
2020/09/17 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
.NET面试问题集
2015/12/08 面试题
金融专业个人的自我评价
2013/10/18 职场文书
《荷花》教学反思
2014/04/16 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
行政申诉状范文
2015/05/20 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
python获取带有返回值的多线程
2022/05/02 Python