前言

本文主要介绍 Electron 客户端应用的自动更新，包括全量和增量这两种方式。

全量更新： 运行新的安装包，安装目录所有资源覆盖式更新。

增量更新： 只更新修改的部分，通常是渲染进程和主进程文件。

本文并没有拿真实项目来举例子，而是起一个 新的项目 从 0 到 1 来实现自动更新。

如果已有的项目需要支持该功能，借鉴本文的主要步骤即可。

前置说明：

准备工作

脚手架搭建项目

我们通过 electron-vite 快速搭建一个基于 Vite + React + TS 的 Electron 项目。

该模板已经包括了我们需要的核心第三方库：electron-builder，electron-updater。

前者是用来打包客户端程序的，后者是用来实现自动更新的。

在项目根目录下，已经自动生成了两份配置文件：electron-builder.yml 和 dev-app-update.yml。

electron-builder.yml

该文件描述了一些 打包配置，更多信息可参考 官网。

在这些配置项中，publish 字段比较重要，因为它关系到更新源。

publish:

  provider: generic // 使用一个通用的 HTTP 服务器作为更新源。

  url: https://example.com/auto-updates // 存放安装包和描述文件的地址

provider 字段还有其他可选项，但是本文只介绍 generic 这种方式，即把安装包放在 HTTP 服务器里。

dev-app-update.yml

provider: generic

url: https://example.com/auto-updates

updaterCacheDirName: electron-update-demo-updater

其中，updaterCacheDirName 定义下载目录，也就是安装包存放的位置。全路径是C:\Users\用户名\AppData\Local\electron-update-demo-updater，不配置则在C:\Users\用户名\AppData\Local下自动创建文件夹，开发环境下为项目名，生产环境下为项目名-updater。

模拟服务器

我们直接运行 npm run build:win，在默认 dist 文件夹下就出现了打包后的一些资源。

其实更新的基本思路就是对比版本号，即对比本地版本和 线上服务器 版本是否一致，若不一致则需要更新。

因此我们在开发调试的时候，需要起一个本地服务器，来模拟真实的情况。

新建一个文件夹 mockServer，把打包后的 setup.exe 安装包和 latest.yml 文件粘贴进去，然后通过 serve 命令默认起了一个 http://localhose:3000 的本地服务器。

既然有了存放资源的本地地址，在开发调试的时候，我们更新下 dev-app-update.yml 文件的 url 字段，也就是修改为 http://localhose:3000。

注：如果需要测试打包后的更新功能，需要同步修改打包配置文件。

全量更新

与主进程文件同级，创建 update.ts 文件，之后我们的更新逻辑将在这里展开。

import { autoUpdater } from 'electron-updater' //核心库

需要注意的是，在我们开发过程中，通过 npm run dev 起来的 Electron 程序其实不能算是打包后的状态。

你会发现在调用 autoUpdater 的一些方法会提示下面的错误：

Skip checkForUpdates because application is not packed and dev update config is not forced

因此我们需要在开发环境去做一些动作，并且手动指定 updateConfigPath：

// update.ts

if (isDev) {

  Object.defineProperty(app, 'isPackaged', {

    get: () => true

  })

  autoUpdater.updateConfigPath = path.join(__dirname, '../../dev-app-update.yml')

}

核心对象 autoUpdater 有很多可以主动调用的方法，也有一些监听事件，同时还有一些属性可以设置。

这里只展示了本人项目场景所需的一些配置。

autoUpdater.autoDownload = false // 不允许自动下载更新

autoUpdater.allowDowngrade = true // 允许降级更新（应付回滚的情况）



autoUpdater.checkForUpdates()

autoUpdater.downloadUpdate()

autoUpdater.quitAndInstall()



autoUpdater.on('checking-for-update', () => {

  console.log('开始检查更新')

})

autoUpdater.on('update-available', info => {

  console.log('发现更新版本')

})

autoUpdater.on('update-not-available', info => {

  console.log('不需要全量更新', info.version)

})

autoUpdater.on('download-progress', progressInfo => {

  console.log('更新进度信息', progressInfo)

})

autoUpdater.on('update-downloaded', () => {

  console.log('更新下载完成')

})

autoUpdater.on('error', errorMessage => {

  console.log('更新时出错了', errorMessage)

})

在监听事件里，我们可以拿到下载新版本 整个生命周期 需要的一些信息。

// 新版本的版本信息（已筛选）

interface UpdateInfo {

    readonly version: string;

    releaseName?: string | null;

    releaseNotes?: string | Array<ReleaseNoteInfo> | null;

    releaseDate: string;

}



// 下载安装包的进度信息

interface ProgressInfo {

    total: number;

    delta: number;

    transferred: number;

    percent: number;

    bytesPerSecond: number;

}

在写完这些基本的方法之后，我们需要决定 检验更新 的时机，一般是在应用程序真正启动之后，即 mainWindow 创建之后。

运行项目，预期会提示 不需要全量更新，因为刚才复制到本地服务器的 latest.yml 文件里的版本信息与本地相同。修改 version 字段，重启项目，主进程就会提示有新版本需要更新了。

频繁启动应用太麻烦，除了应用初次启动时主进程主动帮我们检验更新外，还需要用户 手动触发 版本更新检测，此外，由于产品场景需要，当发现有新版本的时候，需要在 渲染进程 通知用户，包括版本更新时间和更新内容。因此我们需要加上主进程与渲染进程的 IPC通信 来实现这个功能。

其实需要的数据主进程都能够提供了，渲染进程具体的展示及交互方式就自由发挥了，这里简单展示下我做的效果。

1. 发现新版本

2. 无需更新

增量更新

为什么要这么做

其实全量更新是一种比较简单粗暴的更新方式，我没有花费太大的篇幅去介绍，基本上就是使用 autoUpdater 封装的一些方法，开发过程中更多的注意力则是放在了渲染进程的交互上。

此外，我们的更新交互用的是一种 用户感知 的方式，即更不更新是由用户自己决定的。而 静默更新 则是用户无感知，在监测到更新后不用去通知用户，而是自行在后台下载，在某个时刻执行安装的逻辑，这种方式往往是一键安装，不会弹出让用户去选择安装路径的窗口。接下去要介绍的增量更新其实是这种 用户无感知 的形式，只不过我们更新的不是整个应用程序。

由于产品迭代比较频繁，我们的业务方经常收到更新提示，意味着他们要经常手动更新应用，以便使用到最新的功能特性。众所周知，Electron 给前端开发提供了一个比较容易上手的客户端开发解决方案，但在享受 跨平台 等特性的同时，还得忍受 臃肿的安装包 。

带宽、流量在当前不是什么大问题，下载和安装的速度也挺快，但这频繁的下载覆盖一模一样的资源文件还是挺糟心的，代码改动量小时，全量更新完全没有必要。我们希望的是，开发更新了什么代码，应用程序就替换掉这部分代码就好了，这很优雅。在 我们的场景 中，这部分代码指的是 —— main、preload、renderer，并不包括 dll、第三方SDK等资源。

网上有挺多种增量更新的 解决方案，例如：

本文我们采用较普遍的 替换asar 来实现。

优化 app.asar 体积

asar是 Electron提供的一种将多个文件合并成一个文件的类 tar 风格的归档格式，不仅可以缓解Windows下路径名过长的问题， 还能够略微加快一下 require的速度, 并且可以隐藏你的源代码。（并非完全隐藏，有方法可以找出来）

Electron 应用程序启动的时候，会读取 app.asar.unpacked 目录中的内容合并到 app.asar 的目录中进行加载。在此之前我们已经打包了一份 Demo 项目，安装到本地后，我们可以根据安装路径找到 app.asar 这个文件。

例如：D:\你的安装路径\electron-update-demo\resources

在这个 Demo 项目中，脚手架生成的模板将图标剥离出来，因此出现了一个 app.asar.unpacked 文件夹。我们不难发现，app.asar 这个文件竟然有 66 MB，再回过头看我们真正的代码文件，甚至才 1 MB ！那么到底是什么原因导致的这个文件这么大呢，刚才提到了，asar 其实是一种压缩格式，因此我们只要解压看看就知道了。

npm i -g asar // 全局安装



asar e app.asar folder // 解压到folder文件夹

解压后我们不难发现，out 文件夹里的才是我们打包出来的资源，罪魁祸首竟然是 node_modules，足足有 62.3 MB。

查阅资料得知，Electron 在打包的时候，会把 dependencies 字段里的依赖也一起打包进去。而我们的渲染进程是用 React开发的，这些第三方依赖早就通过 Vite 等打包工具打到资源文件里了，根本不需要再打包一次，不然我们重新下载的 app.asar 文件还是很大的，因此需要尽可能减少体积。

优化应用程序体积 == 减少 node_modules 文件夹的大小 == 减少需要打包的依赖数量 == 减少 dependencies 中的依赖。

1. 移除 dependencies

最开始我想的是把 package.json 中的 dependencies 全都移到 devDependencies，打包后的体积果然减小了，但是在测试过程中会发现某些功能依赖包会缺失，比如 @electron/remote。因此在修改这部分代码的时候，需要特别留意，哪些依赖是需要保留下来的。

