个人笔记

后端开发过程关闭 com.chrome.devtools.json 请求方法

Wed, 17 Dec 2025 20:56:19 GMT

前言

如果你在开发服务器过程中遇到这样的一个请求："/.well-known/appspecific/com.chrome.devtools.json"，或许你会很疑惑，自己的代码中并没有写这样的一个请求，其实它是 Chrome DevTools 发起的一个资源请求，核心目的是为了实现 “自动工作区文件夹” 功能 —— 让 DevTools 能自动识别本地开发服务器的项目结构，目的是跳过手动配置直接编辑并保存文件到本地源码。

但是作为开发者，开发环境后台输出意料之外的请求总是让人恼火，尤其对于不了解该功能的开发者，容易误以为是自己的路由配置或代码出现 bug。

解决方法

针对这个请求，我们可以根据需求选择 “禁用” 或 “利用” 两种策略

禁用方法

打开 Chrome 浏览器，在地址栏输入 chrome://flags/#devtools-project-settings；
在打开的页面中，找到 "DevTools Project Settings" 选项并设置为 "Disabled";
重启浏览器，后续将不再发起该请求。

深入了解 com.chrome.devtools.json

当你在工作本地项目时打开 Chrome DevTools，它会自动向 URL /.well-known/appspecific/com.chrome.devtools.json 发送请求以检查特定的 JSON 文件。此文件包含有关你的项目文件夹结构的信息，使 DevTools 能够将你的本地文件映射到浏览器中加载的资源。

触发条件

其实这个请求并非所有场景下都会出现，它的触发有严格限制：

仅当项目运行在localhost（本地开发服务器）时触发；
仅在开发模式下，且 Chrome DevTools 处于打开状态；
仅 Chromium 内核浏览器（Chrome、Edge、Brave 等）会发起该请求，Firefox 等其他浏览器无此行为。

功能背景

该请求是 Chrome DevTools 在 M-135 版本（2025 年发布）新增的 “Automatic Workspace Folders”的功能，在这个功能出现之前，Chrome 的 Workspace 功能虽能实现 “DevTools 编辑→本地文件同步”，但存在两大问题：一是需要手动配置文件映射，操作繁琐且不直观；二是多项目切换时需重复设置，易用性极差。而 “Automatic Workspace Folders” 功能通过自动识别项目结构，完美解决了这两个痛点 Chrome 开发者工具中的自动 Workspace 连接。

文件：com.chrome.devtools.json 的规范

DevTools 之所以发起请求，是为了获取一个特定的 JSON 文件，该文件需满足以下要求：

路径位置：必须放在项目根目录的 /.well-known/appspecific/ 文件夹下；
核心结构：包含 workspace 对象，且必须有两个属性：
- root：项目文件夹的绝对路径（如 /Users/foobar/Projects/my-awesome-web-project）；
- uuid：项目唯一标识，推荐使用 v4 版本 UUID（可通过 npx uuid v4 生成）。

示例文件内容如下：

json

{
  "workspace": {
    "root": "/Users/foobar/Projects/my-awesome-web-project",
    "uuid": "53b029bb-c989-4dca-969b-835fecec3717"
  }
}

如果服务器无法返回该文件，就会出现 404 错误 —— 这也是大多数开发者遇到的核心问题，因为 Remix、Next.js、SvelteKit 等主流框架默认都没有配置该路由。

充分利用 com.chrome.devtools.json

如果想充分利用 Chrome 的这个实用功能，只需让服务器正确返回 JSON 文件即可。不同框架有不同的实现方式，以下是主流场景的配置指南：

通用手动配置（适用于所有框架）

在项目根目录创建文件夹：/.well-known/appspecific/；
在该文件夹下创建 com.chrome.devtools.json 文件，按规范填写 root 和 uuid；
确保服务器能正常访问该静态文件（如使用 npx serve 启动简单服务器）。

框架专属配置（更高效）

Vite 项目（React、Svelte 等）：使用 vite-plugin-devtools-json 插件自动生成文件，无需手动配置：
1. 安装插件：npm install --save-dev vite-plugin-devtools-json；
2. 在 vite.config.js 中引入：
  
  javascript
  
  运行
```
import { defineConfig } from 'vite';
import devtoolsJson from 'vite-plugin-devtools-json';

export default defineConfig({
  plugins: [devtoolsJson()],
});
```

Remix 项目：创建路由文件 app/routes/[.]well-known.appspecific.[com.chrome.devtools.json].tsx，添加 loader 函数：

typescript

运行

import { json } from '@remix-run/node';

export const loader = async () => {
  return json({
    workspace: {
      root: process.cwd(),
      uuid: '6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
    },
  });
};

Next.js 项目：在 app/.well-known/appspecific/com.chrome.devtools.json/ 目录下创建 route.js：

javascript

运行

export async function GET() {
  return Response.json({
    workspace: {
      root: process.cwd(),
      uuid: '6ec0bd7f-11c0-43da-975e-2a8ad9ebae0b',
    },
  });
}

优点：启用 “自动工作区文件夹” 功能，实现 DevTools 实时编辑本地文件，提升调试效率；

缺点：需要少量配置，新增文件会带来轻微的维护成本。

如何使用 “Automatic Workspace Folders” 功能

配置完成后，即可享受该功能带来的高效调试体验，步骤如下：

启动本地开发服务器（如 npm run dev），确保项目运行在localhost；
打开 Chrome DevTools（快捷键 Ctrl+Shift+I 或 Cmd+Option+I）；
切换到 Sources 标签，找到 Workspace 面板；
点击项目文件夹旁的 “Connect”，并允许 DevTools 访问本地文件；
此后在 DevTools 中编辑 HTML、CSS、JS 文件，更改会自动保存到本地源码，文件旁会显示绿色圆点表示映射成功。

常见问题与最佳实践

1. troubleshooting 常见问题

禁用功能后请求仍存在：清除浏览器缓存或重新启动 Chrome；
Brave 浏览器也出现该请求：Brave 基于 Chromium 内核，需在 brave://flags/#devtools-project-settings 中禁用；
UUID 无效报错：使用 npx uuid v4 生成标准 v4 UUID，避免手动编写；
配置后文件无法访问：检查服务器是否正确配置静态文件访问，或路由是否匹配。

2. 最佳实践建议

团队协作：如果选择支持该功能，建议在项目 README 中添加配置说明，确保团队成员统一环境；
优先使用插件：Vite 项目推荐直接使用 vite-plugin-devtools-json，避免手动维护 JSON 文件；
生产环境无需关注：该请求仅在localhost开发环境触发，不会影响线上应用；
避免误屏蔽：服务器端屏蔽时，确保仅针对该特定路径，不要影响 Let’s Encrypt 等其他依赖 .well-known 路径的服务。

总结

这个看似“烦人”的 /.well-known/appspecific/com.chrome.devtools.json 请求，本质是 Chrome 为提升调试体验而推出的实用功能。因此无需被它的 404 错误困扰，根据自身需求，要么直接禁用省心省力，要么配置启用享受高效调试。

对于追求开发效率的开发者来说，只需简单几步就能解锁 “DevTools 实时编辑本地文件” 的强大能力，可以让调试流程更顺畅。

Enquirer 现代化的交互式命令行工具库

Mon, 30 Jun 2025 14:08:54 GMT

前言

在现代前端开发中，命令行工具 (CLI) 已经成为开发者日常工作中不可或缺的一部分。而如何让CLI工具更加友好、直观，提供良好的用户体验？交互式命令行界面是关键。这里将介绍如何使用Enquirer 来构建交互式命令行。

Enquirer 是一个现代化、直观且用户友好的命令行提示工具库。它提供了简洁的 API 、现代化的界面以及更强大的交互功能。

Github

开始

安装

npm install enquirer 
# or
yarn yarn add enquirer

使用

1.基本选择提示

const { Select } = require("enquirer");

const prompt = new Select({
  name: "color",
  message: "选择你喜欢的颜色",
  choices: ["红色", "黄色", "蓝色"],
});

prompt
  .run()
  .then((answer) => console.log("你选择了:", answer))
  .catch(console.error);

2.多选提示

const { MultiSelect } = require('enquirer');

const prompt = new MultiSelect({
  name: 'foods',
  message: '选择你喜欢的食物(按空格选择)',
  choices: [
    { name: 'pizza', value: '披萨' },
    { name: 'burger', value: '汉堡' },
    { name: 'sushi', value: '寿司' },
    { name: 'noodles', value: '面条' }
  ]
});

prompt.run()
  .then(answers => console.log('你选择了:', answers))
  .catch(console.error);

3.输入框提示

const { Input } = require('enquirer');

const prompt = new Input({
  name: 'username',
  message: '请输入你的用户名'
});

prompt.run()
  .then(answer => console.log('用户名:', answer))
  .catch(console.error);

4.表单输入

const { Form } = require('enquirer');

const prompt = new Form({
  name: 'user',
  message: '请填写用户信息',
  choices: [
    { name: 'firstName', message: '名' },
    { name: 'lastName', message: '姓' },
    { name: 'email', message: '邮箱' }
  ]
});

prompt.run()
  .then(value => console.log('用户信息:', value))
  .catch(console.error);

5.自动补全

const { AutoComplete } = require('enquirer');

const prompt = new AutoComplete({
  name: 'flavor',
  message: '选择你喜欢的编程语言(输入可过滤)',
  limit: 10,
  initial: 2,
  choices: [
    'JavaScript',
    'TypeScript',
    'Python',
    'Java',
    'C++',
    'C#',
    'Go',
    'Ruby',
    'Swift',
    'Kotlin'
  ]
});

prompt.run()
  .then(answer => console.log('你选择了:', answer))
  .catch(console.error);

6.自定义验证

const { Input } = require('enquirer');

const prompt = new Input({
  name: 'age',
  message: '请输入你的年龄',
  validate(value) {
    if (isNaN(value)) return '请输入数字';
    if (value < 18) return '必须年满18岁';
    return true;
  }
});

prompt.run()
  .then(answer => console.log('年龄:', answer))
  .catch(console.error);

构建一个 Cli 项目

在这里我们使用 prompt 函数构建：

const { prompt } = require("enquirer");

async function initProject() {
  const answers = await prompt([
    {
      type: "select",
      name: "type",
      message: "选择框架",
      choices: ["Vue", "React"],
    },
    {
      type: "input",
      name: "name",
      message: "输入项目名称",
      validate: (value) => (value.trim() ? true : "项目名称不能为空"),
    },
    {
      type: "confirm",
      name: "typescript",
      message: "确定要安装吗?",
    },
    {
      type: "multiselect",
      name: "features",
      message: "选择额外功能(按空格选择)",
      choices: [
        { name: "eslint", message: "ESLint代码检查" },
        { name: "prettier", message: "Prettier代码格式化" },
        { name: "tests", message: "单元测试" },
        { name: "ci", message: "CI配置" },
      ],
    },
  ]);
  console.log("\n配置汇总:");
  console.log("项目类型:", answers.type);
  console.log("项目名称:", answers.name);
  console.log("使用TypeScript:", answers.typescript ? "是" : "否");
  console.log("额外功能:", answers.features.join(", "));
}

initProject().catch(console.error);

告别手动计算！PixiJS Layout v3 带来 CSS 级布局能力

Mon, 26 May 2025 21:02:35 GMT

2025年4月29日，PixiJS官方正式发布 PixiJS Layout v3，这是一个从零开始彻底重构的库版本。新版本基于 Yoga 布局引擎，为 PixiJS 项目提供了一种强大且符合网页标准的布局管理方式。

这不仅仅是一次重写，v3 版本代表着重大飞跃：它将真正的弹性盒子布局（flexbox）理念引入PixiJS生态系统，让习惯 CSS 布局的网页开发者能够无缝过渡。无论您是在开发游戏UI、动态画布应用还是完整交互体验，现在都可以使用熟悉的布局模式——如flex-grow、justify-content、align-items等属性。

此外，PixiJS Layout v3 与 PixiJS React 深度集成，让 React 开发者能够通过声明式语法轻松构建和管理 PixiJS 界面。无论您使用原生 PixiJS 还是结合 React，布局现在都变得更简单、直观且强大。

为网页开发者彻底重构

v3是 完全重写 的版本，底层采用 Yoga 引擎，首次为 PixiJS 带来可预测的网页标准布局行为。您可以用网页开发的思维方式处理布局——弹性容器、自动换行、对齐和间距——同时保持 PixiJS 的性能优势。

为什么这很重要

网页开发者可以使用熟悉的弹性盒子概念，无需改变开发习惯
零布局学习曲线：如果您了解 CSS Flexbox，就已经掌握 PixiJS 场景布局
React开发者获得更强能力：v3完美兼容PixiJS React，支持直接在 JSX 中声明布局

核心特性

Yoga驱动的布局引擎

采用 React Native 同款的 Yoga 引擎，为 PixiJS 带来经过验证的弹性盒子布局系统。完整支持 justifyContent、alignItems、flexDirection和gap等常见属性。

可选式设计

PixiJS Layout v3 采用按需启用设计。您可以仅为需要布局的对象（如 Containers、Sprites、Graphics、Text 或自定义对象）激活功能，无需重构整个项目。

这种灵活性让您可以在现有项目中逐步引入布局功能，保持代码整洁高效。

const sprite = new Sprite({ texture, layout: true });

或直接在创建对象时定义布局：

const container = new Container({
    layout: {
        width: 500,
        height: 300,
        justifyContent: 'center',
        alignContent: 'center',
        flexWrap: 'wrap',
    },
});

React深度整合

v3包含与 PixiJS React 的完整集成，支持直观的JSX语法：

<layoutContainer layout={{ flexDirection: 'row', gap: 10 }}>
    <layoutSprite texture={texture} layout={{ width: 100, height: 100 }} />
    <layoutSprite texture={texture} layout={{ width: 100, height: 100 }} />
</layoutContainer>

这让 React 开发者能够像构建网页UI一样声明式地组合布局，同时享受 PixiJS 的渲染性能。

网页风格特性

新增多项网页风格功能增强布局能力：

objectFit：控制内容在容器内的缩放方式（fill、contain、cover、none、scale-down）
objectPosition：微调内容在布局边界内的对齐
溢出滚动：为任何容器启用 overflow: scroll 效果

文档全面升级

重写后的文档现在包含：

清晰的上手指南和最佳实践
覆盖常见用例的详细示例
改进的布局行为解释和 PixiJS 集成说明

新版文档让入门比以往更简单。

快速开始

由于采用可选式架构，您可以在任何 PixiJS 项目中逐步应用布局功能。查看入门指南获取详细教程，以下是简要步骤：

安装配置

安装PixiJS Layout v3：

pnpm add @pixi/layout
# 或
yarn add @pixi/layout
# 或
npm install @pixi/layout

在应用中早期导入库：

import '@pixi/layout';

// ... 初始化应用

在需要时启用布局：

const container = new Container({
    layout: {
        width: 500,
        height: 300,
        justifyContent: 'center',
        alignContent: 'center',
        flexWrap: 'wrap',
    },
});

const sprite = new Sprite({ texture, layout: true });

container.addChild(sprite);

结语

PixiJS Layout v3 将网页标准弹性盒子布局引入 2D 图形领域。

网页开发者现在可以使用熟悉的工具构建 PixiJS 项目，React 开发者则能像开发网页应用一样组合高性能的 canvas 界面。

原文地址：https://pixijs.com/blog/layout-v3

Windows Terminal 文本出现纯色背景问题解决方法

Thu, 03 Apr 2025 20:47:25 GMT

背景

不知道是最近的哪一次自动更新，当 Windows Terminal 背景透明度不为100%时，PowerShell 的文字会出现黑色的纯色背景，排查了终端美化工具和配色设置均没发现问题，最后发现该Bug跟PowerShell中的 PSReadline 模块相关。

PSReadline

PSReadline 是一个用于增强 PowerShell 控制台体验的模块，主要提供命令行编辑、历史记录搜索、自动完成以及命令行高亮显示等功能。它提供了类似 Unix Shell 的命令行增强功能。

但是 Windows Terminal 最近更新的版本 1.21.10351.0 以及之后的版本估计添加了新的特性，导致老版本的 PSReadline 不兼容。

解决方法

解决方法也很简单，就是把 PSReadline 更新到最新版即可。

查看当前 PSReadline 版本

Get-Module -ListAvailable PSReadline

如果显示版本为 2.0.0 那么就需要更新了。

安装或更新（需要管理员身份运行）

Install-Module -Name PSReadLine -Scope AllUsers -AllowClobber -Force
#or
Update-Module -Name PSReadline

再次重启 Windows Terminal 就可以看到纯色文字背景的问题解决了。

参考：Black text background when using PowerShell 5

深入认识工厂模式

Fri, 28 Mar 2025 21:05:15 GMT

前言

