### 效果展示

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/310103d07a2640dba7d43a3d82b726de~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;"/>





### 绘制大致容器

`gird`简易布局,11个`dd`元素模拟图片

```html
<dl class="view">
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>
```

```css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
}
.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}
```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c02f5d1668294661a21a02fd9260c709~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;" />

### `counter`计算属性展示数量

使用`::before伪元素覆盖住图片，将`counter`计算的数量展示在`::before元素中

<a href="[counter() - CSS（层叠样式表） | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/counter())">counter</a>

```css
.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images;
}
.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}
.view dd::before{
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30e5a21617064572993e93214e14e9f0~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;">

`counter`已经将全部`dd`元素数量展示出来,可我们只需要超出第九个`dd`元素的数量,这要怎么做呢？

其实很简单，使用<a href="[:nth-child - CSS（层叠样式表） | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child)" >:nth-child伪类</a>选择**第九个`dd`元素后的兄弟元素**

```css
.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}

.view dd:nth-child(9)~dd {
    counter-increment: images;
}

.view dd:nth-child(9) ~ dd::before{
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
```

`~ dd`表示后面所有的`dd`元素

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/165fa3b02bc947ea8e76a9a73d5a3519~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0" />

嘿嘿！只差将最后的元素移个位置了，可以使用定位

```css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}

.view dd:nth-child(9)~dd {
    width: 100px;
    counter-increment: images;
    position: absolute;
    right: 0;
    bottom: 0;
}

.view dd:nth-child(9)~dd::before {
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
```

将超出第九个的所有元素定位至容器右下方

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90b41870d7fb4df684fce89779c22c00~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;" />

### 原生js实现点击展示

超出第九个的所有元素被定位在右下，利用js实现点击定位的元素则将元素去除定位属性

```css
//去除定位 
.view dd.no-befter {
    position: static !important;
}

.view dd.no-befter::before {
    display: none !important;
} 
```

```js
let dd = document.getElementsByTagName('dd'),
    len = dd.length;
dd[len - 1].onclick = () => {
    [].slice.call(dd).forEach(val => {
        val.classList.add('no-befter');
    })
}
```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/448023a8b7fd4fee98d18f9ba9fb13ff~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0" />

### counter另一种思维实现

`counter`实现九宫格，上面是使用`counter`默认从`0`开始。现在重新设置`counter`从`-9`开始计算。

```css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images -9;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}

