实现简易版的moment.js
github源码地址: www.baidu.com
作者: 易怜白
项目中使用了时间日期的处理方法,只使用了部分方法,为了不在引入第三方的库(moment.js),这里自己封装了项目中使用到的方法。
要实现以下功能:
new Moment()
// 返回当前的时间对象
new Moment().unix()
// 返回当前时间的秒数
Moment.unix(timestamp)
// 传入秒数,返回传入秒数的时间对象
new Moment().format('YYYY-MM-DD dd HH:mm:ss')
// 返回值 2017-06-22 四 19:46:14
Moment.unix(1498132062000).format('YYYY-MM-DD dd HH:mm:ss')
// 返回值 2017-06-22 四 19:46:14
一、基础代码:
class Moment {
constructor(arg = new Date().getTime()) {
this.date = new Date(arg)
}
}
arg = new Date().getTime() :这里使用解构对arg添加默认值
二、实现unix方法
class Moment {
constructor(arg = new Date().getTime()) {
this.date = new Date(arg)
}
// getTime()返回的是毫秒数,需要转成秒数并取整
unix() {
return Math.round(this.date.getTime() / 1000)
}
}
unix方法:返回当前时间的秒数
三、实现静态unix方法
class Moment {
constructor(arg = new Date().getTime()) {
this.date = new Date(arg)
}
static unix(timestamp) {
return new Moment(timestamp * 1000)
}
}
静态unix方法:参数timestamp 毫秒数 返回一个Date对象
四、实现format方法
class Moment {
constructor(arg = new Date().getTime()) {
this.date = new Date(arg)
}
format(formatStr) {
const date = this.date
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const week = date.getDay()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return formatStr.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|H{1,2}|m{1,2}|s{1,2}/g, (match) => {
switch (match) {
case 'YY':
return String(year).slice(-2)
case 'YYY':
case 'YYYY':
return String(year)
case 'M':
return String(month)
case 'MM':
return String(month).padStart(2, '0')
case 'D':
return String(day)
case 'DD':
return String(day).padStart(2, '0')
case 'd':
return String(week)
case 'dd':
return weeks[week]
case 'ddd':
return '周' + weeks[week]
case 'dddd':
return '星期' + weeks[week]
case 'H':
return String(hour)
case 'HH':
return String(hour).padStart(2, '0')
case 'm':
return String(minute)
case 'mm':
return String(minute).padStart(2, '0')
case 's':
return String(second)
case 'ss':
return String(second).padStart(2, '0')
default:
return match
}
})
}
}
实现简易版的moment.js的更多相关文章
- 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)
预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...
- 一个极其简易版的vue.js实现
前言 之前项目中一直在用vue,也边做边学摸滚打爬了近一年.对一些基础原理性的东西有过了解,但是不深入,例如面试经常问的vue的响应式原理,可能大多数人都能答出来Object.defineProper ...
- 一个简易版的Angular js 三层 示例
var myApp = angular.module('produceline', []); myApp.factory('ajax', ["$http", "$q&qu ...
- 实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 网页分为发牌区和牌池,上面为发牌区,下面是牌池区 2. 代码实现 2.1 HTML和JS代码 ` <link rel="s ...
- 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包
使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...
- 使用 js 实现一个简易版的模版引擎
使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...
- 使用 js 实现一个简易版的 drag & drop 库
使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...
- 使用 js 实现一个简易版的动画库
使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...
- 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序
使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...
随机推荐
- VopSdk一个高逼格微信公众号开发SDK(源码下载)
看之前回复很多说明大家很有热情&文章被误删掉了,不想让有的朋友错失这个高逼格的东西,现在重新发布,这次就直接放出源码,文章最末下载地址. 看之前回复很多说明大家很有热情&文章被误删掉了 ...
- copyWithZone 的使用方法
1.简单复制只能实现浅拷贝:指针赋值,使两个指针指向相同的一块内存空间,操作不安全. 2. Foundation类已经遵守了<NSCopying>和 <NSMutableCopyin ...
- Linux下memcache的安装和启动测试
memcache是一套分布式的高速缓存系统,MemCache的工作流程如下:先检查客户端的请求数据是否在memcached中,如有,直接把请求数据返回,不再对数据库进行任何操作:如果请求的数据不在me ...
- mysql修改数据库名
1.创建新库 2.创建新库用户 3.备份旧库 4.修改表名 5.删除旧库 环境:mysql5.6已经有数据库dbbzpt,需要把它修改为dbedu. 1,2.使用root用户登录创建新库.创建 ...
- ASP.NET MVC, Url长度过长问题解决,404.15问题
最近在处理一个问题的时候,发现他们存在一个大量数据放在URL中传递的过程,当数据达到一定数量的时候就会报出404.15问题. 运行环境是在IIS8,经过查询之后发现,URL此时最大长度为2048,肯定 ...
- hdu1150 Machine Schedule 经典二分匹配题目
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1150 很经典的二分题目 就是求最小点覆盖集 二分图最小点覆盖集=最大匹配数 代码: #include& ...
- [ERR] Node 172.168.63.202:7001 is not empty. Either the nodealready knows other nodes (check with CLUSTER NODES) or contains some
关于启动redis集群时: [ERR] Node 172.168.63.202:7001 is not empty. Either the nodealready knows other nodes ...
- 区块链入门(1):搭建(Ubuntu系统)Truffle v3.2.1 开发和测试环境
本文主要讲解ubuntu 16.04下, truffle开发测试环境的搭建. 第一步:安装nodejs 和 npm,有两种比较常见的方法. 方法1:直接在nodejs官网下载nodejs-v6.10 ...
- EMC在线测试题目及答案 绿色为正确答案,红色为错误答案
1. 以下哪一项技术可以将IT的物理资源放在一个共享池中以及提升它们的利用率? 分区 虚拟化 协调 LUN 屏蔽 2. 哪一项是EMC的基于块-存储(block-based)的高端存储? Atmos ...
- Day4-迭代器
for循环的数据类型: 1.集合数据类型,如list列表,tuple元组,dict字典,set集合,str字符串等: 2.generator生成器,包括生成器和带yield的generator fun ...