Yumeri

Appearance

钩子系统 ​

重要提示：Yumeri框架目前处于快速迭代阶段，本文档中的API可能随时发生变化。请始终以GitHub仓库中的最新代码为准：https://github.com/yumerijs/yumeri

钩子系统简述 ​

在类似于网站组件化开发的场景中，我们经常需要将一些功能或内容插入到特定的位置，比如页面加载完成之后，或者某个组件渲染完成之后，我们希望在这些时候执行一些特定的代码或添加一些内容，钩子系统应运而生。

使用场景 ​

  • 网页内部添加可扩展控件区域
  • 网页加载完成之后执行特定代码
  • 网页全局插入登录弹窗

钩子使用 ​

注册钩子 ​

在开始之前，我们需要区分两个概念：Hook 点和钩子。

  • Hook 点，指的是一个可以被插入的点位
  • 钩子，指的是插入其中的一段函数

每个 Hook 点和钩子都会有自己的一个名称，在全局范围内，Hook 点的名称是唯一的；在每个 Hook 点的范围内，钩子的名称是唯一的。

typescript
ctx.hook('name', 'hookName', (arg1, arg2, ...) => {
  // 钩子内容
});

执行以上函数，将会在名为 name 的 Hook 点插入一个名为 hookname 的钩子。当 name Hook 点被触发时，hookname 钩子将会被调用。

触发钩子 ​

typescript
const result: any[] = async ctx.excuteHook('name', arg1, arg2, ...);

执行以上函数，将会触发名为 name 的 Hook 点，并依次执行所有注册在 name Hook 点上的钩子，最终将执行结果通过一个数组返回给 result 变量。这个 any 数组是每一个钩子执行完后的返回值集合。

最佳实践 ​

钩子命名规范 ​

从上述表述中可以得出，如果 Hook 点命名不当，将会导致不正确的钩子注册到这个 Hook 点位上，从而导致参数传递格式错误。因此，Hook 点的命名要满足以下规范：

  • Hook 点名称必须保证唯一性
  • Hook 点名称避免使用极短字符
  • Hook 点名称可以使用点字符来表示所属关系以便快速识别

钩子挂载规范 ​

钩子的主要作用有两种：一是插入内容，二是执行代码。为防止出现本该执行代码的区域却错误返回内容，钩子挂载时需要遵循以下规范：

  • 钩子挂载时，必须明确目标 Hook 点的实际作用
  • 钩子挂载时，必须明确目标 Hook 点的参数格式
  • 钩子挂载时，不可返回本不该返回的内容