引言

前几天开发中突然接到测试提的一个 Bug，说我的时间组件显示异常。

我很诧异，这里初始化数据是后端返回的，我什么也没改，这bug提给我干啥。我去问后端：“这数据是不是有问题？”。后端答：“没问题啊，我们一直都是这么返回的时间戳，其他人用也没报错。”

于是，对比生产环境数据，我终于找到了问题根源：后端时间戳的类型，从 Number 静悄悄地变成了 String。

Bug原因

问题的原因，肯定就出现在时间数据解析上了，代码中，我统一用的dayjs做的时间解析。

如图，对时间戳的解析我都是这么写的

const time = dayjs(res.endTime).format('YYYY-MM-DD HH:mm:ss')

于是，我分别试了两种数据类型的解析方式:

• 字符型

dayjs('175008959900').format('YYYY-MM-DD hh:mm:ss') // 1975-07-19 01:35:59

• 数值型

dayjs(Number('175008959900')).format('YYYY-MM-DD HH:mm:ss') // 2025-07-17 06:59:59

看来，问题原因显而易见了：

由于后端返回的是字符串类型 的 '175008959900'，dayjs() 在处理字符串时，会尝试按“常见的日期字符串格式”进行解析（如 YYYY-MM-DD、YYYYMMDD 等），并不会自动识别为时间戳。所以它不会把这个字符串当作毫秒时间戳来解析，而是直接失败（解析成无效日期），但 dayjs 会退化为 Unix epoch（1970 年）或给出错误结果，最终导致返回的是错误的时间。

如何避免此类问题

同dayjs一样，原生的 new Date() 在解析时间戳时也存在类似的问题，因此，不管是 Date 还是 dayjs，一律对后端返回的时间戳 Number(input) 兜底处理，永远不要信任它传的是数字还是字符串：

const ts = Number(res.endTime);

const date = new Date(ts);

思考

其实出现这个问题，除了后端更改时间戳类型，也在于我没有充分理解“时间戳”的含义。我一直以为时间戳就是一段字符或一段数字，因此，从来没有想过做任何兜底处理。那么，什么是时间戳？

时间戳（Timestamp） 是一种用来表示时间的数字，通常表示从某个“起点时刻”到某个指定时间之间所经过的时间长度。这个“起点”大多数情况下是 1970 年 1 月 1 日 00:00:00 UTC（Unix 纪元） 。

常见时间戳类型：

时间戳的意义：

• 它是一个 绝对时间的数字化表示，可以跨语言、跨平台统一理解；


• 更容易做计算：两个时间戳相减就能得到毫秒差值（时间间隔）；


• 更紧凑：比如比字符串 "2025-07-17 06:59:59" 更短，处理性能更高。

在 JavaScript 中的使用：

console.log(Date.now()); // 比如：1714729530000



// 将时间戳转为日期

console.log(new Date(1750089599000)); // Thu Jul 17 2025 06:59:59 GMT+0800

vue-truncate-list , 点击查看 demo

在前端开发中，列表展示是最常见的需求之一。但当列表内容过多时，如何优雅地处理长列表展示成为了一个挑战。今天要介绍的 vue-truncate-list 组件，正是为解决这一问题而生的强大工具。

组件简介

vue-truncate-list 是一个灵活的 Vue 组件，同时支持 Vue 2 和 Vue 3 框架，专为移动端和桌面端设计。它的核心能力是实现列表的智能截断，并支持完全自定义的截断器渲染。无论是需要展示商品列表、评论列表还是其他类型的内容列表，该组件都能帮助你轻松实现优雅的截断效果，提升用户体验。

核心功能亮点

1. 自动列表截断

组件能够动态检测列表内容，自动隐藏溢出的列表项，无需手动计算高度或数量，极大简化了长列表处理的逻辑。

2. 自定义截断器

提供完全自由的截断器 UI 渲染能力。你可以根据项目风格自定义截断显示的内容，例如常见的 +3 more 样式，或者更复杂的交互按钮。

3. 响应式设计

内置响应式机制，能够根据容器尺寸自动调整截断策略，在手机、平板、桌面等不同设备上都能呈现最佳效果。

4. 可扩展列表

支持展开 / 折叠功能，用户可以通过点击截断器来查看完整列表内容，适用于需要展示部分内容但保留查看全部选项的场景。

安装指南

通过 npm 安装

npm install @twheeljs/vue-truncate-list

通过 yarn 安装

yarn add @twheeljs/vue-truncate-list

使用示例

基础用法

下面是一个基础的列表截断示例，通过 renderTruncator 自定义截断器的显示：

<template>

  <TruncateList

    :renderTruncator="({ hiddenItemsCount }) => h('div', { class: 'listItem' }, `+${hiddenItemsCount}`)"

  >

    <div class="listItem">Item 1</div>

    <div class="listItem">Item 2</div>

    <div class="listItem">Item 3</div>

    <!-- 更多列表项... -->

  </TruncateList>

</template>

<script>

import { h } from 'vue'

import TruncateList from '@twheeljs/vue-truncate-list'

export default {

  components: {

    TruncateList

  }

}

</script>

在这个示例中，我们通过 h 函数创建了一个简单的截断器，显示隐藏项的数量。

可扩展列表用法

更复杂的可展开 / 折叠列表示例：

<template>

  <TruncateList 

    :class="['list', 'expandable', expanded ? 'expanded' : '']" 

    :alwaysShowTruncator="true"

    :renderTruncator="({ hiddenItemsCount, truncate }) => {

      if (hiddenItemsCount > 0) {

        return h(

          'button',

          {

            class: 'expandButton',

            onClick: () => {

              handleExpand();

              // 重要：使用 nextTick 确保布局重计算后调用 truncate

              nextTick(() => {

                truncate();

              })

            }

          },

          `${hiddenItemsCount} more...`

        );

      } else {

        return h(

          'button',

          {

            class: 'expandButton',

            onClick: handleCollapse

          },

          'hide'

        );

      }

    }"

  >

    <div class="listItem">foo</div>

    <!-- 更多列表项... -->

    <div class="listItem">thud</div>

  </TruncateList>

</template>

<script>

import { h, ref, nextTick } from 'vue'

import TruncateList from '@twheeljs/vue-truncate-list'

export default {

  components: {

    TruncateList

  },

  setup() {

    const expanded = ref(false);

    const handleExpand = () => {

      expanded.value = true;

    }

    const handleCollapse = () => {

      expanded.value = false;

    }

    return {

      expanded,

      handleExpand,

      handleCollapse

    }

  }

}

</script>

注意事项：当设置 expanded 类时，虽然将 max-height 设置为 none，但容器高度不会立即更新，导致 ResizeObserver 不会触发。因此，需要在 nextTick 中手动调用 truncate() 方法来确保布局重新计算。

API 参考

Props

贡献与开发

本地开发

# 安装依赖

npm install

# 启动开发服务器

npm run dev

结语

vue-truncate-list 组件通过简洁的 API 和强大的功能，为 Vue 开发者提供了处理长列表展示的最佳实践。无论是移动端还是桌面端应用，它都能帮助你实现优雅的列表截断效果，提升用户体验。

项目灵感来源于 maladr0it/react-truncate-list，在此表示感谢。

欢迎大家贡献代码、提交 Issues 或提出改进建议！

前端开发常说“JavaScript 是单线程的”，但如果你正在做动画、数据可视化、图像处理、游戏开发、或任何基于 Canvas 的复杂渲染，你一定体会过——主线程的“卡顿地狱” 。