在平时开发过程中，如果遇到需要创建多个配置相似的对象，我们普遍想到的都是使用构造函数来解决，这种方式简单直观，有着清晰的继承体系，特别适合面向对象编程，但是不可避免的必须使用 new 关键字，否则 this 指向全局对象（如 window），导致隐蔽的 Bug。而 new 和 this 的关键字依赖又导致原型链的复杂性增加，难以实现私有变量。

这在我们需要灵活创建多个配置相似对象同时实现真正的封装和私有状态还要避免类继承的局限性时，使用构造函数已经很难满足我们的需求，试想一下当你在封装组件时遇到响应式丢失、类继承导致的重构困难时，就不可避免的走向对

工厂模式

也因此工厂模式（Factory Pattern）这种创建型的设计模式出现了，它的核心思想是 将对象的创建逻辑封装在一个函数或类中，而不是直接通过 new 或字面量手动创建。通过这种方式，可以实现 对象创建的集中管理、解耦代码，并支持 动态生成不同类型的对象，这些特性完美契合函数式编程的理念，即无副作用、纯函数 和 不可变性。

实现

而为了实现工厂模式，我们需要封装创建过程，也就是通过一个函数，根据输入参数返回不同对象，可以发现工厂模式它就像流水线一样批量生产对象，不同于传统的类或构造函数，它通过普通函数返回新对象的方式实现对象创建。

也因此工厂模式本质是通过一个普通函数，在内部构造对象并返回，无需 new 关键字调用。

既然提到了函数，那么在工厂模式中函数又分为两种，即工厂函数和函数工厂，虽然它们的名字非常相似，但是侧重点不同，可以理解为 同一设计模式的不同应用场景。

工厂函数（Factory Function）

工厂函数是一种用于创建并返回对象的函数，它的核心思想是 封装对象的创建过程，提供一种更灵活、可复用的对象生成方式，与传统的构造函数相比，工厂函数不依赖 new 关键字，而是直接通过函数调用来生成对象。

在 JavaScript 中，工厂函数并不是一种官方的语言特性，而是一种被广泛使用的 设计模式。

工厂函数：返回一个对象

function createUser(name) {
  return {
    name,
    greet() {
      console.log(`Hi, I'm ${name}!`);
    },
  };
}

const user = createUser("Alice");
user.greet(); // "Hi, I'm Alice!"

函数工厂（Function Factory）

函数工厂是一种通过函数生成并返回其他函数的设计模式，它通过闭包和参数化机制，动态创建具有特定行为的函数。在 JavaScript 中，函数工厂常用于 逻辑复用、动态配置 和 上下文隔离

函数工厂：返回一个函数