由于不想影响 package.json 的版本结构，我只是在写了一个脚本，在 npm i 之后，执行打包命令前修改 devDependencies 就好了。

2. 双 package.json 结构

这是 electron-builder 官网上看到的一种技巧，传送门， 创建 app 文件夹，再创建第二个 package.json，在该文件中配置我们应用的名称、版本、主进程入口文件等信息。这样一来，electron-builder 在打包时会以该文件夹作为打包的根文件夹，即只会打包这个文件夹下的文件。

但是我原项目的主进程和预加载脚本也放在这，尝试修改后出现打包错误的情况，感兴趣的可以试试。

这是我们优化之后的结果，1.32 MB，后面只需要替换这个文件就实现了版本的更新。

校验增量更新

全量更新的校验逻辑是第三方库已经封装好了的，那么对于增量更新，就得由我们自己来实现了。

首先明确一下 校验的时机，package.json 的 version 字段表示应用程序的版本，用于全量更新的判断，那也就意味着，当这个字段保持不变的时候，会触发上文提到的 update-not-available 事件。所以我们可以在这个事件的回调函数里来进行校验。

autoUpdater.on('update-not-available', info => { console.log('不需要全量更新', info.version) })

然后就是 如何校验，我们回过头来看 electron-builder 的打包配置，在 releaseInfo 字段里描述了发行版本的一些信息，目前我们用到了 releaseNotes 来存储更新日志，查阅官网得知还有个 releaseName 好像对于我们而言是没什么用的，那么我们就可以把它作为增量更新的 热版本号。（但其实 官网 配置项还有个 vendor 字段，可是我在用的时候打包会报错，可能是版本的问题，感兴趣的可以试试。）

每次发布新版本的时候，只要不是 Electron自身版本变化 等重大更新，我们都可以通过修改 releaseInfo 的 releaseName 来发布我们的热版本号。现在我们已经有了线上的版本，那 本地热版本号 该如何获取呢。这里我们在每次热更新完成之后，就会把最新的版本号存储在本地的一个配置文件中，通常是 userData 文件夹，用于存储我们应用程序的用户信息，即使程序卸载 了也不会影响里面的资源。在 Windows 下，路径如下：
C:\Users\用户名\AppData\Roaming\electron-update-demo。

因此，整个 校验流程 就是，在打开程序的时候，autoUpdater 触发 update-not-available 事件，拿到线上 latest.yml 描述的 releaseName 作为热版本号，与本地配置文件（我们命名为 config.json）里存储的热版本号（我们命名为 hotVersion）进行对比，若不同就去下载最新的 app.asar 文件。

我们使用 electron-log 来记录日志，代码如下所示。

// 本地配置文件

const localConfigFile = path.join(app.getPath('userData'), 'config.json')



const checkHotVersion = (latestHotVersion: string): boolean => {

  let needDownload = false

  if (!fs.existsSync(localConfigFile)) {

    fs.writeFileSync(localConfigFile, '{}', 'utf8')

    log.info('配置文件不存在，已自动创建')

  } else {

    log.info('监测到配置文件')

  }



  try {

    const configStr = fs.readFileSync(localConfigFile, 'utf8')

    const configData = JSON.parse(configStr || '{}')

    // 对比版本号

    if (latestHotVersion !== configData.hotVersion) {

      log.info('当前版本不是最新热更版本')

      needDownload = true

    } else {

      log.info('当前为最新版本')

    }

  } catch (error) {

    log.error('读取配置文件时出错', error)

  }



  return needDownload

}

下载增量更新包

通过刚才的校验，我们已经知道了什么时候该去下载增量更新包。

在开发调试的时候，我们可以把新版本的 app.asar 也放到起了本地服务器的 mockServer 文件夹里来模拟真实的情况。有很多方式可以去下载文件，这里我用了 nodejs 的 http 模块去实现，如果是 https 的需要引用 https 模块。

下载到本地的时候，我是放在了与 app.asar 同级目录的 resources 文件夹，我们不能直接覆盖原文件。一是因为进程权限占用的问题，二是为了容错，所以我们需要以另一个名字来命名下载后的文件（这里我们用的是 app.asar-temp），也就不需要去备份原文件了，代码如下。

const resourcePath = isDev

    ? path.join('D:\\测试\\electron-update-demo\\resources')

    : process.resourcesPath



const localAsarTemp = path.join(resourcePath, 'app.asar-temp')



const asarUrl = 'http://localhost:3000/app.asar'



downloadAsar() {

  const fileStream = fs.createWriteStream(localAsarTemp)

  http.get(asarUrl, res => {

    res.pipe(fileStream)

    fileStream

      .on('finish', () => {

        log.info('asar下载完成')

      })

      .on('error', error => {

        // 删除文件

        fs.unlink(localAsarTemp, () => {

          log.error('下载出现异常，已中断', error)

        })

      })

  })

}

因此，我们的流程更新为：发现新版本后，下载最新的 app.asar 到 resources 目录，并重命名为 app.asar-temp。这个时候我们启动项目进行调试，找到记录在本地的日志—— C:\Users\用户名\AppData\Roaming\electron-update-demo\logs，会有以下的记录：

[2024-09-20 13:49:22.456] [info]  监测到配置文件

[2024-09-20 13:49:22.462] [info]  当前版本不是最新热更版本

[2024-09-20 13:49:23.206] [info]  asar下载完成

在看看项目 resources 文件夹，多了一个 app.asar-temp文件。

至此，下载这一步已经完成了，但这样还会有一个问题，因为文件名没有加上版本号，也没有重复性校验，倘若一直没有更新，那么每次启动应用需要增量更新的时候都需要再次下载。

替换 app.asar 文件

好了，新文件也有了，接下来就是直接替换掉老文件就可以了，但是 替换的时机 很重要。

在 Windows 操作系统下，直接替换 app.asar 会提示程序被占用而导致失败，所以我们应该在程序关闭的时候实现替换。

我们有上面两种方案，最终采用了 方案2。

在主进程监听 app.on('quit') 事件，在应用退出的时候，判断 app.asar 和 app.asar-temp 是否同时存在，若同时存在，就去替换。这里替换不能直接用 nodejs 在主进程里去写，因为主进程执行的时候，资源还是被占用的。因此我们需要额外起一个 子进程 去做。

nodejs 可以通过 spawn、exec 等方法创建一个子进程。子进程可以执行一些自定义的命令，我们并没有使用子进程去执行 nodejs，因为业务方的机器上不一定有这个环境，而是采用了启动 exe 可执行文件的方式。可能有人问为什么不直接运行 .bat 批处理文件，因为我调试关闭应用的时候，会有一个 命令框闪烁 的现象，这不太优雅，尽管已经设置 spawn 的 windowsHide: true。

那么如何获得这个 exe 可执行文件呢，其实是通过 bat 文件去编译的，命令如下：

@echo off

timeout /T 1 /NOBREAK

del /f /q /a %1\app.asar

ren %1\app.asar-temp app.asar

我们加了延时，等待父进程完全关闭后，再去执行后续命令。其中 %1 为运行脚本传入的参数，在我们的场景里就是 resources 文件夹的地址，因为每个人的安装地址应该是不一样的，所以需要作为参数传进去。

转换文件的工具一开始用的是 Bat To Exe Converter 下载地址，但是在实际使用的过程中，我的电脑竟然把转换后的 exe 文件 识别为病毒，但在其他同事电脑上没有这种表现，这肯定就不行了，最后还是同事使用 python 帮我转换生成了一份可用的文件（replace.exe）。

这里我们可以选择不同的方式把 replace.exe 存放到 用户目录 上，要么是从线上服务器下载，要么是安装的时候就已经存放在本地了。我们选择了后者，这需要修改 electron-builder 打包配置，指定 asarUnpack, 这样就会存放在 app.asar.unpacked 文件夹中，不经常修改的文件都可以放在这里，不会随着增量更新而替换掉。

有了这个替换脚本之后，开始编写子进程相关的代码。

import { spawn } from 'child_process'



cosnt localExePath = path.join(resourcePath, 'app.asar.unpacked/resources/replace.exe')



replaceAsar() {

  if (fs.existsSync(localAsar) && fs.existsSync(localAsarTemp)) {

    const command = `${localExePath} ${resourcePath}`

    log.info(command)

    const logPath = app.getPath('logs')

    const childOut = fs.openSync(path.join(logPath, './out.log'), 'a')

    const childErr = fs.openSync(path.join(logPath, './err.log'), 'a')

    const child = spawn(`"${localExePath}"`, [`"${resourcePath}"`], {

      detached: true, // 允许子进程独立

      shell: true,

      stdio: ['ignore', childOut, childErr]

    })

    child.on('spawn', () => log.info('子进程触发'))

    child.on('error', err => log.error('child error', err))

    child.on('close', code => log.error('child close', code))

    child.on('exit', code => log.error('child exit', code))

    child.stdout?.on('data', data => log.info('stdout', data))

    child.stderr?.on('data', data => log.info('stderr', data))

    child.unref()

  }

}