UI 不响应、FPS 降到个位数、稍微有点计算或渲染逻辑，就能卡住整个页面。

这种时候，Web Worker + OffscreenCanvas 是你的救命稻草。它不仅能将耗时任务移出主线程，还能真正让 Canvas 的绘制多线程执行。

这篇文章将带你深度理解并实践：

• 为什么你需要 Web Worker + OffscreenCanvas？


• 如何正确使用它们协同工作？


• 适配浏览器的兼容性与降级方案


• 实际场景中的优化技巧与踩坑合集

“主线程”到底卡在哪？

Canvas 的渲染过程其实包含两个部分：

这两个过程在传统用法中都跑在主线程。

一旦数据量一大、图形一多，你的 UI 就会被“图形更新”压得喘不过气。比如你尝试每帧绘制上千个粒子、图像变换、实时数据曲线更新时：

主线程就像个老人推着超重购物车，边推边喘，既要绘图又要处理 UI 和事件。

此时，如果我们能把逻辑计算和绘图任务拆出去，放到 Worker 中执行，主线程就能专注于 UI 响应，从而实现真正的“多线程协作”。

OffscreenCanvas 是什么？

OffscreenCanvas 是一种不依赖 DOM 的 Canvas 对象，它可以在 Worker 线程中创建和操作，拥有与普通 Canvas 几乎相同的绘图 API。

核心特性：

• 可以在主线程或 Worker 中创建


• 支持 2D 和 WebGL 上下文


• 可以将普通 <canvas> 转换为 OffscreenCanvas 进行共享


• 能通过 transferControlToOffscreen() 实现跨线程控制

Web Worker + OffscreenCanvas 工作原理

这样你就实现了：

• 主线程干净：不会因绘图阻塞 UI


• 渲染帧率高：不受主线程任务干扰


• 计算更快：Worker 可以专注高频计算任务

实战：用 OffscreenCanvas 实现 Worker 内渲染

我们来动手写一个最小工作示例，用 Web Worker 绘制一个不断更新的粒子系统。

主线程（main.js）

const canvas = document.querySelector('canvas')



// 支持性检测

if (canvas.transferControlToOffscreen) {

  const offscreen = canvas.transferControlToOffscreen()

  const worker = new Worker('render.worker.js')



  // 把 OffscreenCanvas 发送给 Worker，使用 transferable objects

  worker.postMessage({ canvas: offscreen }, [offscreen])

} else {

  console.warn('当前浏览器不支持 OffscreenCanvas')

}

Worker 线程（render.worker.js）

self.onmessage = function (e) {

  const canvas = e.data.canvas

  const ctx = canvas.getContext('2d')



  const particles = Array.from({ length: 1000 }, () => ({

    x: Math.random() * canvas.width,

    y: Math.random() * canvas.height,

    vx: (Math.random() - 0.5) * 2,

    vy: (Math.random() - 0.5) * 2

  }))



  function render() {

    ctx.clearRect(0, 0, canvas.width, canvas.height)



    for (let p of particles) {

      p.x += p.vx

      p.y += p.vy



      if (p.x < 0 || p.x > canvas.width) p.vx *= -1

      if (p.y < 0 || p.y > canvas.height) p.vy *= -1



      ctx.beginPath()

      ctx.arc(p.x, p.y, 2, 0, 2 * Math.PI)

      ctx.fillStyle = '#09f'

      ctx.fill()

    }



    requestAnimationFrame(render)

  }



  render()

}

浏览器支持情况

Safari 目前仍未完全支持，你可以做降级方案：如果不支持，就在主线程绘制。

冷知识：你以为是主线程的 requestAnimationFrame，其实在 Worker 中也能用！

在 Worker 中使用 requestAnimationFrame()？听起来离谱，但确实在 OffscreenCanvas 上启用了这个能力。

前提是你在 Worker 中用的是 OffscreenCanvas.getContext('2d' or 'webgl')，而不是 fake canvas。

所以，你可以用 Worker 实现完整的帧驱动动画系统，与主线程完全无关。

实战应用场景

✅ 实时数据可视化（如股票图、心电图）

让绘图脱离主线程，保证交互流畅性。

✅ 游戏引擎粒子系统、WebGL 场景

WebGL 渲染逻辑搬到 Worker，UI 操作丝滑不掉帧。

✅ 视频滤镜或图像处理

用 Canvas + 图像 API 进行像素级变换、裁剪、调色等任务。

✅ 后台复杂渲染任务（地图、3D 建模）

用户没感知，但主线程不会阻塞。

常见坑与优化建议

❗ 坑1：不能在 Worker 中操作 DOM

Worker 是脱离 DOM 世界的，不支持 document、window、canvas 元素。你只能使用传入的 OffscreenCanvas。

❗ 坑2：transferControlToOffscreen 只能用一次

一旦你把 canvas “交给”了 Worker，主线程就不能再操作它。就像是 canvas 被“搬家”了。

❗ 坑3：调试困难？用 console.log + postMessage 结合

Worker 的日志不一定出现在主线程控制台。建议：

console.log = (...args) => postMessage({ type: 'log', args })

主线程监听 message 然后打出日志。

✅ 优化1：帧率控制，别无限 requestAnimationFrame

在计算密集任务中，可能帧率过高导致 GPU 占用过重。可以加入 setTimeout 限制帧频。

✅ 优化2：TypedArray 数据共享

大量数据传输时，考虑用 SharedArrayBuffer 或 transferable objects，减少拷贝。

延伸阅读：WebAssembly + Worker + OffscreenCanvas？

如果你已经把渲染任务移到 Worker 中，还可以更进一步——用 WebAssembly（如 Rust、C++）执行核心逻辑，把性能提升到极限。

这就是现代浏览器下的“性能金三角”：

WebAssembly 负责逻辑 + Worker 解耦线程 + OffscreenCanvas 渲染输出

这是很多 Web 游戏、3D 可视化平台的核心架构方式。

结语：把计算和渲染“赶出”主线程，是前端性能进化的方向

OffscreenCanvas 不只是一个新 API，它代表了一种思维方式的转变：

• 从“所有任务都塞主线程” → 到“职责分离、主线程清洁化”


• 从“怕卡 UI” → 到“性能可控、结构合理”

如果你在做复杂动画、WebGL 图形、游戏、实时可视化，不使用 Web Worker + OffscreenCanvas，就像在用拖拉机跑 F1，注定要掉队。

拥抱现代浏览器的能力，开启真正的多线程渲染体验吧！

问题背景

在使用 Element-Plus/Element-UI 的分页表格（或者其他表格组件）时，默认的多选功能无法跨页保持选中状态。当切换分页请求新数据后，之前选中的数据会被清空。

之前遇到这个问题搜了挺多网上的文章，看着代码又多又复杂，下面是很简单的实现方法，主要代码就十几行。

先贴效果

核心思路

关键代码解析

1. 全局状态定义

const globalSelectedIds = ref(new Set()); // 全局选中id

const isPageChanging = ref(false); // 标记是否正在切换分页

2. 请求接口数据加载与表格状态回显

const getList = async () => {

  isPageChanging.value = true;

  let res = await mockApi({

    page: currentPage.value,

    pageSize: pageSize.value,

  });

  tableData.value = res;

  // 数据更新后回显选中状态

  nextTick(() => {

    tableData.value.forEach((row) => {

      tableRef.value?.toggleRowSelection(

        row,

        globalSelectedIds.value.has(row.id)

      );

    });

    isPageChanging.value = false;

  });

};