.view dd::before {
    content: counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/433e01dd6e58411f8a8b4528826e0f37~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;" />

同理，超出第九个元素才展示数量，然后定位

```css
dl,
dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 300px;
    counter-reset: images -9;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}

.view dd:nth-child(9)~dd:before {
    content: counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
```

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/79bde449359a4449bbf51f73896901a4~tplv-k3u1fbpfcp-zoom-1.image" style="margin:0;" />

后面的代码就不展示了，基本上是一样的。

所有代码保存在<a href="https://github.com/lihai-boop/simple-dome/blob/master/counter%E5%AE%9E%E7%8E%B0%E4%B9%9D%E5%AE%AB%E6%A0%BC%E5%9B%BE%E7%89%87%E5%B1%95%E7%A4%BA.html"> github</a>需要的自取。

### 最后

<a href="https://blog.csdn.net/qq_45472813/article/details/118382226">CSS::marker让文字序号不再呆板</a>,`counter`配合`::marker`可以做有趣列表展示。

公众号:隔壁姥爷，求个关注❤️‍🔥

counter实现图片九宫格超出展示Demo

### 1. 滚动距离计算

`offsetTop,scrollTop,clientHeight`原生API获取距离像素计算

`offsetTop:`获取当前元素与其父级元素顶部内边距的距离 

`scrollTop:`当前元素滚动超出的高度

`clientHeight:`当前元素的可视高度

"灵魂画手"绘图

img元素offsetTop - 父级元素scrollTop<父级元素clientHeight,即说明img已滚动进入父可视区域

<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fb270d13cf6465296db9e56ac6a9f59~tplv-k3u1fbpfcp-zoom-1.image">





```css
#view {
    width: 300px;
    height: 500px;
    margin: 30px auto;
    overflow-y: auto;
}

.parent {
    height: 1000px;
}

img {
    margin-top: 800px;
}
```

```html
<div id="view">
    <div class="parent">
        <img alt="..." loading="lazy" class="img"
             data-src="https://tse1-mm.cn.bing.net/th?id=OIP-C.FaG6dzohGs3q45-DwsEyQQHaEK&w=165&h=100&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2">
    </div>
</div>
```

```js
let view = document.getElementById('view');
let img = document.getElementsByClassName('img')[0];
view.onscroll = function () {
    let sh = this.clientHeight;
    let st = this.scrollTop;
    let ch = img.offsetTop;
    ch - st < sh && (img.src = img.dataset.src)
}

```

用户频繁滚动鼠标时，会多次触发`onscroll`事件计算滚动距离，消耗性能又没有意义，所以需要控制函数执行的次数，减少性能的消耗，对滚动事件进行防抖处理

开发中为减少反复写防抖函数，已经将它封装入`@lihai-js/tool`,  开箱即用

`@lihai-js/tool`地址https://github.com/lihai-boop/tool

```js
let img = document.getElementsByClassName('img')[0];
let view = document.getElementById('view');
function debounce (fn, wait = 1000, immediate = false) {
    const self = this
    immediate && fn.call(this)
    return function () {
        self.debounceTime && clearTimeout(self.debounceTime)
        self.debounceTime = setTimeout(() => {
            fn.apply(this, arguments)
        }, wait)
    }
}

view.onscroll =debounce(function () {
    let sh = view.clientHeight;
    let st = view.scrollTop;
    let ch = img.offsetTop;
    ch - st < sh && (img.src = img.dataset.src)
}) 
```

### 2. `getBoundingClientReat`方法计算

`Element.getBoundingClientReat()`方法返回元素的大小及其相对于视口的位置。

该方法返回一个`DOMRect`对象，对象包括`left`, `top`, `right`, `bottom`, `x`, `y`, `width`, 和 `height`这8个属性值。除了`width` 和 `height` 以外的属性是相对于视图窗口的左上角来计算的。

[Element.getBoundingClientRect() - Web API 接口参考 | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect)

以**滚动计算距离**列举的代码例子来说,可视窗口为浏览器窗口，对`img`dom对象使用`getBoundingClientReat()`获取top，top即为浏览器窗口左上角到`img`标签左上角的像素距离点

<img style="margin-left:0px" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9494d8feeb07477591c188db635fdddd~tplv-k3u1fbpfcp-zoom-1.image">

利用上述点，当`top`值小于浏览器窗口高度时，说明`img`已滚动于可视区域，即进行加载

```css
#view {
    width: 300px;
    height: 500px;
    margin: 30px auto;
    overflow-y: auto;
}

.parent {
    height: 1000px;
}

img {
    margin-top: 800px;
    margin-bottom: 30px;
}
```

```html
<div id="view">
    <img alt="..." class="img" data-src="https://p.pstatp.com/origin/pgc-image/c206105e0c46482a85b69a67a59ce682" />
</div>
```

```js
let img = document.getElementsByClassName('img')[0];
let view = document.getElementById('view');
//省略防抖代码
window.onscroll = debounce(() => {
    let clientHeigth = view.clientHeight;
    let { top } = img.getBoundingClientRect();
    top < clientHeigth && (img.src = img.dataset.src);
})

view.onscroll =debounce(function () {
    let sh = view.clientHeight;
    let { top } = img.getBoundingClientRect();
    top<sh && (img.src = img.dataset.src)
})
```



### 3. `IntersectionObserver`监听

`IntersectionObserver`API原理与**2. `getBoundingClientReat`方法计算**一样，官方认为图片懒加载，开发者既要获取top值，又要监听滚动事件，还要进行防抖处理，一系列操作麻烦不方便。为了简化它，官方提供了`IntersectionObserver`接口。

`IntersectionObserver(callback[, options])`

当监听的元素达到要求后，触发`callback`回调函数，它接收两个参数

[IntersectionObserver API 使用教程 - 阮一峰的网络日志 (ruanyifeng.com)](http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)

```js
let img = document.getElementsByClassName('img')[0];
let view = document.getElementById(view);
let ob = new IntersectionObserver(function (changes) {
    changes.forEach(val => {
        let { isIntersecting, target } = val;
        isIntersecting && (target.src = target.dataset.src);
    })
}, {
    root: view,
    threshold: [0]
})
ob.observe(img);
```



### 4.`<img>` 标签属性`loading`

> 兼容性差，不推荐

`<img>`标签属性`loding`,可选值：

`eager`:立即加载图像

`lazy`:延迟加载图像，直到它和视口接近到一个计算得到的距离，由浏览器定义

详细介绍:<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-loading">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-loading</a>

```html
<div class="parent">
    <img loading="lazy"
         src="https://tse1-mm.cn.bing.net/th?id=OIP-C.FaG6dzohGs3q45-DwsEyQQHaEK&w=165&h=100&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"  alt="...">
</div>
```
### 最后

期待各位同学指点补充！

觉得文章有用的同学点赞一波!

实现懒加载的四种方式

![IMG_0406.HEIC.JPG](http://112.124.1.74/static/img/4239b8ec1323cf758c5dfb5c94955ac7.IMG_0406.HEIC.JPG)
## 📖阅读本文，您将收获

-   了解到优秀的markdown产品[wolai](https://www.wolai.com/signup?invitation=I6MQISP)、[notion](https://www.notion.so/66bed77ec85d42d9b84f3799e69dd711)
-   markdown编辑器选型，多一个选择项
-   学会如何使用`Mildown`



## 一、markdown编辑器的槽点

作为研发人员，我不相信您编写文档没有使用过markdown；如果使用markdown编写文档，那肯定是离不开一款markdown编辑器。

但是呢，市面上markdown编辑器又有蛮多槽点的：

-   大部分开源编辑器，它是编辑区与预览区分离
    ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10e013f54d574fd7b0ec8db1bdc384fa~tplv-k3u1fbpfcp-watermark.image?)
    上图为掘金平台使用的编辑器，编辑区与预览区分离老碍眼了。古板，我觉得两者结合做到所见即所得会更好。

-   收费

    做到所见即所得的markdown编辑器，当然有，例如市面上的[Typora](https://typora.io/)、[wolai](https://www.wolai.com/signup?invitation=I6MQISP)、[notion](https://www.notion.so/66bed77ec85d42d9b84f3799e69dd711)。

    这三款编辑器产品，用过的人都说好，**强烈推荐**。

    它们有个共同的问题：商业化，商业化的产品目的就是搞钱，所以呢，它们有部分高级功能是需要付费的。

    但对大部分无特殊功能要求的人，它们已经够用了。

-   不开源

    像[Typora](https://typora.io/)、[wolai](https://www.wolai.com/signup?invitation=I6MQISP)、[notion](https://www.notion.so/66bed77ec85d42d9b84f3799e69dd711)产品，它们的源代码是没有开放出来的，我们想在项目中集成它们是不可能的。

## 二、新宠儿：`Milkdown`

> GitHub Star数: 6k+

`Milkdown`是什么?

官方自我介绍：

> Milkdown 是一个轻量但强大的 WYSIWYG（所见即所得）的 markdown 编辑器

为什么选择`Milkdown`?

官方理由：

-   为开发者提供一个**免费开源解决方案**
-   不同于 [Notion](https://notion.so) 和 [Typora](https://typora.io/) 等商用软件，Milkdown是开源且永久免费的
-   值得信赖，有强大的社区支撑  


![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f3544cbdeb714d659cf501087dbd3b14~tplv-k3u1fbpfcp-watermark.image?)  
    
在线体验：<https://milkdown.dev/zh-hans/online-demo>

GitHub: <https://github.com/Saul-Mirone/milkdown>

### 2.1 安装并运行

`Mildown`以插件驱动，它由核心模块、官方插件组成。

安装核心模块：

```
npm i @milkdown/core @milkdown/transformer @milkdown/prose @milkdown/ctx
```

创建Editor实例：

```
import { Editor } from "@milkdown/core"
Editor.make().create()
```

执行，两行代码就报错啦！！

-   错误1:`Uncaught (in promise) Timing InitReady timeout.`

    原因是缺少主题，再安装一个主题包：

```
npm i  @milkdown/theme-nord 
```

```
import { Editor } from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
Editor.make().use(nord).create()
```

```
再次运行，紧接着第二个报错出现。
```

-   错误2:`Uncaught (in promise) RangeError: Schema is missing its top node type ('doc')`

    错误大概意思是缺少`doc`节点，这是原因缺少markdown预设指令插件。

    官方提供了两款插件：`@milkdown/preset-commonmark、@milkdown/preset-gfm`，推荐`@milkdown/preset-gfm`。

    同样的，下载使用：

```
import { Editor } from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
import {gfm} from "@milkdown/preset-gfm"
Editor.make().use(nord).use(gfm).create()
```

![Aug-14-2022 11-37-41.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85ca1e58200c4a9a95a69e990b142623~tplv-k3u1fbpfcp-watermark.image?)
至此，`Milkdown`成功运行。接下来，只需要按需添加插件。

### 2.2 顶部工具栏插件

```
npm i @milkdown/plugin-menu
```

还是链式调用`use` ,注册插件。

```
import { Editor } from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
import { gfm } from "@milkdown/preset-gfm"
// 工具栏
import { menu } from '@milkdown/plugin-menu';
Editor
    .make()
    .use(nord)
    .use(gfm)
    .use(menu)
    .create()
```

但得到的是一堆英文单词：


![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e29ec8702ae44c099ae56af61f6e5c8~tplv-k3u1fbpfcp-watermark.image?)

功能是存在的，但展示有问题，需要把一堆英文单词替换成字体图标。

```
import { Editor ,ThemeIcon} from "@milkdown/core"
import { nord } from "@milkdown/theme-nord"
import { gfm } from "@milkdown/preset-gfm"
// 工具栏
import { menu } from '@milkdown/plugin-menu';
import { getIcon } from "./icon"
Editor
    .make()
    .use(nord.override((emotion, manager) => {
        manager.set(ThemeIcon, (icon) => {
            if (!icon) return;
            return getIcon(icon);
        });
    }))
    .use(gfm)
    .use(menu)
    .create()
```

针对`@milkdown/theme-nord` 设置，添加一个`getIcon` 方法。

`icon` 文件内容过多此处不粘贴，请移动GitHub阅读：<https://github.com/CatsAndMice/milkdown/blob/master/icon.js>。

另外需要加载字体图标资源：

```
 <html>
 //...
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 </html>
```

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f89a2e4916d349cc8b01a88ff09f97d9~tplv-k3u1fbpfcp-watermark.image?)

### 2.3 复制粘贴插件

```
import { clipboard } from '@milkdown/plugin-clipboard';
```

```
//...
import { clipboard } from '@milkdown/plugin-clipboard';
Editor
    .make()
    .use(nord.override((emotion, manager) => {
        manager.set(ThemeIcon, (icon) => {
            if (!icon) return;
            return getIcon(icon);
        });
    }))
    .use(gfm)
    .use(menu)
    .use(clipboard)
    .create()
```

### 2.4 选择工具栏插件

```
npm i @milkdown/plugin-tooltip
```

设置工具栏选中后置顶：

```
//...
import { tooltipPlugin, tooltip } from '@milkdown/plugin-tooltip';
Editor
    .make()
    .use(nord.override((emotion, manager) => {
        manager.set(ThemeIcon, (icon) => {
            if (!icon) return;
            return getIcon(icon);
        });
    }))
    .use(gfm)
    .use(menu)
    //新增
    .use(tooltip.configure(tooltipPlugin, {
        top: true,
    }))
    .create()
```

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/745797ac9c2c41c793d5bef492faeeea~tplv-k3u1fbpfcp-watermark.image?)

### 2.5 支持`/` 命令插件

```
npm i @milkdown/plugin-slash
```

输入`/`，自定义添加面板功能配置：

```
import { defaultValueCtx, Editor, rootCtx, ThemeIcon, themeManagerCtx } from "@milkdown/core";
//...
import {slash,createDropdownItem,defaultActions,slashPlugin} from '@milkdown/plugin-slash';

Editor
    .make()
   // 新增
  .use(slash.configure(slashPlugin, {
    config: (ctx) => {
      return ({ content, isTopLevel }) => {
        if (!isTopLevel) return null;
        if (!content) {
          return { placeholder: "键入文字或'/'选择" };
        }

        const mapActions = (action) => {
          const { id = "" } = action;
          switch (id) {
            case "h1":
              action.dom = createDropdownItem(
                ctx.get(themeManagerCtx),
                "标题1",
                "h1"
              );
              return action;
            //...
            default:
              return action;
          }
        };

        if (content.startsWith("/")) {
          return content === "/"
            ? {
              placeholder: " ",
              actions: defaultActions(ctx).map(mapActions)
            }
            : {
              actions: defaultActions(ctx, content).map(mapActions)
            };
        }
        return null;
      };
    }
  }))
```

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03582030978044359c99465ee92acb92~tplv-k3u1fbpfcp-watermark.image?)

### 2.6 设置默认内容及添加事件插件

设置默认内容是核心模块提供的功能，不必安装插件。

```
import { defaultValueCtx, Editor, rootCtx, ThemeIcon, themeManagerCtx } from "@milkdown/core";
//...

Editor.make()
  .config((ctx) => {
    ctx.set(rootCtx, document.querySelector('#app'));
    ctx.set(defaultValueCtx, "## 点赞+评论+关注=学会");
  })
  //...
```

添加事件:

```
npm i @milkdown/plugin-listener
```

`@milkdown/plugin-listener`分别对应七个生命周期函数：

|       事件名          |       事件描述      |
| --------------- | ----------- |
| beforeMount     | 挂载前         |
| mounted         | 挂载后         |
| updated         | 状态更新        |
| markdownUpdated | markdown 更新 |
| blur            | 失焦          |
| focus           | 聚焦          |
| destroy         | 销毁          |

```
//...
import { listenerCtx, listener } from "@milkdown/plugin-listener"

Editor.make()
  .config((ctx) => {
    ctx.set(rootCtx, document.querySelector('#app'));
    ctx.set(defaultValueCtx, "## 点赞+评论+关注=学会");
    //新增
    ctx.get(listenerCtx).markdownUpdated((ctx, markdown, prevMarkdown) => {
      console.log(markdown);
    });
  })
  //...
```

借助上述事件，可以自定义获取内容等功能。

Milkdown官方还有其他功能插件，例如：图片上传等，文章不逐一列举了。

文章演示代码已开放GitHub: <https://github.com/CatsAndMice/milkdown>

## 三、结束语

原创不易！如果我的文章对你有帮助，**点赞+评论+关注**就是对我的最大支持^_^。

🐂呀！这款markdown编辑器我太钟意啦！

![image.png](http://112.124.1.74/static/img/e9694ccce8fb42b3e62e487276c79557.image.png)
一年又一年，时间过得太快啦！

最近总是想着2022年的点点滴滴，一年时光不得写点什么不一样的，可是思前想后觉得这一年也没什么不一样的啊。所以呢，2022年终总结标题就取名为`平淡无奇`。

**人一生最重要的是什么？**我知乎、百度了一下，给出的答案相似，提到了人生五个方面，分别是**身体健康、财务理财、人际社群、工作事业、家庭生活、学习成长**。自己也觉得挺合理的，于是决定年终总结按这五个方面来写。

写年终总结思想过程中，想到了大学毕业前写的一篇写给五年后自己的话，想跟读者一起回顾下：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a21327af3d614f9d90d728a8a963eefc~tplv-k3u1fbpfcp-zoom-1.image)

共勉！



## **身体健康**

身体健康是一切的基础，每年我都会下意识地去锻练身体，这一年也不例外。

使用Keep有两年时间，运动总记录有12594分钟，这一年有7480分钟被运动占用

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd33275d86614f22a3ad87d994abfdba~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f83bc6ba6fd7416980fb69afb922885e~tplv-k3u1fbpfcp-zoom-1.image)

这一年，十一月份买了辆山地车开启周未骑行模式。到写完这篇文章为止，总骑行120公里。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d731ebf407c4b2791feb25a1a40e16b~tplv-k3u1fbpfcp-zoom-1.image)