app.on('quit', () => {

  replaceAsar()

})

在这块代码中，创建子进程的配置项比较重要，尤其是路径相关的。因为用户安装路径是不同的，可能会存在 文件夹名含有空格 的情况，比如 Program Files，这会导致在执行的时候将空格识别为分隔符，导致命令执行失败，因此需要加上 双引号。此外，detached: true 可以让子进程独立出来，也就是父进程退出后可以执行，而shell: true 可以将路径名作为参数传过去。

const child = spawn(`"${localExePath}"`, [`"${resourcePath}"`], {

  detached: true,

  shell: true,

  stdio: ['ignore', childOut, childErr]

})

但这块有个 疑惑，为什么我的 close、exit 以及 stdout 都没有触发，以至于不能拿到命令是否执行成功的最终结果，了解的同学可以评论区交流一下。

至此，在关闭应用之后，app.asar 就已经被替换为最新版本了，还差最后一步，更新本地配置文件里的 hotVersion，防止下次又去下载更新包了。

child.on('spawn', () => {

  log.info('子进程触发')

  updateHotVersion()

})



updateHotVersion() {

  fs.writeFileSync(localConfigFile, JSON.stringify({ hotVersion }, null, 2))

}

增量更新日志提示

既然之前提到的全量更新有日志说明，那增量更新可以不用，也应该需要具备这个能力，不然我们神不知鬼不觉帮用户更新了，用户都不知道 新在哪里。

至于更新内容，我们可以复用 releaseInfo 的 releaseNotes 字段，把更新日志写在这里，增量更新完成后展现给用户就好了。

但是总不能每次打开都展示，这里需要用户有个交互，比如点击 知道了 按钮，或者关闭 Modal 后，把当前的热更新版本号保存在本地配置文件，记录为 logVersion。在下次打开程序或者校验更新的时候，我们判断一下 logVersion === hotVersion，若不同，再去提示更新日志。

日志版本 校验和修改的代码如下所示：

checkLogVersion() {

  let needShowLog = false

  try {

    const configStr = fs.readFileSync(localConfigFile, 'utf8')

    const configData = JSON.parse(configStr || '{}')

    const { hotVersion, logVersion } = configData

    if (hotVersion !== logVersion) {

      log.info('日志版本与当前热更新版本不同，需要提示更新日志')

      needShowLog = true

    } else {

      log.info('日志已是最新版本，无需提示更新日志')

    }

  } catch (error) {

    log.error('读取配置文件失败', error)

  }

  return needShowLog

}



updateLogVersion() {

  try {

    const configStr = fs.readFileSync(localConfigFile, 'utf8')

    const configData = JSON.parse(configStr || '{}')

    const { hotVersion } = configData

    fs.writeFileSync(localConfigFile, JSON.stringify({ hotVersion, logVersion: hotVersion }, null, 2))

    log.info('日志版本已更新')

  } catch (error) {

    log.error('读取配置文件失败', error)

  }

}

读取 config.json 文件的方法自行封装一下，我这里就重复使用了。主进程 ipcMain.on 监听一下用户传递过来的事件，再去调用 updateLogVersion 即可，渲染进程效果如下：

提示增量更新日志

点击 知道了 后，再次打开应用后就不会提示日志了，因为本地配置文件已经被修改了。

当然可能也有这么个场景，开发就改了一点点无关功能的代码，无需向用户展示日志，我们只需要加一个判断 releaseNotes 是否为空的逻辑就好了，也做到了 静默更新。

小结

不足之处

本文提出的增量更新方案应该算是比较简单的，可能并不适用于所有的场景，考虑也不够全面，例如：

流程图

针对本文的解决方案，我简单画了一个 流程图。

参考文章

网上其实有不少关于 Electron 自动更新的文章，在做这个需求之前也是浏览了好多，但也有些没仔细看完，所以就躺在我的标签页没有关闭，在这罗列出来，也当作收藏了。

写这篇文章的目的也是为了记录和复盘，如果能为你提供一些思路那就再好不过了。

鸣谢：

在这个技术日新月异的时代，编程语言的更新换代似乎已经成为了家常便饭。但国产语言却一直不温不火，对于程序员来说，拥有一款属于我们自己的语言，一直是大家梦寐以求的事情。

如果我说有一种国产编程语言，它的运行速度比Rust快9倍，比GO快35倍，你会相信吗？

这不是天方夜谭，最近，被称为“国产编程语引领者”的MoonBit（月兔），宣布正式进入Beta预览版本阶段啦！

一听月兔这名字起得挺中式的。

一、初识MoonBit

MoonBit是由粤港澳大湾区数字经济研究院（福田）研发的全新编程语言。

① 官网

http://www.moonbitlang.cn/

② 目前状态

MoonBit是2022年推出的国产编程语言，并在2023年8月18日海外发布后，立即获得国际技术社区的广泛关注。

经过一年多的高速迭代，MoonBit推出了beta预览版。

MoonBit 目前处于 Beta-Preview 阶段。官方希望能在 2024/11/22 达到 Beta 阶段，2025年内达到 1.0 阶段。

③ 由来

诞生于AI浪潮，没有历史包袱：MoonBit 诞生于 ChatGPT 出世之后，使得 MoonBit 团队有更好的机会去重新构想整个程序语言工具链该如何与 AI 友好的协作，不用承担太多的历史包袱

二、MoonBit 语言优势

① 编译与运行速度快

MoonBit在编译速度和运行时性能上表现出色，其编译626个包仅需1.06秒，比Rust快了近9倍；运行速度比GO快35倍！

② 代码体积小

MoonBit 在输出 Wasm 代码体积上相较于传统语言有显著优势。

一个简单的HTTP 服务器时，MoonBit 的输出文件大小仅为 27KB，而 WasmCloud提供的http-hello-world 模板中 Rust 的输出为 100KB，TypeScript 为 8.7MB，Python 更是高达 17MB。

③ 多重安全保障

MoonBit 采用了强大的类型系统，并内置静态检测工具，在编译期检查类型错误，

MoonBit自身的静态控制流分析能在编译器捕获异常的类型，从而提高代码的正确性和可靠性。

④ 高效迭代器

MoonBit创新地使用了零开销的迭代器设计，使得用户能够写出既优雅又高效的代码。

⑤ 创新的泛型系统设计

MoonBit语言在它的测试版里就已经搞定了泛型和特殊的多态性，而且在编译速度特别快的同时，还能做到用泛型时不增加额外负担。

你要知道，这种本事在很多流行的编程语言里，都是正式发布很久之后才慢慢有的，但MoonBit一开始就做到了。这种设计在现在编程语言越来越复杂的大背景下特别关键，因为一个好的类型系统对于整个编程语言生态的健康成长是特别重要的。

三、应用场景

① 云计算

② 边缘计算

③ AI 以及教学领域的发展

四、开发样例

我们在官网 http://www.moonbitlang.cn/gallery/ 可以看到用使用MoonBit 开发的游戏样例

• 罗斯方块游戏


• 马里奥游戏


• 数独求解器


• 贪吃蛇游戏

五、语言学习

5.1 语法文档

如果你也对MoonBit感兴趣，想学习它，访问官方文档docs.moonbitlang.cn/。文档算是比较详细的了

5.2 在线编译器

无需本地安装编译器即可使用，官方提供了在线编译器

① 在线编辑器地址

try.moonbitlang.cn/

② 点击这儿运行代码

5.3 VS Code 中安装插件编写代码、

① 安装插件

② 下载程序

按下shift+cmd+p快捷键（mac快捷键，windows和linux快捷键是ctrl+shift+p），输入 MoonBit:install latest moonbit toolchain，随后会出现提示框，点击“yes”，等待程序下载完成。

③ 创建并打开新项目

下载完成后，点击terminal，输入moon new hello && code hello以创建并打开新项目。

④ 始执行代码

项目启动后，再次打开terminal，输入moon run main命令，即可开始执行代码。

六、小结

下面是晓凡的一些个人看法

MoonBit 作为一款新兴的国产编程语言，其在性能和安全性方面的表现令人印象深刻。

特别是它在编译速度和运行效率上的优化，对于需要处理大量数据和高并发请求的现代应用来说，是一个很大的优势。

同时，它的设计理念符合当前软件开发的趋势，比如对云计算和边缘计算的支持，以及对 AI 应用的适配。

此外，MoonBit 团队在语言设计上的前瞻性思考，比如泛型系统的实现，显示出了其对未来编程语言发展趋势的深刻理解。

而且，提供的游戏开发样例不仅展示了 MoonBit 的实用性，也降低了初学者的学习门槛。

大家好，我是晓凡。

写在前面

不知道大家有没有做财务的朋友，我就有这么一位朋友就经常跟我抱怨。一到月底简直就是噩梦，总有加不完的班，熬不完的夜，做不完的报表。