3. 选择状态变更处理 （核心代码）

const handleSelectionChange = (selection) => {

  // // 如果是请求数据后回显表格选中状态导致的变化事件，则不处理

  if (isPageChanging.value) return;

  const currentPageIds = tableData.value.map((row) => row.id);

  // 先移除当前页所有ID

  currentPageIds.forEach((id) => globalSelectedIds.value.delete(id));

  // 再添加当前选中的ID

  selection.forEach((row) => globalSelectedIds.value.add(row.id));

};

4. 从全局移除选中项(可选，仅演示点击标签删除选中数据使用)

const removeSelected = (id) => {

  globalSelectedIds.value.delete(id);

  const row = tableData.value.find((row) => row.id === id);

  row && tableRef.value?.toggleRowSelection(row, false);

};

完整实现方案代码 (vue3 + element plus)

<template>

  <div>

    <!-- 表格 -->

    <el-table

      :data="tableData"

      @selection-change="handleSelectionChange"

      ref="tableRef"

      border

    >

      <el-table-column type="selection" width="55" />

      <el-table-column prop="id" label="ID" width="80" />

      <el-table-column prop="name" label="姓名" />

    </el-table>

    <el-pagination

      class="mt-4"

      v-model:current-page="currentPage"

      v-model:page-size="pageSize"

      :page-sizes="[5, 10, 20]"

      :total="100"

      layout="total, sizes, prev, pager, next"

      @size-change="handlePageSizeChange"

      @current-change="handlePageChange"

    />

    <!-- 展示全局选中的数据id -->

    <div>

      <h4>全局选中数据 ({{ globalSelectedIds.size }}个)</h4>

      <div v-if="globalSelectedIds.size > 0">

        <el-tag

          v-for="id in Array.from(globalSelectedIds)"

          :key="id"

          closable

          @close="removeSelected(id)"

          class="mr-2 mb-2"

        >

          ID: {{ id }}

        </el-tag>

      </div>

    </div>

  </div>

</template>



<script setup>

import { ref, onMounted, nextTick } from "vue";



const currentPage = ref(1);

const pageSize = ref(5);

const tableRef = ref();

const tableData = ref([]);

const globalSelectedIds = ref(new Set()); // 全局选中id

const isPageChanging = ref(false); // 标记是否正在切换分页



// 模拟从接口获取数据

const mockApi = ({ page, pageSize }) => {

  const data = [];

  const startIndex = (page - 1) * pageSize;

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

    const id = startIndex + i;

    data.push({

      id: id,

      name: `用户${id}`,

    });

  }

  return new Promise((resolve) => {

    setTimeout(() => {

      resolve(data);

    }, 100);

  });

};



// 获取列表数据

const getList = async () => {

  isPageChanging.value = true;

  let res = await mockApi({

    page: currentPage.value,

    pageSize: pageSize.value,

  });

  tableData.value = res;

  // 数据更新后回显选中状态

  nextTick(() => {

    tableData.value.forEach((row) => {

      tableRef.value?.toggleRowSelection(

        row,

        globalSelectedIds.value.has(row.id)

      );

    });

    isPageChanging.value = false;

  });

};



// 统一处理表格选择变化

const handleSelectionChange = (selection) => {

  // 如果是请求数据后回显表格选中状态导致的变化事件，则不处理

  if (isPageChanging.value) return;

  const currentPageIds = tableData.value.map((row) => row.id);

  // 先移除当前页所有ID

  currentPageIds.forEach((id) => globalSelectedIds.value.delete(id));

  // 再添加当前选中的ID

  selection.forEach((row) => globalSelectedIds.value.add(row.id));

};



// 从全局移除选中项，如果删除的ID在当前页，需要更新表格选中状态

const removeSelected = (id) => {

  globalSelectedIds.value.delete(id);

  const row = tableData.value.find((row) => row.id === id);

  row && tableRef.value?.toggleRowSelection(row, false);

};



// 处理分页变化

const handlePageChange = () => {

  getList();

};

// 处理分页数量变化

const handlePageSizeChange = () => {

  currentPage.value = 1;

  getList();

};



// 请求接口获取数据

getList();

</script>

总结

这个功能的实现其实挺简单的，核心就是维护一个全局的选中 ID 集合。每次用户勾选表格时，对比当前页的数据和全局 ID 集合来更新状态；翻页或者重新加载数据时，再根据这个集合自动回显勾选状态，保证选中项不会丢失。

关注梦兽编程微信公众号，轻松摸鱼一下午。

用了十几年Math.random()，你是不是也遇到过这样的尴尬：想要在游戏里生成一个每次加载都一样的地图？想在测试中复现那个只出现一次的随机bug？面对Math.random()这个完全看心情的家伙，你只能望洋兴叹，因为它每次运行都会给你一个全新的、不可预测的数字。就像一个完全不记事的“失忆”随机数生成器。

// 每次运行都不一样，随缘得很

console.log(Math.random()); // 0.123456789

console.log(Math.random()); // 0.987654321

你无法“喂”给它一个特定的“种子”，让它沿着你预设的轨迹生成数字。这在很多需要确定性行为的场景下，简直是噩梦。

别担心！救星来了！JavaScript即将迎来一个重量级新成员——Random API提案（目前处于Stage 2阶段），它将彻底改变我们与随机数打交道的方式，带来一个革命性的特性：可复现的随机性（Reproducible Randomness）！

Random API：给随机数装上“记忆”和“超能力”🚀

新的Random API的核心在于引入了“种子”（Seed）的概念。你可以给随机数生成器一个特定的种子，只要种子一样，它就能生成完全相同的随机数序列。这就像给随机数装上了“记忆”，让它每次都能按照同一个剧本表演。

创建带有种子的随机数生成器：

// 用一个特定的种子创建一个生成器，比如种子是 [42, 0, 0, 0]

const seededRandom = new Random.Seeded(new Uint8Array([42, 0, 0, 0]));



// 见证奇迹！这两行代码，无论你运行多少次，结果都是一样的！

console.log(seededRandom.random()); // 0.123456789 (每次都一样)

console.log(seededRandom.random()); // 0.987654321 (每次都一样)

请注意这里的“一样”是什么意思：如果你使用相同的种子，并且按照相同的顺序调用.random()方法，你将总是得到完全相同的随机数序列。 第一次调用总是返回同一个值，第二次调用总是返回同一个（但通常与第一次不同）值，以此类推。这并不是说每次调用.random()都会返回同一个数字，而是整个序列是可预测、可复现的。

实战演练：用确定性随机生成游戏世界！🏞

想象一下，你在开发一个沙盒游戏，每次进入游戏，地形都应该不同，但如果你保存游戏再加载，地形必须和保存时一模一样。使用Random API，这变得轻而易举：

class TerrainGenerator {

  constructor(seed) {

    // 用种子创建随机生成器

    this.random = new Random.Seeded(seed);

    this.heightMap = [];

  }



  generateTerrain(width, height) {

    for (let y = 0; y < height; y++) {

      this.heightMap[y] = [];

      for (let x = 0; x < width; x++) {

        // 使用带有种子的随机数生成地形高度

        this.heightMap[y][x] = this.random.random() * 100;

      }

    }

    return this.heightMap;

  }



  // 保存当前生成器的状态，以便之后恢复

  saveState() {

    return this.random.getState();

  }