function createMultiplier(factor) {
  return function (x) {
    return x * factor;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 10

对比

术语	目标	返回值类型	用途场景
工厂函数	创建对象	对象（Object）	生成结构相似的对象
函数工厂	创建函数	函数（Function）	动态生成不同行为的函数

两者都是 工厂模式 的具体实现，而使用哪种则取决于具体的场景，也因此接下来我会将这两种函数都统称为工厂函数。

与传统方式的对比

1. 构造函数方式

function User(name) {
  this.name = name
}

User.prototype.login = function() {
  console.log(`${this.name} logged in`)
}

const user = new User('Charlie')

2. 类语法

class User {
  constructor(name) {
    this.name = name
  }

  login() {
    console.log(`${this.name} logged in`)
  }
}

const user = new User('David')

3. 工厂函数方法

function createUser(name) {
  return {
    name,  // 等价于 name: name
    login() {  // 直接定义方法
      console.log(`${this.name} logged in`)
    }
  }
}

// 使用方式
const user = createUser('Charlie')  // 不需要new关键字

工厂函数更适合 快速创建灵活对象、实现私有状态、避免 new 依赖 的场景。三者并非对立，而是互补的工具，应根据具体场景需求选择。

创建工厂函数的四个步骤

1. 基础对象创建

function createCircle(radius) {
  return {
    radius,
    draw() {
      console.log('Drawing circle')
    }
  }
}

2. 添加私有成员

function createBankAccount(balance) {
  // 真正私有的变量
  let _balance = balance 

  return {
    deposit(amount) {
      _balance += amount
    },
    getBalance() {
      return _balance
    }
  }
}

3. 实现方法共享

const userMethods = {
  login() {
    console.log(`${this.name} logged in`)
  },
  logout() {
    console.log(`${this.name} logged out`)
  }
}

function createUser(name) {
  return {
    name,
    ...userMethods
  }
}

4. 实现组合继承

function createAdminUser(name) {
  const user = createUser(name)
  
  return {
    ...user,
    deleteUser(id) {
      console.log(`Deleting user ${id}`)
    }
  }
}

高级应用技巧

动态创建组件

const defineFormComponent = <T extends object>(factory: (ctx: T) => JSX.Element) => {
  return defineComponent({
    inheritAttrs: false,
    setup(props, { attrs }) {
      const context = reactive({ ...attrs }) as T
      onBeforeUnmount(() => {
        if ('inputRef' in context) {
          (context as any).inputRef = null
        }
      })
      return () => factory(context)
    }
  })
}

// 表单配置
const formState = reactive({
  username: '',
  id: ''
})

const editModalFormItems = Object.freeze([
  {
    label: "username",
    name: "username",
    component: defineFormComponent((ctx) => 
      <a-input 
        v-model:value={ctx.formState.username}
        ref={(el) => ctx.inputRef = el}
      />
    ),
    extraProps: {
      formState,
      inputRef: null as HTMLInputElement | null
    }
  },
  {
    label: "id",
    name: "id",
    component: defineFormComponent((ctx) => 
      <a-input 
        v-model:value={ctx.formState.id}
        ref={(el) => ctx.inputRef = el}
      />
    ),
    extraProps: {
      formState,
      inputRef: null as HTMLInputElement | null
    }
  }
] as const)

总结

函数工厂 = 普通函数 + 对象字面量 + 闭包，它以函数式的方式实现对象创建，是现代 JavaScript 中践行组合优于继承理念的典型实践。是构建可维护的代码结构的不二之选。

文件同步工具推荐

Tue, 25 Feb 2025 20:33:43 GMT

前言

无论是个人学习办公还是团队合作，备份重要资料、跨设备共享文件都是保障效率的核心环节，也因此拥有一套完善的文件存储传输体系，可以让你在遇到诸如数据迁移、备份等复杂场景中，实现信息的高效流转与管理。

为此我结合自己实际的使用体验，推荐以下四款文件同步、传输工具，帮助大家构建适合自己文件存储传输体系。

FolderSync

推荐度：★★★★☆（4/5）

FolderSync 是一款专为 Android 系统设计的文件同步工具，支持将手机中的文件自动同步到云端存储（如坚果云、Dropbox 等）或本地设备。它具备实时同步、定时同步、手动同步等多种模式，并支持文件过滤、忽略隐藏文件、保持文件结构等高级功能。用户可自定义同步规则，如仅在 Wi-Fi 环境下同步，或设置同步频率（每分钟到每月）。

注意：FolderSync 仅支持 Android 系统，免费版足够满足日常使用需求，高级版本主要是免除广告。

官方网站

支持协议
- FTP
- SFTP
- WebDAV
- SMB
支持平台
- Android

FreeFileSync

推荐度：★★★★★（5/5）

FreeFileSync 是一款开源免费的文件同步与备份工具，支持按文件内容、修改时间、大小等多种方式对比差异，仅传输必要数据以实现高效同步，是桌面端文件同步的标杆工具。

主要使用场景：备份照片、文档到移动硬盘或 NAS。

官方网站

开源地址：开源代码下载
支持协议
- FTP
- SFTP
- SMB
支持平台
- Windows
- Linux
- MacOS

WinSCP

推荐度：★★★★★（5/5）

WinSCP 是一款免费开源的图形化文件传输工具，专为 Windows 系统设计，支持通过 SFTP、SCP、FTP、WebDAV 等协议在本地计算机与远程服务器之间安全传输文件。其核心功能包括文件上传/下载、目录同步、远程文件编辑（内置文本编辑器）、脚本自动化等。适用于网站开发、服务器运维、数据备份等场景，尤其适合需要加密传输的敏感数据操作。

官方网站

开源地址： Github
支持协议
- FTP
- SFTP
- WebDAV
- SCP
支持平台
- Windows

SyncThing

推荐度：★★★★☆（4/5）

Syncthing 是一款开源、去中心化的文件同步工具，基于点对点（P2P）技术实现设备间的实时文件同步。适合小范围跨设备同步文件，替代网盘实现私有云。

官方网站

开源地址： Github
支持协议
- P2P
支持平台
- Windows
- Linux
- macOS
- Android

使用 CSS3DRenderer 制作3D穿梭效果

Mon, 27 Jan 2025 22:51:39 GMT

前言

当你想要在浏览器中实现元素由远到近的动画效果的时候，你可以使用 Three.js 的 CSS3DRenderer 来模拟 3D 变换并将其渲染到 HTML DOM 元素上。

开始

从官方文档的描述中我们可以得知 CSS3DRenderer 的本质是通过CSS3的 transform 属性，将层级的3D变换应用到DOM元素上，这样就可以直接在 HTML DOM 元素上做出 3D 的效果。

NPM 安装

npm install three

导入项目

import * as THREE from "three";
import { CSS3DRenderer, CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer.js";

3D穿梭效果示例

import * as THREE from "three";
import { CSS3DRenderer, CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer.js";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
const renderer = new CSS3DRenderer();
const objects: CSS3DObject[] = [];

initScene();
animate();

function initScene() {
  let sceneContainer = document.getElementById("sceneContainer");
  if (!sceneContainer) return;
  scene.clear();
  camera.position.set(0, 0, 3000);

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.domElement.style.position = "absolute";
  renderer.domElement.style.top = "0";
  sceneContainer.appendChild(renderer.domElement);

  for (let i = 0; i < 50; i++) {
    createItem(i);
  }
}

function createItem(index: number) {
  const element = document.createElement("img");
  element.style.borderRadius = "50%";
  element.style.width = "30px";
  element.style.height = "30px";
  element.style.background = "gray";
  element.id = `item-${index}`;

  const cssObject = new CSS3DObject(element);
  cssObject.position.set(Math.random() * 200 - 100, Math.random() * 200 - 100, Math.random() * -2000 - 500);

  scene.add(cssObject);
  objects.push(cssObject);
}

function animate() {
  objects.forEach((obj) => {
    obj.position.z += 10;

    const distance = Math.abs(camera.position.z - obj.position.z);
    const scale = Math.max(0.1, 1 - distance / 5000);
    obj.element.style.width = `${30 * scale}px`;
    obj.element.style.height = `${30 * scale}px`;
    obj.element.style.opacity = `${Math.max(0, 1 - distance / 3000)}`;

    if (obj.position.z > 3000) {
      obj.element.style.opacity = "0";
      obj.position.set(Math.random() * 200 - 100, Math.random() * 200 - 100, Math.random() * -2000 - 500);
    }
  });
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

在浏览器中实时获取声音频率

Tue, 31 Dec 2024 20:21:31 GMT

前言

当你在给乐器调音时、又或者在小提琴、二胡这样的无品格乐器上演奏但无法确定音准时，你可以借助电脑或者移动设备的麦克风采集当前演奏乐器的声音，并通过算法实时分析声音的基音音高以及响度，这可以更好地帮助我们把握乐器的音准。

开始

在浏览器获取麦克风权限

在这里我们使用 Web Api 中的 getUserMedia 方法来获取设备麦克风。

async function getMicroPhoneDevice() {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    console.log("浏览器不支持音频输入");
    return;
  }

  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const audioContext = new window.AudioContext();
    const mediaStreamSource = audioContext.createMediaStreamSource(stream);

    const processor = audioContext.createScriptProcessor(4096, 1, 1);
    mediaStreamSource.connect(processor);
    processor.connect(audioContext.destination);
    processor.onaudioprocess = (e) => {
      let inputBuffer = e.inputBuffer.getChannelData(0); // 读取第一个声道的数据
      console.log(inputBuffer);
    };
  } catch (error) {
    console.error("音频解析失败，请检查麦克风或重新尝试！", error);
  }
}

这里的 inputBuffer 就是麦克风实时获取的音频数据，格式为 Buffer 数组。

处理获取的音频数据

现在我们得到了原始的音频数据，如果想要知道这段音频的频率，我们还需要使用自相关算法得出音频的基音以及周期。

1.首先使用 RMS 计算信号强度

let rms = 0;
let SIZE = inputBuffer.length;
for (let i = 0; i < SIZE; i++) {
  let val = inputBuffer[i];
  rms += val * val;
}
rms = Math.sqrt(rms / SIZE);
if (rms < 0.01) {
  console.log("信号强度不足");
}

2.筛除噪声

let startIndex = 0,
  endIndex = SIZE - 1,
  threshold = 0.2;

for (let i = 0; i < SIZE / 2; i++) {
  if (Math.abs(inputBuffer[i]) < threshold) {
    startIndex = i;
    break;
  }
}
for (let i = 1; i < SIZE / 2; i++) {
  if (Math.abs(inputBuffer[SIZE - i]) < threshold) {
    endIndex = SIZE - i;
    break;
  }
}

inputBuffer = inputBuffer.slice(startIndex, endIndex);
SIZE = inputBuffer.length;

3.自相关计算（Autocorrelation Function, ACF）

let autocorrelation = new Array(SIZE).fill(0);

for (let i = 0; i < SIZE; i++) {
  for (let j = 0; j < SIZE - i; j++) {
    autocorrelation[i] += inputBuffer[j] * inputBuffer[j + i];
  }
}

4.峰值检测

let peakIndex = 0;
while (autocorrelation[peakIndex] > autocorrelation[peakIndex + 1]) peakIndex++;

let maxCorrelationValue = -1,
  maxCorrelationPosition = -1;
for (let i = peakIndex; i < SIZE; i++) {
  if (autocorrelation[i] > maxCorrelationValue) {
    maxCorrelationValue = autocorrelation[i];
    maxCorrelationPosition = i;
  }
}

let period = maxCorrelationPosition;

5.二次插值提高精度

let prevValue = autocorrelation[period - 1],
  currentValue = autocorrelation[period],
  nextValue = autocorrelation[period + 1];
let quadraticA = (prevValue + nextValue - 2 * currentValue) / 2;
let quadraticB = (nextValue - prevValue) / 2;
if (quadraticA) period = period - quadraticB / (2 * quadraticA);

6.频率计算

频率计算的公式为：f = 采样率 / 周期

let sampleRate = audioContext.sampleRate;
let frequency = sampleRate / period;

完整代码

async function getMicroPhoneDevice() {
  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    console.log("浏览器不支持音频输入");
    return;
  }

  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    const audioContext = new window.AudioContext();
    const mediaStreamSource = audioContext.createMediaStreamSource(stream);

    const processor = audioContext.createScriptProcessor(4096, 1, 1);
    mediaStreamSource.connect(processor);
    processor.connect(audioContext.destination);
    processor.onaudioprocess = (e) => {
      let inputBuffer = e.inputBuffer.getChannelData(0); // 读取第一个声道的数据
      console.log(`音频频率为：${getFrequency(inputBuffer, audioContext.sampleRate)}`);
    };
  } catch (error) {
    console.error("音频解析失败，请检查麦克风或重新尝试！", error);
  }
}

function getFrequency(inputBuffer, sampleRate) {
  let rms = 0;
  let SIZE = inputBuffer.length;
  for (let i = 0; i < SIZE; i++) {
    let val = inputBuffer[i];
    rms += val * val;
  }
  rms = Math.sqrt(rms / SIZE);
  if (rms < 0.01) {
    console.log("信号强度不足");
  }
  let startIndex = 0,
    endIndex = SIZE - 1,
    threshold = 0.2;

  for (let i = 0; i < SIZE / 2; i++) {
    if (Math.abs(inputBuffer[i]) < threshold) {
      startIndex = i;
      break;
    }
  }
  for (let i = 1; i < SIZE / 2; i++) {
    if (Math.abs(inputBuffer[SIZE - i]) < threshold) {
      endIndex = SIZE - i;
      break;
    }
  }

  inputBuffer = inputBuffer.slice(startIndex, endIndex);
  SIZE = inputBuffer.length;

  let autocorrelation = new Array(SIZE).fill(0);

  for (let i = 0; i < SIZE; i++) {
    for (let j = 0; j < SIZE - i; j++) {
      autocorrelation[i] += inputBuffer[j] * inputBuffer[j + i];
    }
  }

  let peakIndex = 0;
  while (autocorrelation[peakIndex] > autocorrelation[peakIndex + 1]) peakIndex++;

  let maxCorrelationValue = -1,
    maxCorrelationPosition = -1;
  for (let i = peakIndex; i < SIZE; i++) {
    if (autocorrelation[i] > maxCorrelationValue) {
      maxCorrelationValue = autocorrelation[i];
      maxCorrelationPosition = i;
    }
  }

  let period = maxCorrelationPosition;
  let prevValue = autocorrelation[period - 1],
    currentValue = autocorrelation[period],
    nextValue = autocorrelation[period + 1];
  let quadraticA = (prevValue + nextValue - 2 * currentValue) / 2;
  let quadraticB = (nextValue - prevValue) / 2;
  if (quadraticA) period = period - quadraticB / (2 * quadraticA);
  if (period === 0) return null;
  let frequency = sampleRate / period;
  return frequency;
}

批量把doc格式文档转换为docx文档

Wed, 20 Nov 2024 21:50:33 GMT

引言

在使用 mammoth.js 进行文档读取的时候，如果目标文件不是 docx 格式的文档则无法进行解析，因此我们需要使用 Microsoft Office 或者 WPS 将文件重新导出进行格式转换，但是如果需要进行格式转换的文件很多的话，这样做难免效率过低，所以我们可以考虑在 Microsoft Office 中使用 VBA(Visual Basic for Applications) 来进行脚本处理。

开始

首先第一步我们要创建一个 .docm 格式的文档并打开

编写脚本

打开文件后我们使用快捷键 alt+F11 打开 VBA 窗口（如果宏被禁用的话先启用宏）
在菜单栏找到插入(Insert) 然后点击模块(Module)
在新插入的模块内填写以下代码

Sub TranslateDocIntoDocx()
    Dim objWordApp As New Word.Application
    Dim objDoc As Word.Document
    Dim strFolder As String
    Dim strFile As String
    Dim strOutputFolder As String
    Dim count As Long
    Dim fso As Object

    ' 初始化计数器
    count = 0

    ' 获取当前文档的路径
    strFolder = ThisDocument.Path & "\"
    strOutputFolder = strFolder & "output\"

    Set fso = CreateObject("Scripting.FileSystemObject")
    ' 检查 output 文件夹是否存在，如果不存在则创建
    If Not fso.FolderExists(strOutputFolder) Then
        fso.CreateFolder strOutputFolder
    End If

    ' 遍历 .doc 文件并转换为 .docx
    strFile = Dir(strFolder & "*.doc")
    Do While strFile <> ""
        With objWordApp
            Set objDoc = .Documents.Open(strFolder & strFile, AddToRecentFiles:=False, ReadOnly:=True, Visible:=False)
            objDoc.SaveAs2 strOutputFolder & fso.GetBaseName(strFile) & ".docx", FileFormat:=wdFormatXMLDocument
            objDoc.Close
        End With

        count = count + 1

        ' 获取下一个文件
        strFile = Dir()
    Loop

    ' 清理对象
    Set objDoc = Nothing
    Set objWordApp = Nothing
    Set fso = Nothing

    ' 显示转换结果
    MsgBox "执行完成，共转换了: " & count & " 个文件"
End Sub

运行脚本

在我们创建的 .docm 格式的文档的根目录放一些 .doc 格式的文件后在 VBA 窗口运行写好模块

如果成功执行，模块脚本执行结束后会弹窗提示执行完成，共转换了: n 个文件，转换好的文件会放在根目录新创建的 output 文件夹中

自建 Anki 同步服务器

Thu, 10 Oct 2024 23:49:23 GMT

前言

在使用 Anki 官方的同步服务器时，时常遇到连接超时以及同步速度过慢的情况，好在从官方文档 sync-server 中可知，从 2.1.57+ 版本开始的桌面版 Anki 已经内置了同步服务器，只需要简单的几行命令就可以创建一个私人同步服务。

开始

下载桌面版 Anki

Github 仓库

考虑到市面上大部分服务器都基于 Linux 发行版所以该教程也只介绍如何在 Linux 系统中进行部署

首先检查自己的 Linux 系统版本以及CPU架构

uname -a

根据终端输出系统版本及架构的选择最适合自己的安装包

在这里我们选 linux-qt5.tar.zst 为后缀的压缩包来安装，可以看到文件格式是 tar.zst，这是 Facebook推出的一种无损压缩格式，全称 Zstandard (ZSTD) ，压缩率更大速度更快，但是需要安装 ZSTD 才能解压。

考虑到该教程主要介绍如何搭建专属于自己的anki服务器，所以不展开讲述 ZSTD 安装相关步骤。

先下载 anki-2.1.57-linux-qt5.tar.zst 或者以上版本的压缩包

我们就先在 windows 系统的电脑上先解压 tar.zst 格式的资源，再用tar进行打包上传到 Linux 服务器来简化这一步

tar -zcvf  anki-2.1.57-linux-qt5.tar.gz anki-2.1.57-linux-qt5

将重新压缩好的资源上传到 Linux 服务器并选择合适的目录进行解压，解压完成后进入项目根目录

运行同步服务器

输入以下指令测试 Anki 服务器是否成功启动

SYNC_USER1=YourUsername:YourPassword ./anki-2.1.57-linux-qt5/anki --syncserver

如果弹出以下内容则证明服务器启动成功

INFO listening addr=0.0.0.0:8080

待打开对应端口的防火墙后测试服务器是否能正常连接

启动 Anki 客户端 —— 在客户端打开设置 —— 网络 —— 输入你的服务器ip+端口

保存后尝试使用 SYNC_USER1 里面的账号与密码进行登录

如果登录成功则私人同步服务器运行成功

使用守护进程持久运行

考虑到同步服务器需要在服务器后台保持常驻，所以我们使用PM2进行进程守护：

//ecosyste.config.js
module.exports = {
  apps: [{
    name: "anki-server",
    script: "./anki-2.1.57-linux-qt5/anki --syncserver",
    env: {
      SYNC_PORT: 8080,
      SYNC_USER1: "YourUsername:YourPassword",
    },
    out_file: "./logs/anki-server.log",
  }]
}

将 ecosyste.config.js 文件放到 anki 服务器文件根目录，并输入以下指令启动

pm2 start ecosyste.config.js

这样我们的 Anki 私人同步服务器就部署完成了。

使用域名作为地址

如果你想要用域名作为地址你可以使用 nginx 进行代理转发

    server {
        listen 443 ssl;
        server_name yourdomain.com;
        root html;
        index index.html index.htm;
        location / {
            proxy_pass http://127.0.0.1:8080/;
        }
    }

Starship 美化终端

Mon, 23 Sep 2024 14:59:07 GMT

前言

随着 Windows 11 的逐渐稳定，微软也将 Windows Terminal 收录到新版本的Windows 操作系统中，使其作为 Windows 的默认终端界面。

虽然 Windows Terminal 已经做得很好了，但是相比于主流 Linux 发行版和 MAC 的终端界面，Windows Terminal 可自定义的样式还是太少了还缺少对命令行输出的美化，因此我选择使用 Starship 来补齐这块短板，定制一套简洁、美观且高效的终端。

开始

下载并安装 Starship

官方网站

下载地址

配置环境

下载并安装 Starship 后将以下内容添加到 PowerShell 配置文件的末尾（通过运行 $PROFILE 来获取配置文件的路径）

默认返回的文件路径

C:\Users\用户名\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1

将以下内容粘贴进 Microsoft.PowerShell_profile.ps1 文件内

Invoke-Expression (&starship init powershell)

这时再重新启动 PowerShell 可能会出现

powershell. : 无法加载文件 C:\Users\user\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1，因为在此系统上禁止运行脚本。

不用担心，我们通过管理员权限运行 PowerShell，并输入以下内容

 set-ExecutionPolicy RemoteSigned

如果想要改回默认则输入以下内容即可

set-executionpolicy restricted

再次开启 PowerShell 就可以看到美化后的界面了

配置文件路径

默认的配置文件路径在 C:\Users\用户名\.config\starship.toml

您也可以使用 STARSHIP_CONFIG 环境变量更改默认配置文件的位置

export STARSHIP_CONFIG=~/example/non/default/path/starship.toml

在 PowerShell (Windows) 中，在 $PROFILE 中添加下面的代码行能达到同样的效果

$ENV:STARSHIP_CONFIG = "$HOME\example\non\default\path\starship.toml"

配置分享

在这里附上我的 Starship 配置文件

# ~/.config/starship.toml

format = """
$time \
$username\
$directory \
$character\
"""

add_newline = false

[battery]
full_symbol = "🔋"
charging_symbol = "🔌"
discharging_symbol = "⚡"

[[battery.display]]
threshold = 30
style = "bold red"

[character]
error_symbol = "[❌](bold red)"
#success_symbol = "[⚡](bold green)" 
#success_symbol = "[✨](bold green)" 
success_symbol = "[💖](bold green)" 

[cmd_duration]
min_time = 0  # Show command duration over 10,000 milliseconds (=10 sec)
format = " took [$duration]($style)"

[directory]
truncation_length = 5
format = "[$path]($style)[$lock_symbol]($lock_style)"

[git_branch]
format = " [$symbol$branch]($style) "
symbol = "🍣 "
style = "bold yellow"

[git_commit]
commit_hash_length = 8
style = "bold white"

[git_state]
format = '[\($state( $progress_current of $progress_total)\)]($style) '

[git_status]
conflicted = "⚔️ "
ahead = "🏎️ 💨 ×${count}"
behind = "🐢 ×${count}"
diverged = "🔱 🏎️ 💨 ×${ahead_count} 🐢 ×${behind_count}"
untracked = "🛤️  ×${count}"
stashed = "📦 "
modified = "📝 ×${count}"
staged = "🗃️  ×${count}"
renamed = "📛 ×${count}"
deleted = "🗑️  ×${count}"
style = "bright-white"
format = "$all_status$ahead_behind"

[hostname]
ssh_only = false
format = "<[$hostname]($style)>"
trim_at = "-"
style = "bold dimmed white"
disabled = true

[julia]
format = "[$symbol$version]($style) "
symbol = "ஃ "
style = "bold green"

[memory_usage]
format = "$symbol[${ram}( | ${swap})]($style) "
threshold = 70
style = "bold dimmed white"
disabled = false


[username]
style_user = "green"
show_always = true
format = "[$user]($style) "

[time]
disabled = false
time_format = "%R" # Hour:Minute Format
format = '[$time]($style)'
style = "bold white"

多邻国666天连胜纪念

Thu, 15 Aug 2024 21:24:59 GMT

初次体验多邻国

还记得第一次用多邻国是20年5月，当时是以随便玩玩的心态下载的，没想到在随后的每天要是不学能收到好几条来自多邻国的短信提醒我该学英语了（~~多儿：不学是吧，看我短信炸死你~~），也就这样每天晚上被迫上线练习，但也慢慢也形成了每天打卡学习的习惯。

随着学习的深入，我给自己每天的目标也从学两个单元涨到了每天学四个单元，不得不说连续的打卡让我明显感受到自己英语水平的提升，看着一个又一个单元学到满杯自己也感觉充满成就。

失去动力

终于在历经五百多天后，我把多邻国所有的单元都学成了金杯，段位也到了最高点的钻石，但是等那一刻的喜悦结束后，我发现我同时也失去了奋斗目标，全成就全课程达成的我就仿佛游戏已经玩到通关，也因此放弃了继续打卡多邻国。

再次回归

在达成全成就的一年后我再次打开了这款软件，没想到我以前全通关的账号现在只有课程总量3分之1的进度，还多了一个叫Super的会员专享，本着好习惯不能丢的想法，我又重新开始每天打开多邻国。

新变化

时隔一年能明显感受到多邻国的变化，最明显的就是激励机制。最开始的自律是通过短信加通知界面的轮流轰炸来提醒你，现在是增加了每个课程之间的奖励宝箱，其次就是在早晨和下午做题会送双倍经验宝箱。

这些激励机制无疑增加了学习的动力，但也让经验迅速贬值，还记得我最开始使用多邻国做完一个单元全对的情况下才只有15经验，一天做4个单元最多也才60经验，新版本后配合双倍经验做单词配对，哪怕是第一关就可以给到40经验，随着后面关卡的递增，经验最高可以给到120。只是使用了一个月新版多邻国，我就获得了五千多经验，要知道以前我花了五百多天学完所有课程也才勉勉强强到2万经验。

现状

不知不觉也已经使用新版本的多邻国666天了，相比最开始使用多邻国，我能感受到现在早已没了最开始的那种激情，每天上线只是为了把任务做完，有时候为了经验榜的排名重复刷很多遍几乎没有提升的单词配对。

我也知道这和我最开始的学习背道而驰，似乎我只是在勉强维持一种表面的坚持，害怕一旦停止打卡，这个好不容易养成的习惯就会彻底消失。但正因为如此，我反而变得越来越依赖这种机械化的操作，逐渐失去了对学习本身的热情。

我知道这不是理想的状态。或许，我需要找到新的方式，重新点燃内心对学习的热情，或者至少，找到一种平衡，在有限的精力中，既能维持习惯，又能感受到学习的真正意义。

Web Speech API 网页语音 API

Wed, 03 Jul 2024 22:16:49 GMT

概述

Web Speech API（网页语音 API）是一组用于实现语音识别（Speech Recognition）和语音合成（Speech Synthesis）功能的浏览器 API。它允许开发者在网页上利用语音交互，使用户能够通过语音输入和语音输出与网页进行交互。

Web Speech API 提供了以下两个主要的功能模块：

语音合成（Speech Synthesis）：允许将文本转换为语音输出。通过使用 SpeechSynthesis 对象，网页可以将文本转换为语音，并播放出来。这个功能模块依赖于底层系统的语音合成引擎。
语音识别（Speech Recognition）：允许将用户的语音输入转换为文本。通过使用 SpeechRecognition 对象，网页可以监听用户的语音输入，并将其转换为文本，以便进行语音命令、语音搜索、语音填写表单等应用。这个功能模块依赖于底层系统的语音识别引擎。

技术文档

开始

语音合成

function speak(text) {
  let textContent = new SpeechSynthesisUtterance(text);
  speechSynthesis.speak(textContent);
}

属性

voice 设置将用于说出语音的声音，默认 getVoices() 方法获取当前设备支持的语音选项数组的第一个。
rate 设置将用于说出语音的速度，默认 1，范围 0-2。
pitch 设置将用于说出语音的音调，默认 1，范围 0-2。
volume 设置将用于说出语音的音量，默认1，范围 0-1。

完整示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="speak('hello world')">Speak</button>
    <select id="voiceSelect"></select>
  </body>

  <script>
    let utterance = new SpeechSynthesisUtterance("hello");
    let voices = [];
    let select = document.getElementById("voiceSelect");
    speechSynthesis.onvoiceschanged = function (event) {
      voices = speechSynthesis.getVoices();
      createVoiceOption(voices);
      
    };
    select.onchange = function () {
      utterance.voice = voices.find(
        (voice) => voice.name === select.selectedOptions[0].getAttribute("data-name")
      );
      utterance.lang = select.selectedOptions[0].getAttribute("data-lang");
    };
    function createVoiceOption(voices) {
      for (let i = 0; i < voices.length; i++) {
        const option = document.createElement("option");
        option.textContent = `${voices[i].name} (${voices[i].lang})`;
        if (voices[i].default) {
          option.textContent += " — DEFAULT";
        }
        option.setAttribute("data-lang", voices[i].lang);
        option.setAttribute("data-name", voices[i].name);
        document.getElementById("voiceSelect").appendChild(option);
      }
    }
    function speak(text) {
      utterance.text=text;
      speechSynthesis.speak(utterance);
    }
  </script>
</html>

语音识别

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>语音识别示例</title>
</head>
<body>
  <button id="startButton">开始识别</button>
  <div id="result"></div>

  <script>
    const startButton = document.getElementById('startButton');
    const resultDiv = document.getElementById('result');
    let recognition;

    // 创建 SpeechRecognition 对象
    if ('webkitSpeechRecognition' in window) {
      recognition = new webkitSpeechRecognition();
    } else if ('SpeechRecognition' in window) {
      recognition = new SpeechRecognition();
    } else {
      console.error('浏览器不支持语音识别功能');
    }

    // 配置识别参数
    recognition.continuous = true;
    recognition.lang = 'zh-CN'; // 设置识别语言，默认为浏览器语言

    // 识别结果回调
    recognition.onresult = function(event) {
      const transcript = event.results[event.results.length - 1][0].transcript;
      resultDiv.textContent = transcript;
      console.log(transcript)
    };

    // 开始识别
    startButton.addEventListener('click', function() {
      recognition.start();
    });
  </script>
</body>
</html>

Nodemailer 从 Node.js 发送电子邮件

Sun, 02 Jun 2024 15:22:10 GMT

概述

Nodemailer 是一个流行的 Node.js 库，用于发送电子邮件。它提供了一个简单而强大的方式来通过各种电子邮件服务和协议（如SMTP、IMAP、POP3）发送和接收电子邮件。Nodemailer 使您能够在 Node.js 应用程序中轻松集成电子邮件功能，无论是用于发送验证邮件、通知邮件、订阅服务还是其他用途。

Github 官方网站

开始

安装

npm install nodemailer

简单示例

const nodemailer = require('nodemailer');

// 创建一个SMTP传输器对象
const transporter = nodemailer.createTransport({
  host: 'smtpdm.aliyun.com',
  port: 25, // 默认SMTP端口 smtpdm.aliyun.com
  // 如果服务器需要身份验证，请提供用户名和密码
  //  auth: {
  //    user: 'sender@server.com',
  //    pass: 'XXXXXX',
  //  },
});

// 邮件选项
const mailOptions = {
  from: '"NickName" <sender@server.com>',
  to: "receiver@sender.com",
  subject: 'Test', //标题
  text: 'This is a test message', //文本内容
  html: "<b>Hello world?</b>", // html body
  attachments: [  //附件
    {
        filename: 'text1.txt',
        content: 'hello world!',
        path: './package.json'
    }
],
};

// 发送邮件
transporter.sendMail(mailOptions, (error, info) => {
  if (error) {
    console.log('Error sending email:', error);
  } else {
    console.log('Email sent:', info.response);
  }
});

要注意如果邮件选项里有 html 选项的内容那么 text 选项的内容会被覆盖，所以要二者选其一。

Mri 解析命令行参数

Tue, 07 May 2024 22:39:07 GMT

概述

这是一个快速轻量级的替代品，用于替代 [minimist](https://github.com/substack/minimist 和 yargs-parser 。

之所以存在这个工具，是因为大多数项目通常不需要 minimist 和 yargs-parser 提供的大多数功能。不过，mri 与它们相似，可能对你也可以作为“替代方案”来使用！

Github

开始

安装

npm install mri

简单示例

import mri from "mri";

const argsOptions: mri.Options = {
  boolean: ["h", "help", "v", "version"],
  string: ["host", "name", "cookieAge", "sessionAge","port"],
  alias: {
    v: "version",
    h: ["help"],
  },
  default: {
  },
};

const args = mri(process.argv.slice(2), argsOptions);

export default args;

node app.js --port=3001

游戏服务器数据传输优化

Sat, 20 Apr 2024 12:35:05 GMT

概述

在一些需要频繁跟服务器进行数据交换的场景，比如游戏服务器。假设一个玩家每秒要向服务器发送30次数据包，如果玩家站着不动，那么这一秒发送的30个数据包都是完全相同的数据，这样造成了大量的性能和宽带的浪费，针对这种情况，服务器会使用数据缓存技术来减少服务器和客户端之间的数据传输量。

开始

实现的方法主要就是通过：

在客户端缓存玩家的状态，当状态不变时，停止向服务器发送数据包，从而避免发送重复的数据。
在服务器端，通过缓存一些常用数据，每次给玩家发送新的数据包的时候对比这些数据是否发生改变，避免每次向玩家发送重复的数据，以减少发送数据包的大小，从而减少宽带占用。

但同时还要考虑到玩家丢包的情况，比如某位玩家在移动的时候发生了丢包，过了一秒后他的网络恢复正常，但是因为该名玩家少接收了30个包，实际获得的数据并非完整的数据，此时他的人物动画仍然是"跑步"的状态，但是他本人早已停止了移动，就出现了玩家没有移动，但是人物的动画却一直在原地"跑步"。

为了消除这样的影响，推荐每隔5秒就给所有玩家发送一次游戏完整的数据包，这样可以保证网络传输宽带最大化的利用的同时不造成过多的性能浪费。

diff 算法

在这里我们使用 jsondiffpatch 库来进行数据比对，jsondiffpatch 库是一个将两个 json 文档、文本、数组等进行对比，并生成diff、patch信息的 javascript 库，该库支持多种formatter格式输出。

安装：

npm install jsondiffpatch -S

使用方法：

const jsondiffpatch = require("jsondiffpatch");
let original = [
  {
    id: "1",
    status: "idle",
    x: 0,
    y: 0,
  },
  {
    id: "2",
    status: "idle",
    x: 100,
    y: 100,
  },
];

let modified = [
  {
    id: "1",
    status: "run",
    x: 999,
    y: 0,
  },
  {
    id: "2",
    status: "idle",
    x: 100,
    y: 100,
  },
];

function diffForArray(original, modified) {
  return modified.map((el) => {
    const data = original.find((o) => o.id === el.id);
    if (data) {
      const diff = jsondiffpatch.diff(data, el);
      if (diff) {
        return {
          id: el.id,
          ...jsondiffpatch.patch({}, diff),
        };
      } else {
        return {
          id: el.id,
        };
      }
    } else {
      return el;
    }
  });
}

console.log(diffForArray(original, modified)); //[{ id: "1", status: "run", x: 999 }, { id: "2" }];

蓝叠adb连接并配置网络代理

Sat, 02 Mar 2024 23:56:50 GMT

概述

有时候要抓取手机 APP 内的数据包，但是手机配置过于麻烦，所以选择使用安卓模拟器来进行调试。

开始

ADB 下载

蓝叠官网下载

蓝叠离线版下载

配置Adb环境

下载并解压ADB工具包到任意位置。
将ADB工具包的路径添加到系统环境变量 Path 中，方便在任意位置使用ADB命令。

启用蓝叠 ABD

打开蓝叠模拟器，进入设置。
在设置——高级中启用ADB开关，记下显示的地址（如127.0.0.1:55555）。

蓝叠开启 Android 调试

保存好后重启模拟器。

连接ADB到蓝叠

启动模拟器后，在命令提示符（cmd）中输入以下命令连接ADB：

adb connect localhost:[port]

替换 [port] 为前面记下的端口号。

连接成功后，使用以下命令查看连接状态：

adb devices

使用以下命令进入设备的ADB环境：

adb -s localhost:[port] shell

配置网络代理

连接成功后，可以通过ADB命令配置网络代理。注意，错误配置可能导致无法联网。

修改为指定代理

使用以下命令配置代理

settings put global http_proxy [ip]:[port]

恢复默认代理

如果需要恢复默认代理，使用以下命令

settings put global http_proxy :0

确认代理IP地址

代理的IP地址应为本机IP。可以通过以下命令查看本机IP

ipconfig /all

找到对应的IPv4地址，即为本机IP

测试网络连接

在模拟器内置浏览器中打开任意网页，确认网络连接是否正常。如有问题，可尝试切换不同的代理IP地址。

退出ADB

exit

编译带 CUDA 模块的 OpenCV

Mon, 19 Feb 2024 18:16:25 GMT

概述

众所周知，OpenCV 自带预编译的安装包，可是这个预编译的 OpenCV 不能很好地调用 GPU 进行运算，这导致了运行速度总是不尽人意。如果想要 OpenCV 更好地调用 GPU ，这需要在编译 OpenCV 的过程中添加对 CUDA 的支持。

因为CUDA 模块在 opencv_contrib 包中，所以在编译时还需要附带上与 opencv 版本一致的 opencv_contrib 源代码。

开始

需要的工具

CMake
Visual Studio
CUDA
CUDA Toolkit
OpenCV 源代码
opencv_contrib 源代码

具体步骤

首先需要把 OpenCV 和 opencv_contrib 的源代码解压在一个不包含中文和空格路径的文件夹内。
打开 CMake 把解压后 OpenCV 源代码的路径填在 Where is the source code 选项中。在 Where to build the binaries 选项中填入要生成二进制文件的路径，这里推荐在解压源代码的根目录创建一个 "build" 文件夹来作为生成目录。
接着点击 Configure 按钮，这时候会弹出一个选项框，这里选择你当前安装的Visual Studio 的版本，然后选择x64，选择完后点击Finish。
接着CMake就会开始第一次源码的配置，这个过程可能会比较慢，这是因为有一些文件需要从外部服务器下载，而这些文件国内的网络可能无法访问，你可以自行下载对应的文件并且在源代码根目录的 .cache 文件夹内自行替换。
如果下方日志打印出 Configuring done ，则代表第一次配置完成，接着我们在 CMake 的配置框中勾选：
- BUILD_CUDA_STUBS
- OPENCV_DNN_CUDA
- WITH_CUDA
- BUILD_opencv_world
这四个选项，接着在 OPENCV_EXTRA_MODULES_PATH 中填入 opencv_contrib 源代码根目录文件夹 modules 的路径。如果不需要的话，python 和 java 的绑定也可以取消勾选
再次点击 Configure 按钮开始第二次配置，等配置完成后，在配置中找到 CUDA_ARCH_BIN 的选项在里面填入你当前电脑显卡的计算系数。

可以在这里找到对应显卡的算力：Nvidia显卡算力表

注意一定只选择你当前显卡的算力，不要填写多个，否则等到了编译阶段，它会把每个架构都编译一遍。
等上述步骤都做完后就可以点击 Generate 按钮生成可以编译的文件，等生成完成后就可以点击 Open Project 按钮进入 Visual Studio 开始最终的编译阶段了。
在 Visual Studio 中，先将上方的 Debug 下拉框选为 Release ，接着在右侧资源管理器中找到 CMakeTargets 文件夹中的 ALL_BUILD，对其右键点击生成。等漫长的生成结束后在对着 INSTALL 右键选择“仅用于项目”——“仅生成INSTALL”。
等待编译结束后，编译好的文件就在 build 文件夹的 install 文件夹中。

制作 NPM 模板脚手架

Fri, 12 Jan 2024 18:06:02 GMT

概述

在平时进行新项目开发的时候，重新搭建项目目录费时又费力，而且这些内容还和旧项目的工作内容有很高的耦合度，为了提高开发效率，创建一个完整且高度可配置的脚手架会是一个明智的选择。

通过预定义的项目模板，其中包含了一系列已经配置好的文件、目录结构和依赖项，可以帮助我们快速启动新项目，省去手动搭建项目的繁琐步骤，同时保持项目结构的一致性以及代码规范。

开始

在这里参考了 vite 和 nuxt 的脚手架的实现原理。

package.json 配置参考

{
  "name": "template-framework",
  "version": "1.0.0",
  "description": "This is a create application framework.",
  "main": "index.js",
  "bin": {
    "create-template": "index.js",
   },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "fs-extra": "^11.1.1",
    "minimist": "^1.2.8"
  }
}

制作模板生成脚本

//index.js
#!/usr/bin/env node
const path = require('path')
const fs = require('fs-extra')
const argv = require('minimist')(process.argv.slice(2))

async function init() {
  const targetDir = argv._[0] || '.'
  const cwd = process.cwd()
  const root = path.join(cwd, targetDir)
  const renameFiles = {
    _gitignore: '.gitignore',
  }
  console.log(`Scaffolding project in ${root}...`)

  await fs.ensureDir(root)
  const existing = await fs.readdir(root)
  if (existing.length) {
    console.error(`Error: target directory is not empty.`)
    process.exit(1)
  }

  const templateDir = path.join(
    __dirname,
    `template-${argv.t || argv.template || 'default'}`
  )
  const write = async (file, content) => {
    const targetPath = renameFiles[file]
      ? path.join(root, renameFiles[file])
      : path.join(root, file)
    if (content) {
      await fs.writeFile(targetPath, content)
    } else {
      await fs.copy(path.join(templateDir, file), targetPath)
    }
  }

  const files = await fs.readdir(templateDir)
  for (const file of files.filter((f) => f !== 'package.json')) {
    await write(file)
  }

  const pkg = require(path.join(templateDir, `package.json`))
  pkg.name = path.basename(root)
  await write('package.json', JSON.stringify(pkg, null, 2))

  console.log(`\nDone. Now run:\n`)
  if (root !== cwd) {
    console.log(`  cd ${path.relative(cwd, root)}`)
  }
  console.log(`  npm install (or \`yarn\`)`)
  console.log(`  npm run dev (or \`yarn dev\`)`)
  console.log()
}

init().catch((e) => {
  console.error(e)
})

模板文件夹命名格式

template-default 默认模板
template-popular 这样的命名在后续安装时只需添加 --template popular 这样的命令选项即可指定模板风格。

测试

node index.js abc

如果成功创建 abc 文件夹则脚手架成功搭建。

如果你想要指定模板你可以这样

node index.js abc --template <NewTemplate>

<NewTemplate> 是指定的模板，这需要你创建相对于的文件夹。

测试没有问题后可以选择上传到 npm 中方便以后搭建

npm publish

上传到npm后可以选择使用 npx 进行部署也可以选择全局安装后调用 create-template 指令。

npx template-framework abc
#or
npm template-framework -g
create-template

推荐使用 npx 方法来进行模板的安装，因为这样可以保证安装的是最新的模板并且无需担心全局命令冲突的问题。

文件系统路由

Tue, 12 Dec 2023 19:15:55 GMT

概述

"文件系统路由" 通常是指将文件系统中的文件和文件夹映射到 Web 应用程序的不同 URL 路径，以便通过 Web 服务器来访问这些文件和文件夹。这是一种常见的用于构建静态网站或单页应用程序（SPA）的技术。

简单的文件路由算法实现

import express, { Router } from "express";
import fs from "fs";
import path from "path";
import  chalk from "chalk"
// 创建路由对象
const router: Router = express.Router();

// 用于存储已存在的路由路径
const existingPaths = new Set();

function loadRoutes(routeFolder: string, parentPath = "") {
  const files = fs.readdirSync(routeFolder);
  files.forEach(async (file) => {
    const filePath = path.join(routeFolder, file);
    const isDirectory = fs.statSync(filePath).isDirectory();
    if (isDirectory) {
      // 如果是文件夹，递归加载子文件夹中的路由文件
      let subfolder = path.join(parentPath, file);
      subfolder = subfolder.startsWith("/") ? subfolder : `/${subfolder}`;
      loadRoutes(filePath, subfolder);
    } else if ((file.endsWith(".js") || file.endsWith(".ts")) && !file.endsWith(".d.ts")) {
      // 如果是路由文件，导入并注册路由
      const routePath = path.parse(file).name === 'index' ? `${parentPath}` : `${parentPath}/${path.parse(file).name}`;
      // 检查是否存在重复路由路径
      if (existingPaths.has(routePath)) {
        console.warn(chalk.yellow("[Warning]"),`重复的路由路径: ${routePath} (${filePath})`);
        // 可以采取适当的措施来处理重复路径，如抛出异常或其他处理
      } else {
        existingPaths.add(routePath);
        const route = await import(filePath);
        router.use(routePath, route.router);
      }
    }
  });
}

// 调用函数开始递归加载路由文件
const routesFolderPath = path.join(__dirname, "routes");
loadRoutes(routesFolderPath);

router.use(apiLimiter);

export default router;

Tar 打包

Tue, 21 Nov 2023 22:06:44 GMT

概述

tar 是一个在 Unix 和类 Unix 操作系统上广泛使用的命令行工具，用于创建和管理归档文件（通常称为 "tarball"）。"tar" 实际上是 "tape archive" 的缩写，最初设计用于将多个文件和目录组合成单个归档文件，并且可以选择性地使用其他压缩程序（例如 gzip 或 bzip2）来对这些文件进行压缩。tar 命令通常用于在文件传输、备份和分发文件时创建和解压这些归档。

当然 Windows 系统也可以使用tar命令。

开始

tar 命令的基本语法如下：

tar [选项] [文件或目录]

一些常用的 tar 选项包括：

-c：创建新的 tar 归档。
-x：解压 tar 归档。
-f：指定归档文件的名称。
-v：显示详细的操作信息，通常用于查看正在执行的操作。
-z：在 tar 操作中使用 gzip 进行压缩。
-j：在 tar 操作中使用 bzip2 进行压缩。
-t：列出 tar 归档中的内容。

压缩

tar -zcvf  file.tar.gz filename

解压

tar -zxvf file.tar -C /home/dir

定时任务 node-schedule

Sun, 12 Nov 2023 16:12:32 GMT

概述

node-schedule 是一个用于 Node.js 的 JavaScript 库，它允许您在特定的时间点或按照预定的时间表执行任务。它的主要用途是在 Node.js 应用程序中执行定时任务，例如定时发送电子邮件、生成报告、清理临时文件等。

Github

开始

安装：

npm install node-schedule

简单示例

const schedule = require('node-schedule');

// 创建一个定时任务，每天的下午 2 点执行
const dailyJob = schedule.scheduleJob('0 14 * * *', function() {
    console.log('定时任务执行了！');
});

在上述示例中，我们首先导入了 node-schedule 模块，然后使用 scheduleJob 方法创建了一个定时任务。参数 '0 14 * * *' 是一个 Cron 表达式，表示每天的下午 2 点执行任务。当任务执行时，会输出一条消息。

除了基本的 cron 表达式之外，node-schedule 还支持其他更灵活的调度方式，您可以根据需要选择适合您应用程序的方法。

总的来说，node-schedule 是一个方便的工具，用于在 Node.js 应用程序中执行定时任务。它可以帮助你自动化重复的工作，提高应用程序的效率和可靠性。

键盘按键监听

Sun, 12 Nov 2023 08:06:00 GMT

概述

如果你想让你的页面监听你的键盘事件，你可以使用 window.addEventListener 函数来全局监听你的键盘事件，如果你想要单独监听某个 dom 的按键事件，你可以使用 document.getElementByID('yourDomId').addEventListener 来添加监听

示例

let left = {
  key: ["a", "A"],
  isDown: false,
  isUp: true,
  pressEvent: function (e, obj) {
    if (this.key.includes(e.key)) {
      this.isDown = true;
      this.isUp = false;
    }
  },
  releaseEvent: function (e, obj) {
    if (this.key.includes(e.key)) {
      this.isDown = false;
      this.isUp = true;
    }
  },
};

let keyboard = [left];

window.addEventListener("keydown", function (event) {
  keyboard.forEach((item) => {
    item.pressEvent(event, userInput);
  });
});

window.addEventListener("keyup", function (event) {
  keyboard.forEach((item) => {
    item.releaseEvent(event, userInput);
  });
});

时间库 Day.js

Sun, 12 Nov 2023 08:06:00 GMT

概述

Day.js 是一个极简主义的 JavaScript 库，它使用大部分与 Moment.js 兼容的 API 为现代浏览器解析、验证、操作和显示日期和时间。如果你使用 Moment.js，你已经知道如何使用 Day.js。

官方网站 Github

特性

🕒 熟悉的 Moment.js API 和模式
💪 不可变
🔥 链式操作
🌐 国际化支持
📦 2kb 迷你库
👫 支持所有浏览器

开始

安装

npm install dayjs --save

浏览器使用

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script>
  dayjs().format()
</script>

Node.js

//es5
const dayjs = require("dayjs");
//es6
import dayjs from 'dayjs';

当前时间

let now = dayjs();

格式化日期

dayjs().format() 
// 默认返回的是 ISO8601 格式字符串 '2020-04-02T08:02:17-05:00'

dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]') 
// 'YYYYescape 2019-01-25T00:00:00-02:00Z'

