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
网友评论