  // 从保存的状态恢复生成器

  restoreState(state) {

    this.random.setState(state);

  }

}



// 使用种子42生成第一块地形

const generator = new TerrainGenerator(new Uint8Array([42]));

const terrain1 = generator.generateTerrain(10, 10);



// 使用相同的种子42创建另一个生成器

const generator2 = new TerrainGenerator(new Uint8Array([42]));

const terrain2 = generator2.generateTerrain(10, 10);



// 见证奇迹！两块地形竟然完全相同！

console.log(JSON.stringify(terrain1) === JSON.stringify(terrain2)); // true

Random API的进阶超能力！🛠️

Random API的功能远不止于此，它还有一些非常实用的进阶特性：

1. 创建“子生成器”：

有时候你需要多个独立的随机数序列，但又想它们之间有某种关联（比如都源自同一个主种子）。你可以从一个父生成器派生出子生成器：

    // 创建一个父生成器

    const parent = new Random.Seeded(new Uint8Array([42]));



    // 创建两个子生成器，它们的种子来自父生成器

    const child1 = new Random.Seeded(parent.seed());

    const child2 = new Random.Seeded(parent.seed());



    // 这两个子生成器会产生不同的随机数序列，但它们的生成过程是确定的

    console.log(child1.random()); // 0.123456789

    console.log(child2.random()); // 0.987654321

2. 序列化和恢复状态：

你不仅可以保存和恢复整个生成器，还可以保存它当前的“状态”。这意味着你可以在生成到一半的时候暂停，保存状态，之后再从这个状态继续生成，保证后续序列完全一致。这对于需要中断和恢复的随机过程非常有用。

    // 创建一个生成器

    const generator = new Random.Seeded(new Uint8Array([42]));



    // 生成一些数字

    console.log(generator.random()); // 0.123456789

    console.log(generator.random()); // 0.987654321



    // 保存当前状态

    const state = generator.getState();



    // 继续生成更多数字

    console.log(generator.random()); // 0.456789123



    // 恢复之前保存的状态

    generator.setState(state);



    // 再次生成，你会得到和恢复状态前一样的数字！

    console.log(generator.random()); // 0.456789123 (和上面一样)

更多实用场景：不止是游戏！💡

Random API的应用场景非常广泛：

1. 确定性测试：

在编写单元测试或集成测试时，你经常需要模拟随机数据。使用带有种子的随机数，你可以确保每次测试运行时都能得到相同的随机输入，从而更容易复现和调试问题。你可以临时替换掉Math.random()来实现确定性测试：

    function testWithSeededRandom() {

      // 创建一个带有种子的随机生成器

      const random = new Random.Seeded(new Uint8Array([42]));



      // 临时替换掉 Math.random

      const originalRandom = Math.random;

      Math.random = random.random.bind(random);



      try {

        // 运行你的测试代码，里面的 Math.random 现在是确定的了

        runTests();

      } finally {

        // 恢复原来的 Math.random

        Math.random = originalRandom;

      }

    }

2. 程序化内容生成：

除了游戏地形，你还可以用它来生成角色属性、关卡布局、艺术图案等等，只要给定相同的种子，就能得到完全相同的结果。

    class ProceduralContentGenerator {

      constructor(seed) {

        this.random = new Random.Seeded(seed);

      }



      generateCharacter() {

        const traits = ['brave', 'cunning', 'wise', 'strong', 'agile'];

        const name = this.generateName();

        // 使用 seededRandom 生成随机索引

        const trait = traits[Math.floor(this.random.random() * traits.length)];



        return { name, trait };

      }



      generateName() {

        const prefixes = ['A', 'E', 'I', 'O', 'U'];

        const suffixes = ['dor', 'lin', 'mar', 'tor', 'vin'];



        // 使用 seededRandom 生成随机前后缀

        const prefix = prefixes[Math.floor(this.random.random() * prefixes.length)];

        const suffix = suffixes[Math.floor(this.random.random() * suffixes.length)];



        return prefix + suffix;

      }

    }



    // 使用种子42创建生成器

    const generator = new ProceduralContentGenerator(new Uint8Array([42]));



    // 生成一个角色

    const character = generator.generateCharacter();

    console.log(character); // { name: 'Ador', trait: 'brave' }



    // 使用相同的种子42创建另一个生成器

    const generator2 = new ProceduralContentGenerator(new Uint8Array([42]));



    // 生成的角色竟然完全相同！

    const character2 = generator2.generateCharacter();

    console.log(character2); // { name: 'Ador', trait: 'brave' }

3. 安全随机数生成：

Random API也提供了生成密码学安全随机数的方法，这对于需要高度安全性的场景（如密钥生成）至关重要。

    // 生成一个密码学安全的随机种子

    const secureSeed = Random.seed();



    // 使用安全种子创建生成器

    const secureRandom = new Random.Seeded(secureSeed);



    // 生成密码学安全的随机数

    console.log(secureRandom.random()); // 这是一个密码学安全的随机数

为什么这很重要？超越基础的意义！✨

新的Random API解决了几个长期存在的痛点：

它提供了可复现性，让你每次运行代码都能得到相同的随机数序列，这对于调试和复现bug至关重要。它保证了确定性，让你的代码在不同环境下表现一致。它支持状态管理，允许你保存和恢复随机数生成器的状态，实现更灵活的控制。当然，它也能生成密码学安全的随机数，满足高安全性的需求。

核心要点总结！🎯

新的Random API带来了可复现的随机性，让随机数不再完全失控。你可以用种子创建多个独立的随机生成器，并且能够保存和恢复它们的状态。这个API在程序化生成、测试等领域有着巨大的潜力。记住，它目前还在Stage 2阶段，但离我们越来越近了！

结语：JavaScript随机数的未来，是确定的！🚀

Random API的到来，对于需要精确控制随机行为的JavaScript开发者来说，无疑是一个游戏规则的改变者。无论你是游戏开发者、测试工程师，还是在进行任何需要可预测随机性的工作，这个API都将极大地提升你的开发效率和代码可靠性。

JavaScript随机数的未来已来，而且，它是确定的！

（注意：Random API目前处于TC39流程的Stage 2阶段，尚未在浏览器中普遍可用。你可以关注其在GitHub上的进展。）

Interact.js的核心优势

安装与引入

通过npm安装：

npm install interactjs

或使用CDN：

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

基础使用：创建可拖拽元素

<div id="draggable" class="box">

  拖拽我

</div>

interact('#draggable').draggable({

  inertia: true, // 启用惯性效果

  autoScroll: true,

  listeners: {

    move: dragMoveListener

  }

});



function dragMoveListener(event) {

  const target = event.target;

  const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;

  const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;



  target.style.transform = `translate(${x}px, ${y}px)`;

  target.setAttribute('data-x', x);

  target.setAttribute('data-y', y);

}

核心API详解

1. 拖拽功能（Draggable）

interact('.draggable').draggable({

  // 限制在父元素内移动

  modifiers: [

    interact.modifiers.restrictRect({

      restriction: 'parent',

      endOnly: true

    })

  ],

  // 开始拖拽时添加样式

  onstart: function(event) {

    event.target.classList.add('dragging');

  },

  // 拖拽结束

  onend: function(event) {

    event.target.classList.remove('dragging');

  }

});

2. 调整大小（Resizable）

