目前已经有很多成熟的方案，为 hexo 或者自建博客提供音乐播放器插件使用。

我将从不同的角度介绍这几种方式：

前言

JS 是单线程

在此之前，请注意进程和线程的区别。单线程的特性，决定了JS 引擎在任何时候都只有一个主线程来执行任务。

为什么是单线程？

js 的主要作用是和用户互动以及操作 dom.

想象一个场景，在浏览器环境下，我们需要使用 js 来操作 dom，它可能是 插入 dom 或者 删除 dom，如果 js 是多线程，那么可能存在两种操作同时执行的情况，这是自相矛盾的…

然而，有些任务在执行的过程中是非常耗时的，比如定时器或者监听事件…它们会阻塞主线程的执行，导致页面卡顿。

JS 是非阻塞性的

为了避免主线程被阻塞，JS 引擎将任务分为两种：同步任务（代码）和异步任务（代码）

常见的异步代码：

setTimeout、setInterval、AJAX/Fetch、事件绑定监听、promise.then、promise.catch...

请注意：promise 本身是同步任务（代码），仅 then 和 catch 是异步的

协调同步任务和异步任务执行，从而使 JS 的执行是非阻塞的，就需要事件循环（Event Loop）机制来实现。

Before…

前段时间封装了mobile-cascade 组件，详见Mobile 端的级联选择单多选组件实现，有很多的弊端，例如前置依赖了其他的 UI 库基础组件（input/checkbox/tabs...），此外功能相对较单一（不支持 remote/checkStrictly/single...等模式）…

由于需求迭代，需要在移动端实现一个类似于 pc-tree 的组件，因此在前者的基础上进行了二次封装和优化，最终实现了 mobile-tree 组件。

浅谈一下

elementUI存在很多已知或者未知的问题需要我们去发现并解决，但不可否认它确实在曾经取得过很好的认可。

在使用 el-form-item 组件时，正常情况下，我们经常需要自定义校验规则来规范用户输入，比如这样：

<el-form-item prop="name" label="姓名" :rules="rules.name">
  <el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item prop="age" label="年龄" :rules="rules.age">
  <el-input-number v-model="form.age"></el-input-number>
</el-form-item>
...

public rules = {
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  age: [{ required: true, message: '年龄不能为空', trigger: 'change' }],
}

当然你也可以把 rules 绑定到 el-form 上，因为两者在校验过程中起的作用和我所描述的问题并不冲突。

😏😏😏 问题的产生往往是来自于部分特殊需求：

Before...

针对开源项目进行二次开发，在日常开发中已经很常见了。它可以为我们提供很多便利：

• 定制需求：开源项目通常是通用性的，为了满足特定组织或项目的需求，可能需要定制功能、界面。

• 功能扩展：有时候，开源项目的功能不足以满足特定用例的需求，你可以扩展和增强现有功能。

• 修复错误和漏洞：开源项目可能存在错误和漏洞，当然你也可以提 PR 修复，贡献社区。

• 整合与互操作：在实际应用中，可能需要将多个开源项目整合在一起，以构建更大的系统。

• 性能优化：你可以对开源项目进行性能优化，以满足特定的性能需求，例如提高响应时间或减少资源消耗。