在我们用 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 这个路径。