V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Cyanhall
V2EX  ›  分享创造

官方已经不推荐使用 Moment.js,我制作了一个表方便大家迁移到新库上!

  •  2
     
  •   Cyanhall ·
    Cyanhall · 2020-09-19 00:18:15 +08:00 · 5017 次点击
    这是一个创建于 1534 天前的主题,其中的信息可能已经有所发展或是发生改变。

    链接:Javascript 日期时间速查表

    希望能对大家有帮助 :)

    28 条回复    2020-09-21 14:52:04 +08:00
    tanranran
        1
    tanranran  
       2020-09-19 00:36:25 +08:00
    做得非常好,感谢楼主的分享
    EPr2hh6LADQWqRVH
        2
    EPr2hh6LADQWqRVH  
       2020-09-19 00:56:17 +08:00 via Android
    人家在哪说不推荐使用了
    noqwerty
        3
    noqwerty  
       2020-09-19 02:30:29 +08:00 via Android
    @avastms 楼主文章点进去第一句话就是链接
    qiayue
        4
    qiayue  
       2020-09-19 05:58:24 +08:00
    这种交互形式很好,感谢楼主
    iConnect
        5
    iConnect  
       2020-09-19 06:13:32 +08:00 via Android
    day.js 作者 iamkun 是饿了么那位大牛的作品吗?
    jwenjian
        6
    jwenjian  
       2020-09-19 06:24:13 +08:00 via iPhone
    @avastms

    We recognize that many existing projects may continue to use Moment, but we would like to discourage Moment from being used in new projects going forward. Instead, we would like to recommend alternatives that are excellent choices for use in modern applications today.
    Cbdy
        7
    Cbdy  
       2020-09-19 06:45:50 +08:00 via Android
    作为一个 umd 用户,dayjs 官方打出来的 umd 包不能再 esmodule 中用(依赖的 rollup 版本太老),date-fns 压根不提供官方 umd 包。luxon 大小跟 moment 不遑多让了。还是先用着 proposal-temporal 的 polyfill 吧
    37Y37
        8
    37Y37  
       2020-09-19 07:36:49 +08:00
    写的很棒,感谢分享!
    precisi0nux
        9
    precisi0nux  
       2020-09-19 08:44:24 +08:00 via iPhone
    非常好
    musi
        10
    musi  
       2020-09-19 09:15:31 +08:00 via iPhone
    移动端访问也太不友好了
    Cyanhall
        11
    Cyanhall  
    OP
       2020-09-19 09:25:44 +08:00
    @musi 刚刚也发现了,优化了一下,现在应该好一些了
    shadeofgod
        12
    shadeofgod  
       2020-09-19 13:10:23 +08:00
    进入维护期并不等于不推荐使用,开新项目确实可以用其他的,但旧的项目并没什么必要迁移
    iamkun
        13
    iamkun  
       2020-09-19 13:25:22 +08:00
    @Cbdy 请问下 Day.js 具体是什么问题呢,我来修复一下
    ck65
        14
    ck65  
       2020-09-19 13:58:11 +08:00
    一年前手里的项目逐渐只用 Day.js 了,很稳。
    Cbdy
        15
    Cbdy  
       2020-09-19 14:55:45 +08:00 via Android
    @iamkun dayjs 在 npm 上提供了一个 umd 的包,在前端使用<script type="module"> import 的话,会报一个类似于找不到 this 的错误。原因是 js 代码以 esmodule 在浏览器执行,上下文的 this 是 undefined,要换成 globalThis 或者 window,是 rollup 打包的问题,参考这个 issue: https://github.com/rollup/rollup/issues/3666
    iamkun
        16
    iamkun  
       2020-09-19 15:26:28 +08:00
    @Cbdy 好的 下个版本会修一下
    des
        17
    des  
       2020-09-19 15:32:12 +08:00
    希望加上兼容性表格,我记得 luxon 对 ie9 和 8 支持不太好
    Cyanhall
        18
    Cyanhall  
    OP
       2020-09-19 17:59:48 +08:00
    @des date-fns 和 luxon 似乎没有明确说明浏览器的兼容性。luxon 使用的 Intl 对象,会导致兼容性比较差,且在包大小方面也没有优势,故没有列出来。

    参考: https://caniuse.com/?search=Intl
    Cbdy
        19
    Cbdy  
       2020-09-20 11:45:08 +08:00
    @iamkun 👍
    azh7138m
        20
    azh7138m  
       2020-09-21 00:14:19 +08:00
    @iamkun
    hhhh
    dayjs 的 esm 输出也不对,标注了 pure
    然后很多插件是直接修改原型的
    过 uglify/terser 之后就会炸裂
    比如 https://cdn.jsdelivr.net/npm/[email protected]/esm/index.js



    在字节的时候做了个体积优化,是把 luxon 换成了 dayjs
    实际体验并不太好,主要为
    - unit 上有 day/date 非常让人迷惑,有的 api 上两个单位的语义相同,有的 api 上语义不同
    - 不同 api 上 unit 在的位置不同,风格并不统一
    - 构造时间的 api 太少了,我还是需要注意 0-base 的问题
    azh7138m
        21
    azh7138m  
       2020-09-21 00:24:18 +08:00
    @Cbdy
    luxon (70KB) 与 moment(280KB) 有 3.4x 差距 体积与 date-fns 相当
    实际使用中体积会更小 tree-shakeable + side-effect free

    不过既然提到了 umd 想必是用不到这些特性,整包体积就很重要
    我个人目前喜欢用 https://bundlephobia.com/ 看包体积



    我觉得在大部分场景下,包体积真的不重要(除了像苏卡卡那种需要首屏一个 1-RTT 的奇怪要求)
    良好的使用体验才是最重要的事情(丰富的 API + 使用时更低的心智负担)
    iamkun
        22
    iamkun  
       2020-09-21 10:10:03 +08:00
    @azh7138m
    > unit 上有 day/date 非常让人迷惑,有的 api 上两个单位的语义相同,有的 api 上语义不同
    这个当初是全部参考了 moment 的 API,moment 有的这个问题 确实还是没有解决掉,我自己有时候都分不出 day/date

    > 构造时间的 api 太少了,我还是需要注意 0-base 的问题
    这个后面会考虑做一个 1-base 的插件 (类似 luxon )供用户选择
    whusnoopy
        23
    whusnoopy  
       2020-09-21 10:18:46 +08:00
    歪个楼,楼主的页面可响应滚动区域只有中间的主体部分,然而滚动条是放在整个页面右侧的,一开始光标移动到旁边去然后又滚不动,有点奇怪
    Cyanhall
        24
    Cyanhall  
    OP
       2020-09-21 11:23:51 +08:00
    @whusnoopy 你是指右侧滚动条,在滚动时会显示出来,不滚动时,移动光标过去时被自动隐藏了吗?
    whusnoopy
        25
    whusnoopy  
       2020-09-21 12:05:43 +08:00
    @Cyanhall 不是,是我的鼠标光标停到中间区域外时,是滚不动的,不仅仅是自动隐藏了滚动条

    我是 macOS 10.15.6 加 Edge 85 下,触摸板和外接鼠标都有这个问题
    Cyanhall
        26
    Cyanhall  
    OP
       2020-09-21 12:48:36 +08:00
    @whusnoopy 好像中间区域外滚不动是设置成这样的,这块可看做是悬浮固定的导航栏,滚动条自动隐藏是 macOS 的系统设置,可通过 系统设置 => 通用 => 展示滚动条:勾选 [总是] 解决。
    whusnoopy
        27
    whusnoopy  
       2020-09-21 14:21:56 +08:00
    @Cyanhall 设定上外部都是悬浮固定的导航栏,这个可以理解,只是觉得有点奇怪而已,有点反直觉,并不是 bug

    因为如果外面滚不动,但滚动条显示在外部,这个会奇怪,参考 https://getbootstrap.com/docs/4.5/getting-started/introduction/ Bootstrap 的文档,也是左右侧有全局和当前页导航,滚动条也在整个页面右侧,但光标悬浮在左右两侧时也是可以正常滚动的
    Cyanhall
        28
    Cyanhall  
    OP
       2020-09-21 14:52:04 +08:00
    @whusnoopy 原来如此,优化了一下,现在也可以在右侧空白处滚动了,但是还没做到在导航文字上也滚动,我继续调整看看,谢谢指出 :)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2214 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 01:31 · PVG 09:31 · LAX 17:31 · JFK 20:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.