dayjs('2019-01-25').format('DD/MM/YYYY') // '25/01/2019'

支持的格式化占位符列表

占位符	输出	详情
`YY`	18	两位数的年份
`YYYY`	2018	四位数的年份
`M`	1-12	月份，从 1 开始
`MM`	01-12	月份，两位数
`MMM`	Jan-Dec	缩写的月份名称
`MMMM`	January-December	完整的月份名称
`D`	1-31	月份里的一天
`DD`	01-31	月份里的一天，两位数
`d`	0-6	一周中的一天，星期天是 0
`dd`	Su-Sa	最简写的星期几
`ddd`	Sun-Sat	简写的星期几
`dddd`	Sunday-Saturday	星期几
`H`	0-23	小时
`HH`	00-23	小时，两位数
`h`	1-12	小时, 12 小时制
`hh`	01-12	小时, 12 小时制, 两位数
`m`	0-59	分钟
`mm`	00-59	分钟，两位数
`s`	0-59	秒
`ss`	00-59	秒两位数
`SSS`	000-999	毫秒三位数
`Z`	+05:00	UTC 的偏移量，±HH:mm
`ZZ`	+0500	UTC 的偏移量，±HHmm
`A`	AM PM
`a`	am pm
...	...	其他格式 ( 依赖 `AdvancedFormat` 插件

常用的正则表达式

Tue, 17 Oct 2023 13:41:26 GMT

开始

匹配任意字符：([\s\S]*?)
匹配手机号码：/^1[3456789]\d{9}$/
匹配邮箱地址：/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
匹配身份证号码（18位）：/(^\d{17}[\dXx]$)/
匹配日期（YYYY-MM-DD）：/^\d{4}-\d{2}-\d{2}$/
匹配URL：/^https?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?$/
匹配邮政编码：/^[1-9]\d{5}$/
匹配IP地址：/^((25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|\d)\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|\d)$/
匹配整数：/^-?\d+$/
匹配浮点数：/^-?\d+(\.\d+)?$/
匹配字母和数字：/^[a-zA-Z0-9]+$/
匹配英文字母：/^[a-zA-Z]+$/
匹配大写字母：/^[A-Z]+$/
匹配小写字母：/^[a-z]+$/
匹配中文字符：/[\u4e00-\u9fa5]/
匹配只包含空白字符的字符串：/^\s*$/
匹配十六进制颜色值：/^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})$/
匹配邮箱用户名部分：/^[\w.-]+$/
匹配英文单词：/^[A-Za-z]+$/
匹配HTML标签（非贪婪模式）：/<.+?>/