一听到这儿，这不就一活生生的一个“大表哥”么，这加班跟我们程序员有得一拼了，忍不住邪恶一笑，心里平衡了很多。

身为牛马，大家都不容易啊。我不羡慕你数钱数到手抽筋，你也别羡慕我整天写CRUD 写到手起老茧🤣

吐槽归吐槽，饭还得吃，工作还得继续干。于是乎，真好赶上周末，花了一天的时间，帮朋友写了个小工具

一、功能需求

跟朋友吹了半天牛，终于把需求确定下来了。就一个很简单的功能，通过名字，将表一和表二中相同名字的金额合计。

具体数据整合如下图所示

虽然一个非常简单的功能，但如果不借助工具，数据太多，人工来核对，整合数据，还是需要非常消耗时间和体力的。

怪不得，这朋友到月底就消失了，原来时间都耗在这上面了。

二、技术选型

由于需求比较简单，只有excel导入导出，数据整合功能。不涉及数据库相关操作。

综合考虑之后选择了

• PowerBuilder


• Pbidea.dll

使用PowerBuilder开发桌面应用，虽然界面丑一点，但是开发效率挺高，简单拖拖拽拽就能完成界面（对于前端技术不熟的小伙伴很友好）

其次，由于不需要数据库，放弃web开发应用，又省去了云服务器费用。最终只需要打包成exe文件即可跑起来

Pbidea.dll 算是Powerbuilder最强辅助开发，没有之一。算是PBer们的福音吧

三、简单界面布局

四、核心代码

① 导入excel

​

string ls_pathName,ls_FileName //路径+文件名，文件名

long ll_Net

long rows

dw_1.reset()

uo_datawindowex dw

dw = create uo_datawindowex

dw_1.setredraw(false)

ll_Net = GetFileSaveName("请选择文件",ls_pathName,ls_FileName,"xlsx","Excel文(*.xlsx),*.xlsx")

​

rows = dw.ImportExcelSheet(dw_1,ls_pathName,1,0,0)

destroy dw

dw_1.setredraw(true)

MessageBox("提示信息","导入成功 " + string(rows) + "行数据")

​

② 数据整合

long ll_row,ll_sum1,ll_sum2

long ll_i,ll_j

long ll_yes

​

string ls_err

​

//重置表三数据

​

dw_3.reset()

​

//处理表一数据

ll_sum1 = dw_1.rowcount( )

​

if ll_sum1<=0 then

    ls_err = "表1 未导入数据，请先导入数据"

    goto err

end if

​

for ll_i=1 to ll_sum1

    ll_row = dw_3.insertrow(0)

    dw_3.object.num[ll_row] =ll_row                                                          //序号

    dw_3.object.name[ll_row]=dw_1.object.name[ll_i]                                 //姓名

    dw_3.object.salary[ll_row]=dw_1.object.salary[ll_i]                                //工资

    dw_3.object.endowment[ll_row]=dw_1.object.endowment[ll_i]               //养老

    dw_3.object.medical[ll_row]=dw_1.object.medical[ll_i]                          //医疗

    dw_3.object.injury[ll_row]=dw_1.object.injury[ll_i]                                        //工伤

    dw_3.object.unemployment[ll_row]=dw_1.object.unemployment[ll_i]      //失业

    dw_3.object.publicacc[ll_row]=dw_1.object.publicacc[ll_i]                      //公积金

    dw_3.object.annuity[ll_row]=dw_1.object.annuity[ll_i]                           //年金

    

next

​

//处理表二数据

​

ll_sum2 = dw_2.rowcount( )

​

if ll_sum2<=0 then

    ls_err = "表2未导入数据，请先导入数据"

    goto err

end if

​

for ll_j =1 to ll_sum2

    string ls_name 

    ls_name = dw_2.object.name[ll_j]

    

    ll_yes = dw_3.Find("name = '"+ ls_name +"'  ",1,dw_3.rowcount())

    

    if ll_yes<0 then

        ls_err = "查找失败!"+SQLCA.SQLErrText

        goto err

    end if

            

    if ll_yes = 0 then  //没有找到

            ll_row = dw_3.InsertRow (0)

            dw_3.ScrollToRow(ll_row)

            dw_3.object.num[ll_row]                   = ll_row                                                          //序号

            dw_3.object.name[ll_row]                 = dw_1.object.name[ll_j]                                 //姓名

            dw_3.object.salary[ll_row]                 = dw_1.object.salary[ll_j]                                //工资

            dw_3.object.endowment[ll_row]         = dw_1.object.endowment[ll_j]               //养老

            dw_3.object.medical[ll_row]              = dw_1.object.medical[ll_j]                          //医疗

            dw_3.object.injury[ll_row]                 = dw_1.object.injury[ll_j]                                        //工伤

            dw_3.object.unemployment[ll_row]    = dw_1.object.unemployment[ll_j]      //失业

            dw_3.object.publicacc[ll_row]            = dw_1.object.publicacc[ll_j]                      //公积金

            dw_3.object.annuity[ll_row]               = dw_1.object.annuity[ll_j]                           //年金

    end if

    

    if ll_yes >0 then  //找到        

            dec{2} ld_salary,ld_endowment,ld_medical,ld_injury,ld_unemployment,ld_publicacc,ld_annuity

            ld_salary = dw_3.object.salary[ll_yes] + dw_2.object.salary[ll_j]

            ld_endowment =  dw_3.object.endowment[ll_yes] + dw_2.object.endowment[ll_j]

            ld_medical = dw_3.object.medical[ll_yes] + dw_2.object.medical[ll_j]

            ld_injury = dw_3.object.injury[ll_yes] + dw_2.object.injury[ll_j]

            ld_unemployment = dw_3.object.unemployment[ll_yes] + dw_2.object.unemployment[ll_j]

            ld_publicacc = dw_3.object.publicacc[ll_yes] + dw_2.object.publicacc[ll_j]

            ld_annuity = dw_3.object.annuity[ll_yes] + dw_2.object.annuity[ll_j]

            

            dw_3.object.salary[ll_yes]=  ld_salary                             //工资

            dw_3.object.endowment[ll_yes]=ld_endowment               //养老

            dw_3.object.medical[ll_yes]=ld_medical                          //医疗

            dw_3.object.injury[ll_yes]=ld_injury                                     //工伤

            dw_3.object.unemployment[ll_yes]=ld_unemployment   //失业

            dw_3.object.publicacc[ll_yes]=ld_publicacc                    //公积金

            dw_3.object.annuity[ll_yes]=ld_publicacc                      //年金

        

    end if

    

next

​

return 0

​

err:

messagebox('错误信息',ls_err)

③ excel导出

string ls_err

string ls_pathName,ls_FileName //路径+文件名，文件名

long ll_Net

​

if dw_3.rowcount() = 0 then 

    ls_err = "整合数据为空，不能导出"

    goto err

end if

​

uo_wait_box luo_waitbox

luo_waitbox = create uo_wait_box

luo_waitBox.OpenWait(64,RGB(220,220,220),RGB(20,20,20),TRUE,"正在导出 ", 8,rand(6) - 1)

​

long rows

CreateDirectory("tmp")

uo_datawindowex dw

dw = create uo_datawindowex

​

ll_Net = GetFileSaveName("选择路径",ls_pathName,ls_FileName,"xlsx","Excel文(*.xlsx),*.xlsx")

​

rows = dw.ExportExcelSheet(dw_3,ls_pathName,true,true)

destroy dw

destroy luo_waitbox

MessageBox("提示信息","成功导出 " + string(rows) + " 行数据")

​

return 0

​

err:

messagebox('错误信息',ls_err)

五、最终效果

这次分享就到这吧，★,°:.☆(￣▽￣)/$: .°★ 。希望对您有所帮助，也希望多来几个这样的朋友，不多说了， 蹭饭去了