跟大家分享骑行动态：

最长骑行距离刷新到26公里

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af4b85661de045ccbb0fe1defacd3afd~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d091160ebf2b42ffa1a3071dd07b51b0~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef3a462528ff4d61b35f06fd8a3e517a~tplv-k3u1fbpfcp-zoom-1.image)

骑行风景照合成视频发表个人视频号

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e44954701ed54f33823a93f20d6576d4~tplv-k3u1fbpfcp-zoom-1.image)

关于运动，我是较真的。

## 财务理财

分享两篇文章：

-   [一个程序员的财务独立之路](https://github.com/ruanyf/weekly/blob/08bcc8c63566fd4750bbeb31415f89ca8f170403/docs/issue-191.md)
-   [程序员如何实现财富自由](https://juejin.cn/post/7142455046599344164)

实现“财务独立”，不再为维持生计和支付日常账单而劳碌。这是每个人都幻想过的，我也想，我的人生目标就是追求财务独立。

读过好几本理财类书籍：

-   《小狗钱钱》
-   《富爸爸穷爸爸》
-   《财富自由之路》等

它们告诉我实现财务独立的一些做法：

-   开源节流

    除工作收入，应扩展更多收入来源，节省生活中不必要的消费；避免高额负债

-   学会投资

    投资自己是最靠谱的；学会钱生钱的方法，股票、基金等可以去购买

-   合理分配收入

    投资不是让你把收入全部碰股市，抱着搏一搏单车变宝马的心态。要将收入分成**要花的钱、保值的钱、生钱的钱以及保命的钱**

-   长期坚持

其实教给我们的道理很简单，难的是自己能否坚持做下去。

这一年，购买了一支股票、一支偏债型基金、二支偏股型基金，给家人及自己购买商业医保有一年。**要花的钱、保值的钱、生钱的钱以及保命的钱**这四笔钱均有去分配，但细想后发觉这四笔钱分配比例有点偏了，后面再调整下。

投资有风险，遭遇损失是常有的。

这一年收益率为-0.12%，学徒级投资吧。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/30103785307b4cdabfdbf91498c59546~tplv-k3u1fbpfcp-zoom-1.image)

## **人际社群**

人际社交这方面，一直是我不擅长的。大学时期加入过学校社团，呆了半年，后来感觉实在难隔入到群体中就退出了，大学到毕业很少主动去社交，能认识的都是自己班上的。

工作后感觉圈子更窄了，作为技术人大部分时间是在独立思考敲代码，很少有机会能接触认识到优秀的人，更别说跨行业认识优秀的人。

自己线上会加入一些技术群，也会去认识关注一些行内大佬，他们会看书，经常写文档，写规划，写总结，早起学习，产出各种方法论，产出各种技术轮子，并且分享出来。他们有各种各样的优秀特质，我没有，接触后自己的潜意识里面也会想去培养一下特质，见贤思齐，鞭策一下自己。

## 工作事业

我想了想，感觉工作其实没什么好写的，日常工作就是写页面。公司业务技术难点不高，熟悉一段时间后基本可以用搬砖来形容，对于我这种工作没几年的程序员来讲要做的就是积累技能，学习怎么把砖搬好。

然而，在一个地方呆久了之后，难免会进入舒适区，焦虑倒是没感觉到，毕竟自己工作没几年。

温水煮青蛙非常浅显的道理，舒适区呆久了人容易麻木，原地踏步，所以跳出舒适区是下一年自己必须要去做的一件事。

这一年工作带给我的成长有限，重复的工作内容更多的是身体上的劳累，脑袋缺少思考。

最后再放一下公司代码提交记录和个人 `github` 代码提交记录：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f7355f2bb6a04a24adaa61e7d08b48f6~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e86e9cfb63774522940fe1c6c97db986~tplv-k3u1fbpfcp-zoom-1.image)

