背景

在开发一个小程序项目时，遇到一个需要列表滚动，松手时自动吸附的动画需求，如下（最终效果）：

很自然用了scroll-view组件，但使用过程中发现scroll-view 里包含'position: fixed;top:0;'的元素时，应用scroll-with-animation=true，搭配更改scroll-top时，松手后fixed的元素会抖一下......

于是决定不用组件内置的scroll-with-animation，改用手动控制scroll-top实现吸附的效果。

思路

通常，要做动画，我们就得确定以下信息，然后用代码实现：

• 初始状态


• 结束状态


• 动画时长


• 动画过程状态如何变化（匀速/先加速后减速/...）

这四个信息一般从UI/交互那里确认，前三个代码实现很简单，第四个在css动画里（如transition/animation）用 timing-function 指定：

在js动画里，改变css的属性可通过 Web Animations API 里的 easing 属性指定：

而如果需要动画的状态不是css的属性呢（例如上面的scrollTop）？这就要用到补间/插值工具了，tween.js登场！

关于 tween.js

tween翻译有‘补间‘的意思

补间（动画）（来自 in-between）是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。

简单点就是tweenjs可以指定状态从初始值到结束值该怎么变化，下面是简单的使用例子：

const box = document.getElementById('box') // 获取我们想要设置动画的元素。

const coords = {x: 0, y: 0} // 从 (0, 0) 开始



const tween = new TWEEN.Tween(coords, false) // 创建一个修改“坐标”的新 tween。

	.to({x: 300, y: 200}, 1000) // 在 1 秒内移动到 (300, 200)。

	.easing(TWEEN.Easing.Quadratic.InOut) // 使用缓动函数使动画流畅。

	.onUpdate(() => {

		// 在 tween.js 更新“坐标”后调用。

		// 使用 CSS transform 将 'box' 移动到 'coords' 描述的位置。

		box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)')

	})

	.start() // 立即开始 tween。



	// 设置动画循环。

	function animate(time) {

		tween.update(time)

		requestAnimationFrame(animate)

	}

	requestAnimationFrame(animate)

• 完整用法请看tween.js 用户指南

在微信小程序里使用tween.js

导入适配

下载 github.com/tweenjs/twe… 文件，修改下‘now’的实现，把performance.now()改成Date.now() 即可在小程序里使用：

动画循环

小程序里没有直接支持requestAnimationFrame，这个可以用canvas组件的requestAnimationFrame方法代替：

    // wxml

    // ...

    <canvas type="2d" id="canvas" style="width: 0; height: 0; pointer-events: none; position: fixed"></canvas>

    // ...

    

    

    // js

    wx.createSelectorQuery()

      .select("#canvas")

      .fields({

        node: true,

      })

      .exec((res) => {

        this.canvas = res[0].node;

      });

    // ...

    

    // ...

    const renderLoop = () => {

      TWEEN.update();

      this.canvas.requestAnimationFrame(renderLoop);

    };

    renderLoop();

其他

锁帧

手动改scrolltop还是得通过setData方法，频繁调用可能会导致动画卡顿，requestAnimationFrame一般1s跑60次，也就是60fps，根据需要可以增加锁帧逻辑：

const fps = 30; // 锁30fps

const interval = 1000 / fps;

let lastTime = Date.now();

const renderLoop = () => {

    this.canvas.requestAnimationFrame(renderLoop);

    

    const now = Date.now();

    if(now - lastTime > interval){

        // 真正的动作在这里运行

        TWEEN.update();

        lastTime = now;

    }

};

renderLoop();

官方支持？

要是 scrollView 组件支持 wxs 更改scrollTop就好了
developers.weixin.qq.com/community/d…

效果图如下

实现: 封装VerifyImg组件

<template>

  <el-dialog v-model="dialogShow" width="380px" top="24vh" class="verifyDialog">

    <div class="verify-v">

      <div

        class="check"

        @mousedown="onMouseDown"

        @mouseup="onMouseUp"

        @mousemove="onMouseMove"

        @touchstart="onTouchStart"

        @touchmove="onTouchMove"

        @touchend="onTouchEnd"

      >

        <p>拖动滑块使图片角度为正</p>

        <div class="img-con">

          <img :src="imgUrl" :style="{ transform: imgAngle }" />

          <div v-if="showError" class="check-state">验证失败</div>

          <div v-else-if="showSuccess" class="check-state">验证成功</div>

          <div v-else-if="checking" class="check-state">验证中</div>

        </div>

        <div

          ref="sliderCon"

          class="slider-con"

          :class="{ 'err-anim': showError }"

          :style="{ '--percent': percent, '--bgColor': showError ? bgError : bgColor }"

        >

          <div ref="slider" class="slider" id="slider" :class="{ sliding }" :style="{ '--move': `${slidMove}px` }">

            <el-icon size="22"><Right id="slider" /></el-icon>

          </div>

        </div>

      </div>

    </div>

  </el-dialog>

</template>

<script>

