WEB 插件系统_rollup打包css module

什么是插件系统?

介绍:

插件系统是核心模块与应用功能完全分离的系统，开发者可以通过插件扩展丰富项目功能。

核心：最小可运行的集合。
插件：模块相互独立，单一职责。

1. 优势：核心内容与功能应用的完全解耦。
2. 社区使用插件设计方案的开源库： videojs、webpack、babel，开发者可以通过所提供的API实现各类插件来不断丰富其生态。

插件系统可以解决什么问题？

1. 系统级别应用中，多人协作开发的模块分割， 划分多个团队进行开发，核心部分提供：

如何实现插件系统？

在实现插件系统之前我们先看下，一个安全可靠、稳定的系统应该遵守哪一些要求。

插件设计SOLID原则：

1. **单一职责原则（SRP）：**确保功能职责单一，每个独立模块只负责单个状态或功能。
2. **开放封闭原则（OCP) ：**对扩展保持开放，对核心修改保持封闭， 应当尽量避免修改源码。
3. **里氏替换原则（LSP）：**提供的父类接口具有可替换性，可以被子类接口替换扩展。
4. **接口隔离原则（ISP） ：**确保客户端只需依赖对应的接口，而不依赖前置接口数据。与接口单一原则一定相似。
5. **依赖倒置原则（DIP） ：**父类不依赖子类，子类依赖父类，子类在父类基础上进行扩展。

​

​

简单的示例：播放器

src/index.js

• 系统的核心部分就是让视频能够播放，其他的附加功能就交由插件处理。
• 在核心代码中我们所需要做的事情：
  • 实现插件注入的机制。
  • 初始播放器中所需要的基本配置。

class Player {
   
  // 插件列表
  static plugins = {
   };

  constructor(config) {
   
    this.element = config.element;
    this.config = config;

    this.createDomToHTML();
    this.pluginsCall();
    this.initVideoPlayer();
  }

  // 在div中创建所需要的元素。
  createDomToHTML() {
   
    this.root = createDOM({
   
      el: 'div',
      cname: 'container',
    })

    this.video = createDOM({
   
      el: 'video',
      cname: 'video-player',
      attrs: {
   
        width: '100%',
        height: '100%',
      }
    })
    this.element.appendChild(this.root);
    this.root.appendChild(this.video);
  }

  // 关键：绑定所有的插件。
  pluginsCall() {
   
    if (Player.plugins) {
   
      Object.keys(Player.plugins).forEach((name) => {
   
        let descriptor = Player.plugins[name]
        descriptor.call(this, this); // 将插件中的this指向到Player
      })
    }
  }

  // 关键：挂载插件
  static install(name, fn) {
   
    if (!Player.plugins[name]) {
   
      Player.plugins[name] = fn;
    }
  }

  // 生命周期 - 在播放器内容完成前
  initVideoPlayer() {
   
    this.video.src = this.config.url;
  }

  play() {
   
    this.video.play().then(() => {
   
      console.log('video play');
    });
  }

  pause() {
   
    this.video.pause()
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

src/play.js

1. 在每个独立的插件中，确保功能单一性。
2. 在play插件中，只控制视频的播放器，以及暂停。

const pluginPlay = function () {
   
  console.log('pluginPlay')
  const containerEl = createDOM({
   
    el: 'vp-button',
    tpl: `
      <button class="play">播放</button>
      <button class="pause">暂停</button>
    `
  });

  this.element.
1
2
3
4
5
6
7
8
9
10
11
12