DOM 编程艺术——列表操作，组件实践

1.列表操作

在实际项目中，列表出镜率最高，分为图片式列表（相册，专辑）和信息形式列表（歌曲列表）

列表常见操作：显示列表，选择列表项（单选，多选），新增列表项，删除列表项，更新列表项

数据定义

id：歌曲标识     name：歌曲名称        duration：歌曲时长      

album：专辑信息（id：专辑标识  name：专辑名称）      

artist：歌手信息  （id：歌手标识  name：歌手名称）

把数据和视图结构分离出来：模板

根据实际情况选择合适模板，每种模板有自己特殊的语言，语法形式。在程序中歌曲列表可以通过模板提供的接口传入，生成列表对应的 HTML 结构。

选择列表项

多选操作

右键菜单

编程方式

面向视图的编程方式：视图和实现的控制层代码之间是直接相互关联在一起的。

实际视图层变化非常频繁，控制层与视图层耦合较紧密，很难做完全的自动化测试。

面向数据的编程方式：视图被抽象为若干的数据和状态。

后续的操作针对数据模型，可做完全的自动化测试。

2.组件实践

组件是一种面对用户的，独立的可复用交互元素的封装

常规组件实现流程

分析：交互意图以及需求

结构：HTML +  CSS 实现静态结构

接口：定义公共接口

实现：从抽象到细节，实现功能接口，暴露事件

完善：便利接口，插件封装，重构等

弹窗需求分解

窗口垂直水平居中

半透明遮罩背景

自定义弹窗内容和标题

提供确认和取消操作

静态结构

定义公共接口

实现思路：从抽象到细节

从宏观角度思考应该有哪些业务逻辑。对组件逻辑做足够抽象，可以对组件本身在代码层面进行功能测试。

监听者模式（订阅发布模式）

减小内部配置参数的压力，有一个一致的点处理发布系统。

轮播组件需求分解

滚动内容垂直水平居中

滚动条目数不受限制

前后翻动，并支持拖拽

可直接定位

页面结构分解

视口（overflow:hidden;）

轮播容器

轮播图（position:absolute;）

公共 API 接口

实现要点：数据定义

三个值唯一确定 slide 展现

pageIndex[0~pageNum]：当前图片下标

slideIndex[0~2]：slide 下标

offsetAll：容器的偏移下标

拖拽手势支持

mousedown（开始拖拽）：记录初始坐标，transitionDuration设为 0s

mousemove（拖拽移动）：设置容器偏移

mouseup（结束拖拽）：清除开始标记，根据偏移计算轮播指针，恢复 transitionDuration