export default {

  data() {

    return {

      imgUrl: '',

      dialogShow: false,

      showError: false,

      showSuccess: false,

      checking: false,

      sliding: false,

      slidMove: 0,

      percent: 0,

      sliderConWidth: 0,

      bgColor: 'rgba(25, 145, 250, 0.2)',

      bgError: 'rgba(255,78,78,0.2)',

      imgList: [

        new URL(`../../assets/images/verify/fn1.png`, import.meta.url).href,

        new URL(`../../assets/images/verify/fn2.png`, import.meta.url).href,

        new URL(`../../assets/images/verify/fn3.png`, import.meta.url).href

      ]

    }

  },



  computed: {

    angle() {

      let sliderConWidth = this.sliderConWidth ?? 0

      let sliderWidth = this.sliderWidth ?? 0

      let ratio = this.slidMove / (sliderConWidth - sliderWidth)

      return 360 * ratio

    },

    imgAngle() {

      return `rotate(${this.angle}deg)`

    }

  },

  mounted() {

    this.imgUrl = this.imgList[this.rand(0, 2)]

  },



  methods: {

    onTouchMove(event) {

      console.log('onTouchMove')

      if (this.sliding && this.checking === false) {

        // 滑块向右的平移距离等于鼠标移动事件的X坐标减去鼠标按下时的初始坐标。

        let m = event.touches[0].clientX - this.sliderLeft

        if (m < 0) {

          // 如果m小于0表示用户鼠标向左移动超出了初始位置，也就是0

          // 所以直接等于 0，以防止越界

          m = 0

        } else if (m > this.sliderConWidth - this.sliderWidth) {

          // 滑块向右移动的最大距离是滑槽的宽度减去滑块的宽度。

          // 因为css的 translateX 函数是以元素的左上角坐标计算的

          // 所以要减去滑块的宽度，这样滑块在最右边时，才不会左上角和滑槽右上角重合。

          m = this.sliderConWidth - this.sliderWidth

        }

        this.slidMove = m

        console.log(this.slidMove)



        this.percent = ((this.slidMove / document.querySelector('.slider-con').offsetWidth) * 100).toFixed(2) + '%'

      }

    },

    onTouchEnd() {

      console.log('onTouchEnd')

      if (this.sliding && this.checking === false) {

        this.checking = true

        this.validApi(this.angle)

          .then(isok => {

            if (isok) {

              this.showSuccess = true

            } else {

              this.showError = true

            }

            return new Promise((resolve, reject) => {

              // setTimeout(() => {

              if (isok) {

                resolve(Math.round(this.angle))

              } else {

                reject()

              }

              setTimeout(() => {

                this.resetSlider()

              }, 1000)

              // }, 1500)

            })

          })

          .then(angle => {

            // 处理业务，或者通知调用者验证成功

            console.log(angle)

            this.$emit('toLogin')

          })

          .catch(e => {

            console.log(e)



            // alert('旋转错误')

          })

      }

    },

    onTouchStart(event) {

      console.log('onTouchStart', event)

      // 设置状态为滑动中

      this.sliding = true

      // 下面三个变量不需要监听变化，因此不放到 data 中

      this.sliderLeft = event.touches[0].clientX // 记录鼠标按下时的x位置

      this.sliderConWidth = this.$refs.sliderCon.clientWidth // 记录滑槽的宽度

      this.sliderWidth = this.$refs.slider.clientWidth // 记录滑块的宽度

      console.log(this.sliderLeft, this.sliderConWidth, this.sliderWidth)

    },

    rand(m, n) {

      return Math.ceil(Math.random() * (n - m + 1) + m - 1)

    },



    showVerify() {

      this.imgUrl = this.imgList[this.rand(0, 2)]

      this.dialogShow = true

    },

    closeVerify() {

      //1.5s后关闭弹框

      setTimeout(() => {

        this.dialogShow = false

      }, 1500)

    },

    // 重置滑块

    resetSlider() {

      this.sliding = false

      this.slidMove = 0

      this.checking = false

      this.showSuccess = false

      this.showError = false

      this.percent = 0

    },

    //拖拽开始

    onMouseDown(event) {

      console.log(event.target.id, this.checking)

      if (event.target.id !== 'slider') {

        return

      }



      if (this.checking) return

      // 设置状态为滑动中

      this.sliding = true

      // 下面三个变量不需要监听变化，因此不放到 data 中

      this.sliderLeft = event.clientX // 记录鼠标按下时的x位置

      this.sliderConWidth = this.$refs.sliderCon.clientWidth // 记录滑槽的宽度

      this.sliderWidth = this.$refs.slider.clientWidth // 记录滑块的宽度

    },

    //拖拽停止

    onMouseUp(event) {

      if (this.sliding && this.checking === false) {

        this.checking = true

        this.validApi(this.angle)

          .then(isok => {

            if (isok) {

              this.showSuccess = true

            } else {

              this.showError = true

            }

            return new Promise((resolve, reject) => {

              // setTimeout(() => {

              if (isok) {

                resolve(Math.round(this.angle))

              } else {

                reject()

              }

              setTimeout(() => {

                this.resetSlider()

              }, 1000)

              // }, 1500)

            })

          })

          .then(angle => {

            // 处理业务，或者通知调用者验证成功

            console.log(angle)

            this.$emit('toLogin')

          })

          .catch(e => {

            console.log(e)



            // alert('旋转错误')

          })

      }

    },

    //拖拽进行中

    onMouseMove(event) {

      if (this.sliding && this.checking === false) {

        // 滑块向右的平移距离等于鼠标移动事件的X坐标减去鼠标按下时的初始坐标。

        let m = event.clientX - this.sliderLeft

        if (m < 0) {

          // 如果m小于0表示用户鼠标向左移动超出了初始位置，也就是0

          // 所以直接等于 0，以防止越界

          m = 0

        } else if (m > this.sliderConWidth - this.sliderWidth) {

          // 滑块向右移动的最大距离是滑槽的宽度减去滑块的宽度。

          // 因为css的 translateX 函数是以元素的左上角坐标计算的

          // 所以要减去滑块的宽度，这样滑块在最右边时，才不会左上角和滑槽右上角重合。

          m = this.sliderConWidth - this.sliderWidth

        }

        this.slidMove = m

        this.percent = ((this.slidMove / document.querySelector('.slider-con').offsetWidth) * 100).toFixed(2) + '%'

      }

    },

    // 验证角度是否正确

    validApi(angle) {

      return new Promise((resolve, reject) => {

        // 模拟网络请求

        setTimeout(() => {

          // 图片已旋转的角度

          const imgAngle = 90

          // 图片已旋转角度和用户旋转角度之和

          let sum = imgAngle + angle

          // 误差范围

          const errorRang = 20

          // 当用户旋转角度和已旋转角度之和为360度时，表示旋转了一整圈，也就是转正了

          // 但是不能指望用户刚好转到那么多，所以需要留有一定的误差

          let isOk = Math.abs(360 - sum) <= errorRang



          resolve(isOk)

        }, 1000)

      })

    }

  }

}

</script>



<style lang="scss">

.verifyDialog {

  .el-dialog__body {

    padding: 15px !important;

  }

}

</style>

<style lang="scss" scoped>

.verify-v {

  display: flex;

  justify-content: center;

  align-items: center;

}

.check {

  --slider-size: 40px;

  width: 300px;

  background: white;

  box-shadow: 0px 0px 12px rgb(0 0 0 / 8%);

  border-radius: 5px;

  padding: 10px 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  .img-con {

    position: relative;

    overflow: hidden;

    width: 120px;

    height: 120px;

    border-radius: 50%;

    margin-top: 20px;

    img {

      width: 100%;

      height: 100%;

      user-select: none;

    }

    .check-state {

      width: 100%;

      height: 100%;

      background: rgba(0, 0, 0, 0.5);

      color: white;

      position: absolute;

      top: 0;

      left: 0;

      display: flex;

      justify-content: center;

      align-items: center;

    }

  }

}

