重构：插件化
组件设计比较复杂的点往往在于控制的地方和组件本身有一定的耦合。
比如说上篇轮播图显示第几个图片，第几个小圆点就会标红，它们之间的状态就是耦合的，所以说我们需要解耦：
- 将用户控制元素（小圆点和左右箭头）抽取成插件
- 插件和组件之间通过依赖注入的方式建立联系
核心就是通过插件注册来实现依赖注入，插件初始化依赖于组件，而组件并不知道插件的存在：
registerPlugins(...plugins) { plugins.forEach(plugin => plugin(this)); } 复制代码
然后把原本在构造器中的函数抽取成插件：
类增加一个addEventListener()的API：
addEventListener(type, handler) { this.container.addEventListener(type, handler); } 复制代码
最后调用即可：
const container = document.querySelector('.slider'); const slider = new Slider({ container }); slider.registerPlugins(pluginController, pluginPrevious, pluginNext); slider.start(); 复制代码
这样以来用户控制就解耦了，当PM有新的需求时，我们可以仅删除slider.registerPlugins()中的插件或者创建新的插件再添加。
但是问题是我们还要删除对应的HTML代码，这样还是要修改很多地方，所以下一步我们要把HTML模板化。
重构：模板化
现在HTML部分只需要保留一个div：
<div id="my-slider" class="slider-list"></div> 复制代码
在类中实现一个render函数来进行模板化的渲染，通过传入的参数返回正确的HTML模板：
constructor(id, opts = { images: [], cycle: 3000 }) { this.container = document.getElementById(id); this.options = opts; this.container.innerHTML = this.render(); this.items = this.container.querySelectorAll('.slider-list__item, .slider-list__item--selected'); this.cycle = opts.cycle || 3000; this.slideTo(0); } render() { const images = this.options.images; const content = images.map(image => ` <li class="slider-list__item"> <img src="${image}"/> </li> `.trim()); return `<ul>${content.join('')}</ul>`; } 复制代码
这样参数也可以自由设定多张图片，这里我们把它添加到5张：
const slider = new Slider('my-slider', { images: [ 'https://gitee.com/mancuojie/typo/raw/master/202201241731487.jpg', 'https://gitee.com/mancuojie/typo/raw/master/202201241731486.jpg', 'https://gitee.com/mancuojie/typo/raw/master/202201241731485.jpg', 'https://gitee.com/mancuojie/typo/raw/master/202201241731484.jpg', 'https://gitee.com/mancuojie/typo/raw/master/202201241731483.jpg'], cycle: 3000 }); slider.registerPlugins(pluginController, pluginPrevious, pluginNext); slider.start(); 复制代码
另外插件也要实现自己的render()函数，与组件同步：
通过action()正确初始化插件数据：
registerPlugins(...plugins) { plugins.forEach(plugin => { const pluginContainer = document.createElement('div'); pluginContainer.className = '.slider-list__plugin'; pluginContainer.innerHTML = plugin.render(this.options.images); this.container.appendChild(pluginContainer); plugin.action(this); }); } 复制代码
这样我们就可以通过传参和修改插件注册来满足不同需求，大大增强了扩展性。
重构：组件框架
组件模板化之后，我们可以在做一层抽象，将组件模型抽象出来进一步提升通用性和扩展性。
class Component{ constructor(id, opts = {name, data:[]}){ this.container = document.getElementById(id); this.options = opts; this.container.innerHTML = this.render(opts.data); } registerPlugins(...plugins){ plugins.forEach(plugin => { const pluginContainer = document.createElement('div'); pluginContainer.className = `.${name}__plugin`; pluginContainer.innerHTML = plugin.render(this.options.data); this.container.appendChild(pluginContainer); plugin.action(this); }); } render(data) { /* abstract */ return '' } } class Slider extends Component { ... } 复制代码
改进空间
- CSS模板化
- 将组件插件结构统一，也就是不再区分组件和插件，全部都是组件，组件和组件之间可以结合成一个大的组件，然后解决父组件和子组件的状态同步和消息通信，就可以完成一个相对完整的多层级的组件框架。
![[译]: Vue.js 函数式组件：what, why & when?](https://ucc.alicdn.com/pic/developer-ecology/hid5ykfodc62m_49a2253b8cb446d4b3ce7ead1cdfb9fc.png?x-oss-process=image/resize,h_160,m_lfit)