这是我参与「第五届青训营」伴学笔记创作活动的第3天
课程内容
- js的编码原则
- left-pad事件
- 编码操作规范
详细内容
写好js的一些原则
- 各司其职（指HTML、CSS、JavaScript各自只履行自己的职能）
- 组件封装
- 过程抽象（函数式编程思想）
示例一 实现页面切换的代码优化
写法一：通过js，来直接更改css的属性 缺点：适配性低，代码可更改性差
写法二：不直接用js更改css，而是引入class名来实现效果。实现了css与js的分离，更加简洁高效并且容易被他人理解 写法三：不用js，直接通过伪类选择器来实现功能
组件封装
示例二：用原生js实现电商网站的轮播图
结构设计：HTML
结构：html
轮播图是一个典型的列表结构，我们可以使用无序列表<ul>元素来实现
展现效果：CSS
表现：css
- 使用css绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符
- 轮播图的切换动画使用css transition
行为设计：API
行为：JS
- API设计应保证原子操作，职责单一，满足灵活性
行为设计：控制流
行为：控制流
- 使用自定义事件来解锁
总结：基本方法
- 结构设计
- 展现效果
- 行为设计
- API（功能）
- Event（控制流）
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
总结
- 组件设计的原则：封装性,正确性,扩展性,复用性
- 实现组件的步骤：结构设计，展现效果，行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
例子
Once
- 为了能够让”只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为
过程抽象。
高阶函数
- 以函数为参数
- 以函数为返回值
- 常用于作为函数装饰器
常用
- Once
- Throttle
- Debounce
- Consumer/2
- Iterative
编程范式
命令式与声明式
- 过程抽象/HOF/装饰器
- 命令式/声明式
Left-pad事件
曾经的left-pad事件
经过修改后
-
代码更简洁
-
效率提升
-
性能更好
实践三：交通灯的状态切换
-
版本一 SetTimeout直接处理
-
版本二 数据抽象
-
版本三 过程抽象
-
版本四 异步加函数式
实践四：分红包
- 切西瓜
- 抽牌法
总结
写代码最应该关注风格、效率、约定、使用场景、设计
