如何编写一个插件

Chimee 中的所有插件都是 Chimee.plugin 的一个实例。我们可以传入一个对象让 Chimee 帮我们生成实例，也可以自己对 Chimee.plugin 进行继承。

编写一个简单的播放暂停插件

简单的播放暂停插件

我们可以轻松地编写一个如上图播放暂停插件。

  • 我们将其命名为 controller，所以设定 name 为 controller。
  • 它本质是一个按钮，所以我们将 el 设定为 <button>play</button>。
  • 按钮需要对视频进行操作，所以我们包裹一个方法名为 changeVideoStatus。
  • 按钮需要在视频状态改变后改变自身，所以我们包裹一个方法名为 changeButtonText。
  • 按钮点击后会对视频进行操作，所以我们在create阶段榜上监听按钮的click事件并调用 changeVideoStatus。
  • 我们通过 events 监听播放器的 play 和 pause 状态改变，并调用 changeButtonText。
  1. const plugin = {
  2.   // 插件名为 controller
  3.   name: 'controller',
  4.   // 插件实体为按钮
  5.   el: '<button>play</button>',
  6.   data: {
  7.     text: 'play'
  8.   },
  9.   methods: {
  10.     changeVideoStatus () {
  11.       this[this.text]();
  12.     },
  13.     changeButtonText (text) {
  14.       this.text = text;
  15.       this.$dom.innerText = this.text;
  16.     }
  17.   },
  18.   // 在插件创建的阶段，我们为插件绑定事件。
  19.   create () {
  20.     this.$dom.addEventListener('click', this.changeVideoStatus);
  21.   },
  22.   // 插件会在播放暂停操作发生后改变自己的文案及相应的行为
  23.   events: {
  24.     pause () {
  25.       this.changeButtonText('play');
  26.     },
  27.     play () {
  28.       this.changeButtonText('pause');
  29.     }
  30.   }
  31. };

接下来我们安装及使用该实例即可。

  1. // 安装插件
  2. Chimee.install(plugin);
  3. const player = new Chimee({
  4.   // 播放地址
  5.   src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  6.   // dom容器
  7.   wrapper: '#wrapper',
  8.   // 使用插件
  9.   plugin: ['controller'],
  10. });

以上展示了如何使用 Object 创建、安装、使用插件的过程，下面将讲述另一种插件写法。

继承 Plugin 进行插件编写

我们也可以继承 Chimee.plugin 生成一个插件类。这种写法较为自由，但是很多语法糖就不能使用了。

  1. class Controller extends Chimee.plugin {
  2.   constructor (...args) {
  3.     // 切记传递相关参数到父类
  4.     super(...args);
  5.     this.button = document.createElement('button');
  6.     this.text = 'play';
  7.     this.button.innerText = this.text;
  8.     this.button.addEventListener('click', () => {
  9.       this[this.text]();
  10.     });
  11.     this.$dom.appendChild(this.button);
  12.     this.$on('pause', () => {
  13.       this.changeButtonText('play');
  14.     });
  15.     this.$on('play', () => {
  16.       this.changeButtonText('pause');
  17.     });
  18.   }
  19.   changeButtonText (text) {
  20.     this.text = text;
  21.     this.button.innerText = text;
  22.   }
  23.   destroy () {
  24.     this.$dom.removeChild(this.button);
  25.   }
  26. };

不过这也是一种比较方便的开发方式。