说到事业就更没东西写了，社会阅历尚浅，没钱、没人脉、没点子，没故事，如果去创业肯定是找死。

有时候会想如果这行干不下去了，我会去做什么呢？暂时我也没有找到答案。

生活中会把脑子里一闪而过的想法记录下来，怕突然想不起了，可能哪一天我会从其中找到一条可行性想法做为答案吧。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10339b1b1509409b80df47c2deaee1c1~tplv-k3u1fbpfcp-zoom-1.image)

## 学习成长

年初，我定了一个计划：每天学习看书一个小时，然后通过某个应用自动生成，到点提醒

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9312b61446748c595f6a6ec33a3aa66~tplv-k3u1fbpfcp-zoom-1.image)

到年尾盘点一下，结果是完成次数少，未完成的次数占大头。

**思想的巨人，行动的矮子**，也许说得就是我这种。

这一年，没完整读完一本书，都是阅读到一半后没再读下去。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4fb3ce71db94c01bdf19ebb0ba76df2~tplv-k3u1fbpfcp-zoom-1.image)

好在自己有写文章的习惯，以教为学，这也是一种高效的学习方法。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d33e7c44e8f347cabf7e71821b6ee110~tplv-k3u1fbpfcp-zoom-1.image)

这一年，我在掘金写了10篇文章，写得也比较少，懒人一个。

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9b2056f9a174657a4da2a36c1a9d41c~tplv-k3u1fbpfcp-zoom-1.image)