正则表达式捕获组

Mon, 16 Oct 2023 12:39:59 GMT

概述

捕获组是正则表达式中用括号 () 包裹的部分，它允许你对匹配的文本进行分组。每一对括号都表示一个捕获组，它可以包含一个或多个字符，也可以包含其他正则表达式元字符。捕获组有以下几个主要用途：

特性

分组： 捕获组允许你将正则表达式的一部分组合在一起，并将其视为一个整体。这样，你可以在后续的模式中引用这个分组。

例如，(abc) 表示一个捕获组，匹配字符串中的 "abc"。
引用： 你可以在正则表达式或替换字符串中引用捕获组的内容。在大多数正则表达式引擎中，你可以使用 \1、\2、\3 等来引用第一个、第二个、第三个捕获组的内容。

例如，如果使用 (abc)(\d) 匹配 "abc123"，可以在替换字符串中使用 $1 来引用第一个捕获组（"abc"），使用 $2 来引用第二个捕获组（"123"）。
捕获匹配的部分： 当正则表达式匹配一个字符串时，捕获组允许你提取匹配的特定部分。

例如，对于正则表达式 (\d{3})-(\d{4})，如果匹配了字符串 "123-4567"，则第一个捕获组包含 "123"，第二个捕获组包含 "4567"。

在 Notepad 中，你可以在查找和替换中使用捕获组。在替换字符串中，你可以使用 $1、$2 等来引用捕获组。在查找中，你可以使用捕获组来定义模式。

简单示例

abc def ght

正则表达式

(abc)(.*?)(ght)

替换

\1 ??? \3
或者
$1 ??? $3

结果

abc ??? ght

跨域资源共享 CORS

Sun, 15 Oct 2023 12:32:44 GMT

概述

通过配置合适的响应头，可以明确指定允许的来源域、请求方法和头部信息。

Node.js 配置

app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

Nginx 配置

server {
    listen 80;
    server_name localhost; #你的域名
    root html;
    index index.html index.htm;

    add_header Access-Control-Allow-Origin "*";
    add_header Access-Control-Allow-Credentials "true";
    add_header Access-Control-Allow-Methods "PUT,POST,GET,DELETE,OPTIONS";
    add_header Access-Control-Allow-Headers "token,DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,XRequested-With";

    location / {
        proxy_pass http://localhost:3000; #你的代理服务
    }
}

SSL 证书自签

Tue, 19 Sep 2023 18:38:49 GMT

概述

SSL证书自签（Self-Signed SSL Certificate）是指由网站或个人自行创建和签名的SSL证书，而不是由可信任的第三方证书颁发机构（Certificate Authority）签发的证书。

自签证书在某些情况下可能有用，例如在本地开发环境中进行测试和调试，或在私有网络中建立加密通信。自签证书可以提供加密的传输，并验证服务器的身份，但由于它们不受第三方机构的信任，因此在公共网络环境中使用可能会出现浏览器警告问题。

自签证书的创建和签署可以使用不同的工具和命令，例如OpenSSL。

OpenSSL 官网 OpenSSL Github

预编译 OpenSSL 下载

一般步骤

生成私钥：使用工具生成一个私钥文件，这个私钥将用于后续步骤中的证书签名。
生成证书签名请求（CSR）：使用私钥生成一个CSR文件，其中包含了要在证书中包含的信息，例如域名、组织信息等。
自签证书签署：使用私钥和CSR文件，使用工具生成一个自签证书，该证书包含了与CSR文件中提供的信息相对应的数字签名。

开始

要实现自签名的 HTTPS 证书，你可以按照以下步骤进行操作：

生成私钥（private key）：首先，你需要生成一个私钥文件。使用 OpenSSL 工具可以执行此操作。在命令行中运行以下命令来生成私钥文件：

openssl genrsa -out private.key 2048`

这将生成一个名为 private.key 的私钥文件，其中 2048 是私钥的长度（可以根据需要进行调整）。

生成证书签名请求（Certificate Signing Request，CSR）：接下来，你需要生成一个证书签名请求文件，该文件将用于创建自签名证书。运行以下命令来生成 CSR 文件：

openssl req -new -key private.key -out csr.csr`

在生成 CSR 文件时，你将被要求提供一些相关信息，例如组织名称、组织单位、通用名称（域名）等。请根据你的情况提供正确的信息。

生成自签名证书：使用以下命令生成自签名证书：

openssl x509 -req -in csr.csr -signkey private.key -out certificate.crt

这将使用私钥和 CSR 文件生成一个自签名证书文件 certificate.crt。

配置服务器：将生成的私钥文件 private.key 和自签名证书文件 certificate.crt 配置到你的服务器上。具体配置方法取决于你使用的服务器软件（如 Apache、Nginx 等）。

例如，在使用 Nginx 服务器时，可以在配置文件中指定私钥和证书的路径，类似于：

server {
    listen 443 ssl;
    server_name your_domain.com;
    ssl_certificate /path/to/certificate.crt;
    ssl_certificate_key /path/to/private.key;
    ...
}

根据你的服务器配置和需求，进行适当的调整。

请注意，自签名证书在浏览器中可能会显示安全警告，因为它们不是由受信任的第三方机构签发。在实际生产环境中，为了获得受信任的证书，建议从受信任的证书颁发机构（CA）获取证书。

自签名证书通常适用于开发、测试环境或个人使用，而不适用于公共或生产环境。如果你需要在公共环境中使用 HTTPS，请考虑获得由受信任的证书颁发机构签发的证书。

请确保在生成自签名证书时，妥善保管私钥文件，以防止私钥泄露导致安全问题。

WebRTC 库 PeerJS

Mon, 28 Aug 2023 12:17:12 GMT

开始

安装

npm install peerjs

简单示例

import { Peer } from "peerjs";

const peer = new Peer("pick-an-id");

连接

const conn = peer.connect("another-peers-id");
conn.on("open", () => {
	conn.send("hi!");
});

收到

peer.on("connection", (conn) => {
	conn.on("data", (data) => {
		// Will print 'hi!'
		console.log(data);
	});
	conn.on("open", () => {
		conn.send("hello!");
	});
});

Base64 编码的字符串转换为 Blob 对象方法

Wed, 16 Aug 2023 19:32:20 GMT

概述

通过将 Base64 编码的文件数据进行转化，可以更好地进行数据的传输以及节省流量。

开始

const blob = function (data: string, mime: string) {
  data = data.split(',')[1];
  data = window.atob(data);
  let ia = new Uint8Array(data.length);
  for (var i = 0; i < data.length; i++) {
    ia[i] = data.charCodeAt(i);
  };
  return new Blob([ia], {
    type: mime
  });
};

TypeScript 项目文件命名及代码规范

Tue, 11 Jul 2023 20:16:50 GMT

概述

当开发 TypeScript 项目时，良好的文件命名和代码规范是非常重要的。它们不仅可以提高代码的可读性和可维护性，还能帮助团队成员更好地理解和协作开发。通过遵循一致的命名约定和编码规范，可以减少代码错误、改善代码的一致性，并为项目的可扩展性和可维护性奠定基础。

开始

文件命名：

TypeScript 声明文件的扩展名为 .d.ts。
入口文件通常命名为 index.ts，用于导出模块或启动应用程序。
模块文件应根据其功能或目的进行命名，例如 utils.ts、apiClient.ts 等。

代码规范：

使用驼峰命名法（camelCase）来命名变量、函数和方法。例如：myVariable、calculateTotal。
类名使用帕斯卡命名法（PascalCase）。例如：MyClass、UserService。
使用清晰、具有描述性的名称，使代码易于理解。
遵循一致的缩进和代码格式。通常使用 2 或 4 个空格进行缩进，并在代码块之间添加适当的空行和垂直间距。
使用强类型声明，并尽可能使用 TypeScript 的类型系统来提供静态类型检查。
在必要时添加注释来解释代码的用途、实现细节或注意事项。
遵循 SOLID 原则和其他软件工程最佳实践，如单一职责原则、依赖倒置原则等。
分离关注点，将代码分成逻辑模块、函数和类，以提高代码的可维护性和可测试性。

TypeScript 类型标注

Sun, 09 Jul 2023 12:25:31 GMT

概述

在现代软件开发中，静态类型检查成为了一项重要的工具，可以帮助开发人员在编码阶段捕获潜在的错误，提高代码的可靠性和可维护性。TypeScript 作为一种强类型的编程语言，为 JavaScript 代码提供了类型标注的能力，使开发人员能够明确指定变量、函数和对象的类型。

无论您是已经熟悉 JavaScript 并希望进一步提高代码质量，还是想要学习 TypeScript 并掌握其类型系统的知识，通过掌握类型标注的技巧，使我们能够编写更可靠、可维护和可扩展的代码。

优势

通过使用类型标注，您可以获得以下好处：

错误检测：TypeScript可以在编码阶段捕获潜在的类型错误，帮助您避免在运行时出现意外的错误。
代码提示：类型标注提供了更准确的代码提示和自动补全功能，提高了开发效率和代码可读性。
文档化代码：通过类型标注，您可以清楚地了解代码中每个变量、函数和对象的用途和预期行为，使代码更易于理解和维护。
重构支持：在重构代码时，类型标注可以帮助您更准确地修改和调整代码，减少引入错误的风险。

开始

函数的标注

使用别名

interface AddFunction {
  (a: number, b: number): number;
}
//or
type AddFunction = (a: number, b: number) => number;

const add: AddFunction = (a, b) => {
  return a + b;
};

不使用别名

const add = (a: number, b: number): number => {
  return a + b;
};
//or
function add(a: number, b: number): number {
  return a + b;
}

变量的标注

使用别名

interface Person {
  name: string;
  age: number;
  hobbies: string[];
  address: {
    street: string;
    number: number;
  };
}
//or
type Person = {
    name: string;
    age: number;
    hobbies: string[];
    address: {
      street: string;
      number: number;
    };
  };
  
const person: Person = {
  name: "John",
  age: 42,
  hobbies: ["Sports", "Cooking"],
  address: {
    street: "Main Street",
    number: 123,
  },
};

不使用别名

const person: {
  name: string;
  age: number;
  hobbies: string[];
  address: {
    street: string;
    number: number;
  };
} = {
  name: "John",
  age: 42,
  hobbies: ["Sports", "Cooking"],
  address: {
    street: "Main Street",
    number: 123,
  },
};

组合类型

interface Person {
  name: string;
  age: number;
}

type Employee = {
  company: string;
  position: string;
};

type EmployeePerson = Person & Employee;
//or
interface EmployeePerson extends Person, Employee {}

const employee: EmployeePerson = {
  name: "John",
  age: 30,
  company: "ABC Inc",
  position: "Manager",
};

泛型

泛型类型参数用于定义在接口、类或函数中使用的类型，可以在尖括号 <> 中指定。

interface Box<T> {
    value: T;
}
  
const box: Box<number> = { value: 42 };

在上述示例中，我们定义了一个名为 Box 的接口，它有一个泛型类型参数 T。通过将 T 指定为 number，我们创建了一个 Box<number> 类型的变量 box，它的 value 属性的类型为 number。

多个泛型

interface Pair<T, U> {
  first: T;
  second: U;
}

const pair: Pair<number, string> = {
  first: 1,
  second: "2",
};

打字动画 Typed.js

Sun, 18 Jun 2023 18:06:10 GMT

概述

Typed.js 是一个 JavaScript 库，用于在网页上创建打字动画效果。

官方网站 Github

开始

CDN

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

NPM

npm install typed.js

General ESM Usage

import Typed from 'typed.js';

const typed = new Typed('#element', {
  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
  typeSpeed: 50,
});

HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
</head>
<body>
  <h1><span id="typed"></span></h1>

  <script>
    // 初始化 Typed.js
    var typed = new Typed('#typed', {
      strings: ['Hello, World!', 'Welcome to Typed.js'],
      typeSpeed: 50,
      backSpeed: 30,
      loop: true
    });
  </script>
</body>
</html>

常用属性

strings：一个字符串数组，包含要展示的文本内容。
typeSpeed：打字速度，表示每个字符输入的延迟时间（以毫秒为单位）。
startDelay：动画开始之前的延迟时间（以毫秒为单位）。
backSpeed：删除速度，表示每个字符删除的延迟时间（以毫秒为单位）。
backDelay：每次删除完成后的等待时间（以毫秒为单位）。
loop：一个布尔值，指示动画是否应该循环播放。
loopCount：限制循环播放的次数。
showCursor：一个布尔值，指示是否显示光标。
cursorChar：光标的字符。
cursorSpeed：光标闪烁的速度（以毫秒为单位）。
smartBackspace：一个布尔值，指示是否启用智能删除，根据回退速度自动调整删除时间。
shuffle：一个布尔值，指示是否在打字之前随机打乱字符串数组。
contentType：指定输入的内容类型，可以是 'html'、'text' 或 'null'。
onComplete：动画完成时的回调函数。

