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的更多相关文章

  1. 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)

    预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...

  2. 一个极其简易版的vue.js实现

    前言 之前项目中一直在用vue,也边做边学摸滚打爬了近一年.对一些基础原理性的东西有过了解,但是不深入,例如面试经常问的vue的响应式原理,可能大多数人都能答出来Object.defineProper ...

  3. 一个简易版的Angular js 三层 示例

    var myApp = angular.module('produceline', []); myApp.factory('ajax', ["$http", "$q&qu ...

  4. 实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

    实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 网页分为发牌区和牌池,上面为发牌区,下面是牌池区 2. 代码实现 2.1 HTML和JS代码 ` <link rel="s ...

  5. 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包

    使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...

  6. 使用 js 实现一个简易版的模版引擎

    使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...

  7. 使用 js 实现一个简易版的 drag & drop 库

    使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...

  8. 使用 js 实现一个简易版的动画库

    使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...

  9. 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序

    使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...

随机推荐

  1. java:Comparator比较器

    /*Comparator是java.util包里的一个接口,使用时应该实现导入相应的包, *再写一个实现了Comparator接口的类,并复写int compare(Object o)方法, *写出你 ...

  2. IOS的UIPickerView 和UIDatePicker

    1.UIPickerView的常见属性 //数据源(用来告诉UIPickerView有多少列多少行) @property(nonatomic,assign) id<UIPikerViewData ...

  3. 【Android Widget】1.TextView

    1.创建可被点击的TextView 1.1 在xml中创建可被点击的TextView android:autoLink 是否将符合指定格式的文本转换成可单击的超链接. 属性值可以是如下几个属性值的一个 ...

  4. ios随机数不重复

     NSMutableArray* Valuearr=[NSMutableArray new];     int counN=9;    for(int i=0;i<counN;i++)  //创 ...

  5. uname命令

    uname用于显示系统信息. 语法: uname [option]... 选项: -a:显示所有信息: -s:显示内核名称: -n:显示主机名: -r:显示内核版本: -v:显示更多的内核版本信息: ...

  6. ui-router多视图+嵌套视图+传参综合练习

    ui-router多视图:页面上存在的多个ui-view,它们以名字区分: 嵌套视图:一个ui-view的一个状态下对应了一个html,这个html里面又有一个ui-view. 视图之间传参:用ui. ...

  7. 【19道XSS题目】不服来战!

    记得第一次接触xss这个概念是在高中,那个时候和一个好基友通过黑客X档案和黑客手册.第一次接触到了除了游戏以外的电脑知识,然后知道了,原来电脑除了玩游戏还可以搞这些,从此两人一发不可收拾的爱上了玩黑这 ...

  8. JAVA并发编程实战---第三章:对象的共享(2)

    线程封闭 如果仅仅在单线程内访问数据,就不需要同步,这种技术被称为线程封闭,它是实现线程安全性的最简单的方式之一.当某个对象封闭在一个线程中时,这种方法将自动实现线程安全性,即使被封闭的对象本生不是线 ...

  9. C#特性:从自定义一个特性开始,谈谈什么是特性

    作为C#新手中的一员,我刚开始接触特性时,那真是一脸冏逼啊,怎么想怎么查资料都没弄明白它到底是个什么东西,有的入门教程甚至都没讲特性和反射这些概念!相信很多人第一次接触到特性就是关于系列化的知识了. ...

  10. SpringMVC中的java.lang.ClassNotFoundException: org.aspectj.weaver.BCException 调试过程记录

    报错原因 上文本描述 java.lang.NoClassDefFoundError: org/aspectj/weaver/BCException at java.lang.Class.getDecl ...