这是我参与「第四届青训营 」笔记创作活动的第2天
1.写好JS的原则
- 各司其职 让HTML、CSS和JS职能分离
- 组件封装 好的UI组件具备正确性、扩展性、复用性
- 过程抽象 应用函数式编程思想
2.各司其职
- HTML/CSS/JS 各司其责
- 应当避免不必要的由 JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零 JS 方案
3.组件封装
总结·基本方法
-
结构设计
-
展示效果
-
行为设计
- API（功能）
- Event（控制流）
重构：插件化
- 解耦
- 将控制元素 抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构：模板化
- 解耦
- 将HTML，模板化，更易于拓展
组件框架
- 抽象
- 将组件通用模型抽象出来
总结
-
组件设计的原则：封装性、正确性、扩展性、实用性
-
实现组件的步骤：结构设计、展现效果、行为设计
-
三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
4.过程抽象
-
用来处理局部细节控制的一些方法
-
函数式编程思想的基础应用
-
高阶函数
once为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程叫作过程抽象- 常用高阶函数
- Once
- Throttle
阻止一个函数在很短时间间隔内连续调用 - Debounce
防抖动函数，核心目的在于减少函数被触发的频率，从而提高性能 - Consumer/2
- Iterative
-
为什么使用高阶函数？
高阶函数作为纯函数，输入和输出均为确定的，大大减少使用非纯函数，提升库的可维护性。 -
编程范式
-
命令式与声明式
-
命令式：
let list = [1,2,3,4]; let mapl = []; for(let i=0;i<list.length;i++){ mapl.push(list[i] * 2); } -
声明式：
let list = [1,2,3,4]; const double = x => x*2; list.map(double);
-
写代码应该关注什么？
风格、设计和约定等等，不能只根据第一眼去评价一段代码的好坏，最主要根据使用场景来判断
eg.repeat函数采用快速幂的算法，在时间复杂度上优于for循环，性能更好
`正则表达式` 提高算法效率
总结：
通过本次课程的学习，我了解了JavaScript与HTML和CSS之间的联系以及JS作为行为的关键作用。在书写JS的过程中同样需要重视三种原则，即各司其职、组件封装和过程抽象，要注重代码的使用场景，同时尽量降低算法的时间复杂度。
