# 组件实践 ## 什么是组建 在用户几面开发领域，它是一种面对用户的，独立的可复用交互元素的封装 易用，容易扩展 - 理解常规的组件实现流程 - 巩固前置课程的部分知识 - 避免常见误区 ### 流程 - 分析：交互意图及需求 - 结构：HTML+CSS实现静态结构 - 接口：定义公共接口 - 实现：从抽象到细节，实现功能接口、暴露事件 - 完善：便利接口、插件封装、重构等 ## Modal - 需求分解 - 模态窗口垂直水平居中 - 需要半透明的遮罩背景 - 可自定义弹窗内容和标题 - 提供确认和取消操作 - 页面-结构分解 - 定义公共接口 - 初始化Modal - 方法调用 - 实现：从抽象到细节 - 使用事件Mixin - 监听者模式（订阅发布模式，解耦，将调用与被调用者接口） 要点总结：基于‘类’组织 要点总结：结构复用 ## 轮播图 - 需求分解 - 模态窗口垂直水平居中 - 滚动条目不受限制 - 可前后翻动，支持拖拽 - 可直接定位