interact('.resizable').resizable({

  edges: { left: true, right: true, bottom: true, top: true },

  // 限制最小尺寸

  modifiers: [

    interact.modifiers.restrictSize({

      min: { width: 100, height: 100 }

    })

  ],

  listeners: {

    move: function(event) {

      const target = event.target;

      let x = parseFloat(target.getAttribute('data-x')) || 0;

      let y = parseFloat(target.getAttribute('data-y')) || 0;

      

      // 更新元素尺寸

      target.style.width = event.rect.width + 'px';

      target.style.height = event.rect.height + 'px';

      

      // 调整位置（当从左侧或顶部调整时）

      x += event.deltaRect.left;

      y += event.deltaRect.top;

      

      target.style.transform = `translate(${x}px, ${y}px)`;

      target.setAttribute('data-x', x);

      target.setAttribute('data-y', y);

    }

  }

});

3. 放置区域（Dropzone）

interact('.dropzone').dropzone({

  accept: '.draggable', // 只接受特定元素

  overlap: 0.5, // 至少重叠50%才算放置有效

  

  ondropactivate: function(event) {

    event.target.classList.add('drop-active');

  },

  ondragenter: function(event) {

    event.target.classList.add('drop-target');

  },

  ondragleave: function(event) {

    event.target.classList.remove('drop-target');

  },

  ondrop: function(event) {

    // 处理放置逻辑

    event.target.appendChild(event.relatedTarget);

  },

  ondropdeactivate: function(event) {

    event.target.classList.remove('drop-active');

    event.target.classList.remove('drop-target');

  }

});

高级功能

1. 限制与约束

// 限制在特定区域内移动

interact.modifiers.restrict({

  restriction: document.getElementById('boundary'),

  elementRect: { top: 0, left: 0, bottom: 1, right: 1 },

  endOnly: true

})



// 吸附到网格

interact.modifiers.snap({

  targets: [

    interact.snappers.grid({ x: 20, y: 20 })

  ],

  range: Infinity,

  relativePoints: [ { x: 0, y: 0 } ]

})

2. 手势支持

interact('.gesture').gesturable({

  listeners: {

    move: function(event) {

      const target = event.target;

      const scale = parseFloat(target.getAttribute('data-scale')) || 1;

      const rotation = parseFloat(target.getAttribute('data-rotation')) || 0;

      

      target.style.transform = 

        `rotate(${rotation + event.da}deg)

         scale(${scale * (1 + event.ds)})`;

      

      target.setAttribute('data-scale', scale * (1 + event.ds));

      target.setAttribute('data-rotation', rotation + event.da);

    }

  }

});

性能优化技巧

// 销毁实例

const draggable = interact('#element');

// 移除拖拽功能

draggable.unset();

引言

在当今AI技术飞速发展的时代呢，如何将传统应用程序与自然语言交互相结合成为一个非常有趣的技术方向呀。嗯嗯，本文将详细介绍一个基于FastMCP框架开发的智能音乐播放器呢，它能够通过自然语言指令实现音乐播放控制，为用户提供全新的交互体验哦。啊，这个项目最初支持在线音乐播放功能来着，但是呢，出于版权考虑嘛，开源版本就仅保留了本地音乐播放功能啦。

项目概述

这个音乐播放器项目采用Python语言开发呢，核心功能包括：

项目采用模块化设计哦，主要依赖pygame处理音频播放，FastMCP提供AI交互接口，整体架构非常清晰呢，易于扩展和维护的啦。

技术架构解析

1. 核心组件

项目主要包含以下几个关键组件哦：

import os.path

import requests

import re

import json

import pygame

import threading

import queue

import random

• pygame.mixer：负责音频文件的加载和播放呢


• threading：实现后台播放线程呀，避免阻塞主程序


• queue：用于线程间通信（虽然最终版本没直接使用队列啦）


• random：支持随机播放模式嘛


• FastMCP：提供AI工具调用接口哦

2. 全局状态管理

播放器通过一组全局变量和线程事件来管理播放状态呢：

current_play_list = []  # 当前播放列表呀

current_play_mode = "single"  # 播放模式啦

current_song_index = -1  # 当前歌曲索引哦



# 线程控制事件

is_playing = threading.Event()  # 播放状态标志呢

is_paused = threading.Event()  # 暂停状态标志呀

should_load_new_song = threading.Event()  # 加载新歌曲标志啦



playback_thread =   # 播放线程句柄哦

这种设计实现了播放状态与UI/控制逻辑的分离呢，使得系统更加健壮和可维护呀。

核心实现细节

1. 音乐播放线程

播放器的核心是一个独立的后台线程呢，负责实际的音乐播放逻辑哦：

def music_playback_thread():

    global current_song_index, current_play_list, current_play_mode



    # 确保mixer在线程中初始化呀

    if not pygame.mixer.get_init():

        pygame.mixer.init()



    while True:

        # 检查是否需要加载新歌曲啦

        if should_load_new_song.is_set():

            pygame.mixer.music.stop()

            should_load_new_song.clear()

            

            # 处理歌曲加载逻辑哦

            if not current_play_list:

                print("播放列表为空，无法加载新歌曲呢~")

                is_playing.clear()

                is_paused.clear()

                continue

            

            # 验证歌曲索引有效性呀

            if not (0 <= current_song_index < len(current_play_list)):

                current_song_index = 0

            

            # 加载并播放歌曲啦

            song_file_name = current_play_list[current_song_index]

            song_to_play_path = os.path.join("music_file", song_file_name)

            

            if not os.path.exists(song_to_play_path):

                print(f"错误: 歌曲文件 '{song_file_name}' 未找到，跳过啦~")

                continue

            

            try:

                pygame.mixer.music.load(song_to_play_path)

                if not is_paused.is_set():

                    pygame.mixer.music.play()

                print(f"正在播放 (后台): {song_file_name}哦~")

                is_playing.set()

            except pygame.error as e:

                print(f"Pygame加载/播放错误: {e}. 可能音频文件损坏或格式不支持呢。跳过啦~")

                continue

        

        # 播放状态管理呀

        if is_playing.is_set():

            if pygame.mixer.music.get_busy() and not is_paused.is_set():

                pygame.time.Clock().tick(10)

            elif not pygame.mixer.music.get_busy() and not is_paused.is_set():

                # 歌曲自然结束啦，根据模式处理下一首哦

                if current_play_list:

                    if current_play_mode == "single":

                        should_load_new_song.set()

                    elif current_play_mode == "list":

                        current_song_index = (current_song_index + 1) % len(current_play_list)

                        should_load_new_song.set()

                    elif current_play_mode == "random":

                        current_song_index = random.randint(0, len(current_play_list) - 1)

                        should_load_new_song.set()

                else:

                    is_playing.clear()

                    is_paused.clear()

                    pygame.mixer.music.stop()

            elif is_paused.is_set():

                pygame.time.Clock().tick(10)

        else:

            pygame.time.Clock().tick(100)

这个线程实现了完整的播放状态机呢，能够处理各种播放场景哦，包括正常播放呀、暂停啦、歌曲切换等等呢。

2. FastMCP工具函数

项目通过FastMCP提供了一系列可被AI调用的工具函数呢：

播放本地音乐

@mcp.tool()