有参与`github`社区贡献，但没有深入参与到某一个开源项目中去

-   [vueuse](https://github.com/vueuse/vueuse/pull/2433)
-   [vue-devui](https://github.com/DevCloudFE/vue-devui/pull/99)
-   [vant](https://github.com/youzan/vant/pull/9732)

## 家庭生活

**家有本难念的经**，我是厌烦了，想离家远点越来越不想回家了。

翻一翻朋友圈，再简单分享一些生活点滴：

自己拍的好看景色

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74a5ec701d1c4a02b47707389138ea99~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1434f782a1d84a6aa04e8ea654f50aa2~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/37e5dd0d33184ddf99acac775c132961~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c09b2a10cff46269402a66e43befbcb~tplv-k3u1fbpfcp-zoom-1.image)

五一假期去横店

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22645d4f518c4187b02f31f06b96885f~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad1b350d1dd248b8a45c36bc987d3fcd~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4b980cfebddb4200a98adbed502857dd~tplv-k3u1fbpfcp-zoom-1.image)

金华衢州、武义游玩

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7523d669557f45038c86949e7c8cdb73~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/695dbc4f5ff54d05a3a7168f6c968da1~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/15272c4b7ee44f72af4caff3e01c5734~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac052b58cd36417685f9fa3a8a6ab021~tplv-k3u1fbpfcp-zoom-1.image)

