生命周期

插件的生命周期比较简单，包括如下几个部分：

beforeCreate

插件创建前的生命周期，如果开发者有提供 beforeCreate 函数，则会调用之。

此钩子函数会获得两个参数

  • config: Object 插件自身的一些基本配置
    • events
    • data
    • computed
    • methods
  • option：用户传入配置
    一般可以在这个钩子中动态修改一些配置，例如增加事件绑定
  1. function beforeCreate (config) {
  2.   config.events[this.newKey] = this.newHandler;
  3. }

create

插件创建的生命周期。在此阶段，播放器会进行以下操作：

  • 将 methods 中定义的方法绑定至实例上。
  • 绑定events中所指定的事件。
  • 将data中的数据绑定到实例上。
  • 将computed中的计算属性绑定到实例上。
  • 为该插件申请 DOM 节点，并绑定在$dom上。
  • 根据用户设置和插件初始化设置设定该插件的$operable和$level值。
  • 将用户传入的阐述绑定到$config上。

  • 执行开发者自定义的create函数。
    故在create函数中，我们可以：

  • 利用 this直接调用自己设置的方法

  • 利用 this直接使用自己设置的参数
  • 通过$on和$off动态绑定／解绑事件， 通过$emit触发事件。
  • 从$config中获取用户设置
  • 通过$attr获取现时 video, container 和 wrapper 的参数值，但是由于初始化进行中，故该值获取意义不大。
  • 可以通过$css获取或设置 video, container 和 wrapper 的参数值，对于一些需要添加loading 样式的需求可以满足。

  • 通过$dom获得本插件所拥有的 DOM 节点，可以进行相关的初始化。
    但是需要注意的是：

  • 不能控制 $level 值

  • 不能使用$attr操作 video 等部分的属性值。但是该函数可以调用，调用会延迟到初始化后才知行。
  • 该函数是个同步函数，与 ready 初始化无关。
    create 周期的主要任务是初始化插件。在此阶段尽量不要对 video, container 和 wrapper 进行操作。

init

此阶段会进行播放器的初始化，所有在此阶段前被安装使用的插件将会被触发相应的 init 函数。

若果插件在播放器生成后才动态安装，则不会触发此生命周期函数，而直接跳转至inited。

在 init 函数阶段插件将会获得用户对整个播放器的配置（不包括其余插件的配置）。插件可以根据该配置进行相应的特殊初始化。插件可以对此作相应更改。此期间的任何更改都不会直接写入到 video 实例上。

此后，插件可以使用 $attr操作 video， container 和 wrapper的值。

我们可以通过以下三种方式修改相关设置

  • 从 init 接受的参数中直接更改 videoConfig
  1. function init (config) {
  2.   config.controls = false;
  3. }
  • 直接操作实例上的参数
  1. function init (config) {
  2.   this.controls = false;
  3. }
  • 通过 $videoConfig 操作参数
  1. function init (config) {
  2.   this.$videoConfig.controls = false;
  3. }

inited

此时原生 player 已经初始化完毕，所有插件均已创建。开发者可以在此生命周期里执行一些自定义操作。

同时，该函数支持异步操作。开发者可以在函数末尾返回 Promise。当且仅当所有函数执行完毕（即同步函数 return 和异步函数返回的 Promise 状态变为 resolved 后），整个播放器才进入 ready 状态。

  1. async function inited () {
  2.   await doSomethingAsync()
  3. }

在播放器实例化时，当所有插件都安装完毕后，ready 后会触发 ready 事件。

如果该插件是异步安装，则不会收到该事件。

destroy

当用户移除插件或者整个播放器销毁的时候触发。

作为销毁时的钩子函数。