def play_musics_local(song_name: str = "", play_mode: str = "single") -> str:

    """播放本地音乐呀

    :param song_name: 要播放的音乐名称呢,可以留空哦，留空表示加载进来的歌曲列表为本地文件夹中的所有音乐啦

    :param play_mode: 播放模式呀，可选single（单曲循环），list（列表循环），random（随机播放）哦

    :return: 播放结果呢

    """

    global current_play_list, current_play_mode, current_song_index, playback_thread

    

    # 确保音乐文件夹存在哦

    if not os.path.exists("music_file"):

        os.makedirs("music_file")

        return "本地文件夹中没有音乐文件呢，已创建文件夹 'music_file'啦~"



    # 扫描音乐文件呀

    music_files = [f for f in os.listdir("music_file") if f.endswith(".mp3")]

    if not music_files:

        return "本地文件夹中没有音乐文件呢~"



    # 构建播放列表啦

    play_list_temp = []

    if not song_name:

        play_list_temp = music_files

    else:

        for music_file in music_files:

            if song_name.lower() in music_file.lower():

                play_list_temp.append(music_file)



    if not play_list_temp:

        return f"未找到匹配 '{song_name}' 的本地音乐文件呢~"



    current_play_list = play_list_temp

    current_play_mode = play_mode



    # 设置初始播放索引哦

    if play_mode == "random":

        current_song_index = random.randint(0, len(current_play_list) - 1)

    else:

        if song_name:

            try:

                current_song_index = next(i for i, f in enumerate(current_play_list) if song_name.lower() in f.lower())

            except StopIteration:

                current_song_index = 0

        else:

            current_song_index = 0



    # 确保播放线程运行呀

    if playback_thread is  or not playback_thread.is_alive():

        playback_thread = threading.Thread(target=music_playback_thread, daemon=True)

        playback_thread.start()

        print("后台播放线程已启动啦~")



    # 触发播放哦

    pygame.mixer.music.stop()

    is_paused.clear()

    is_playing.set()

    should_load_new_song.set()



    return f"已加载 {len(current_play_list)} 首音乐到播放列表呢。当前播放模式：{play_mode}哦。即将播放：{current_play_list[current_song_index]}呀~"

播放控制函数

@mcp.tool()

def pause_music(placeholder: str = ""):

    """暂停当前播放的音乐呀"""

    global is_paused, is_playing

    if pygame.mixer.music.get_busy():

        pygame.mixer.music.pause()

        is_paused.set()

        return "音乐已暂停啦~"

    elif is_paused.is_set():

        return "音乐已处于暂停状态呢"

    else:

        return "音乐未在播放中哦，无法暂停呀"



@mcp.tool()

def unpause_music(placeholder: str = ""):

    """恢复暂停的音乐呢"""

    global is_paused, is_playing

    if not pygame.mixer.music.get_busy() and pygame.mixer.music.get_pos() != -1 and is_paused.is_set():

        pygame.mixer.music.unpause()

        is_paused.clear()

        is_playing.set()

        return "音乐已恢复播放啦~"

    elif pygame.mixer.music.get_busy() and not is_paused.is_set():

        return "音乐正在播放中呢，无需恢复哦"

    else:

        return "音乐未在暂停中呀，无法恢复呢"



@mcp.tool()

def stop_music(placeholder: str = ""):

    """停止音乐播放并清理资源哦"""

    global is_playing, is_paused, current_song_index, should_load_new_song

    pygame.mixer.music.stop()

    is_playing.clear()

    is_paused.clear()

    should_load_new_song.clear()

    current_song_index = -1

    return "音乐已停止啦，程序准备好接收新的播放指令哦~"

歌曲导航函数

@mcp.tool()

def next_song(placeholder: str = "") -> str:

    """播放下一首歌曲呀"""

    global current_song_index, current_play_list, is_playing, is_paused, current_play_mode, should_load_new_song

    

    if not current_play_list:

        return "播放列表为空呢，无法播放下一首哦~"



    is_playing.set()

    is_paused.clear()



    # 从单曲循环切换到列表循环啦

    if current_play_mode == "single":

        current_play_mode = "list"

        print("已从单曲循环模式切换到列表循环模式啦~")



    # 计算下一首索引哦

    if current_play_mode == "list":

        current_song_index = (current_song_index + 1) % len(current_play_list)

    elif current_play_mode == "random":

        current_song_index = random.randint(0, len(current_play_list) - 1)



    should_load_new_song.set()

    return f"正在播放下一首: {current_play_list[current_song_index]}呢~"



@mcp.tool()

def previous_song(placeholder: str = "") -> str:

    """播放上一首歌曲呀"""

    global current_song_index, current_play_list, is_playing, is_paused, current_play_mode, should_load_new_song

    

    if not current_play_list:

        return "播放列表为空呢，无法播放上一首哦~"



    is_playing.set()

    is_paused.clear()



    if current_play_mode == "single":

        current_play_mode = "list"

        print("已从单曲循环模式切换到列表循环模式啦~")



    if current_play_mode == "list":

        current_song_index = (current_song_index - 1 + len(current_play_list)) % len(current_play_list)

    elif current_play_mode == "random":

        current_song_index = random.randint(0, len(current_play_list) - 1)



    should_load_new_song.set()

    return f"正在播放上一首: {current_play_list[current_song_index]}呢~"

播放列表查询

@mcp.tool()

def get_playlist(placeholder: str = "") -> str:

    """获取当前播放列表呀"""

    global current_play_list, current_song_index

    

    if not current_play_list:

        return "播放列表当前为空呢~"



    response_lines = ["当前播放列表中的歌曲哦："]

    for i, song_name in enumerate(current_play_list):

        prefix = "-> " if i == current_song_index else "   "

        response_lines.append(f"{prefix}{i + 1}. {song_name}")



    return "\n".join(response_lines)

部署与使用

1. 环境准备

项目依赖较少呢，只需安装以下库哦：

pip install pygame requests fastmcp



// 或者 指定阿里云的镜像源去加速下载（阿里源提供的PyPI镜像源地址）

pip install pygame requests fastmcp -i https://mirrors.aliyun.com/pypi/simple/

2. 运行程序

python play_music.py

3. 与AI助手集成

配置，模型服务我选的是大模型openRouter：

然后去配置mcp服务器，类型一定要选sse

然后保存。

4. 使用示例

• "播放本地歌曲呀，使用随机播放模式哦"


• "下一首啦"


• "暂停一下嘛"


• "继续播放呀"


• "停止播放呢"


• "播放歌曲xxx哦，使用单曲循环模式啦"


• "查看当前音乐播放列表呀"

JJ的歌真好听。

前端如何检测新版本，并提示用户去刷新

先看效果

原理

通过轮询index.html文件的内容来计算文件的哈希值前后是否发生了变化

前端工程化的项目中，以Vue为例，webpack或vite打包通常会构建为很多的js、css文件，每次构建都会根据内容生成唯一的哈希值。如下图所示。

大家可以动手试试，观察一下。

每次构建完index.html中script或link标签引用的地址发生了变化。

代码实现

以Vue+ElementPlus项目为例。在入口文件中引入此文件即可。

// check-version.ts

// 封装了storage，粗暴一点可以用 sessionStorage 代替

import { Storage } from "@/utils/storage";

import { ElLink, ElNotification, ElSpace } from "element-plus";

import { h } from "vue";

import CryptoJS from 'crypto-js';



const storage = new Storage('check-version', sessionStorage);

const APP_VERSION = 'app-version';

let notifyInstance: any;



const generateHash = (text: string): string => CryptoJS.SHA256(text).toString();



const getAppVersionHash = async () => {

  const html = await fetch(`${location.origin}?t=${Date.now()}`).then(res => res.text());

  const newHash = generateHash(html);

  const oldHash = storage.get(APP_VERSION);

  return { newHash, oldHash };

}