Pixi.js 开发者工具

Sun, 21 May 2023 13:38:11 GMT

概述

用于调试使用PixiJS编写的游戏和应用程序的浏览器扩展。

特征

显示场景图
查看和编辑属性
在大纲中双击以 console.log 节点
在视口中勾勒出活动节点的轮廓。
活动节点在开发者控制台中可用，如下所示$pixi
在视口中右键单击（或按住 Alt 单击）以激活节点

安装

从以下位置安装 PixiJS Devtools：

用法

PixiJS

在您的代码_中找到PIXI.Application创建实例的位置，它看起来像这样：

import { Application } from "pixi.js";

const app = new Application(...)

通过添加以下行公开app给PixiJS Devtools ：

globalThis.__PIXI_APP__ = app;

或者取决于您的 TypeScript 和 ESLint 配置：

(globalThis as any).__PIXI_APP__ = app; // eslint-disable-line

自定义设置？

如果你不使用PIXI.Application或Phaser.Game？您可以手动指定根节点：

globalThis.__PIXI_STAGE__ = yourContainer;

并启用突出显示和选择视口中的节点添加：

globalThis.__PIXI_RENDERER__ = yourRenderer;

服务架构的选择

Sun, 23 Apr 2023 22:06:10 GMT

概述

随着前端框架迅速发展，前后端分离和单页应用已成为开发行业的大趋势。它们带来了更好的开发效率、更灵活的架构设计以及更好的用户体验。

但同样的，单页面应用也有着一些不容忽视的缺点，如何通过优化不同使用场景架构来解决这些问题，也是当代开发者需要面临的一个挑战。

开始

在这个以流量为王的时代，单页面应用因为页面是由 JavaScript 实时生成的，这对于只默认爬取网页源代码，不执行JS逻辑的爬虫来说，意味着如果你的内容是通过JS加载，则爬虫爬取不到。

虽然谷歌更新了爬虫策略，对单页面网站的爬取进行了专门的优化。但是并非所有的搜索引擎都能很好地进行单页面网站的爬取，加上国内的搜索引擎生态，作为国内最大的搜索引擎的百度仍然不能很好地支持单页面的爬取，这使得国内开发者在进行单页面应用的开发时，对于 SEO 的优化始终是一个绕不过去的课题。

那肯定有人说：“那我写需要搜索引擎爬取的网站时候使用多页面进行开发，不需要搜索引擎收录的再用单页面不就行了吗? ”

虽然确实可以这样做，但是之所以单页面应用成为前端开发的主流，正是因为 Vue 和 Angular 这样的前端框架提供了丰富的工具和组件，简化了前端开发的复杂性，加上其强大的渲染能力、数据绑定和组件化等特性，使得开发人员可以更高效地构建现代化的用户界面。

无论是对比开发效率、性能开销还是项目规模，单页面应用相较于多页面应用都有着无可比拟的优势。也正是如此，为了迎合国内搜索引擎的生态而放弃使用前沿的技术，颇有点因噎废食的感觉。但同样，作为开发者的我们很难改变国内搜索引擎对单页面网站的态度。

那么既然无法改变环境就学会适应环境，让单页面应用也支持服务端渲染也是一个不错的选择。通过在服务器中实时运行单页面应用，在用户访问时将渲染好的单页面再发送给用户，这样保证了搜索引擎也能很好地识别网站内容，也保留了单页面开发的优势。虽然缺点可能就是加大了服务器负载，但也不是太大的问题。

同时我们还要知道，任何事都不是绝对的，并不是用了服务器渲染就不能用客户端渲染了，这二者可以相结合，通过在每级路由进行灵活的配置，实现混合渲染。这样指定哪些地址使用客户端渲染，哪些地址使用服务器渲染，可以最大化发挥服务器和客户端的性能，甚至解决单页面首屏加载慢的问题。

不同的应用场景可以选择不同的服务架构的搭配，像是搭建博客网站，为了更好地支持 SEO ，往往需要在服务器中进行页面的渲染。但是如果是一个后台管理系统，那么使用单页面来进行交互，会是一个非常优质的选择。

客户端渲染

常见使用场景：后台管理系统、游戏。

使用需求：不需要 SEO、节省服务器性能、更快的响应速度。

劣势：不能很好地被搜索引擎收录。

服务端渲染

常见使用场景：博客网站、媒体网站。

使用需求：需要 SEO。

劣势：增加了服务器性能的开销、新增功能需要重新打包发布。

混合渲染

常见使用场景：游戏网站、购物网站、工具类网站。

使用需求：需要 SEO、新增功能可以不重新打包发布。

劣势：增加了项目复杂度。

在Node.JS中使用OpenCV库

Mon, 20 Mar 2023 18:32:57 GMT

安装opencv4nodejs库，在此之前你要先确定你的电脑里已经安装过OpenCV库，如果没有就先去安装OpenCV库。

npm install @u4/opencv4nodejs -S

方法一：使用"build-opencv"来构建

在package.json里添加以下内容，里面的路径填你安装OpenCV的位置

"scripts": {
  "build": "build-opencv --incDir E:\\opencv\\build\\include --libDir E:\\opencv\\build\\x64\\vc16\\lib --binDir E:\\opencv\\build\\x64\\vc16\\bin --nobuild rebuild"
  },

保存后在命令行输入

npm run build

等待build-opencv完成构建后再打开package.json，添加以下内容

  "opencv4nodejs": {
    "disableAutoBuild": "1"
  }

保存后即可使用

方法二：使用"npm link"来连接

在package.json里添加以下内容，里面的路径填写你安装OpenCV的位置

  "opencv4nodejs": {
    "disableAutoBuild": "1",
    "OPENCV_INCLUDE_DIR": "E:\\opencv\\build\\include",
    "OPENCV_LIB_DIR": "E:\\opencv\\build\\x64\\vc16\\lib",
    "OPENCV_BIN_DIR": "E:\\opencv\\build\\x64\\vc16\\bin"
  }

保存后在命令行输入

npm link
build-opencv --nobuild rebuild

等待指令结束就可以愉快地在Node.JS里运行OpenCV了

解构赋值语法

Fri, 03 Mar 2023 19:14:43 GMT

概述

解构赋值语法（destructuring assignment）是 ECMAScript 6（ES6）引入的新特性，允许我们从数组或对象中提取值并将其赋值给变量。它可以简化代码，并提供了一种方便的方式来访问和使用复杂数据结构的值。

解构赋值的语法有两种形式：数组解构和对象解构。

示例

数组解构

const [a, b, c] = [1, 2, 3];
console.log(a); // 输出 1
console.log(b); // 输出 2
console.log(c); // 输出 3

对象解构

const { name, age } = { name: 'John', age: 30 };
console.log(name); // 输出 'John'
console.log(age); // 输出 30

在数组解构中，我们使用方括号 [] 将要提取的值括起来，并将其赋值给相应的变量。在对象解构中，我们使用花括号 {} 将要提取的属性括起来，并将其赋值给相应的变量。

解构赋值语法可以用于函数参数、对象属性的提取、嵌套结构的解构等场景，使得代码更简洁、可读性更高，并且能够轻松地从复杂的数据结构中提取所需的值。

解构对象重新命名

在解构赋值语法中，可以使用冒号 : 来为解构出的变量重新命名。

在数组解构中，可以使用重新命名的方式

const [a, b, c] = [1, 2, 3];
const [x, y, z] = [4, 5, 6];
console.log(a); // 输出 1
console.log(x); // 输出 4

在对象解构中，可以使用冒号来重新命名

const { name: firstName, age: userAge } = { name: 'John', age: 30 };
console.log(firstName); // 输出 'John'
console.log(userAge); // 输出 30

在上述示例中，我们使用冒号 : 将原本的变量名和新的变量名进行分隔，左边是原始的变量名，右边是重新命名后的变量名。

通过这种方式，我们可以灵活地为解构出的变量指定新的名称，以便更好地符合代码的语义和需求。

RobotJS截取屏幕screen.capture踩坑

Mon, 20 Feb 2023 14:32:41 GMT

起因

调用 robot.screen.capture() 或 robot.screen.capture(0,0,1920,1080)，返回的Bitmap对象是色彩格式是BGR色彩,这导致了如果未经处理就直接生成图像，色彩会产生错误，

处理方法

只需将BGR色彩转换成RGB色彩即可。

const robot = require('robotjs');
const jimp = require("jimp");

const swapRedAndBlueChannel = bmp => {
    for (let i = 0; i < (bmp.width * bmp.height) * 4; i += 4) { // swap red and blue channel
        [bmp.image[i], bmp.image[i + 2]] = [bmp.image[i + 2], bmp.image[i]]; // red channel;
    }
};

const screenshot = robot.screen.capture();
swapRedAndBlueChannel(screenshot);
const screenJimp = new jimp({ data: screenshot.image, width: screenshot.width, height: screenshot.height });

screenJimp.write('screenshot.png');

如果你有使用OpenCV，则可以使用“COLOR_BGR2RGB”函数直接转换

const cv = require('@u4/opencv4nodejs');
const robot = require('robotjs');
const jimp = require("jimp");


const screenshot = robot.screen.capture();
const screenJimp = new jimp({ data: screenshot.image, width: screenshot.width, height: screenshot.height });

screenJimp.getBuffer(jimp.MIME_PNG, function (err, buffer) {
    if (err) {
        return;
    }
    const screen = cv.imdecode(Buffer.from(buffer)).cvtColor(cv.COLOR_BGR2RGB);
    console.log(screen)
});

NPM 管理包

Sun, 05 Feb 2023 10:12:08 GMT

概述

当今的软件开发领域充满了各种强大的工具和库，而在这个丰富的生态系统中，NPM（Node Package Manager）无疑是最受欢迎和广泛使用的代码包管理工具之一。无论是前端开发、后端开发还是构建工具，NPM都扮演着至关重要的角色。

在过去，开发人员往往需要手动下载和管理各种依赖项，而且随着项目规模的增长，这种方式变得非常繁琐且容易出错。NPM的出现极大地简化了这个过程，使开发人员能够轻松地安装、更新和管理依赖项。

官方网站

开始

npm login

上传包

npm publish

删除包

前提你是包的作者，并且包上传的时间不超过 24 小时。

npm unpublish <package-name>[@<version>]

如果你不加版本删除包则会删除所有版本，这是一个危险的操作，并且会提示不能直接删除。

如果你想要真的想要删除整个项目，可以在命令中加入 --force 参数。但是，需要注意的是，这将删除整个项目，包括项目中的所有包和文件，这是一个危险操作，请确保你了解操作的后果。

npm unpublish <package-name>[@<version>] --force

注意：默认情况下，npm 允许在发布后的 24 小时内删除包。如果包已过期或发布时间超过 24 小时，则无法直接删除。在这种情况下，你可以通过与 npm 支持团队联系，请求他们删除该包。

NPM 安装生产环境依赖

Sat, 04 Feb 2023 13:42:23 GMT

概述

默认情况下，npm install 将安装列为依赖项的所有模块 package.json。

使用 --production 标志（或将 NODE_ENV 环境变量设置为 production）时，npm 将不会安装中列出的模块 devDependencies。

注意：将 --production 依赖项添加到项目时，该标志没有特殊含义。

开始

npm install --production

NPM 包安装策略

Sat, 04 Feb 2023 10:12:08 GMT

概述

在 npm 中，"安装策略"（Installation Strategy）是指用于解析和管理包的依赖项的方法和规则。

开始

install-strategy

默认值："hoisted"

Default: "hoisted"
类型："hoisted"、"nested"、"shallow" 或 "linked"

Type: "hoisted", "nested", "shallow", or "linked"

设置在 node_modules 中安装包的策略。提升（默认）：在顶层安装非复制，并在目录结构中根据需要复制。嵌套：（以前的 --legacy-bundling）安装到位，无需吊装。浅层（以前的 --global-style）只在顶层安装直接的 deps。链接：（实验性）安装在 node_modules/.store 中，链接到位，未提升。

Sets the strategy for installing packages in node_modules. hoisted (default): Install non-duplicated in top-level, and duplicated as necessary within directory structure. nested: (formerly --legacy-bundling) install in place, no hoisting. shallow (formerly --global-style) only install direct deps at top-level. linked: (experimental) install in node_modules/.store, link in place, unhoisted.

简单示例

npm install --install-strategy=shallow <package-name>

通过这个指令 npm 使用浅层安装策略，类似于以前的 global-style 选项的行为。它可以将指定包以及它的所有依赖放到同一个文件夹内，而不是平铺在 node_modules 中。

Node.js 批量下载文件

Fri, 20 Jan 2023 14:18:21 GMT

概述

在平时如果遇到需要批量下载连续的文件，我们可以写一段脚本，让其自动下载。

开始

const fs = require("fs");
const request = require("request");

const syncDownload = (url, path) => {
  return new Promise((resolve) => {
    let writeStream = fs.createWriteStream(path);
    let readStream = request(url);
    readStream.pipe(writeStream);
    readStream.on("end", function (err) {
      if (err) {
        console.log(err);
        resolve("err");
        return;
      }
      resolve("ok");
    });
  });
};
const errs = [];
//需要爬取的数据
const data = [
  {
    url: "",
    filename: "",
  },
];
async function downloadFile() {
  for (let i = 0, length = data.length; i < length; i++) {
    let result = await syncDownload(data[i].url, `./save/${data[i].filename}`);
    if (result === "ok") {
      console.log(`第 ${i + 1} 个文件下载成功`);
    } else {
      console.log(`第 ${i + 1} 个文件下载失败！！！`);
      errs.push(data[i]);
    }
  }
  console.log(errs);
  console.log(`共有 ${errs.length} 个文件下载失败`);
}
downloadFile();

数组遍历

Thu, 12 Jan 2023 18:56:50 GMT

forEach

forEach()方法用于遍历数组中的每个元素，对每个元素执行指定的操作。与 map() 不同的是，forEach()不会返回一个新的数组，而是直接对原始数组进行操作。

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(num) {
  console.log(num);
});

// Output:
// 1
// 2
// 3
// 4
// 5

map