图贴得有点多，不贴了。

## 总结

白驹过隙，日光荏苒，再回看这一年光阴不禁感唉自己没有做成一件让自己满意的事。年中也写一篇总结，flag立的蛮多，完成的没有几件。

2023年度计划简化下就两点：

-   跳出舒适区，多写文章(最少15篇)尝试运营公众号「凌览社」，倒逼自己学习
-   搞钱

最后，2023年，希望大家**在新的一年，遇见更好的自己**。

平淡无奇，2022年终总结

![封面.jpeg](http://112.124.1.74/static/img/4770dc47b668bf9a979fee82f6e2db90.%E5%B0%81%E9%9D%A2.jpeg)
## 前言

在[Github Actions实现仓库自动同步Gitee并更新文档 - 掘金 (juejin.cn)](https://juejin.cn/post/7049317964281020446)文章前言中描述了笔者开源一个工具库。在持续更新库的时候，发现每一次更新[medash - npm (npmjs.com)](https://www.npmjs.com/package/medash)版本时，存在需要手动Git Push、执行rollup打包命令以及更新package.json文件中version字段值等操作。为解放双手，写了50+行代码。



## 实现终端交互选择版本号

版本号修改只考虑四种情况:

1. 更新主版本号, 如1.0.0修改成2.0.0
2. 更新子版本号，如1.0.0修改成1.1.0
3. 阶段版本号，如1.0.0修改成1.0.1
4. Beta版本，如1.0.0修改成1.0.0-beta.1

版本号的命名规则是由`.` 进行拼接，所以可以使用正则将版本信息获取出来。

首先，版本号信息存储在**package.json**`version` 字段值中，代码是使用了[TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)](https://www.tslang.cn/)。Ts执行时，**es6**模块化会被编译成node环境中支持的**CommonJS**模块化。即`import pkg from "../package.json";` 会被转化成`const pkg = require("../package.json")` 。 CommonJS标准规定，导入Json文件时，将会有把Json反序列化的操作，所以读取的json 已经被反序列化，不需要再`JSON.parse` 操作。

```TypeScript
import pkg from "../package.json";
const version = pkg.version;
const reg = /([1-9])\.([0-9])\.([0-9])(?:(\-\w*)\.([1-9]+))?/g;
const execs = reg.exec(version) as Array<any>;
```


然后，`npm install inquirer` 安装[inquirer ,](https://www.npmjs.com/package/inquirer)它是一个提供**终端交互**的工具包。

按照上述版本修改的四种情况，程序提供的版本号选择列表选择可以分成两种情况：

1. 版本号含有beta；
2. 版本号没有含有beta。

是否含有beta，通过对`execs[4]` 是否存在来判断。

```TypeScript
//...
const onSelectVersion = async () => {
    const beta = execs[4];
    //处理版本含有beta的情况
    const lists = beta ? getBetaVersionLists(beta) : getVersionlists();
    inquirer.prompt([{
        name: 'list',
        type: 'list',
        message: '请选择发布的版本:',
        choices: lists,
        default: [lists[0]]
    }])
    //...
}
```


处理含有beta的情况

```TypeScript
const getBetaVersionLists = (beta) => ([
    getVersion([execs[1], execs[2], execs[3]]),
    getVersion([execs[1], execs[2], execs[3]]) + `${beta}.${addOne(execs[5])}`
])
```


处理没有beta的情况

```TypeScript
const getVersionlists = () => ([
    getVersion([addOne(execs[1]), execs[2], execs[3]]),
    getVersion([execs[1], addOne(execs[2]), execs[3]]),
    getVersion([execs[1], execs[2], addOne(execs[3])])
])
```


其中`getVersion` 和`addOne` 方法分别用于拼接完整的版本号和数字+1

```TypeScript
const addOne = (num) => Number(num) + 1;
const getVersion = ([major, minor, patch]) => `v${major}.${minor}.${patch}`
```


不存在beta的效果：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82eeabdeec1e41598697bbc8350ba163~tplv-k3u1fbpfcp-zoom-1.image "")

存在beta的效果: 

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f67654744b4544289657cbdf15196bee~tplv-k3u1fbpfcp-zoom-1.image "")

> **注意点：**代码语言是使用**TypeScript**，所以执行时需要[ts-node - npm (npmjs.com)](https://www.npmjs.com/package/ts-node)工具帮我们编译下。


`npm run release` 是自定义命令，在文件package.json的scripts下配置即可。

```JSON
//...
    "scripts": {
        //..
        "release": "ts-node scripts/release.ts"
    },
//...
```


![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae2fc7681f2b46ccbb59e494f4e35c07~tplv-k3u1fbpfcp-zoom-1.image "")

最后，导入node文件模块，将选择确定后的版本号重新赋值给version，再写入package.json

```TypeScript
//...
import path from "path";
import fs from "fs";
//...
const onSelectVersion = async () => {
    const beta = execs[4];
    //处理版本含有beta的情况
    const lists = beta ? getBetaVersionLists(beta) : getVersionlists();
    inquirer.prompt([{
        name: 'list',
        type: 'list',
        message: '请选择发布的版本:',
        choices: lists,
        default: [lists[0]]
    }]).then(async ({ list }) => {
        pkg.version = list
        //...
        fs.writeFile(path.join(__dirname, '../package.json'), String(JSON.stringify(pkg)), 'utf8', async (error) => {
            if (error) {
                return;
            }
            //...
        });
    })
}

```


好了，一个版本选择的功能就完成了。

## 跟Shell语言说再见

版本选择完成，接下来需要处理Git一系列命令提交代码、Git自动打Tag以及向Npm更新等操作。

需要处理命令有：

```Bash
git add .
git commit -m xx
git tag **
git push origin ** //向远程仓库提交tag
git push origin branch

npm run build //rullop打包
npm publish //npm 发版

```


其中`npm run build` 将执行[rullop](https://www.rollupjs.com/)打包

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41c0a32e224a4270b6aa922fdc9c2499~tplv-k3u1fbpfcp-zoom-1.image "")

在终端中自动化执行一些命令，这个时候就需要[Shell](https://www.runoob.com/linux/linux-shell.html)，创建Shell文件去完成对应的逻辑。作为前端工程师就需要去学习下Shell，有学习成本。

秉承能用Js实现的最终用Js实现的想法，node [child_process 子进程](http://nodejs.cn/api/child_process.html)模块中提供了可执行Shell命令的API。

当然还有更便捷的工具[zx](https://www.npmjs.com/package/zx),由google开源。

`npm i zx`安装zx，导入zx，`#!/usr/bin/env zx` 是zx要求的。

```TypeScript
#!/usr/bin/env zx
/...
import { $ } from 'zx';

```


正则匹配获取当前Git 分支：

```TypeScript
const onSelectVersion = async () => {
    const beta = execs[4];
    //处理版本含有beta的情况
    const lists = beta ? getBetaVersionLists(beta) : getVersionlists();
    inquirer.prompt([{
   //...
    }]).then(async ({ list }) => {
        pkg.version = list
        let branch = await $`git branch`;
        const { stdout } = branch;
        const reg = /\*\D(.+)\D/g;
        branch = (reg.exec(stdout) as any[])[1];
        fs.writeFile(path.join(__dirname, '../package.json'), String(JSON.stringify(pkg)), 'utf8', async (error) => {
            if (error) {
                return;
            }
            //...
        });
    })
}
```


按顺序执行命令

```TypeScript
const onSelectVersion = async () => {
     //..
    inquirer.prompt([{
     //...
    }]).then(async ({ list }) => {
      //...
        fs.writeFile(path.join(__dirname, '../package.json'), String(JSON.stringify(pkg)), 'utf8', async (error) => {
            if (error) {
                return;
            }
            await $`git add .`;
            await $`git commit -m ${list}`;
            await $`git tag ${list}`;
            await $`git push origin ${list}`;
            await $`git push origin ${branch}`;
            await $`npm run build&&npm publish`;
        });
    })
}
```


[zx](https://www.npmjs.com/package/zx)方法`$` 原理是使用了 [child_process 子进程](http://nodejs.cn/api/child_process.html)模块中`spawn` 方法

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ed08b73a84d42f8aee288cdbaba8a18~tplv-k3u1fbpfcp-zoom-1.image "")

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c5e2164bcd94e9389bfb85c1575b7dd~tplv-k3u1fbpfcp-zoom-1.image "")

到此，一个简简单单的脚本就完成了，算上空行一共就50+行。

## 最后

实现逻辑非常简单，没有什么难点。工作中肯定也会有一些需要反复做的事件，我们需要多去思考能否将其简化，学会做一个"会偷懒"的工具人。

感谢阅读，文章涉及的代码已开源，欢迎下载尝试[**release.ts**](https://github.com/CatsAndMice/medash/blob/dev/scripts/release.ts)。