const checkVersion = async () => {

  const { newHash, oldHash } = await getAppVersionHash()

  if (oldHash !== newHash) {

    if (notifyInstance) return;

    notifyInstance = ElNotification({

      title: '版本更新',

      message: h(ElSpace, null, () => [

        h('span', '检测到新版本发布！'),

        h(ElLink, { type: 'primary', onClick: () => location.reload() }, () => '立即刷新')

      ]),

      position: 'top-right',

      duration: 0,

      onClose: () => {

        notifyInstance = null

      }

    })

  }

}



const loopCheck = (ms: number) => {

  setTimeout(async () => {

    await checkVersion()

    loopCheck(ms)

  }, ms)

}



document.addEventListener('DOMContentLoaded', async () => {

  console.log("The DOM is fully loaded and parsed.");



  const { newHash } = await getAppVersionHash();

  storage.set(APP_VERSION, newHash, null);



  loopCheck(1000 * 30);

});

在 CSS 的浩瀚宇宙中，聚光灯下的明星属性固然耀眼，但那些藏在规范角落的「小众特性」，往往才是提升开发效率的秘密武器。它们就像隐藏的工具箱，能帮我们用更少的代码实现更细腻的交互，让界面开发从繁琐走向优雅。

今天，就为大家解锁9 个被严重低估的 CSS 特性，这些宝藏属性不仅能简化日常开发流程，还能带来意想不到的惊艳效果！

1. accent-color：表单元素的样式魔法

原生复选框和单选按钮曾是前端开发者的「审美之痛」，默认样式不仅呆板，还极难定制。但accent-color的出现，彻底打破了这个僵局！

input[type="checkbox"] {  

    accent-color: hotpink;

}

同样适用于input[type="radio"]，只需一行代码，就能将单调的灰色方块 / 圆点变成品牌主色调，告别 JavaScript 和第三方库的复杂操作。

兼容性：主流浏览器（Chrome 86+、Firefox 75+、Safari 14+）均已支持，可放心使用！

2. caret-color：光标颜色随心定

在深色主题界面中，刺眼的黑色文本光标常常破坏整体美感。caret-color允许我们精确控制插入符颜色，让细节也能完美融入设计。

input {  care

    t-color: limegreen;

}

虽然只是一个像素级的调整，但却能大幅提升用户输入时的视觉舒适度，细节之处尽显专业！

3. currentColor：颜色继承的终极利器

还在为重复定义颜色值而烦恼？currentColor堪称 CSS 中的「颜色复印机」，它能自动继承元素的字体颜色，让代码更简洁，主题切换更灵活。

button {  

    color: #007bff;  

    border: 2px solid currentColor;

}

无论后续如何修改color值，border颜色都会自动同步，完美遵循 DRY（Don't Repeat Yourself）原则！

4. ::marker：列表符号的定制革命

过去修改列表符号，要么用background-image hack，要么手动添加标签，代码又丑又难维护。现在，::marker让我们真正掌控列表样式！

li::marker {  

    color: crimson;  

    font-size: 1.2rem;

}

除了颜色和尺寸，部分浏览器还支持设置字体、图标等高级效果，从此告别千篇一律的小黑点！

5. :user-valid：更人性化的表单验证

:valid 和 :invalid 虽能实现表单验证，但常出现「页面刚加载就提示错误」的尴尬。 :user-valid 巧妙解决了这个问题，仅在用户交互后才触发验证反馈。

input:user-valid {  

    border-color: green;

}

搭配 :user-invalid 使用，既能及时提示用户，又不会过度打扰，交互体验直接拉满！

6. :placeholder-shown：捕捉输入框的「空状态」

想在用户输入前给表单来点动态效果？ :placeholder-shown 可以精准识别输入框是否为空，轻松实现淡入淡出、占位符动画等创意交互。

input:placeholder-shown { 

     opacity: 0.5;

}

当用户开始输入，样式自动切换，让表单引导更智能、更优雅。

7. all: unset：组件样式的「一键清零」

重置组件默认样式是开发中的常见需求，但传统的reset.css动辄几百行，代码冗余且难以维护。all: unset 只需一行代码，就能彻底移除所有默认样式（包括继承属性）。

button {  

    all: unset;

}

在构建自定义按钮、导航栏等组件时，先使用all: unset「清空画布」，再按需添加样式，开发效率直接翻倍！

注意：该属性会移除所有样式，使用时需谨慎搭配自定义规则，避免「矫枉过正」。

8. inset：布局语法的终极简化

写绝对定位或固定布局时，top、right、bottom、left 四行代码总是让人抓狂？inset 提供了超简洁的简写语法！

/* 等价于 top: 0; right: 0; bottom: 0; left: 0; */inset: 0;/* 类似 padding 的 2 值、4 值写法 */inset: 10px 20px; /* 等价于 top: 10px; right: 20px; bottom: 10px; left: 20px; */

代码瞬间瘦身，可读性直线上升，绝对是布局党的福音！

9. text-wrap: balance：文本折行的「智能管家」

在响应式设计中，标题折行常常参差不齐，影响排版美感。text-wrap: balance 就像一位专业排版师，能自动均衡每行文本长度，让内容分布更优雅。

h1 {  text-wrap: balance;}

虽然目前浏览器支持有限（仅 Chrome 115+），但已在 Figma 等设计工具中广泛应用，未来可期！

总结

这些被低估的 CSS 特性，虽然小众，但每一个都能在特定场景中发挥巨大价值。下次开发时不妨试试，或许能发现新大陆！

互动时间：你在开发中还发现过哪些「相见恨晚」的 CSS 特性？欢迎在评论区分享，一起挖掘 CSS 的隐藏力量！

原来有这么多时间

六月的那么一天，天气比以往时候都更凉爽，媳妇边收拾桌子，边漫不经心的对我说：你最近好像都没怎么阅读了。 正刷着新闻我，如同被一记响亮的晴空霹雳击中一般，不知所措。是了，最近几月诸事凑一起，加之两大项目接踵而至，确实有些许糟心，于是总是在空闲的时间泡在新闻里聊以解忧，再回首，隐隐有些恍如隔世之感。于是收拾好心情，翻开了躺在书架良久的整洁三步曲。也许是太久没有阅读了， 一口气，Bob大叔 Clean 系列三本都读完了，重点推荐Clear Architecture，部分章节建议重复读，比如第5部分-软件架构，可以让你有真正的提升，对代码，对编程，对软件都会有不一样的认识。

Clean Code 次之，基本写了一些常见的规约，大部分也是大家熟知，数据结构与面向对象的看法，是少有的让我 哇喔的点，如果真是在码路上摸跋滚打过的，快速翻阅即可。

The Clean Coder 对个人而言可能作用最小。 确实写人最难，无法聚焦。讲了很多，但是感觉都不深入，或者作者是在写自己，很难映射到自己身上。 当然，第二章说不，与第14章辅导，学徒与技艺，还是值得一看的。

阅读技术书之余，又战战兢兢的翻开了敬畏已久的朱生豪先生翻译的《莎士比亚》, 不看则已，因为看了根本停不来。其华丽的辞职，幽默的比喻，真的会让人情不自禁的开怀朗读起来。

。。。

再看从6月到现在，电子书阅读时间超过120小时，平均每天原来有1个多小时的空余时间，简直超乎想像。

 看了整洁架构一书，就想写代码，于是有了这篇文章。