map()方法是用于对数组中的每个元素进行转换，返回一个新的数组，该数组包含了每个元素被转换后的结果。具体来说，map()方法会遍历原始数组中的每个元素，将每个元素传递给回调函数进行处理，并将处理后的结果添加到新的数组中。原始数组不会被改变。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function (num) {
  return num * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

filter

filter()方法是用于从数组中筛选出满足特定条件的元素，返回一个新的数组，该数组包含了符合条件的元素。具体来说，filter()方法会遍历原始数组中的每个元素，将每个元素传递给回调函数进行处理，如果回调函数返回 true，则该元素会被添加到新的数组中。原始数组不会被改变。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function (num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

find

find()方法会返回数组中第一个满足给定测试函数的元素的值，否则返回 undefined

find()方法接受一个回调函数作为参数，该回调函数接受三个参数：

element：当前遍历到的数组元素。
index（可选）：当前元素的索引。
array（可选）：正在操作的数组。

回调函数应该返回一个布尔值。如果返回 true，则 Array.prototype.find() 方法会返回当前遍历到的元素，如果没有找到满足条件的元素，则返回 undefined。

const array = [1, 2, 3, 4, 5];
const found = array.find(element => element === 3);
console.log(found); // 3

for...of

for...of 是 JavaScript 中一种用于遍历可迭代对象的语法结构。它提供了一种更简洁、直观的方式来遍历数组、字符串、集合等可迭代对象的元素。

// 遍历数组
const myArray = [1, 2, 3];
for (const element of myArray) {
  console.log(element);
}

// 遍历字符串
const myString = 'Hello';
for (const char of myString) {
  console.log(char);
}

for...of 循环本身不提供直接的索引（index）访问。但可以通过结合使用数组的 entries 方法和解构赋值来获取索引和元素。

const myArray = ['a', 'b', 'c'];

for (const [index, element] of myArray.entries()) {
  console.log(`Index: ${index}, Element: ${element}`);
}

页面滚动元素动画 Aos.js

Tue, 15 Nov 2022 10:52:01 GMT

概述

滚动时为页面上的元素设置动画的小型库。

Github 示例

开始

🌟 示例

👉 为了更好地理解这实际上是如何工作的，我鼓励您查看关于 CSS-tricks 的帖子。

⚙ 安装

基本的

在中添加样式<head>：

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

在关闭标签之前添加脚本</body>，并初始化 AOS：

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

使用包管理器

安装 aos 包：

yarn add aos@next
# or
npm install --save aos@next

导入脚本、样式并初始化 AOS：

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();

为了使其正常工作，您必须确保您的构建过程已配置样式加载器，并将其全部正确捆绑。但是，如果您使用的是Parcel，它将按照提供的方式开箱即用。

🤔 如何使用它？

1. 初始化AOS：

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

2. 使用属性设置动画`data-aos`：

  <div data-aos="fade-in"></div>

并使用data-aos-*属性调整行为：

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

查看所有动画、缓动和锚点放置的完整列表

锚

还有一个设置只能在每个元素的基础上使用：

data-aos-anchor- 其偏移量将用于触发动画而不是实际动画的元素。

例子：

<div data-aos="fade-up" data-aos-anchor=".other-element"></div>

通过这种方式，您可以在一个元素上触发动画，同时滚动到另一个元素 - 这对于为固定元素设置动画很有用。

应用程序接口

AOS 对象作为全局变量公开，目前有以下三种方法可用：

init- 初始化 AOS
refresh- 重新计算元素的所有偏移量和位置（在调整窗口大小时调用）
refreshHard- 使用 AOS 元素和触发器重新初始化数组refresh（调用与元素相关的 DOM 更改aos）

执行示例：

AOS.refresh();

默认情况下，AOS 正在监视 DOM 更改，如果有任何异步加载的新元素，或者当某些内容从 DOM 中删除时，它会refreshHard自动调用。IE等不支持的浏览器MutationObserver可能需要AOS.refreshHard()自己调用。

refresh方法在调整窗口大小等时被调用，因为它不需要使用 AOS 元素构建新商店并且应该尽可能轻。

JS事件

aos:in AOS 在 document: 和 aos:out 任何元素动画进出时调度两个事件，以便您可以在 JS 中做额外的事情：

document.addEventListener('aos:in', ({ detail }) => {
  console.log('animated in', detail);
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('animated out', detail);
});

您还可以通过设置属性告诉 AOS 在特定元素上触发自定义事件data-aos-id：

<div data-aos="fade-in" data-aos-id="super-duper"></div>

然后您将能够收听两个自定义事件：

aos:in:super-duper
aos:out:super-duper

秘诀：

添加自定义动画：

有时内置动画还不够。假设您需要一个盒子来根据分辨率设置不同的动画。您可以这样做：

[data-aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;

  &.aos-animate {
    opacity: 1;
  }

  @media screen and (min-width: 768px) {
    transform: translateX(100px);

    &.aos-animate {
      transform: translateX(0);
    }
  }
}

然后在 HTML 中使用它：

<div data-aos="new-animation"></div>

该元素只会在移动设备上动画不透明度，但从 768px 宽度开始，它也会从右向左滑动。

添加自定义缓动：

与动画类似，您可以添加自定义缓动：

[data-aos] {
  body[data-aos-easing="new-easing"] &,
  &[data-aos][data-aos-easing="new-easing"] {
    transition-timing-function: cubic-bezier(.250, .250, .750, .750);
  }
}

自定义默认动画距离

内置动画的默认距离是 100px。不过，只要您使用的是 SCSS，就可以覆盖它：

$aos-distance: 200px; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss';

但是，您必须配置构建过程以允许它预先导入样式 node_modules。

集成外部CSS动画库（如Animate.css）：

用于animatedClassName更改 AOS 的默认行为，以应用放置在滚动中的类名data-aos。

<div data-aos="fadeInUp"></div>

AOS.init({
  useClassNames: true,
  initClassName: false,
  animatedClassName: 'animated',
});

上面的元素将得到两个类：animated和fadeInUp。使用以上三个设置的不同组合，您应该能够集成任何外部 CSS 动画库。

然而，外部库并不太关心实际动画之前的动画状态。因此，如果您希望这些元素在滚动之前不可见，您可能需要添加类似的样式：

[data-aos] {
  visibility: hidden;
}
[data-aos].animated {
  visibility: visible;
}

注意事项：

设置：`duration`,`delay`

持续时间和延迟接受从 50 到 3000 的值，步长为 50 毫秒，这是因为它们是由 css 处理的，并且为了不使 css 比它已经存在的时间更长，我只实现了一个子集。我相信这些应该涵盖大多数情况。

如果没有，您可以编写简单的 CSS 来添加另一个持续时间，例如：

  body[data-aos-duration='4000'] [data-aos],
  [data-aos][data-aos][data-aos-duration='4000'] {
    transition-duration: 4000ms;
  }

此代码将添加 4000 毫秒持续时间，供您在 AOS 元素上设置，或在初始化 AOS 脚本时设置为全局持续时间。请注意 double [data-aos][data-aos]- 这不是一个错误，它是一个技巧，使个人设置比全局设置更重要，而不需要在那里写丑陋的“！重要”:)

用法示例：

  <div data-aos="fade-in" data-aos-duration="4000"></div>

Nginx 负载均衡

Mon, 07 Nov 2022 15:37:24 GMT

概述

在 Nginx 中，负载均衡可以通过使用其内置的负载均衡模块来实现。Nginx 提供了多种负载均衡策略，如轮询（Round Robin）、IP 哈希（IP Hash）、最少连接（Least Connections）等。

开始

下面是一种基本的配置示例，演示了如何使用 Nginx 实现负载均衡：

http {
    upstream backend {
        server backend1.example.com;
        server backend2.example.com;
        server backend3.example.com;
    }

    server {
        listen 80;
        server_name example.com;

        location / {
            proxy_pass http://backend;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
        }
    }
}

上述配置示例中，upstream 块定义了后端服务器的列表，可以通过添加多个 server 来指定不同的后端服务器。然后，在 location 块中，使用 proxy_pass 指令将请求代理到后端服务器，实现负载均衡。proxy_set_header 指令用于设置一些 HTTP 请求头信息，以便将请求正确地传递给后端服务器。

此外，你还可以根据需求选择适合的负载均衡策略。例如，如果要基于客户端的 IP 地址进行负载均衡，可以使用 IP 哈希策略：

nginxCopy code

upstream backend {
    ip_hash;
    server backend1.example.com;
    server backend2.example.com;
    server backend3.example.com;
}```

上述配置中的 `ip_hash` 指令将根据客户端的 IP 地址将请求发送到相同的后端服务器，从而实现会话保持。

这只是负载均衡的一个简单示例，Nginx 还提供了更多高级的负载均衡配置选项，如权重调整、健康检查、负载均衡器的备份服务器等。你可以根据自己的需求进一步探索和配置。

纯静态服务器配置

Sat, 11 Jun 2022 18:40:09 GMT

概述

仅提供静态内容（如HTML、CSS、JavaScript、图像等），不支持动态内容或服务器端脚本的服务器。

优点：

高性能：不需要处理动态内容生成和数据库查询等复杂操作，具有卓越的性能和响应速度。
简单：服务器的配置和部署通常相对简单，不需要配置数据库连接或处理服务器端脚本语言的环境。使得更易于维护和管理。

缺点：

功能有限：纯静态服务器无法提供动态内容或实时数据处理。只能呈现预先生成的静态文件，无法根据用户请求或其他外部条件进行个性化响应。
缺乏交互：无法实现复杂的用户操作，如用户登录、表单提交等。
更新和维护困难：对于频繁更新的内容，例如新闻文章、博客等，纯静态服务器可能需要手动更新静态文件并重新部署才能使更改生效。

使用场景

游戏宣传页、下载站、个人简历、CDN服务。

如何实现

常见的做法是使用 Web 服务器来进行静态服务器的部署，通过转发特定端口的静态资源服务来进行。

例如：

使用 Express

import express from "express";

const app = express(); // 创建 express 应用
app.use(express.static("public")); // 配置静态文件目录，用于提供静态资源

const port = 3000;

// 监听指定端口
app.listen(port, () => {
  console.log(`服务在 ${port} 端口运行`);
});

使用 Nginx

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    gzip on;

    server {
        listen 80;
        server_name localhost; #你的域名
        root html;
        index index.html index.htm;
        location / {
            proxy_pass http://localhost:3000; #你的代理服务
        }
    }
}

使用js来执行“置换”：给定N和k，列出所有置换

Fri, 18 Mar 2022 11:41:21 GMT

开始

使用js来执行“置换”：给定N和k，列出所有置换
-例如，N=4，k=3:123124132134142143213214，。。。432（其中有24个）

var replacement = (N, k) => {
    let result = [];
    if (N < 0) {
        console.log('N值不能为负数')
    } else if (k < 1) {
        console.log('k值不能为0和负数')
    } else if (k > N) {
        console.log('k值不能大于置换长度')
    } else {
        //将N值转化为数组
        let data = []
        for (let i = 1; i <= N; i++) {
            data.push(i)
        }
        //构建多叉树树干
        getBranch(data).map((p) => {
            //开始遍历
            dataToTree(getBranch(p.data), 0, [p.index]);
        })
    }
    //获取当前分支下可置换数组
    function getBranch(arr) {
        let data = []
        for (let i = 0; i < arr.length; i++) {
            let data_copy = JSON.parse(JSON.stringify(arr));
            let index = data_copy.splice(i, 1)
            data.push({
                index: index[0],
                data: data_copy
            })
        }
        return data;
    }
    //多叉树
    function dataToTree(d, t, e) {
        //d为数据,t为次数,e为遍历继承的数据
        //多叉树构建深度
        if (t < k - 1) {
            d.map((p) => {
                if (p.data.length >= 1) { //如果还有分支就再次遍历
                    let e2 = JSON.parse(JSON.stringify(e));
                    let t2 = t + 1;
                    e2.push(p.index)
                    dataToTree(getBranch(p.data), t2, e2)
                } else { //没有了就将结果放入result数组
                    let e2 = JSON.parse(JSON.stringify(e));
                    e2.push(p.index)
                    result.push(e2);
                }
            });
        } else {
            result.push(e);
        }
    }
    return result;
}
//示例
var replaceResult = replacement(4, 3)
console.log(replaceResult)

二维码生成 QRCode.js

Thu, 18 Nov 2021 17:58:16 GMT

概述

如果你需要在浏览器中生成二维码，你可以尝试使用 QRCode.js 。

Github

开始

<div id="qrcode"></div>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
</script>

或者添加一些选项

<div id="qrcode"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
	text: "http://jindo.dev.naver.com/collie",
	width: 128,
	height: 128,
	colorDark : "#000000",
	colorLight : "#ffffff",
	correctLevel : QRCode.CorrectLevel.H
});
</script>

你可以使用一些方法

qrcode.clear(); // 清除二维码.
qrcode.makeCode("http://naver.com"); // 重新生成其他二维码.

倒计时功能

Sun, 15 Aug 2021 14:55:23 GMT

开始

原生写法：

const laborDayTime = new Date("5 1,2023").getTime();
setInterval(() => {
  let nowDayTime = new Date().getTime();
  let remainingTime = getRemainingTime(laborDayTime - nowDayTime);
  console.log(`距离距离五一还有:${remainingTime}`);
}, 1000);

function getRemainingTime(time) {
  let day = getDateTimeDay(time);
  let hours = getDateTimeHour(time);
  let minutes = getDateTimeMinute(time);
  let seconds = getDateTimeSecond(time);
  return `${day}天${hours}小时${minutes}分${seconds}秒`;
}
function getDateTimeSecond(time) {
  return Math.floor(time / 1000) % 60;
}
function getDateTimeMinute(time) {
  return Math.floor((time / (60 * 1000)) % 60);
}
function getDateTimeHour(time) {
  return Math.floor((time / (60 * 60 * 1000)) % 24);
}
function getDateTimeDay(time) {
  return Math.floor(time / (24 * 60 * 60 * 1000));
}

使用moment.js写法：

var moment = require('./js/moment.js');
const laborDayTime =moment("2023-05-01 00:00:00.000")
setInterval(function () {
let remainingTime = moment.duration(laborDayTime.diff(moment()))
console.log(`距离距离五一还有:${remainingTime._data.days}天${remainingTime._data.hours}小时${remainingTime._data.minutes}分${remainingTime._data.seconds}秒`);
}, 1000);

深拷贝和浅拷贝

Thu, 24 Jun 2021 21:50:05 GMT

概述

在 JavaScript 中，深拷贝和浅拷贝是用来复制对象或数组的两种不同方式

浅拷贝：

创建一个新的对象或数组，但只复制了原始对象或数组的引用。新对象与原对象共享相同的内存地址，因此对新对象的修改也会影响到原对象。
浅拷贝只复制了对象或数组的第一层结构，对于嵌套的对象或数组，仍然是共享引用关系。

深拷贝：

创建一个全新的对象或数组，复制了原始对象或数组的所有嵌套属性和值，而不仅仅是引用。
深拷贝会递归遍历原对象或数组的所有层级，将每个属性或元素复制到新对象或数组中。

动画插件 Anime.js

Tue, 02 Mar 2021 12:56:00 GMT

概述

Anime.js 是一个强大且灵活的 JavaScript 动画库，用于在网页上创建各种类型的动画效果。能够创建平滑、流畅和复杂的动画。

官方网站官方文档

开始

简单示例

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>
<body>
  <div id="box"></div>

  <script>
    // 创建动画
    anime({
      targets: '#box',
      translateX: '250px',
      duration: 1000,
      easing: 'easeInOutQuad'
    });
  </script>
</body>
</html>

对象遍历 For of

Sat, 06 Feb 2021 13:17:15 GMT

开始

for...of 循环在每次迭代中自动获取迭代对象的下一个值，不需要手动管理索引。它也可以用于遍历具有迭代器（iterator）的自定义对象。

需要注意的是，与传统的 for...in 循环不同，for...of 不遍历对象的属性，而是遍历对象实例的值。如果你需要遍历对象的属性，应该使用 for...in 循环。

const myObject = { a: 1, b: 2, c: 3 };
for (const key in myObject) {
  console.log(key, myObject[key]);
}

koa2中使用Cookie和Session

Tue, 01 Dec 2020 20:07:49 GMT

概述

在koa2中cookie可以在原生组件中直接调用，但是session必须要安装对应中间件"koa-session"

安装

npm install koa-session -S
//或者
yarn add koa-session

开始

在服务端内我们可以这样写

const Koa = require('koa');
const app = new Koa();
const session = require('koa-session');
const port = process.env.PORT || 3000

app.keys = ['shinelikearainbow'];
//session配置
const CONFIG = {
    key: 'koa:session',  
    maxAge: 1000*60*3, 
};

app.listen(port, () => {
    console.log(`服务开始在${port}端口运行`);
});
app.use(session(CONFIG, app));
app.use( async ( ctx ) => {
//添加cookie
ctx.cookies.set(
        'name',
        'tom',
        {
            maxAge: 10 * 60 * 1000, // cookie有效时长
            httpOnly: false,  // 是否只用于http请求中获取
            overwrite: false,  // 是否允许重写
            signed: true    //是否添加签名
        }
    )

//添加session
ctx.session.name="tom";
ctx.body = "hello world";
})

Mongoose中update返回的字段对应意思

Fri, 20 Nov 2020 06:33:19 GMT

n:1 找到需要修改的数据一条

nModified:1 成功修改对应数据对应字段1次（如果一段数据有多条值被更新这里仍然只显示1，这里只记录被找到需要修改数据的数据的值是否发生变化，如果只是找到而里面的数据没有被更新或者修改后仍然重复那么这里不会+1而是0,不过ok仍然为1因为虽然数据没有被改变但是更新已经完成）

ok:1 更新成功（ok的结果只有0和1相当于布尔值，0代表修改失败1反之，所以无论修改多少条字段这里只会返回0或1）

Express 动态路由

Fri, 10 Jul 2020 20:48:40 GMT

概述

在 Express 中，动态路由是一种用于处理具有可变部分的 URL 的路由技术。通常，URL 中的某些部分需要根据请求的具体内容进行变化，例如在一个博客应用中，文章的 URL 可能包含文章的唯一标识符。动态路由允许你在 Express 应用中捕获这些可变部分，并根据它们执行相应的操作。

开始

Express 使用冒号 : 来表示动态路由参数。例如，如果你有一个博客应用，想要处理文章页面的请求，你可以创建一个动态路由来捕获文章的标识符，如下所示：

const express = require('express');
const app = express();

app.get('/article/:id', (req, res) => {
  const articleId = req.params.id;
  // 根据文章标识符（id）执行相应的操作
  res.send(`查看文章 ${articleId}`);
});

app.listen(3000, () => {
  console.log('服务器正在监听端口 3000');
});

Express 下载接口

Fri, 10 Jul 2020 12:19:32 GMT

概述

Express 中的 res.download() 是一个用于处理文件下载的方法。它允许你将文件发送给客户端浏览器以供下载。

常见参数

res.download(path [, filename] [, options] [, callback])

path：必需参数，表示要下载的文件的路径，可以是相对路径或绝对路径。
filename：可选参数，表示客户端下载时显示的文件名。如果不提供此参数，将使用path中的文件名。
options：可选参数，一个包含下载选项的对象，例如headers，用于设置响应头。
callback：可选参数，一个回调函数，用于处理下载完成后的回调。

开始

简单示例

const express = require('express');
const app = express();

app.get('/download', (req, res) => {
  const filePath = 'path/to/your/file.pdf'; // 替换为你要提供下载的文件的路径
  const fileName = 'your-file.pdf'; // 替换为客户端下载时显示的文件名

  res.download(filePath, fileName, (err) => {
    if (err) {
      // 处理错误，例如文件不存在或其他问题
      res.status(404).send('文件未找到');
    }
  });
});

如何将之前编辑的文章HTML源代码导入到TinyMCE编辑器中

Wed, 11 Dec 2019 22:23:40 GMT

开始

如果你想用 TinyMCE 来修改你之前写的文章那么你需要将源代码放到 TinyMCE 中，如果服务器把 HTML 源码发给我们可是我们应该怎样调用？

方法为使用 tinymce.activeEditor.setContent() 这个函数

具体用法

 tinymce.activeEditor.setContent()   //设置TinyMCE编辑器里的内容源代码
 
 tinymce.activeEditor.getContent()   //获取TinyMCE编辑器里的内容源代码

可是我们发现直接放到HTML文件里执行无法获取到这个函数，这是因为TinyMCE这个时候还没有初始化完成，也就是说我们还无法调取这个函数，必须要等到TinyMCE彻底初始化完成后才能调用，所以我们这里有两种写法获取初始化完成的消息。

//第一种：
//使用setup
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
            selector: '#mytextarea',
            setup: function (editor) {
                editor.on('init', function (e) {
                    console.log('初始化完成');
                    tinymce.activeEditor.setContent(data);
                });
            }
        })
 
//________________________________________________________________________________________
 
//第二种
//使用.then回调函数
var data = "<p>这是一个P标签</p><h1>这是一个H1标签</h1><p><em>这是一个斜体字</em></p>";
tinymce.init({
            selector: '#mytextarea',
        }).then(resolve => {
           tinymce.activeEditor.setContent(data);
        });

我们可以看到刚启动编辑器就有内容了

HTML源码也是整齐的

（不要吐槽中文和工具数量，这些是我后面设置的，没有放进代码片里）

TinyMCE上传图片后端处理写法

Tue, 10 Dec 2019 01:26:02 GMT

开始

写法有两种，一种是先把图片转换成base64后再本地解析显示，这样可以直接将图片储存在HTML文件中，如果图片过多可能会让HTML文件过大，或者你可以将已经转码成base64的图片上传到服务器后服务器再转码成原jpg或png格式。

另一种是方法是通过POST把图片传输给服务器后，服务器再返回图片地址我们再调用

第一种方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TinyMCE图片上传测试</title>
    <script src="tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: '#mytextarea',
            language: 'zh_CN',
            plugins: "image",
            toolbar: "image",
            images_dataimg_filter: function (img) {
                //添加图片渲染到编辑器中
                return img.hasAttribute('internal-blob');
            },
            paste_data_images: true,
            images_upload_handler: function (blobInfo, success, failure) {
                //将图片转码为base64格式
                success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
            }
        });
    </script>
</head>
<body>
    <textarea id="mytextarea"></textarea>
</body>
</html>

这样所有的图片都会以base64的方式存储在HTML文件中，如果需要上传到服务器中则可以在服务端这样写

//NodeJS服务端：
app.post('/upload', function (req, res) {
    //接收前台POST过来的base64
    var imgData = req.body.imgData;
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");     //过滤data:URL
    var dataBuffer = new Buffer(base64Data, 'base64');       
    fs.writeFile("image.png", dataBuffer, function (err) {
        if (err) {
            res.send(err);
        } else {
            res.send("保存成功！");
        }
    });
});

第二种方法，先上传再调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TinyMCE图片上传测试</title>
    <script src="tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: '#mytextarea',
            language: 'zh_CN',
            plugins: "image",
            toolbar: "image",
            images_upload_base_path: 'dir', //图片存放目录
            images_upload_url: '/upload',   //上传地址
        });
    </script>
</head>
<body>
    <textarea id="mytextarea"></textarea>
</body>
</html>

后端图片处理

var express = require("express");
var app = express();
var server = require("http").createServer(app);
var fs = require('fs');
var path = require('path');
var formidable = require('formidable');
 
app.use(express.static("public"));
var port = process.env.PORT || 3000;
server.listen(port, function () { console.log("connection") });
 
app.post('/upload', function (req, res, next) {
    var form = new formidable.IncomingForm();
    form.uploadDir = "./public/dir";
    form.maxFieldsSize = 4 * 1024 * 1024;  //用户头像大小限制为最大4M    
    form.keepExtensions = true;        //使用文件的原扩展名  
    form.parse(req, function (err, fields, file) {
        res.send({
            location: path.basename(file.file.path) //返回图片地址
        });
    });
});

这样每次上传新图片的时候服务器的dir文件夹就会收到一张新的图片

Switch 语法

Sun, 10 Nov 2019 11:53:28 GMT

开始

function checkQuestionType(type) {
    switch (type) {
      case "fill":
        return "填空题";
      case "single":
        return "单选题";
      case "multi":
        return "多选题";
      case "judge":
        return "判断题";
      case "essay":
        return "问答题";
      default:
        return "未知题型";
    }
  }

CreateJS0.8版本制作的工程使用1.0版本框架可能会出现的问题及新属性的调用方法

Sat, 28 Sep 2019 06:12:14 GMT

背景

1.0版本的CreateJS弃用了很多的早期的获取调用属性的函数及方法，这让使用早期CreateJS制作的文件在升级新版CreateJS框架后会出现许多的属性无法调用的情况，好在虽然CreateJS1.0虽然弃用了这些方法但是在新版本框架中仍然可以调用，预计会在下一次更新中会彻底删除弃用部分，而且在新版本框架中如果你继续使用旧方法调用，那么在你的开发者控制台会有醒目的提示告诉你CreateJS已经弃用你所调用的部分属性及方法，详细内容需要参考官方API，在官网的API我们可以清楚的看到弃用的属性有哪些。

刚开始觉得弃用这些代码带来了许多不便，因为它与我之前的工程不兼容，后来当我把所有的弃用的属性方法修改成新版本的新调用代码后发现，控制属性变得比以前更简洁了，而且帧数也有提高，所以建议还没有尝试更新后的框架的小伙伴们可以试试。

被弃用属性

给大家几个经常使用但是已经被弃用并替代的属性供大家参考:

//1.0版本已弃用：
Container.getNumChildren();
//1.0更新后的新方法：
Container.numChildren;

//1.0版本已弃用：
DisplayObject.getStage();
//1.0更新后的新方法：
DisplayObject.stage;

//1.0版本已弃用：
Ticker.getFPS();
//1.0更新后的新方法：
Ticker.framerate;
Container.framerate = 30; //单独设置元件动画的帧数

其中关于Ticker.getFPS()的更新是非常赞的，更新后可以单独设定单个元件的帧数，再也不用担心因为更新了舞台帧数后其他元件也跟着舞台帧数的增加或减少进行加速或减速运动了。也不用为了让动画加速或减速再重新写一遍动画脚本，这个更新可以让制作游戏内debuff的效果更加真实比如被减速后人物移动速度不仅减慢了并且动画速度也跟着一起减慢，超赞。

更多详细的更新可以浏览官网的文档：https://www.createjs.com/docs/easeljs/modules/EaselJS.html

通过NodeJS使用cookie和session

Thu, 28 Mar 2019 12:41:51 GMT

开始

如果想要通过 NodeJS 使用 cookie，那么你需要安装cookie-parser 依赖,如果是 session 那么需要安装cookie-session

安装

npm install cookie-parser

在服务端引用

var cookieParser = require('cookie-parser');    //cookie
var cookieSession = require('cookie-session');  //session

调用

//cookie方法
app.use(cookieParser());
 
app.get('/cookie', function (req,res) {
    res.cookie("me", "come on!");
    res.send(req.cookies);
    console.log(req.cookies);
    res.end();
})
 
 
//session方法
 
app.use(cookieSession({
         //session的秘钥，防止session劫持。 这个秘钥会被循环使用，秘钥越长，数量越多，破解难度越高。
     keys: ['aaa', 'bbb', 'ccc'],
         //session过期时间，不易太长。php默认20分钟
     maxAge: 60 * 60,
         //可以改变浏览器cookie的名字
     name: 'session'
 }));
 
app.use('/session', function (req, res) {
    req.session.user = "mitte";
    console.log(req.session);
    res.send(req.cookies);
    res.end();
})

CreateJS中调用动画里一个让人头疼的问题

Tue, 26 Mar 2019 23:20:51 GMT

经历

有时候你可能发现在你使用函数生成元件布置到舞台后，元件的动画错位了，并且只会运行第一帧或第二帧，无论你如何修改函数，他仍然无济于事，后来当你将布置动画函数延迟一秒执行后就可以正常运行，错误原理估计是代码为同步执行，但结果为异步，生成在前动画布置在后，可是生成函数在执行后会在后台部署生成元件的数据，可是在生成指令后面就是布置动画的指令，动画指令发出后因为这时候元件生成动画代码还没彻底部署完成，于是就出现了没有找到相关动画资源，也就出现了舞台上的元件动画加载失败，如果延迟一秒执行动画，这时间完全足够全部动画的部署，这时候再调用动画就不会出现加载问题，当然这样写肯定不行，因为为了等待几毫秒的时间差而让组件延后生成1秒是非常浪费加载时间的一种行为，最好的做法应该是加上callback调用只用组件彻底加载完成后才调用动画生成的函数。

这可真是一个令人抓狂的BUG，这究竟是要怪代码运行太快还是元件生成太慢。

这也反映了CreateJS里的PreloadJS的重要性，一定要等元件彻底部署完成后再调用动画，不然真的就是写码不规范，改码泪两行了。

使用NodeJS将数据保存成JSON文件

Mon, 07 Jan 2019 12:49:58 GMT

开始

在平时我需要把后端一些object变量保存至本地，可以这样做：

var express = require("express");
var app = express();
var server = require("http").createServer(app);
var fs = require('fs');
app.use(express.static("public"));
var port = process.env.PORT || 3000;
 
server.listen(port, function () { console.log("connected") });
 
var obj1 = {
    time: mytime.toLocaleString(),
    user: "薄荷派",
    objName: "obj1"
};
//写入文件，会完全替换之前JSON文件中的内容
function writeData(value) {
       var str = JSON.stringify(value, "", "\t");
    fs.writeFile('./json.json', str, function (err) {
        if (err) {
            console.error(err);
        }
        console.log('写入成功!');
    })
}
//读取文件然后在原有文件内容的基础上添加内容，如果key名重复则覆盖
function addData(value) {
    fs.readFile('./json.json', "utf-8", function (err, data) {
        if (err) {
            console.log(err);
        }
        var person = JSON.parse(data);
        person[obj1.objName] = value;   
        var str = JSON.stringify(person, "", "\t");
        fs.writeFile('./json.json', str, function (err) {
            if (err) {
                console.error(err);
            }
            console.log('新增成功!');
        })
    })
}
 
//运行函数,可以查看不同函数对数据的改动
//writeData(obj1);
//addData(obj1);

通过运行上面函数可以分别在原有JSON文件中写入、覆盖数据

下面的函数可以帮你更好的操作数据

Object.assign(obj1, obj2);//合并两个obj的内容，重复的会被第一个obj替换,最后obj1的内容为obj1+obj2的内容
Object.keys(person).length;//查看当前obj里同级所有的key的总数，结果为数字
JSON.stringify(value);//将obj输出成json格式
JSON.stringify(value, "", "\t");//将obj输出成json格式同时自动格式化
JSON.parse(value);//将json格式的内容转化为obj
obj.arrayObj.push(value);//将传来的对象push进数组对象中(前两个写对应的对象)

使用CreateJs生成图形

Tue, 01 Jan 2019 06:11:28 GMT

开始

通过CreateJs中的Shape指令可以手动生成很多基本图形。

矩形

var Rect1 = new createjs.Shape();
Rect1.graphics.beginFill("red").drawRect(0, 0, 100, 100);
Rect1.x = Rect1.y = 50;
stage.addChild(Rect1);

圆形

var circle1 = new createjs.Shape();
circle1.graphics.beginFill("blue").drawCircle(0, 0, 100);
circle1.x = circle1.y = 300;
stage.addChild(circle1);

多边形

var polystar = new createjs.Shape();
polystar.graphics.beginFill("yellow").drawPolyStar(0, 0, 150, 3, 0, 90);
polystar.x = polystar.y = 500;
stage.addChild(polystar);

效果如下

多边形可以通过改变draw中的属性实现许多有趣的图形

var polystar1 = new createjs.Shape();
polystar1.graphics.beginFill("yellow").drawPolyStar(0, 0, 30, 3, 5, 30);
polystar1.x = polystar1.y = 500;
stage.addChild(polystar1);

由此可以看出多边形的draw属性分别为（x轴间距，y轴间距，像素，边数，拉伸，角度）六个属性。

使用CreatJS制作鼠标追踪效果

Sat, 15 Dec 2018 05:47:04 GMT

开始

使用的是Animate CC + CreatJS进行制作的所以有些步骤和直接使用CreatJS有所不同，不过主要内容完全一致。

第一种效果：跟随效果

JS部分(js文件名："MyFileCopy")：

//导入舞台
exportRoot = new lib.MyFile();
	stage = new lib.Stage(canvas);	
 
//导入预先在An中制作好的素材：
var Shape = new lib.Shape();
    Shape.x = 750;
    Shape.y = 856.90;
    exportRoot.addChild(Shape);
 
//为了保证就算鼠标离开画布跟踪物仍然可以追踪鼠标我们要在Stage中加入这行代码：
stage.mouseMoveOutside = true;
 
//鼠标跟踪事件：
 stage.on("stagemousemove", function (evt) {      
         Shape.x = evt.stageX;
         Shape.y = evt.stageY;
    });

HTML部分：

<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>鼠标追踪事件</title>
    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
    <script src="MyFile.js"></script>
    <script src="MyFileCopy.js"></script>
</head>
<body οnlοad="init();">
 <div id="animation_container" style="background-color:rgba(153, 153, 204, 1.00); width:1500px; height:900px;margin: 0 auto;">
		<canvas id="canvas" width="1500" height="900" style="position: absolute; display: block; background-color:rgba(153, 153, 204, 1.00);"></canvas>
		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1500px; height:900px; position: absolute; left: 0px; top: 0px; display: block;">
		</div>
	</div>
</body>
</html>

第二种效果：拖拽效果

JS部分：

//导入舞台
exportRoot = new lib.MyFile();
	stage = new lib.Stage(canvas);	
 
//导入预先在An中制作好的素材：
var Shape = new lib.Shape();
    Shape.x = 750;
    Shape.y = 856.90;
    exportRoot.addChild(Shape);
 
//为了保证就算鼠标离开画布跟踪物仍然可以追踪鼠标我们要在Stage中加入这行代码：
stage.mouseMoveOutside = true;
 
//鼠标跟踪事件：
Shape.on("pressmove", function (evt) {
        evt.currentTarget.x = evt.stageX;
        evt.currentTarget.y = evt.stageY;
    });

HTML部分与效果一相同。

PS：JS部分代码没有截全，因为JS代码是由Animate自动生成的，我们只需要在自动生成的文件里找到生成舞台的字段，直接在下面写入追踪效果的代码即可

如何在Canvas中平铺图像

Wed, 28 Nov 2018 01:02:45 GMT

如果我们要在Canvas中只用个方块做出这样的效果：

开始

首先我们先创建一个画布，大小自定

<body>
  <canvas id="canvas" height="2000" width="2000"style=back"background-color:white;border:3px solid red;"></canvas>
<body>

我这里的长宽为2000*2000，背景颜色为白色，边框是3px的红色直线。

接着我们制作一个用来平铺的图像，我制作的图像是一个110110的粉红色的方形，其中外边框10px为透明区域，方形实际可见面积为100100。

画布做好后我们开始写JS的部分：

  function draw() {
    var canvas = document.getElementById("canvas");
    if (canvas == null) return false;
    var tile = canvas.getContext("2d");
    var img = new Image();
    img.src = "YourImage.png";
    img.onload = function () {
      var pattern = tile.createPattern(img, "repeat");
      tile.fillStyle = pattern;
      tile.fillRect(0, 0, 2000, 2000);
    };
  }

写好JS部分后我们要把加载放到 <body> 中

<body onload="draw('canvas')">
  <canvas id="canvas" height="2000" width="2000"style=back"background-color:white;border:3px solid red;"></canvas>
</body>

全部完成后我们生成制作出的网页看看效果