js笔记| 青训营笔记

68 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 三 天
js红宝书 想想之前买的一只放书架上吃灰...
如何去写好javascript,将ui组件封装起来 过程抽象(数据抽象 过程抽象)

image.png 函数式编程范式

image.png

image.png 理解dom的api

image.png 结构表现行为分离 上面那版让js实现了css中的功能 很难通过代码理解原来的需求背景,将js css隔离开,各司其职的代码
本质就是改变样式,是可以通过css来实现

image.png 涉及到了css的高级功能,伪类选择器。

image.png 巧妙使用for

image.png

学习去写解耦 各司其职的代码,而不是只图实现功能

组件封装

image.png

image.png html是一个列表的结构 绝对定位让他们处于同一个位置 css

image.png

image.png

image.png slideTo(id)跳转到对应id的slider

image.png
每隔两秒钟去切换

  • 涉及状态绑定 自定义事件去绑定 不让组件的事件和图片的状态耦合在一起
  • 自动播放事件 监听 开拔自定义事件

image.png ui组件 现在问题 不够灵活