前端之路：组件化一

link on JianShu

授课

第一次进行线上课程。三段论节奏还是很清晰：

1. 组件化演进历史以及三大主流组件（React、Agnular、Vue）的方案
2. 进行需求分析：自己先分析再进行讲解
3. coding：自己先尝试根据需求进行实现再进行演示——演示有明显的演进思路

上课

第一段还可以作为知识点进行了解； 第二段已经思路混乱了：需求分析我写的是这样的——

1. 支持图片自动适配大小
2. 支持轮播张数定义
3. 支持循环播放
4. 支持在轮播控件中选择特定的页
5. 有变化动画？

实际的基本分析是这样的——

P0：
1. 轮播需求
  1.1 展示一个序列的图片
  1.2 每隔？秒通过动画，切换到下一张图片
    1.2.1 P2：选择合适的时间和动画形式
  1.3 P1：循环播放
  1.4 P1：展示指示器
  1.5 P1：展示文字标题
2. 点击需求
  2.1 点击图片，跳转到链接
  2.2 P1：点击文字标题
P1：
3. 手势/鼠标操作轮播
  3.1 拖拽图片，跟随手指/鼠标移动
  3.2 停止拖拽，播放动画弹到最近的一张图
    3.2.1 注意边界
4. 鼠标悬停展示左右操作按钮
  4.1 鼠标悬停，展示向左翻页和向右翻页按钮
    4.1.1 P2：第一张图没有向左按钮，最后一张图没有向右按钮
  4.2 点击向左按钮向前播放，点击向右按钮向后播放

差距还是一目了然滴。 实际对优先级本身也是由浅入深的过程——实现第一点就是一个“轮播”效果了——但下面但每一点都是对组件本身的优化和深入。

第三阶段基本抓瞎了。自己写的话基本是——猫吃刺猬，无处下嘴。后面跟着老师的思路写居然也是报错，调试的话后面就跟不上了。最后放弃，专心听老师的实现和调试过程。

下来重新尝试调试未完成的代码，第一版本的“轮播”效果出来了。但里面大量但知识点是完全陌生的。 在线运行可以这脚本之家HtmlJsRun、菜鸟教程 runcode

接下来趁这个机会把对应的知识点都补上。