粥里有勺糖

vuePress-theme-reco 粥里有勺糖    2018 - 2023
粥里有勺糖 粥里有勺糖

Choose mode

  • dark
  • auto
  • light
关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
author-avatar

粥里有勺糖

285

文章

40

标签

关于我
备战春秋
  • 心得总结
  • 校招考点汇总
  • 面经汇总
  • 复习自查
技术笔记
  • 技术教程
  • 模板工程
  • 源码学习
  • 技术概念
  • 个人作品
  • 学习笔记
计算机基础
  • 算法与数据结构
  • 操作系统
  • 计算机网络
  • 设计模式
  • 剑指offer
大前端
  • javascript
  • vue
  • html
  • css
  • 🌏浏览器专题
  • Web性能优化
  • regexp
  • node
面试
  • 问解
  • javascript
  • css
  • 手撕代码
  • 性能优化
  • 综合问题
  • 面经汇总
  • 小程序
手撕代码
  • 数据结构与算法
  • javascript
  • css
个人站点
  • GitHub (opens new window)
  • 博客园 (opens new window)
  • 掘金 (opens new window)
线上作品
  • 轻取(文件收集) (opens new window)
  • 个人图床 (opens new window)
  • 考勤小程序 (opens new window)
  • 时光恋人 (opens new window)
  • 在线简历生成 (opens new window)
留言板
Github (opens new window)
  • wheel

    • 个人作品
    • 时间管理CLI工具
      • 做一个CLI版的时间管理工具(一)
      • 做一个CLI版的时间管理工具(十)
      • 做一个CLI版的时间管理工具(11)
      • 做一个CLI版的时间管理工具(12)
      • 做一个CLI版的时间管理工具(13)
      • 做一个CLI版的时间管理工具(14)
      • 做一个CLI版的时间管理工具(15)
      • 做一个CLI版的时间管理工具(二)
      • 做一个CLI版的时间管理工具(三)
      • 做一个CLI版的时间管理工具(四)
      • 做一个CLI版的时间管理工具(五)
      • 做一个CLI版的时间管理工具(六)
      • 做一个CLI版的时间管理工具(七)
      • 做一个CLI版的时间管理工具(八)
      • 做一个CLI版的时间管理工具(九)
    • 组装个支持记笔记的CodePen
    • ESCheck工具原理解析及增强实现
    • 一款检测代码中TODO的eslint插件
    • 实现一个Web UI检测(视觉走查)工具ing
    • 从0-1实现文件下载CLI工具
    • 内联JS处理(ES语法降级&内容压缩)
    • Node CLI工具原理解析
    • 我打造的在线简历生成应用
    • 助你轻松编写与分享snippet的VsCode插件
    • SourceMap解析CLI工具实现
    • 一个通过NPM包共(分)享代码块的解决方案
    • 实践:给女朋友个性化定制应用-体重记录(一)
    • 实践:给女朋友个性化定制应用-体重记录(二)
    • 实践:给女朋友个性化定制应用-体重记录(三)

做一个CL版的时间管理工具(11)

vuePress-theme-reco 粥里有勺糖    2018 - 2023

做一个CL版的时间管理工具(11)

粥里有勺糖 2021-08-12 技术笔记个人作品CLI工具

# 做一个CLI版的时间管理工具(11)

# 前言

通过前面10篇文章 (opens new window)的介绍,咱们的第一版差不多迭代完毕

由于之前时间很紧,代码质量堪忧,这篇主要来做一下代码的优化工作介绍

# 代码优化

# 目录结构

当前的目录结构如下,所有的ccommand注册逻辑,业务逻辑均在./bin/index.js文件中

维护起来比较麻烦,首先咱们把里面的东西拆分一下

/time-control
├── README.md
├── bin
|  └── index.js
├── src
|  ├── output
|  ├── template
|  └── utils
└── yarn.lock
1
2
3
4
5
6
7
8
9

拆分后的目录结构如下,src增加一个command目录,目录下每个指令对应一个command文件

然后通过index.js文件将这些指令汇总,统一对外暴露

/time-control
├── src
|  ├── command
|  |  ├── command1.js
|  |  ├── command2.js
|  |  ├── index.js
1
2
3
4
5
6

具体示例如下

src/command/command1.js

module.exports = function (param1,param2) {

}
1
2
3

src/command/index.js

const command1 = require('./command1')

module.exports = {
    command1,
}
1
2
3
4
5

这样在bin/index,js文件中直接引入即可,例如初始化项目指令

这样业务逻辑和指令注册逻辑就分开了,维护也更加便捷

const { initCommand } = require('./../src/command')
/**
 * 初始化项目
 */
commander.command("init <projectName>")
    .alias('i')
    .description('init project')
    .action(initCommand)
1
2
3
4
5
6
7
8

# 重复代码

指令的逻辑中,有很多重复代码,直接CV的,我们可以将这部分代码转成公共方法

src/utils/index.js:

  • 例如下面几个简单,而使用地方又很多的
// 获取命令执行路径
function getCWD(){
    return process.cwd()
}

// 获取配置文件
function getConfig(){
    return require(path.join(__dirname,'../../.config/record.json'))
}

// 获取输出文件的默认文件名
function getOutFilename(){
    return 'timec-res'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 朴素代码

毫秒转时分秒,这个方法主要是格式化时间展示,旧的逻辑如下,非常的朴实无华,可读性也不是太高

function mmsToNormal(mms) {
    let str = ''
    mms = (mms / 1000) >> 0
    const day = (mms / (24 * 60 * 60)) >> 0
    day && (str += `${day}天 `)
    mms -= day * 24 * 60 * 60
    const hour = (mms / (60 * 60)) >> 0
    hour && (str += `${hour}时 `)
    mms -= hour * 60 * 60
    const minute = (mms / 60) >> 0
    minute && (str += `${minute}分 `)
    mms -= minute * 60
    str += `${mms}秒`
    return str
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如果只是展示时分秒的,可以直接调用已注册的format方法:

  • 其中+date.format('dd')的目的是把获取到的日期转成数字
  • 然后减去1即可得到过去的天数
  • 时分秒就直接格式化即可
function fn(mms){
  let str = `${+date.format('dd')-1}天${date.format('hh时mm分ss秒')}`
  return str
}
1
2
3
4

这样代码可以说优化到了一行的样子(除开format方法的具体实现)

# 小结

代码还在完善中,明天再大大优化一遍和大家分享

顺便接入一个生成页面的逻辑(计划是接入Vite)

# 其它

由于每天空闲时间有限,本文就先到这

如果读者还感觉意犹未尽,敬请期待后续更新,或持续关注一下仓库 (opens new window)的状态

欢迎评论区提需求,交流探讨

本系列会不断的更新迭代,直至产品初代完成

  • 仓库地址 (opens new window)
Edit this page (opens new window)
Last Updated: 2022/5/15 12:46:34