在我们用 JSX 建立组件系统之前，我们先来用一个例子学习一下组件的实现原理和逻辑。这里我们就用一个轮播图的组件作为例子进行学习。轮播图的英文叫做 Carousel，它有一个旋转木马的意思。
上一篇文章《使用 JSX 建立 Markup 组件风格》中我们实现的代码，其实还不能称为一个组件系统，顶多是可以充当 DOM 的一个简单封装，让我们有能力定制 DOM。
要做这个轮播图的组件，我们应该先从一个最简单的 DOM 操作入手。使用 DOM 操作把整个轮播图的功能先实现出来，然后在一步一步去考虑怎么把它设计成一个组件系统。
TIPS：在开发中我们往往一开始做一个组件的时候，都会过度思考一个功能应该怎么设计，然后就把它实现的非常复杂。其实更好的方式是反过来的，先把功能实现了，然后通过分析这个功能从而设计出一个组件架构体系。
因为是轮播图，那我们当然需要用到图片，所以这里我准备了 4 张来源于 Unsplash 的开源图片，当然大家也可以换成自己的图片。首先我们把这 4 张图片都放入一个 gallery 的变量当中：
let gallery = [ 'https://source.unsplash.com/Y8lCoTRgHPE/1142x640', 'https://source.unsplash.com/v7daTKlZzaw/1142x640', 'https://source.unsplash.com/DlkF4-dbCOU/1142x640', 'https://source.unsplash.com/8SQ6xjkxkCo/1142x640', ];
而我们的目标就是让这 4 张图可以轮播起来。
组件底层封装首先我们需要给我们之前写的代码做一下封装，便于我们开始编写这个组件。
根目录建立 framework.js
把 createElement、 ElementWrapper、TextWrapper 这三个移到我们的 framework.js 文件中
然后 createElement 方法是需要 export 出去让我们可以引入这个基础创建元素的方法。
ElementWrapper、TextWrapper 是不需要 export 的，因为它们都属于内部给 createElement 使用的
封装 Wrapper 类中公共部分
ElementWrapper、TextWrapper之中都有一样的 setAttribute、 appendChild 和 mountTo ，这些都是重复并且可公用的
所以我们可以建立一个 Component 类，把这三个方法封装进入
然后让 ElementWrapper 和 TextWrapper 继承 Component
Component 加入 render() 方法
在 Component 类中加入 构造函数
这样我们就封装好我们组件的底层框架的代码，代码示例如下：
function createElement(type, attributes, ...children) { // 创建元素 let element; if (typeof type === 'string') { element = new ElementWrapper(type); } else { element = new type(); } // 挂上属性 for (let name in attributes) { element.setAttribute(name, attributes[name]); } // 挂上所有子元素 for (let child of children) { if (typeof child === 'string') child = new TextWrapper(child); element.appendChild(child); } // 最后我们的 element 就是一个节点 // 所以我们可以直接返回 return element; } export class Component { constructor() { } // 挂載元素的属性 setAttribute(name, attribute) { this.root.setAttribute(name, attribute); } // 挂載元素子元素 appendChild(child) { child.mountTo(this.root); } // 挂載当前元素 mountTo(parent) { parent.appendChild(this.root); } } class ElementWrapper extends Component { // 构造函数 // 创建 DOM 节点 constructor(type) { this.root = document.createElement(type); } } class TextWrapper extends Component { // 构造函数 // 创建 DOM 节点 constructor(content) { this.root = document.createTextNode(content); } }
实现 Carousel接下来我们就要继续改造我们的 main.js。首先我们需要把 Div 改为 Carousel 并且让它继承我们写好的 Component 父类，这样我们就可以省略重复实现一些方法。
继承了 Component后，我们就要从 framework.js 中 import 我们的 Component。
这里我们就可以正式开始开发组件了，但是如果每次都需要手动 webpack 打包一下，就特别的麻烦。所以为了让我们可以更方便的调试代码，这里我们就一起来安装一下 webpack dev server 来解决这个问题。
执行一下代码，安装 webpack-dev-server：
npm install --save-dev webpack-dev-server webpack-cli
看到上面这个结果，就证明我们安装成功了。我们最好也配置一下我们 webpack 服务器的运行文件夹，这里我们就用我们打包出来的 dist 作为我们的运行目录。
设置这个我们需要打开我们的 webpack.config.js，然后加入 devServer 的参数， contentBase 给予 ./dist 这个路径。