什么是组件化思想？

这个我学会了再告诉大家吧~

这个demo怎么做：

从构建组件到使用组件，其实就是通过写出一个可复用性强的class，我们想要使用这个组件，就需要利用这个class不断的构造对象实例出来。

步骤为：

找出Dialog页面的需求细节
- 基本的打开关闭对话框功能：div.dialog的display属性更改；
- 基本的渲染：div.dialog的transition属性：针对opacity透明度渐进、transform偏移滑入。
- 给这个class赋予更强的复用性，在new的时候允许添加更多参数（$root对象形式）params：options。

2.1 针对需求细节1，完成HTML,CSS的雏形

DOM结构
- dialog 
  - main
    + header
      + title
      + span.close
    + content
    + footer
      + button.cancel
      + button.confirm

CSS雏形

2.2 针对需求细节1，写JS写到什么境界呢，你一点击就能弹出dialog来，点击取消键确认键也能有效。至此实现页面需求细节第一点；




  
  dialog对话框页面细节
  


  
    Dialog组件
    
    
      
        
          标题
          ❌
        
        
          这是一句话

先看怎么使用组件，丰满这个组件的内容：

在为span.close绑定事件时犯了个错误，这还是我上一篇文章提到的，淦。
DOM节点无法像对象实例那样调用原型方法。

照着span.close继续绑定；此时按钮生效,需求细节1实现。

如果有代码对比插件就好了，不赘述。需要注意利用setTimeOut()将效果异步实现，否则JS引擎会进行优化，将所有渐近细节一步到位，这显然不是我们想要的。

对使用组件的方法进行修改:

一步步实现2.2.
先看怎么使用组件，丰满这个组件的内容：

修正为传入onOk()、 onCancel()；

最后这个组件就彻底成型了。