.check .slider-con {

  width: 80%;

  height: var(--slider-size);

  border-radius: 3px;

  margin-top: 1rem;

  position: relative;

  background: #f5f5f5;

  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;

  background: linear-gradient(to right, var(--bgColor) 0%, var(--bgColor) var(--percent), #fff var(--percent), #fff 100%);

  .slider {

    &:hover {

      background: #1991fa;

      color: #fff;

    }

    background: #fff;

    width: var(--slider-size);

    height: var(--slider-size);

    border-radius: 3px;

    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

    cursor: move;

    display: flex;

    justify-content: center;

    align-items: center;

    --move: 0px;

    transform: translateX(var(--move));

    .sliding {

      background: #4ed3ff;

    }

  }

}

.slider-con.err-anim {

  animation: jitter 0.5s;

  .slider {

    background: #ff4e4e;

  }

}

body {

  padding: 0;

  margin: 0;

  background: #fef5e0;

}



@keyframes jitter {

  20% {

    transform: translateX(-5px);

  }

  40% {

    transform: translateX(10px);

  }

  60% {

    transform: translateX(-5px);

  }

  80% {

    transform: translateX(10px);

  }

  100% {

    transform: translateX(0);

  }

}

</style>

使用

<VerifyImg ref="verifyRef" @to-login="handleLogin"></VerifyImg>





handleLogin(){

...

}

前言

前段时间，我司的IoT平台的客户大量上新了一堆设备后，在使用过程中，出现了网络连接超时，服务器错误等问题，客户小题大做，抓着这个尾巴不放手，喷我司系统不健壮，要求我们杜绝API错误。

由于IoT多是日志、设备、测试、Action、图表、通信类的功能，API请求&返回数据量大、时间长。在后端添加索引的情况下，接口仍然达不到秒级，接口普遍都是1～3s，部分接口甚至达到小10s。我司把服务器的硬盘和CPU都进行了一波升级，效果都不是很理想。

这个烫手的山芋，落在了前端的头上。我们被迫进行了一波系统升级优化

解决方案

我们结合这个需求，制定了以下几条标准：

1. 不能入侵其他的功能
2. 对系统的破坏尽可能的小
3. 杜绝或者尽可能的减少弹框问题
4. 保证数据的正确展示，对于错误要正确的暴露出来

根据以上几条标准，于是方案就自然的确定了：

API请求时间

拉长API的请求时间,将超时时间由30s，更新为60s

const service = axios.create({

  baseURL: '/xxx',

  timeout: 60 * 1000 // 请求超时时间

})

重发机制

1. API请求超时: 当新页面大量接口请求，某个接口请求时间过长，总时间>60s时，我们会对这个接口进行至多重发3次，用180s的时间去处理这个接口，当请求成功后，关闭请求

重发的接口不能超过timeout时长，否则一直会重发失败。也可以自定义重发的时间

2. 偶发的服务器异常: 当接口出现50X时，重发一次

可以使用axois自带的方法，也可以使用axios-retry插件,axios-retry插件更简单，底层也是axois方法实现的。相比较而言，axios-retry更简单，但不知为什么，我没有实现

// request.js

// 默认重发3次，每次的间隔时间为3s

service.defaults.retry = 3;

service.defaults.retryDelay = 3000;



export function againRequest(

  error,

  axios,

  time = error.config.retry

) {

  const config = error.config;



  if (!config || !config.retry) return Promise.reject(error);



  // 设置用于记录重试计数的变量 默认为0

  config.__retryCount = config.__retryCount || 0;



  // 判断是否超过了重试次数

  if (config.__retryCount >= time) {

    // alert



    return Promise.reject(error);

  }



  config.__retryCount += 1;



  const backoff = new Promise(resolve => {

    setTimeout(() => {

      resolve();

    }, config.retryDelay || 1);

  });



  return backoff.then(() => {

    /*

       以下三行，根据项目实际调整

       这三行是处理重发请求接口变成string，并且重定向的问题

    */

    if (config.data && isJsonStr(config.data)) {

      config.data = JSON.parse(config.data);

    }

    config.baseURL = "/";

    

    return axios(config);

  });

}



export let isLoop = config => {

  if (

    config.isLoop &&

    config.isLoop.count >= 0 &&

    config.url == config.isLoop.url

  ) {

    return true;

  }

  return false;

};



export let isJsonStr = str => {

  if (typeof str == "string") {

    try {

      var obj = JSON.parse(str);

      if (typeof obj == "object" && obj) {

        return true;

      } else {

        return false;

      }

    } catch (e) {

      console.log("error: " + str + "!!!" + e);

      return false;

    }

  }

};

注意到是： axois不能是0.19.x

issue中提到使用0.18.0。经过实践，0.20.x也是可以的，但需要进行不同的配置，具体请看issue。参考资料中有提到 axios issues github

也可以使用axios-retry

axios-retry

npm install axios-retry



// ES6

import axiosRetry from 'axios-retry';



axiosRetry(axios, { retries: 3 });

取消机制

当路由发生变化时，取消上一个路由正在请求的API接口

监控路由页面: 调用cancelAllRequest方法

// request.js

const pendingRequests = new Set();



service.cancelAllRequest = () => {

  pendingRequests.forEach(cancel => cancel());

  pendingRequests.clear();

};

轮询

轮询有2种情况，一种是定时器不停的请求，一种是监听请求N次后停止。

比如： 监听高低电平的变化 - 如快递柜的打开&关闭。

1. 一直轮询的请求:
   • 使用WebSocket
   • 连续失败N次后，谈框。
2. 轮询N次的请求:
   • 连续失败N次后，谈框。

export function api(data, retryCount) {

  return request({

    url: `/xxx`,

    method: "post",

    isLoop: {

      url: "/xxx",

      count: retryCount

    },

    data: { body: { ...data } }

  });

}

自定义api url的原因是：

同一个页面中，有正常的接口和轮询的接口，url是区分是否当前的接口是否是轮询的接口

监听滚动

对于图表类的功能，监听滚动事件，根据不同的高度请求对应的API

节流机制

1. 用户连续多次请求同一个API
   • 按钮loading。最简单有效
   • 保留最新的API请求，取消相同的请求

错误码解析

网络错误 & 断网

if (error.toString().indexOf("Network Error") !== -1) {

        if (configData.isLoop && configData.isLoop.count >= 0) {

          networkTimeout();

          // 关闭所有的定时器

          let t = setInterval(function() {}, 100);

          for (let i = 1; i <= t; i++) {

            clearInterval(i);

          }

          return;

        }

        networkTimeout();

      }

404

else if (error.toString().indexOf("404") !== -1) {

    // 404

}

401

else if (error.toString().indexOf("401") !== -1) {

    // 清除token，及相应的数据，返回到登录页面

}

超时

else if (error.toString().indexOf("Error: timeout") !== -1) {

        if (!axios.isCancel(error) && !isLoop(configData)) {

          return againRequest(error, service);

        }

        if (configData.isLoop && configData.isLoop.count === 3) {

          requestTimeout();

        }

      }

50X

else if (error.toString().indexOf("50") !== -1) {

    if (!axios.isCancel(error) && !isLoop(configData)) {

      return againRequest(error, service, 1, 2);

    }

    if (configData.isLoop && configData.isLoop.count === 1) {

      requestTimeout();

    }

  } 

未知错误

else {

      // 未知错误，等待以后解析

    }

总结

结果将状态码梳理后，客户基本看不到API错误了，对服务的稳定性和可靠性非常满意，给我们提出了表扬和感谢。我们也期待老板升职加薪！

参考资料

1. axios issues github
2. axios-retry
3. axios请求终极封装
4. axios

作者：高志小鹏鹏
来源：juejin.cn/post/7413187186131533861

<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">

<script src="https://unpkg.com/video.js/dist/video.min.js">script>





<link href="https://unpkg.com/video.js@8.17.3/dist/video-js.min.css" rel="stylesheet">

<script src="https://unpkg.com/video.js@8.17.3/dist/video.min.js">script>





<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.17.3/video-js.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.17.3/video.min.js">script>

<video

    id="my-player"

    class="video-js"

    controls

    preload="auto"

    poster="//vjs.zencdn.net/v/oceans.png"

    data-setup='{}'>

  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">source>

  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">source>

  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">source>

  <p class="vjs-no-js">

    To view this video please enable JavaScript, and consider upgrading to a

    web browser that

    <a href="https://videojs.com/html5-video-support/" target="_blank">

      supports HTML5 video

    a>

  p>

video>

3. 初始化播放器：

var player = videojs('my-video');

就这样，你就可以在网页上嵌入一个功能丰富的视频播放器了。

该videojs函数还接受一个options对象和一个回调：

var options = {};



var player = videojs('my-player', options, function onPlayerReady() {

  videojs.log('Your player is ready!');



  // In this context, `this` is the player that was created by Video.js.

  this.play();



  // How about an event listener?

  this.on('ended', function() {

    videojs.log('Awww...over so soon?!');

  });

});

结语

Video.js 是一个功能强大且灵活的视频播放器，它支持多种视频格式和流媒体协议，并且具有丰富的插件生态和良好的定制性。无论你是构建一个视频分享平台还是需要实现高质量的直播播放，Video.js 都能为你提供稳定且可扩展的解决方案。

希望这篇文章能帮助你了解 Video.js 的强大功能，并激发你在项目中使用它的灵感，这么好的东西，赶快分享给你的朋友们吧！

前言

本文将介绍在线协同文档编辑器是如何解决冲突的，大部分公司在解决冲突上目前用的都是 OT 算法，与之对应，也有一个 CRDT 算法实现。接下来，我们将深入这两种算法的实现及原理。

解决冲突的方案

在线协同文档编辑器通常使用不同的算法来解决冲突，具体算法取决于编辑器的实现和设计。以下是一些常见的解决冲突的算法：

这些算法都有各自的优缺点，并且在不同的场景和需求下可能更适合不同的编辑器实现。

接下来，我们先聊聊 OT 算法。

OT 算法

当多个用户同时编辑同一文档时，OT算法通过操作转换来保持文档状态的一致性。下面是一个简单的示例，帮助你理解OT算法的工作原理。

假设有两个用户 A 和 B 同时编辑一段文本，初始文本为 "Hello, world!"。

用户 A 在文本末尾添加了字符 " How are you?"。

用户 B 在文本末尾添加了字符 " I'm fine."。

在 OT 算法中，每个操作都由一个操作类型和操作内容组成。在这个例子中，添加字符操作的操作类型为 "insert"，操作内容为被插入的字符。

用户 A 的操作序列为：[insert(" How are you?")]
用户 B 的操作序列为：[insert(" I'm fine.")]

首先，服务器收到用户 A 的操作序列，将其应用到初始文本上，得到 "Hello, world! How are you?"。然后，服务器收到用户 B 的操作序列，将其应用到初始文本上，得到 "Hello, world! I'm fine."。

接下来，服务器需要进行操作转换，将用户 B 的操作序列转换为适应用户 A 的文本状态。在这个例子中，用户 B 的操作 "insert(" I'm fine.")" 需要转换为适应 "Hello, world! How are you?" 的操作。

操作转换的过程如下：

最终，服务器将转换后的操作序列发送给用户 A 和用户 B，他们将其应用到本地文本上，最终得到相同的文本状态 "Hello, world! How are you? I'm fine."。

这个例子展示了 OT 算法如何通过操作转换来保持多个用户同时编辑时文档状态的一致性。在实际应用中，OT 算法需要处理更复杂的操作类型和情况，并进行更详细的操作转换。

接下来，我们聊聊 CRDT 算法：

CRDT 算法

当多个用户同时编辑同一文档时，CRDT（Conflict-free Replicated Data Type，无冲突复制数据类型）算法通过设计特定的数据结构和操作规则来实现冲突自由的复制。下面是一个简单的示例，帮助你理解CRDT算法的工作原理。

在CRDT算法中，文档被表示为一个数据结构，常见的数据结构之一是有序列表（Ordered List）。每个用户的编辑操作会被转换为操作序列，并应用到本地的有序列表上。

假设有两个用户 A 和 B 同时编辑一段文本，初始文本为空。用户 A 在文本末尾添加了字符 "Hello"，用户 B 在文本末尾添加了字符 "World"。

在CRDT算法中，每个字符都被赋予一个唯一的标识符，称为标记（Marker）。在这个例子中，我们使用递增的整数作为标记。

用户 A 的操作序列为：[insert("H", 1), insert("e", 2), insert("l", 3), insert("l", 4), insert("o", 5)]
用户 B 的操作序列为：[insert("W", 6), insert("o", 7), insert("r", 8), insert("l", 9), insert("d", 10)]

每个操作都包含要插入的字符以及对应的标记。

当用户 A 应用自己的操作序列时，有序列表变为 "Hello"。同样地，当用户 B 应用自己的操作序列时，有序列表变为 "World"。

接下来，服务器需要将两个用户的操作序列合并为一致的文本状态。在CRDT算法中，合并的过程是通过比较标记的大小来确定字符的顺序，并确保最终的文本状态一致。

合并的过程如下：

最终，合并后的有序列表为 "HelloWorld"。

这个例子展示了CRDT算法如何通过设计特定的数据结构和操作规则，以及比较标记的大小来实现冲突自由的复制。在实际应用中，CRDT算法可以应用于各种数据结构和操作类型，并进行更复杂的合并过程。

CRDT 的标记实现方案

方案选型

OT算法和CRDT算法都是用于实现实时协同编辑的算法，但它们有不同的优点、缺点和工作原理。

OT算法的优点：

OT算法的缺点：

CRDT算法的优点：

CRDT算法的缺点：

OT算法和CRDT算法的区别：

选择使用哪种算法取决于具体的应用场景和需求。OT算法适用于需要实时协同编辑的场景，而CRDT算法适用于去中心化和冲突自由的场景。

总结

本文介绍了在线协同文档编辑器中解决冲突的算法，主要包括OT算法和CRDT算法。OT算法通过操作转换来保持文档状态的一致性，而CRDT算法通过设计特定的数据结构和操作规则实现冲突自由的复制。OT算法需要中央服务器进行操作转换，适用于需要实时协同编辑的场景。CRDT算法可以在去中心化环境中工作，每个用户都有完整的本地数据，适用于去中心化和冲突自由的场景。选择使用哪种算法取决于具体的应用场景和需求。

背景

某天客户报了一个问题，说是大屏的声音不能自动播放了,我们的大屏应用是有个报警的，当有报警的时候，自动会播放警报的声音

复线步骤

测试后发现如下结论

如果你想测试，可以点我进行测试

你可以先点击上方链接的 尝试一下 ，下方为截图

这个时候你会听到一声马叫声

然后，你刷新下马叫声的页面，这个时候声音的自动播放将不会生效

报错问题排查

打开控制台，不出意外看到了一个报错信息。

翻译为中文的意思为
不允许的错误。播放失败，因为用户没有先与文档交互。goo.gl/xX8pDD

尝试解决

那我给通过给body添加点击事件，自动触发点击事件，在点击的事件后自动播放声音。
（当是我的想法是，这个大概率是不行的，chrome应该不会忽略这一点，不然这个功能就相当于不存在）

经过测试后，发现确实还不行，在意料中。

参考别人的网站，用抖音测试

点击我跳转抖音

想到了我们可以参考抖音，我用抖音的进行测试，当你不做任何的操作，页面应该如下

我们从这里得出结论，这个应该是浏览器的限制，需要查看官方文档，看看原因

查阅官方文档

点我查看chrome的官方文档

我截取了一些关键的信息

注意浏览器会有一个媒体互动指数，这是浏览器自动计算的，该分越高，才会触发自动播放

查看电脑的媒体互动指数

在url上输入 about://media-engagement，你会看到如下的截图，

经过测试后 当网站变成了is High,音频会自动播放，不会播放失败。

这就解释了为什么有的网站可以自动播放声音，有的网站不可以自动播放声音

ok，我们继续往下看，这个时候看到了一些关键的信息。

作为开发者，我们不应该相信音频/视频会播放成功，要始终在播放的回掉中来进行判断

看到这些，我们来模仿抖音的实现.在播放声音的catch的时候，显示一个错误的弹窗，提示用户，当用户点击的时候，自动播放声音

   this.alarmAudio = new Audio(require("@/assets/sound/alarm.mp3"));

    this.alarmAudio

            .play()

            .then(() => {

              this.notifyId && this.notifyId.close();

            })

            .catch((error) => {

              if (error instanceof DOMException) {

                // 这里可以根据异常类型进行相应的错误处理

                if (error.name === "NotAllowedError") {

                  if (this.notifyId) return;

                  this.notifyId = Notification({

                    title: "",

                    duration: 0,

                    position: "bottom-left",

                    dangerouslyUseHTMLString: true,

                    onClick: this.onAudioNotifyConfirm,

                    showClose: false,

                    customClass: "audio-notify-confirm",

                    message:

                      "<div style='color:#fff;font-size:18px;cursor:pointer'>因浏览器限制，需<span style='color:#ff2c55'>点击打开声音</span></div>",

                  });

                }

              }

            });

实现效果如下

总结

如果你经常开发web类的的项目，那你一定经常会接触到后端服务，给项目找一个简单、好用的后端服务可以大大加速开发。

今天我们分享的开源项目，它可以作为SaaS或者是Mobile的后端服务，最简单情况只要一个文件，它就是：PocketBase

PocketBase 是什么

PocketBase是一个开源的Go后端框架，它以单个文件的形式提供了一个实时的后端服务。这个框架特别适合于快速开发小型到中型的Web应用和移动应用。它的设计哲学是简单性和易用性，使得开发者能够专注于他们的产品而不是后端的复杂性。

PocketBase包含以下功能：

• 内置数据库（SQLite）支持实时订阅


• 内置文件和用户管理


• 方便的管理面板 UI


• 简洁的 REST 风格 API

安装使用PocketBase

首先你可以下载PocketBase的预构建版本，你可以在github的release页面下载到对应平台的包。

下载后，解压存档并./pocketbase serve在解压的目录中运行。

启动完成后会3个web服务的路由：

• http://127.0.0.1:8090 - 如果存在pb_public目录，则提供其中的静态内容（html、css、图像等）


• http://127.0.0.1:8090/_/ - Admin的管理页面


• http://127.0.0.1:8090/api/ - Rest API

默认情况下，PocketBase 在端口上运行8090。但您可以通过在 serve 命令后附加--http和--https参数将其绑定到任何端口。

Admin panel

第一次访问管理仪表板 UI 时，它会提示您创建第一个管理员帐户。在管理页面里您可以完全使用 GUI 构建数据架构、添加记录并管理数据库。

API

它带有一个开箱即用的 API，可让您操作任何集合，还具有一个优雅的查询系统，可让您分页搜索记录。这将使您不必自己编写和维护同样无聊的 CRUD 操作，而可以更专注于产品特定的功能。

内置访问规则

PocketBase 可让您通过简单的语法直接从 GUI 定义对资源的访问规则。例如，这有助于定义访问范围和控制对用户特定数据的访问。同样，这将使您无需担心编写身份验证和授权代码。

SDK

使用PocketBase的API可以通过官方SDK，目前官方提供了JS SDK和Dart SDK。

• JavaScript - pocketbase/js-sdk (浏览器和nodejs)


• Dart - pocketbase/dart-sdk（网页、移动、桌面）

它们提供了用于连接数据库、处理身份验证、查询、实时订阅等的库，使开发变得简单。

开发定制应用

PocketBase 作为常规 Go 库包分发，允许您构建自己的自定义应用程序特定的业务逻辑，并且最后仍具有单个可移植的可执行文件。

这是一个简单的例子：

package main



import (

    "log"

    "net/http"



    "github.com/labstack/echo/v5"

    "github.com/pocketbase/pocketbase"

    "github.com/pocketbase/pocketbase/apis"

    "github.com/pocketbase/pocketbase/core"

)



func main() {

    app := pocketbase.New()



    app.OnBeforeServe().Add(func(e *core.ServeEvent) error {

        // add new "GET /hello" route to the app router (echo)

        e.Router.AddRoute(echo.Route{

            Method: http.MethodGet,

            Path:   "/hello",

            Handler: func(c echo.Context) error {

                return c.String(200, "Hello world!")

            },

            Middlewares: []echo.MiddlewareFunc{

                apis.ActivityLogger(app),

            },

        })



        return nil

    })



    if err := app.Start(); err != nil {

        log.Fatal(err)

    }

}

总结

整体来说PocketBase是一个非常不错的后端服务，它兼顾了易用性和定制的灵活性，如果你有项目的需要或是想要自己开发一个SAAS的服务，都可以选择它来试试。

项目信息

• 项目名称：pocketbase


• GitHub 链接：github.com/pocketbase/…


• Star 数：37K

前言

之前使用vue3都是在公司的基建项目中，为了快速达到目的，把以前vue2的模板拿来简单改改就直接用了，所以项目中用法特别乱，比如：状态管理依旧用的vuex，各种类型定义全是any，有些代码是选项式API，有些代码是组合式API...

最近终于有时间推动一下业务项目使用vue3了。作为极简主义的我，始终奉行少即是多，既然是新场景，一切从新，从头开始写模版：

• 使用最新的vue3版本v3.5.x。


• 所有使用的内部库全部生成ts类型并引入到环境中。


• 将所有的mixins重写，包装成组合式函数。


• 将以前的vue上的全局变量挂载到app.config.globalProperties。


• 全局变量申明类型到vue-runtime-core.d.ts中，方便使用。


• 全部使用setup语法，使用标签<script setup lang="ts">


• 使用pinia作为状态管理。

pinia使用

等等，pinia？好用吗？打开官方文档研究了下，官方优先推荐的是选项式API的写法。

调用defineStore方法，添加属性state, getters, actions等。

export const useCounterStore = defineStore('counter', {

  state: () => ({ count: 0, name: 'Eduardo' }),

  getters: {

    doubleCount: (state) => state.count * 2,

  },

  actions: {

    increment () {

      this.count++

    },

  },

})

使用的时候，调用useCounterStore即可。

import { useCounterStore } from '@/stores/counter'

import { computed } from 'vue'



const store = useCounterStore()

setTimeout(() => {

  store.increment()

}, 1000)

const doubleValue = computed(() => store.doubleCount)

看上去还不错，但是我模版中全部用的是组合式写法，肯定要用组合式API，试着写了个demo，ref就是选项式写法中的state，computed就是选项式中的getters，function就是actions。

// useTime.ts

import { defineStore } from 'pinia'

import { computed, ref } from 'vue'

import vueConfig from '../../../common/config/vueConfig'

import * as dayjs from 'dayjs'



export default defineStore('time', () => {

  const $this = vueConfig()

  const time = ref<number>()

  const timeFormat = computed(() => dayjs(time.value).format('YYYY-MM-DD HH:mm:ss'))

  const getSystemTime = async () => {

    const res = await $this?.$request.post('/system/time')

    time.value = Number(res.timestamp)

  }

  return { timeFormat, getSystemTime }

})

调用时解构赋值，就可以直接用了。

// index.vue

<script setup lang="ts">

import { onMounted } from 'vue'

import useTime from './use/useTime'



const { timeFormat, getSystemTime } = useTime()

onMounted(async () => {

  // 请求

  await getSystemTime()

  console.log('当前时间：', timeFormat)

})

</script>

优雅了很多，之前用vuex时还有个问题，storeA中的state、actions等，会在storeB中使用，这一点pinia文档也有说明，直接在storeB调用就好了，比如我想在另一个组件中调用上文中提到的timeFormat。

defineStore('count', () => {

  const count = ref<number>(0)

  const { timeFormat } = useTime()

  return {

    count,

    timeFormat,

  }

})

怎么看着这么眼熟呢，这不就是组合式函数吗？为什么我要用defineStore再包一层呢？试一试不用pinia，看能不能完成状态管理。

组合式函数

直接添加一个useCount.ts文件，申明一个组合式函数。

// useCount.ts

import { computed, ref } from 'vue'



const useCount = () => {

  const count = ref<number>(0)

  const doubleCount = computed(() => {

    return count.value * 2

  })

  const setCount = (v: number) => {

    count.value = v

  }

  return {

    count,

    doubleCount,

    setCount,

  }

}

export default useCount

使用时直接解构申明，并使用。

import useCount from './use/useCount'



const { count, setCount } = useCount()

onMounted(async () => {

  console.log('count', count.value)  // 0

  setCount(10)

  console.log('count', count.value)  // 10

  

})

最大的问题来了，如何在多个地方共用count的值呢，这也是store最大的好处，了解javascript函数机制的我们知道useCount本身是一个闭包，每次调用，里面的ref就会重新生成。count就会重置。

import useCount from './use/useCount'



const { count, setCount } = useCount()

const { doubleCount } = useCount()



onMounted(async () => {

  console.log('count', count.value, doubleCount.value)  // 0 0

  setCount(10)

  console.log('count', count.value, doubleCount.value)  // 10 0

  

})

这个时候doubleCount用的并不是第一个useCount中的count，而是第二个重新生成的，所以setCount并不会引起doubleCount的变化。

怎么办呢？简单，我们只需要把count的声明暴露在全局环境中，这样在import时就会申明了，调用函数时不会被重置。

import { computed, ref } from 'vue'



const count = ref<number>(0)

const useCount = () => {

  const doubleCount = computed(() => {

    return count.value * 2

  })

  const setCount = (v: number) => {

    count.value = v

  }

  return {

    count,

    doubleCount,

    setCount,

  }

}

export default useCount

当我们多次调用时，发现可以共享了。

import useCount from './use/useCount'



const { count, setCount } = useCount()

const { doubleCount } = useCount()



onMounted(async () => {

  console.log('count', count.value, doubleCount.value)  // 0 0

  setCount(10)

  console.log('count', count.value, doubleCount.value)  // 10 20

  

})

但是这个时候count是比较危险的，store应该可以保护state不被外部所修改，很简单，我们只需要用readonly包裹一下返回的值即可。

import { computed, readonly, ref } from 'vue'



const count = ref<number>(0)

const useCount = () => {

  const doubleCount = computed(() => {

    return count.value * 2

  })

  const setCount = (v: number) => {

    count.value = v

  }

  return {

    // readonly可以确保引用对象不会被修改

    count: readonly(count),

    doubleCount,

    setCount,

  }

}

export default useCount

总结

经过我的努力，vue3又减少了一个库的使用，我就说不需要用pinia，不过放弃pinia也就意味着放弃了它自带的一些方法store.$state，store.$patch等等，这些方法实现很简单，很轻松就可以手写出来，如果你是这些方法的重度用户，保留pinia也没问题，如果你也想代码更加精简，赶紧尝试下组合式函数吧。

调休日历

前些天，使用python做了一个日历，可以打印出调休的节假日。效果还可以，但是遇到了一些小问题。

有一个朋友提出了这样一个问题：“日历确实是很好，但是，使用控制台print不怎么样，别人的日历都是很好看的，而我们的日历还只能用print。这太丢人了，我出门说自己是你的粉丝，都没什么面子了啊！”

还有一个朋友提出了另外一个问题：“在我们国家，‘农历’也是很重要的，比如说‘农历新年’是一年中最重要的日子。所以，我们的日历也应该能看到农历才比较好。”

好吧，这次就来解决一下这些问题！

农历

农历介绍

农历，也称为“阴历”，“月亮历”，“阴阳历”，是一种重要的历法，起源于中国的古代，这种历法同时结合了太阳运动，和月亮周期。其中月球围绕地球旋转的周期，大约为29.5天，这构成了农历的一个月，而一年通常是12个月。然而，一个太阳年（太阳公转一周）大概是365.24天，显然月亮的12个月不够这个数字，因此，为了填补到太阳年的时长，就会加入“闰月“，大概每3年就会出现一个”闰月“，”闰月“和公历中的“闰年”有异曲同工之妙。

那么农历有什么用呢？农历有很大的作用！节日安排，就是农历决定的（新年，中秋，端午等）。农业活动也和农历有很大的关系，比如说，仍然有很多农民，根据农历的指导，进行农业活动，什么时候播种，什么时候收割，都是农历决定的。还有很多人过生日，都会选择过农历生日。除此之外，像“季节变化”也和农历有微妙的关系，我们经常可以听到，“现在已经立秋了，已经是秋天了，马上就要凉快了。”，诸如此类的话，可见，农历在日常生活中发挥了重要作用。是我们祖先的伟大发明。

农历实现

那么，农历到底是怎么确定日子的呢？这和天文观测有很大的关系。我们要通过观察天象，来确定农历的准确性。比如说，在中国古代，就有专门的机构，如皇家天文台负责观测天文，然后调整历法，这是一个重要的活动。在历史上，历法也经过了多次修订。

到了现代，对于天文的观测，不再是必须的了。因为现代的科技较为发达，已经能够通过数学计算，历史天文数据推导等，精确的计算出农历。因此，即使我们没有“夜观星象”，也可以知道未来上百年的农历运作。

但是，我们既不会观察天象，也不会科学计算月亮运动，怎么办呢？当然没关系啦，因为，别人已经算好了，我们直接引用就可以了！

安装：pip install lunarcalendar

from lunarcalendar import Converter, Solar, Lunar





# 将公历日期转换为农历

solar = Solar(2024, 9, 17)

lunar = Converter.Solar2Lunar(solar)





# 输出结果为农历日期

print(lunar)





# 将农历日期转换为公历

lunar = Lunar(2024, 8, 15)

solar = Converter.Lunar2Solar(lunar)





# 输出结果为公历日期

print(solar)

转换为汉字日期

一般在农历中，我们并不使用阿拉伯数字的记录，而是常说，“正月初三”，“八月廿二”，这样的表达方式。因此，我们还需要将数字的农历，转为常见的汉字日期：

from lunarcalendar import Converter, Solar









def lunar_date_str(year, month, day):

    lunar = Converter.Solar2Lunar(Solar(year, month, day))

    leap_month = lunar.isleap

    months = ["正月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "冬月", "腊月"]

    days = ["初一", "初二", "初三", "初四", "初五", "初六", "初七", "初八", "初九", "初十",

            "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",

            "廿一", "廿二", "廿三", "廿四", "廿五", "廿六", "廿七", "廿八", "廿九", "三十"]

    month_str = months[lunar.month - 1]

    if leap_month:

        month_str = "闰" + month_str

    day_str = days[lunar.day - 1]

    

    # 该实现是特别为了符合日历的实现，仅在每个月的第一天返回月份，例如正月初一，返回“正月”

    # 而其他日子，不返回月份，仅返回日期，例如正月初三，返回“初三”

    if lunar.day == 1:

        return month_str

    else:

        return day_str

如果要更广泛意义的月份加日期，只需要简单的修改返回值即可：f"{month_str}{day_str}"

日历实现

假期判断

因为“调休”的存在，所以我们的放假日期不总是固定的，每年都会有很大的变化，那么如何判断某个日子是不是节假日呢？是不是需要调休呢？

实际上，这是一件困难的事情，没有办法提前知道，只能等到每一年，国家公布了放假安排以后，我们才能够知道准确的放假调休日期。比如说，一些日历等不及，还没等公布放假安排，就已经开始提前印刷了，那么这样的日历，其上包含的信息，就是不完整的，他只能告诉你常规的节日和星期，没办法告诉你调休。

看过我上一期关于日历文章的，应该知道在当时，我是使用了“标记调休”的方式，实现这一点的，大概像这样：

这当然是简单有效，且可行的，只不过一次标记只能管一年，到了明年就不能用了，还得自己重新标记，况且，标记也是一件麻烦的事情，有没有什么更好的办法呢？

当然是有的，我们让别人给我们标记好了，自己等着用现成的，不就好了吗？那么哪里能找到这样的好心人呢？当然是有的，python有一个库叫做chinese-calendar，其中维护了每年的中国节假日，我们只需要使用这个库，让他告诉我们，今天休不休息，就好了。

安装：pip install chinese_calendar

import chinese_calendar as cc

from datetime import date





# 检查某一天是否是工作日或节假日

on_holiday, holiday_name = cc.get_holiday_detail(date(2024, 10, 1))





# 输出是否为假日，假日名称

print(on_holiday, holiday_name)

唉，世界上还是好人多啊！用上了这个，我们可以省很多事，真是好东西啊。

matplotlib绘制日历

matplotlib非常常用，今天就不主要介绍了，虽然它不常用于绘制日历，但是，它的功能其实是很广泛的，包括我们今天的绘制日历。

在下面的实现中，允许提供一个额外信息表，来覆盖默认的农历。也就是你可以通过extra_info_days来增加节日，纪念日的提示。

import datetime

import chinese_calendar as cc

import matplotlib.pyplot as plt





from calendar import monthrange

from lunarcalendar import Converter, Solar









class CalendarDrawer:

	plt.rcParams['font.family'] = 'SimHei' # 设置显示字体为黑体

    months = ["正月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]

    days = ["初一", "初二", "初三", "初四", "初五", "初六", "初七", "初八", "初九", "初十",

            "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",

            "廿一", "廿二", "廿三", "廿四", "廿五", "廿六", "廿七", "廿八", "廿九", "三十"]





    def __init__(self, year, month, extra_info_days=):

        self.year = year

        self.month = month

        self.extra_info_days = extra_info_days or {}

        self.fig, self.ax = plt.subplots()





    def ax_init(self):

        self.ax.axis([0, 7, 0, 7])

        self.ax.axis("on")

        self.ax.grid(True)

        self.ax.set_xticks([])

        self.ax.set_yticks([])





    @staticmethod

    def lunar_date_str(year, month, day):

        lunar = Converter.Solar2Lunar(Solar(year, month, day))

        month_str = "闰" + CalendarDrawer.months[lunar.month - 1] if lunar.isleap else CalendarDrawer.months[lunar.month - 1]

        return month_str if lunar.day == 1 else CalendarDrawer.days[lunar.day - 1]





    def plot_month(self):

        self.ax.text(3.5, 7.5, f"{self.year}年{self.month}月", color="black", ha="center", va="center")





    def plot_weekday_headers(self):

        for i, weekday in enumerate(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]):

            x = i + 0.5

            self.ax.text(x, 6.5, weekday, ha="center", va="center", color="black")





    def plot_day(self, day, x, y, color):

        ex_day = datetime.date(self.year, self.month, day)

        day_info = f"{day}\n{self.extra_info_days.get(ex_day, self.lunar_date_str(self.year, self.month, day))}"

        self.ax.text(x, y, day_info, ha="center", va="center", color=color)





    def check_color_day(self, day):

        date = datetime.date(self.year, self.month, day)

        return "red" if cc.get_holiday_detail(date)[0] else "black"





    def save(self):

        self.ax_init()

        self.plot_month()

        self.plot_weekday_headers()





        weekday, num_days = monthrange(self.year, self.month)

        y = 5.5

        x = weekday + 0.5





        for day in range(1, num_days + 1):

            color = self.check_color_day(day)

            self.plot_day(day, x, y, color)

            weekday = (weekday + 1) % 7

            if weekday == 0:

                y -= 1

            x = weekday + 0.5





        plt.savefig(f"日历{self.year}-{self.month}.png")









if __name__ == "__main__":

    extra_info_days = {

        datetime.date(2024, 1, 1): "元旦",

        datetime.date(2024, 2, 10): "春节",

        datetime.date(2024, 2, 14): "情人节",

        datetime.date(2024, 2, 24): "元宵节",

        datetime.date(2024, 3, 8): "妇女节",

        datetime.date(2024, 4, 4): "清明节",

        datetime.date(2024, 5, 1): "劳动节",

        datetime.date(2024, 5, 12): "母亲节",

        datetime.date(2024, 5, 20): "520",

        datetime.date(2024, 6, 1): "儿童节",

        datetime.date(2024, 6, 10): "端午节",

        datetime.date(2024, 6, 16): "父亲节",

        datetime.date(2024, 8, 10): "七夕节",

        datetime.date(2024, 9, 17): "中秋节",

        datetime.date(2024, 10, 1): "国庆节",

        datetime.date(2024, 11, 1): "万圣节",

        datetime.date(2024, 11, 11): "双十一",

        datetime.date(2024, 12, 12): "双十二",

        datetime.date(2024, 12, 24): "平安夜",

        datetime.date(2024, 12, 25): "圣诞节"

    }





    calendar_drawer = CalendarDrawer(2024, 12, extra_info_days) # 第一个参数为年份，第二个参数为月份，第三个参数为额外信息字典

    calendar_drawer.save()

绘制结果，2024-09：

2024-10：

2024-11：

2024-12：

引用与致谢

日历样式，部分参考了便民查询：wannianrili.bmcx.com/

matplotlib绘制，部分参考了shimo164：medium.com/@shimo164/

详细的中国节假日，不再需要个人手动标记了，chinese-calendar：github.com/LKI/chinese…

快速将公历转为农历，支持转换到2100年，LunarCalendar：github.com/wolfhong/Lu…

总结

从我们的日历中，可以清晰的看出，中秋到国庆，我们经历了：

嗯，确实是太烧脑了，没有日历，很难算的清楚啊，最后，那么问题来了，3+7到底等于几呢？