前端之路:组件化一

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

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

 
comments powered by Disqus