灵魂拷问 - 宕机怎么办

为了解决系统中大量规则配置的问题，与同事一起构建了一个可视化表达式引擎 RuleLink《非全自研可视化表达引擎-RuleLinK》，解决了公司内部几乎所有配置问题。尤为重要的一点，所有配置业务同学即可自助完成。随着业务深入又增加了一些自定义函数，增加了公式及计算功能，增加组件无缝嵌入其他业务...我一度以为现在的功能已经可以满足绝大部分场景了。真到Wsin强同学说了一句：业财项目是深度依赖RuleLink的，流水打标，关联科目。。。我知道他看了数据，10分RuleLink执行了5万+次。这也就意味着，如果RuleLink宕机了，业财服务也就宕机了，也就意味着巨大的事故。这却是是一个问题，公司业务确实属于非常低频，架不住财务数据这么多。如果才能让RuleLink更稳定成了当前的首要问题。

高可用VS少依赖

要提升服务的可用性，增加服务的实例是最快的方式。 但是考虑到我们自己的业务属性，以及业财只是在每天固定的几个时间点短时高频调用。 增加节点似乎不是最经济的方式。看 Bob大叔的《Clear Architecture》书中，对架构的稳定性有这样一个公式：不稳定性，I=Fan-out/(Fan-in+Fan-out)

Fan-in：入向依赖，这个指标指代了组件外部类依赖于组件内部类的数量。

Fan-out：出向依赖，这个指标指代了组件内部类依赖于组件外部类的数量。

这个想法，对于各个微服务的稳定性同时适用，少一个外部依赖，稳定性就增加一些。站在业财系统来说，如果我能减少调用次数，其稳定性就在提升，批量接口可以一定程度上减少依赖，但并未解决根本问题。那么调用次数减少到极限会是什么样的呢？答案是：一次。 如果规则不变的话，我只需要启动时加载远程规则，并在本地容器执行规则的解析。如果有变动，我们只需要监听变化即可。这样极大减少了业财对RuleLink的依赖，也不用增RuleLink的节点。实际上大部分配置中心都是这样的设计的，比如apollo，nacos。 当然，本文的实现方式也有非常多借鉴（copy）了apollo的思想与实现。

服务端设计

模型比较比较简单，应用订阅场景，场景及其规则变化时，或者订阅关系变化时，生成应用与场景变更记录。类似于生成者-消费都模型，使用DB做存储。

”推送”原理

整体逻辑参考apollo实现方式。 服务端启动后 创建Bean ReleaseMessageScanner 注入变更监听器 NotificationController。

ReleaseMessageScanner 一个线程定时扫码变更，如果有变化 通知到所有监听器。

NotificationController在得知有配置发布后是如何通知到客户端的呢？

实现方式如下：

1，客户端会发起一个Http请求到RuleLink的接口，NotificationController

2，NotificationController不会立即返回结果，而是通过Spring DeferredResult把请求挂起

3，如果在60秒内没有该客户端关心的配置发布，那么会返回Http状态码304给客户端

4，如果有该客户端关心的配置发布，NotificationController会调用DeferredResult的setResult方法，传入有变化的场景列表，同时该请求会立即返回。客户端从返回的结果中获取到有变化的场景后，会直接更新缓存中场景，并更新刷新时间

ReleaseMessageScanner 比较简单，如下。NotificationController 代码也简单，就是收到更新消息，setResult返回（如果有请求正在等待的话）

public class ReleaseMessageScanner implements InitializingBean {

  private static final Logger logger = LoggerFactory.getLogger(ReleaseMessageScanner.class);



  private final AppSceneChangeLogRepository changeLogRepository;

  private int databaseScanInterval;

  private final List<ReleaseMessageListener> listeners;

  private final ScheduledExecutorService executorService;



  public ReleaseMessageScanner(final AppSceneChangeLogRepository changeLogRepository) {

    this.changeLogRepository = changeLogRepository;

    databaseScanInterval = 5000;

    listeners = Lists.newCopyOnWriteArrayList();

    executorService = Executors.newScheduledThreadPool(1, RuleThreadFactory

        .create("ReleaseMessageScanner", true));

  }



  @Override

  public void afterPropertiesSet() throws Exception {

    executorService.scheduleWithFixedDelay(() -> {

      try {

        scanMessages();

      } catch (Throwable ex) {

        logger.error("Scan and send message failed", ex);

      } finally {



      }

    }, databaseScanInterval, databaseScanInterval, TimeUnit.MILLISECONDS);



  }



  /**

   * add message listeners for release message

   * @param listener

   */

  public void addMessageListener(ReleaseMessageListener listener) {

    if (!listeners.contains(listener)) {

      listeners.add(listener);

    }

  }



  /**

   * Scan messages, continue scanning until there is no more messages

   */

  private void scanMessages() {

    boolean hasMoreMessages = true;

    while (hasMoreMessages && !Thread.currentThread().isInterrupted()) {

      hasMoreMessages = scanAndSendMessages();

    }

  }



  /**

   * scan messages and send

   *

   * @return whether there are more messages

   */

  private boolean scanAndSendMessages() {

    //current batch is 500

    List<AppSceneChangeLogEntity> releaseMessages =

        changeLogRepository.findUnSyncAppList();

    if (CollectionUtils.isEmpty(releaseMessages)) {

      return false;

    }

    fireMessageScanned(releaseMessages);



    return false;

  }





  /**

   * Notify listeners with messages loaded

   * @param messages

   */

  private void fireMessageScanned(Iterable<AppSceneChangeLogEntity> messages) {

    for (AppSceneChangeLogEntity message : messages) {

      for (ReleaseMessageListener listener : listeners) {

        try {

          listener.handleMessage(message.getAppId(), "");

        } catch (Throwable ex) {

          logger.error("Failed to invoke message listener {}", listener.getClass(), ex);

        }

      }

    }

  }

}

客户端设计

上图简要描述了客户端的实现原理：

• 客户端和服务端保持了一个长连接，从而能第一时间获得配置更新的推送。（通过Http Long Polling实现）


• 客户端还会定时从RuleLink配置中心服务端拉取应用的最新配置。
  
  
  
  
  • 　　这是一个fallback机制，为了防止推送机制失效导致配置不更新
  
  
  • 　　客户端定时拉取会上报本地版本，所以一般情况下，对于定时拉取的操作，服务端都会返回304 - Not Modified
  
  
  • 　　定时频率默认为每5分钟拉取一次，客户端也可以通过在运行时指定配置项: rule.refreshInterval来覆盖，单位为分钟。
  
  
  
  


• 客户端从RuleLink配置中心服务端获取到应用的最新配置后，会写入内存保存到SceneHolder中，


• 可以通过RuleLinkMonitor 查看client 配置刷新时间，以及内存中的规则是否远端相同

客户端工程

客户端以starter的形式，通过注解EnableRuleLinkClient 开始初始化。

 1 /**

 2  * @author JJ

 3  */

 4 @Retention(RetentionPolicy.RUNTIME)

 5 @Target(ElementType.TYPE)

 6 @Documented

 7 @Import({EnableRuleLinkClientImportSelector.class})

 8 public @interface EnableRuleLinkClient {

 9 

10   /**

11    * The order of the client config, default is {@link Ordered#LOWEST_PRECEDENCE}, which is Integer.MAX_VALUE.

12    * @return

13    */

14   int order() default Ordered.LOWEST_PRECEDENCE;

15 }