我们下期再见ヾ(•ω•`)o (●'◡'●)

top

在 Linux 服务器上，或类 Unix 的机器上，一般我们想查看每个进程的 CPU 使用率、内存使用情况以及其他相关信息时会使用 top 命令。

top 是一个标准的 Linux/Unix 工具，实际上我从一开始接触 Linux 就一直使用 top , 一般是两种场景：

• Linux 服务器上用


• 自己的 Mac 电脑上用

top 有一些常用的功能，比如可以动态的显示进程的情况，按照 CPU 、内存使用率排序等。说实话，这么多年了，使用最多的还就是 top ，一来是因为习惯了，工具用惯了很多操作都是肌肉记忆。二来是 top 一般系统自带不用安装，省事儿。

htop

top 挺好的，但 top 对于初学者和小白用户不太友好，尤其是它的用户界面和操作。于是后来有了 htop

htop 是 top 的一个增强替代品，提供了更加友好的用户界面和更多的功能。与 top 相比，htop 默认以颜色区分不同的信息，并且支持水平滚动查看更多的进程信息。htop 还允许用户使用方向键来选择进程，并可以直接发送信号给进程（如 SIGKILL）。htop 支持多种视图和配置选项，使得用户可以根据自己的喜好定制显示的内容。

htop 我也用了几年，确实舒服一些，但由于需要安装和我对 top 的肌肉记忆 ，htop 在我的使用中并未完全替代 top。 直到 btop 的出现

btop

现在，我本机使用的是 btop，有了 btop，top 和 htop 一点儿都不想用了，哈哈。

在服务器上有时候因为懒不想安装，一部分时间还是 top，一部分用 btop。

第一印象是真漂亮啊，然而它不止好看，功能也是很实用，操作还很简单，你说能不喜欢它吗？

说是 btop ，实际上人家真正的名字是 btop++ , 用 C++ 开发的

安装

btop 支持各种类 Unix 系统，你可以在它的文档中找到对应系统的安装方法 github.com/aristocrato…

本文演示，我是用我自己的 Mac 笔记本电脑，用 Mac 安装很简单，用 brew 一行搞定

brew install btop

我的系统情况是这样的：

安装完成后，直接运行 btop 就可以看到如上图的界面了。

功能界面

打开 btop 后不要被它的界面唬住了，其实非常的简单，我们来介绍一下。

打开 btop 后，其实显示的是它给你的 “预置” 界面。 默认有 4 个预置界面，你可以按 p 键进行切换。命令行界面上会分别显示：

• preset 0


• preset 1


• preset 2


• preset 3

你可能注意到了，这 4 个预置界面中有很多内容是重复的，没错，其实 btop 一共就 4 个模块，预置界面只是把不同的模块拼在一起显示罢了。这 4 个模块分别是：

• CPU 模块


• 存储 模块


• 网络 模块


• 进程 模块

这 4 个模块对应的快捷键分别就是 1，2，3，4 你按一下模块显示，再按一下模块隐藏。

所以如果你对预置界面的内容想立刻调整，就可以按快捷键来显示/隐藏 你想要的模块，当然预置界面也是可以通过配置文件调整的，这个我们后面说。

CPU 模块

CPU 模块可以显示 CPU 型号、各内核的使用率、温度，CPU 整体的负载，以及一个直观的图象，所有数据都是实时显示的。

存储 模块

存储模块包括两部分，一个是内存使用情况，一个是磁盘使用情况：

因为比较直观，具体内容我就不解释了。

网络模块

网络模块可以看下网络的整体负载和吞吐情况，主要包括上行和下行数据汇总，你可以通过按快捷键 b和n 来切换看不同的网卡。

进程模块

初始的进程模块可以看到：

• pid


• Program: 进程名称


• Command: 执行命令的路径


• Threads: 进程包含的线程数


• User: 启动进程的用户


• MemB: 进程所占用内存


• Cpu%: 进程所占用 CPU 百分比

你可以按快捷键 e 显示树状视图：

可以按快捷键 r 对进行排序，按一下是倒序，再按一下是正序。具体排序列可以按左右箭头，根据界面显示进行选择，比如我要按照内存使用排序，那么右上角就是这样的：

按 f 键输入你想过滤的内容然后回车，可以过滤一下界面显示的内容，比如我只想看 chrome 的进程情况：

还可以通过 上下箭头选中某一个进程按回车查看进程详情，再次按回车可以隐藏详情：

显示进程详情后可以对进程进行操作，比如 Kill 只需要按快捷键 k 就可以了，然后会弹出提示：

主题

怎么样，是不是很方便，操作简单，上手容易，还好看。关于 btop 的主要操作就这些了，剩下的可以参考 help 和 menu 中显示的内容自行操作和设置都很简单。

btop 的配置文件默认在这里：$HOME/.config/btop ，你可以直接修改配置文件中的详细参数，如我们前文提到的 “预置” 界面以及预置界面内容都可以在配置文件中设置 ：

此外 btop 还有很多好看的主题配色，但默认安装的情况下只带了一个 Default 的，如果你想切换用其他的主题，需要先下载这些主题，主题文件在这里：github.com/aristocrato…

下载好以后放到本地对应的文件夹中 ~/.config/btop/themes

然后你就可以要界面上进行主题的切换了，具体流程是先按快捷键 m ，然后选 OPTIONS

接着在 Color theme 中就能看到你当前拥有的 theme 数据，按方向键就可以切换主题配色了：

主题有很多，我这里给大家一个完整的预览：

我目前使用的就是 Default 我觉得最符合我的审美。

最后

用了 btop 后你就再也回不去了，一般情况下再也不会想用 htop 和 top 了，大家没有换的可以直接换了

插件系统被广泛应用在各个系统中，比如浏览器、各个前端库如vue、webpack、babel，它们都可以让用户自行添加插件。插件系统的好处是允许开发人员在保证内部核心逻辑不变的情况下，以安全、可扩展的方式添加功能。

本文参考了webpack的插件，不引入任何库，写一个简单的插件系统，帮助大家理解插件化思维。

下面我们先看看插件有哪些概念和设计插件的流程。

准备

三个概念

• 核心系统（Core）：有着系统的基本功能，这些功能不依赖于任何插件。


• 核心和插件之间的联系（Core <--> plugin）：即插件和核心系统之间的交互协议，比如插件注册方式、插件对核心系统提供的api的使用方式。


• 插件（plugin）：相互独立的模块，提供了单一的功能。

插件系统的设计和执行流程

那么对着上面三个概念，设计插件的流程：

• 首先要有一个核心系统。


• 然后确定核心系统的生命周期和暴露的 API。


• 最后设计插件的结构。
  
  
  
  • 插件的注册 -- 安装加载插件到核心系统中。
  
  
  • 插件的实现 -- 利用核心系统的生命周期钩子和暴露的 API。
  
  
  
  

最后代码执行的流程是：

• 注册插件 -- 绑定插件内的处理函数到生命周期


• 调用插件 -- 触发钩子，执行对应的处理函数

直接看代码或许更容易理解⬇️

代码实现

准备一个核心系统

一个简单的 JavaScript 计算器，可以做加、减操作。

class Calculator {

  constructor(options = {}) {

      const { initialValue = 0 } = options

      this.currentValue = initialValue;

  }

  getCurrentValue() {

      return this.currentValue;

  }

  setValue(value) {

      this.currentValue = value;

  }

  plus(addend) {

      this.setValue(this.currentValue + addend);

  }

  minus(subtrahend) {

      this.setValue(this.currentValue - subtrahend);

  }

}



// test

const calculator = new Calculator()

calculator.plus(10);

calculator.getCurrentValue() // 10

calculator.minus(5);

calculator.getCurrentValue() // 5

确定核心系统的生命周期

实现Hooks

核心系统想要对外提供生命周期钩子，就需要一个事件机制。不妨叫Hooks。（日常开发可以考虑使用webpack的核心库 Tapable ）

class Hooks {

    constructor() {

        this.listeners = {};

    }

    on(eventName, handler) {

        let listeners = this.listeners[eventName];

        if (!listeners) {

            this.listeners[eventName] = listeners = [];

        }

        listeners.push(handler);

    }

    off(eventName, handler) {

        const listeners = this.listeners[eventName];

        if (listeners) {

            this.listeners[eventName] = listeners.filter((l) => l !== handler);

        }

    }

    trigger(eventName, ...args) {

        const listeners = this.listeners[eventName];

        const results = [];

        if (listeners) {

            for (const listener of listeners) {

                const result = listener.call(null, ...args);

                results.push(result);

            }

        }

        return results;

    }

    destroy() {

        this.listeners = {};

    }

}

暴露生命周期（通过Hooks）

然后将hooks运用在核心系统中 -- JavaScript 计算器

每个钩子对应的事件：

• pressedPlus 做加法操作


• pressedMinus 做减法操作


• valueWillChanged 即将赋值currentValue，如果执行此钩子后返回值为false，则中断赋值。


• valueChanged 已经赋值currentValue

class Calculator {

  constructor(options = {}) {

      this.hooks = new Hooks();

      const { initialValue = 0 } = options

      this.currentValue = initialValue;

  }

  getCurrentValue() {

      return this.currentValue;

  }

  setValue(value) {

    const result = this.hooks.trigger('valueWillChanged', value);

    if (result.length !== 0 && result.some( _ => ! _ )) {

    } else {

      this.currentValue = value;

    }

    this.hooks.trigger('valueChanged', this.currentValue);

  }

  plus(addend) {

      this.hooks.trigger('pressedPlus', this.currentValue, addend);

      this.setValue(this.currentValue + addend);

  }

  minus(subtrahend) {

      this.hooks.trigger('pressedMinus', this.currentValue, subtrahend);

      this.setValue(this.currentValue - subtrahend);

  }

}

设计插件的结构

插件注册

class Calculator {

  constructor(options = {}) {

      this.hooks = new Hooks();

      const { initialValue = 0, plugins = [] } = options

      this.currentValue = initialValue;

      // 在options中取出plugins

      // 通过plugin执行apply来注册插件 -- apply执行后会绑定（插件内的）处理函数到生命周期

      plugins.forEach(plugin => plugin.apply(this.hooks));

  }

  ...

}

插件实现

插件一定要实现apply方法。在Calculator的constructor调用时，才能确保插件“apply执行后会绑定（插件内的）处理函数到生命周期”。

apply的入参是this.hooks，通过this.hooks来监听生命周期并添加处理器。

下面实现一个日志插件和限制最大值插件:

// 日志插件：用console.log模拟下日志

class LogPlugins {

  apply(hooks) {

    hooks.on('pressedPlus', 

        (currentVal, addend) => console.log(`${currentVal} + ${addend}`));

    hooks.on('pressedMinus',

        (currentVal, subtrahend) => console.log(`${currentVal} - ${subtrahend}`));

    hooks.on('valueChanged', 

        (currentVal) => console.log(`结果： ${currentVal}`));

  }

}



// 限制最大值的插件：当计算结果大于100时，禁止赋值

class LimitPlugins {

  apply(hooks) {

    hooks.on('valueWillChanged', (newVal) => {

      if (100 < newVal) {

        console.log('result is too large')

        return false;

      }

      return true

    });

  }

}

全部代码

class Hooks {

  constructor() {

    this.listener = {};

  }



  on(eventName, handler) {

    if (!this.listener[eventName]) {

      this.listener[eventName] = [];

    }

    this.listener[eventName].push(handler);

  }



  trigger(eventName, ...args) {

    const handlers = this.listener[eventName];

    const results = [];

    if (handlers) {

      for (const handler of handlers) {

        const result = handler(...args);

        results.push(result);

      }

    }

    return results;

  }



  off(eventName, handler) {

    const handlers = this.listener[eventName];

    if (handlers) {

      this.listener[eventName] = handlers.filter((cb) => cb !== handler);

    }

  }



  destroy() {

    this.listener = {};

  }

}



class Calculator {

  constructor(options = {}) {

    this.hooks = new Hooks();

    const { initialValue = 0, plugins = [] } = options;

    this.currentValue = initialValue;

    plugins.forEach((plugin) => plugin.apply(this.hooks));

  }

  getCurrentValue() {

    return this.currentValue;

  }

  setValue(value) {

    const result = this.hooks.trigger("valueWillChanged", value);

    if (result.length !== 0 && result.some((_) => !_)) {

    } else {

      this.currentValue = value;

    }

    this.hooks.trigger("valueChanged", this.currentValue);

  }

  plus(addend) {

    this.hooks.trigger("pressedPlus", this.currentValue, addend);

    this.setValue(this.currentValue + addend);

  }

  minus(subtrahend) {

    this.hooks.trigger("pressedMinus", this.currentValue, subtrahend);

    this.setValue(this.currentValue - subtrahend);

  }

}



class LogPlugins {

  apply(hooks) {

    hooks.on("pressedPlus", (currentVal, addend) =>

      console.log(`${currentVal} + ${addend}`)

    );

    hooks.on("pressedMinus", (currentVal, subtrahend) =>

      console.log(`${currentVal} - ${subtrahend}`)

    );

    hooks.on("valueChanged", (currentVal) =>

      console.log(`结果： ${currentVal}`)

    );

  }

}



class LimitPlugins {

  apply(hooks) {

    hooks.on("valueWillChanged", (newVal) => {

      if (100 < newVal) {

        console.log("result is too large");

        return false;

      }

      return true;

    });

  }

}



// run test

const calculator = new Calculator({

  plugins: [new LogPlugins(), new LimitPlugins()],

});

calculator.plus(10);

calculator.minus(5);

calculator.plus(1000);

脚本的执行结果如下，大家也可以自行验证一下

看完代码可以回顾一下“插件系统的设计和执行流程”哈。

更多实现

假如要给Calculator设计一个扩展运算方式的插件，支持求平方、乘法、除法等操作，这时候怎么写？

实际上目前核心系统Calculator是不支持的，因为它并没有支持的钩子。那这下只能改造Calculator。

可以自行尝试一下怎么改造。也可以直接看答案：github.com/coder-xuwen…

最后

插件化的好处

在上文代码实现的过程中，可以感受到插件让Calculator变得更具扩展性。

• 核心系统（Core）只包含系统运行的最小功能，大大降低了核心代码的包体积。


• 插件（plugin）则是互相独立的模块，提供单一的功能，提高了内聚性，降低了系统内部耦合度。


• 每个插件可以单独开发，也支持了团队的并行开发。


• 另外，每个插件的功能不一样，也给用户提供了选择功能的能力。

本文的局限性

另外，本文的代码实现很简单，仅供大家理解，大家还可以继续完善：

• 增加ts类型，比如给把所有钩子的类型用emun记录起来


• 支持动态加载插件


• 提供异常拦截机制 -- 处理注册插件插件的情况


• 暴露接口、处理钩子返回的结构时要注意代码安全

参考

Designing a JavaScript Plugin System | CSS-Tricks

当我们说插件系统的时候，我们在说什么 - 掘金

干货!撸一个webpack插件(内含tapable详解+webpack流程) - 掘金

精读《插件化思维》

【干货】React 组件插件化的简洁实现

哈喽，大家好 我是 xy👨🏻‍💻。今天给大家分享一个开源的前端最强拖拽组件 — pragmatic-drag-and-drop！

前言

在前端开发中，拖拽功能是一种常见的交互方式，它能够极大提升用户体验。

今天，我们要介绍的是一个开源的前端拖拽组件 — pragmatic-drag-and-drop，它以其轻量级、高性能和强大的兼容性，成为了前端开发者的新宠。

什么是 pragmatic-drag-and-drop？

pragmatic-drag-and-drop 是由 Atlassian 开源的一款前端拖拽组件。

Atlassian，作为全球知名的软件开发公司，其核心产品 Trello、Jira 和 Confluence 都采用了 pragmatic-drag-and-drop 组件。

这不仅证明了该组件的实用性和可靠性，也反映了 Atlassian 对前端交互体验的极致追求。

组件的作者：Alex Reardon，也是流行 React 开源拖拽组件 react-beautiful-dnd 的开发者。

pragmatic-drag-and-drop 继承了作者对拖拽交互的深刻理解，支持多种拖拽场景，包括列表、面板、表格、树、网格、绘图和调整大小等。

为什么选择 pragmatic-drag-and-drop？

• 轻量化：核心包大小仅为 4.7KB，轻量级的体积使得它在加载速度上具有优势。


• 灵活性：提供无头（headless）解决方案，开发者可以完全自定义视觉效果和辅助技术控制。


• 框架无关性：适用于所有主流前端框架，如 React、Svelte、Vue 和 Angular。


• 高性能：支持虚拟化，适应各种复杂的用户体验，确保拖拽操作流畅。


• 全平台覆盖：在所有主流浏览器和移动设备上运行良好，包括 Firefox、Safari、Chrome 以及 iOS 和 Android 设备。


• 无障碍支持：为非鼠标操作用户提供友好体验，确保所有用户都能享受拖拽体验。

应用场景

pragmatic-drag-and-drop 功能适用于多种场景，包括但不限于：

• 任务管理应用：通过拖放操作，轻松实现卡片式任务列表的排序与整理。


• 文档管理系统：简化文件夹和文件的移动与组织过程，提高工作效率。


• 在线编辑器：提供直观的内容布局调整体验，增强用户自定义能力。


• 数据可视化工具：允许用户动态调整图表元素位置，实现更丰富的信息展示。


• 设计工具：在组件库中轻松排列组合元素，激发创意无限可能。

案例演示

列表拖拽排序：

面板拖拽：

表格拖拽排序：

树形节点拖拽：

绘图功能鼠标拖动：

可拖动棋子的棋盘：

在线演示地址：https://atlassian.design/components/pragmatic-drag-and-drop/examples

最后

如果觉得本文对你有帮助，希望能够给我点赞支持一下哦 💪 也可以关注wx公众号：前端开发爱好者 回复加群，一起学习前端技能 公众号内包含很多实战精选资源教程，欢迎关注

原文：Hillel - 2024.09.10

代码是用结构化的机器语言编写的，而注释是用富有表现力的人类语言编写的。人类语言让注释比代码更具表达性和沟通能力。代码中也包含少量类似于人类语言的内容，例如标识符。所谓“注释要写为什么，而不是写做了什么”，意思是尽可能将信息嵌入到标识符中。并非所有“做了什么”都能这样嵌入，但很多都可以。

近年来，我看到越来越多的人主张，连“为什么”也不应该出现在注释中，它们可以通过LongFunctionNames（长函数名）或测试用例的名称体现出来。几乎所有“自解释”代码库都通过增加标识符来进行文档化。

那么，有哪些人类表达的内容是无法通过更多代码来呈现的呢？

反面信息，也就是引起注意系统中“没有的”东西。“为什么不”的问题。

一个近期的例子

这是一个来自《Logic for Programmers》的例子。由于技术上的复杂原因，epub 电子书构建过程中未能将数学符号（\forall）正确转换为符号（∀）。我写了一个脚本，手动遍历并将数学字符串中的标记替换为对应的 Unicode 等价符号。最简单的方法是对每个需要替换的 16 个数学符号依次调用string = string.replace(old, new)（一些数学字符串包含多个符号）。

这种方法效率非常低，我可以将所有 16 个替换在一次遍历中完成。但那将是一个更复杂的解决方案。因此，我选择了简单的方法，并加了一条注释：

对每个字符串进行了 16 次遍历。

整本书中只有 25 个数学字符串，大多数字符少于 5 个。

因此，速度仍然足够快。

你可以把这看作是“为什么我用了慢的代码”的解释，但也可以理解为“为什么不用快的代码”。它引起了对“没有的东西”的关注。

为什么要有注释

如果慢速代码没有造成任何问题，为什么还要写注释呢？

首先，这段代码可能以后会成为问题。如果将来的《Logic for Programmers》版本中有上百个数学字符串，而不是几十个，这个构建步骤将成为整个构建过程的瓶颈。现在留下标注，方便将来知道该修复什么。

即使这段代码永远不会有问题，注释仍然很重要：它表明我意识到了权衡。假设两年后我回到这个项目，打开epub_math_fixer.py，看到我这段糟糕的慢代码。我会问自己：“当时为什么写了这么糟糕的代码？” 是因为缺乏经验，时间紧迫，还是纯粹的随机失误？

这条反面注释告诉我，我知道这段代码很慢，考虑过替代方案，并决定不做优化。这样，我不必花大量时间重新调查，却得出同样的结论。

为什么这不能通过代码“自解释”（self-documented）

当我第一次尝试这个想法时，有人告诉我，我的反面注释没有必要，只需将函数命名为RunFewerTimesSlowerAndSimplerAlgorithmAfterConsideringTradeOffs。除了名字过长、未解释权衡点，并且如果我优化了代码，还得在所有地方修改函数名外……这实际上使代码更不能自解释。因为它没有告诉你函数实际做了什么。

核心问题在于，函数和变量的标识符只能包含一条信息。我无法在一个标识符中同时存储“函数做了什么”和“它作出了什么权衡”。

那么用测试代替注释呢？我猜你可以写一个测试，用grep查找书中的数学块，并在超过 80 个时失败？但这并没有直接测试EpubMathFixer。函数本身没有任何内容可以让你直接关联上。

这是“自解释”反面信息的根本问题。“自解释”是伴随代码书写的，它描述了代码在做什么。而反面信息是关于代码没有做什么的。

最后的思考

我在想，是否可以将“为什么不”注释视为反事实的一个例子。如果是这样，那么“人类沟通的抽象”是否一般都无法“自解释”？你能“自解释”一个比喻吗？不确定性呢？伦理主张呢？

赶在下架前去看了《逆行人生》。

这部电影讲述了高志垒——一个架构师，被裁员后，在找工作两个月颗粒无收的情况下，被逼无奈去跑外卖的故事。

个人感觉还是很值得一看的，是一部很好的现实题材电影，并没有网上说的资本迫害打工人还要打工人努力奋斗的感觉。

有年轻人说，难以共情。70万年薪的人最后要落到为了 15k 的月薪而奔波，他不理解为什么。然而就我亲身经历而言，无路可走的时候，我们的确会做这样的选择。

我们先来看看中年程序员有哪些选择。

中年程序员有哪些出路？

继续打工

打工，无疑是多数人的选择。毕竟上一天班赚一天的钱，这种稳稳的幸福还是大部分人的追求。但打工也不能停滞不前，还是要不断学习、拓展自己的能力，尤其是我们IT行业，技术更新迭代快。如果不学习，很可能 3 到 5 年就被淘汰了。

程序员要晋升、跳槽，主要学习方向以下两种：

• 拓展技术的深度与广度：高级开发、架构师、热门行业的开发如AI等；


• 向外拓展自己的能力：培训机构老师、高校老师；技术管理；

自己单干

继续打工，无疑都会碰到被裁员的风险，你个人的命运始终掌握在老板甚至顶头上司的手里。如果你不甘于此，就要开创性地走其他路了。这对个人的挑战都是极大的。

程序员可以凭借技术能力逐渐向外扩展：

• 独立开发：承接项目或者自研产品


• 创业：成立公司、团队，完成开发工作

彻底转行

也有部分人被彻底伤透了心，完全不再进入这个行业了，转向其他行业了。

• 网络兼职：写手、影视剪辑等；


• 中年三保、铁人三项：保安、保姆、保洁、快递、司机、外卖。这个是被大家调侃最多的；


• 其他行业的打工者：如制造业、外贸等行业；


• 开店或者创业：存上一笔钱开店或者做一间自己喜欢的公司，也是一些人的选择。

我们应该如何选择？

如上所见，程序员能做的选择还是比较多的。我们将这些工作列个表，列一下所需要的能力与所承担的责任，以及最后的风险，以便做选择：

可以看到，每个方向其实都是有风险的，并没有不存在无风险的职业与方向。那是不是我们就可以完全凭借个人喜好来决定呢？并非如此，这些选择对大部分人而言，还是有优劣之分的。

不推荐铁人三项、中年三宝

首先，我个人其实非常不建议程序员转行去做起他行业的，除非迫不得已，尤其是从事体力劳动。

因为这需要消耗大量的体力与时间。中年人无法靠比拼体力取胜，工作时间长，也无法取得工作生活平衡。在电影《逆行人生》中，高志垒虽然赢了第一个单王，但可以看出其靠的更多是运气，行业老大哥或退出竞赛、或家里有事提早离开。

另外就是，AI 技术发展和市场供需变化。不久前武汉的萝卜快跑落地，相信大部分滴滴司机都感受到了被淘汰的可能。而且这类工作市场基本上已经饱和，所以薪酬只会越来越低。

其他的网络兼职、去制造业服务业打工，这些都是门槛低，程序员即使有技术与能力，也不见得有任何优势的，所以也是不推荐的。

而开店或按自己的兴趣来创业，则非常看你个人能力了，同样需要更谨慎的考虑，当然你如果家财万贯，倒是可以任性一把。

更推荐提早规划、提早行动

剩下的职业方向其实都是推荐的，因为多多少少跟我们自身学习的技术是相关的。将我们的能力逐步往外扩，逐渐走出舒适圈，是更合适的一个发展路径。但是需要注意的是，建议尽早立下目标，提前规划，尽快行动的。

如，希望做老师，可以提早在企业内部做讲师、技术讲师，给新人讲解。锻炼好自己的沟通表达能力，多想想如何让新人更好地融入企业、进入工作状态。

又如，你想自己创业，那可以开始就留意你手头上做的产品是如何开发、运营的。公司如何分配人力物力去做的，如何做商业变现的，如何寻找客户的等等这些问题。不仅要站在技术角度、也要站在公司的角度多思考、多学习、多实践。甚至在时机成熟的时候，提出转岗去做产品、技术管理，更早地锻炼自己所需的创业的能力，能让自己日后的路走的更顺。

高志垒为何还是选择送外卖？

回到电影，既然都不建议程序员从事体力劳动，高志垒好好的一个架构师，也是有脑子的，为啥最后还是选择了外卖员呢？

首先，从影片一开始可以看出，高志垒选择了架构师或者技术管理偏技术方向，因其手头上还有一线开发的任务。显然对于 45 岁的他，在打工这条路上几乎已经到顶了。

然而，他并没有做好职业规划，甚至从未考虑过失业的风险。在突然失业时，才发现市场上几乎找不到自己的职位、薪酬，最后简历也是乱投一气了；而中产返贫三件套：高额房贷、全职太太、国际学校，他几乎全都拥有；并且还大笔地投资了 P2P ，因其爆雷导致家庭财产大量损失；再加上其父亲突发重病，住院急需要钱。

所有的状况同时出现，所有的压力压在身上，在两个月投递简历无果时，他听说送外卖能补上房贷月供差额的数目，宛如找到救命稻草一般，毅然加入了外卖行业。

如何避免陷入被动状况？

如何避免我们也陷入高志垒的状况？

除了像上面说的提早积攒自己的能力，提早做规划、更早地行动外，程序员也应提升技能多样性，特别是专业外的技能；同时在职业中后期应寻找到更利于个人发展的公司或项目；还需要拓展人脉，保持与行业内的沟通交流；在最后，保持健康的生活习惯和平衡好工作，让自己的职业寿命尽可能地延长。

而在财务上，做好失业准备、甚至为后续独立开发、创业等积攒资金都是必要的，所以需要采取一些措施，做好家庭财务的规划，如：

总结与思考

在戏里的高志垒无疑是幸运的，家庭和睦，家人都给予最大的支持，愿意一起度过难关。再加上自己开发的小程序“路路通”，同事间互助互利，最后，成功拿到了单王，并帮家里度过经济危机。

然而最后的结局，高志垒并没有“逆袭”人生，而是在“逆行”人生中，调整了自己。最后他卖掉了大房子，搬到了小房子住，老婆依然在工作，孩子也放弃了就读国际学校、老人靠自身意志力完成了康复。

这也是我觉得这部电影还算现实主义之处。并没有理想中的事情发生，就像现实生活中那些受挫的人们一样，最后选择降低生活标准，继续前行。

最后的最后，问一下大家，如果你面临电影结尾彩蛋中的情景，有一个外卖公司的高层老板对你开发的“路路通”小程序感兴趣，你会如何选择？

• 卖掉小程序，拿钱走人


• 加入外卖公司，继续开发


• 不卖，开源

欢迎留下你的答案与思考，一起讨论。

@[toc]
小伙伴们知道，松哥平时录了蛮多视频课程，视频录完以后，就想整理一个视频文档出来，在整理视频文档的时候，就会遇到一个问题，就是怎么统计视频时长？

特别是有时候为了方便大家看到每一集视频的时长，我要把视频目录整理成下面这个样子：

这个逐集去查看就很麻烦，一套视频动辄几百集，挨个统计不现实，也不符合咱们程序员做事风格。

那么怎么办呢？

一开始我是使用 Python 去解决的，Python 做这样一个小工具其实特别方便，简简单单 30 行代码左右就能搞定了。之前的课程的这些时间统计我基本上都是用 Python 去完成的。

不过最近松哥发现 Java 里边其实也有一个视频处理的库，做这个事情也是非常方便，而且使用 Java 属于主场作战，就能够更加灵活的扩展功能了。

一 jave-all-deps

在 Java 开发中，处理音视频文件经常需要复杂的编解码操作，开发者通常需要依赖于外部库来实现这些功能，其中最著名的是 FFmpeg。然而，直接在 Java 中使用 FFmpeg 并不是一件容易的事，因为它需要处理本地库和复杂的命令行接口。

幸运的是，jave-all-deps 库提供了一个简洁而强大的解决方案，让 Java 开发者能够轻松地进行音视频文件的转码和处理。

jave-all-deps 是 JAVE2（Java Audio Video Encoder）项目的一部分，它是一个基于 ffmpeg 项目的 Java 封装库。JAVE2 通过提供一套简单易用的 API，允许 Java 开发者在不直接处理 ffmpeg 复杂命令的情况下，进行音视频文件的格式转换、转码、剪辑等操作。

jave-all-deps 库特别之处在于它集成了核心 Java 代码和所有支持平台的二进制可执行文件，使得开发者无需手动配置 ffmpeg 环境，即可在多个操作系统上无缝使用。

是不是非常方便？

整体上来说，jave-all-deps 帮我们解决了三大类问题：

简单来说，就是你想在项目中使用 ffmpeg，但是又嫌麻烦，那么就可以使用 jave-all-deps 这个工具封装后的 ffmpeg，简单快捷！

二 具体用法

jave-all-deps 库提供了多种音视频处理功能，松哥这里来和大家演示几个常见的。

2.1 添加依赖

添加依赖有两种方式，一种就是添加所有的依赖库，如下：

<dependency>

 <groupId>ws.schild</groupId>

 <artifactId>jave-all-deps</artifactId>

 <version>3.5.0</version>

</dependency>

这个库中包含了不同平台所依赖的库的内容。

也可以根据自己平台选择不同的依赖库，这种方式需要首先添加 java-core：

<dependency>

    <groupId>ws.schild</groupId>

    <artifactId>jave-core</artifactId>

    <version>3.5.0</version>

</dependency>

然后再根据自己使用的不同平台，继续添加不同依赖库：

Linux 64 位 amd/intel：

<dependency>

    <groupId>ws.schild</groupId>

    <artifactId>jave-nativebin-linux64</artifactId>

    <version>3.5.0</version>

</dependency>

Linux 64 位 arm：

<dependency>

    <groupId>ws.schild</groupId>

    <artifactId>jave-nativebin-linux-arm64</artifactId>

    <version>3.5.0</version>

</dependency>

Linux 32 位 arm：

<dependency>

    <groupId>ws.schild</groupId>

    <artifactId>jave-nativebin-linux-arm32</artifactId>

    <version>3.5.0</version>

</dependency>

Windows 64 位：

<dependency>

    <groupId>ws.schild</groupId>

    <artifactId>jave-nativebin-win64</artifactId>

    <version>3.5.0</version>

</dependency>

MacOS 64 位：

<dependency>

    <groupId>ws.schild</groupId>

    <artifactId>jave-nativebin-osx64</artifactId>

    <version>3.5.0</version>

</dependency>

2.2 视频转音频

将视频文件从一种格式转换为另一种格式，例如将 AVI 文件转换为 MPEG 文件。

File source = new File("D:\\AI智能体\\mp4\\01.大模型有什么缺陷.mp4");

File target = new File("D:\\AI智能体\\mp4\\01.大模型有什么缺陷.mp3");

AudioAttributes audio = new AudioAttributes();

audio.setCodec("libmp3lame");

audio.setBitRate(128000);

audio.setChannels(2);

audio.setSamplingRate(44100);

EncodingAttributes attrs = new EncodingAttributes();

attrs.setOutputFormat("mp3");

attrs.setAudioAttributes(audio);

Encoder encoder = new Encoder();

encoder.encode(new MultimediaObject(source), target, attrs);

2.3 视频格式转换

将一种视频格式转换为另外一种视频格式，例如将 mp4 转为 flv：

File source = new File("D:\\AI智能体\\mp4\\01.大模型有什么缺陷.mp4");

File target = new File("D:\\AI智能体\\mp4\\01.大模型有什么缺陷.flv");

AudioAttributes audio = new AudioAttributes();

audio.setCodec("libmp3lame");

audio.setBitRate(64000);

audio.setChannels(1);

audio.setSamplingRate(22050);

VideoAttributes video = new VideoAttributes();

video.setCodec("flv");

video.setBitRate(160000);

video.setFrameRate(15);

video.setSize(new VideoSize(400, 300));

EncodingAttributes attrs = new EncodingAttributes();

attrs.setOutputFormat("flv");

attrs.setAudioAttributes(audio);

attrs.setVideoAttributes(video);

Encoder encoder = new Encoder();

encoder.encode(new MultimediaObject(source), target, attrs);

2.4 获取视频时长

这个就是松哥的需求了，我这块举个简单例子。

public class App {

    static SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("mm:ss");



    public static void main(String[] args) throws EncoderException {

        System.out.println("输入视频目录：");

        String dir = new Scanner(System.in).next();

        File folder = new File(dir);

        List<String> files = sort(folder);

        outputVideoTime(files);

    }



    private static void outputVideoTime(List<String> files) throws EncoderException {

        for (String file : files) {

            File video = new File(file);

            if (video.isFile() && !video.getName().startsWith(".") && video.getName().endsWith(".mp4")) {

                MultimediaObject multimediaObject = new MultimediaObject(video);

                long duration = multimediaObject.getInfo().getDuration();

                String s = "%s    %s";

                System.out.println(String.format(s, video.getName(), DATE_FORMAT.format(duration)));

            } else if (video.isDirectory()) {

                System.out.println(video.getName());

                outputVideoTime(sort(video));

            }

        }

    }



    public static List<String> sort(File folder) {

        return Arrays.stream(folder.listFiles()).map(f -> f.getAbsolutePath()).sorted(String.CASE_INSENSITIVE_ORDER).collect(Collectors.toList());

    }

}

这段代码基本上都是 Java 基础语法，没啥难的，我也就不多说了。有不明白的地方欢迎加松哥微信讨论。

其实 Java 解决这个似乎也不难，也就是 20 行代码左右，似乎和 Python 不相上下。

三 总结

jave-all-deps 库是 Java 音视频处理领域的一个强大工具，它通过封装 ffmpeg 的复杂功能，为 Java 开发者提供了一个简单易用的音视频处理解决方案。该库解决了跨平台兼容性问题、简化了复杂的命令行操作，并简化了项目中的依赖管理。无论是进行格式转换、音频转码还是其他音视频处理任务，jave-all-deps 库都是一个值得考虑的选择。

通过本文的介绍，希望能够帮助读者更好地理解和使用 jave-all-deps 库。

JavaScript 在处理文件、二进制数据和数据转换时，提供了一系列的 API 和对象，比如 File、Blob、FileReader、ArrayBuffer、Base64、Object URL 和 DataURL。每个概念在不同场景中都有重要作用。下面的内容我们将会详细学习每个概念及其在实际应用中的用法。

接下来的内容中我们将来了解 File和 Blob 这两个对象。

blob

在 JavaScript 中，Blob（Binary Large Object）对象用于表示不可变的、原始的二进制数据。它可以用来存储文件、图片、音频、视频、甚至是纯文本等各种类型的数据。Blob 提供了一种高效的方式来操作数据文件，而不需要将数据全部加载到内存中，这在处理大型文件或二进制数据时非常有用。

我们可以使用 new Blob() 构造函数来创建一个 Blob 对象，语法如下：

const blob = new Blob(blobParts, options);

例如：

const blob = new Blob(["Hello, world!"], { type: "text/plain" });

Blob 对象主要有以下几个属性：

console.log(blob.size); // 输出 Blob 的大小

2. type: 返回 Blob 对象的 MIME 类型。