这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
1.课程重点
1.1 JavaScript 代码原则之各司其责
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
1.2 JavaScript 代码原则之组件封装
- 组件的定义解析及特征
- 组件封装基本方法
- 利用原生 JS 实现电商网站轮播图
1.3 JavaScript 代码原则之过程抽象
- 过程抽象概念
- 高阶函数使用模式
- JavaScript 编程范式
1.4 Leftpad 事故背景引入
- 代码写作关注事项
- left-pad 事件背后的代码规范
1.5 JavaScript 代码原则之质量优化之路
- 代码实践1 - 交通灯
- 代码实践2 - 洗牌
- 代码实践3 - 分红包
2.写好JS的一些原则
- 首先第一点是让HTML、CSS、JS职能分离
- 应当避免不必要的JS直接操作样式
- 可以用class表示状态
- 纯展示类交互寻求零JS方案
3. 组件封装
实现轮播图
结构：
轮播图是一个典型的列表结构，可以使用无序列表ul元素来实现
表现：
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用CSS transition
行为：API、控制流
4 过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
5. 高阶函数
5.1 Once：
为了能够让"只执行一次"的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程称为过程抽象
5.2 HOF：
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数修饰器
6. 编程范式
命令式与声明式
总结：
对于组件封装有四个原则：分别是封装性，正确性，扩展性以及复用性；实现组件的步骤有结构设计、展现效果、行为设计三大块，要掌握三次重构思想，即插件化、模板化、抽象化。还有对LEFTPAD有了一定的认识，也了解到作为一名程序员一定要有编程思想，懂得优化自己的代码，使其更简洁，效率更高。
作者：用户5072421245242
链接：juejin.cn/post/719186…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
