写好JS的原则：
😀各司其责
> HTML，CSS，JS职能分离 >- HTML——structural CSS——Presentational JS——Behavioral
- 避免不必要地由JS直接操作样式
- 可以用class来表示状态 // ？
- 纯展示类交互尝试寻求zero-JS方案
- 以此原则优化代码，寻求更佳的各司其职的方案
😄组件封装
> 好的UI组件具备正确性、拓展性、复用性 >组件是什么？
组件是指Web页面上抽出来一个个包含模板（HTML），样式（CSS）和功能（JS）的单元，好的组件具备封装性、正确性、拓展性、复用性组件封装的基本方法：
+ 结构设计 + 展现效果 + 行为设计 - API（功能） - Event（控制流）优化方法：
+ 重构-解耦： - 把组件**插件化** * 将控制元素抽取成插件 * 插件与组件之间通过**依赖注入**方式建立联系 - 把HTML**模板化**（更易于拓展） - 把组件通用模型**抽象化**（抽象出组件框架）😁过程抽象
> 应用**函数式编程**思想 >何为过程抽象？
> **过程抽象** 是将一段具体实现的过程从代码中抽象出来，通过函数封装或外部调用来隐藏其细节。通过过程抽象，可以使代码更加简洁、可重用，减少重复代码，并提升代码的可读性和可维护性。 >- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
- 为了能够让“只进行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，此过程被称为过程抽象
JS中的过程抽象：
+ 通过**高阶函数（HOF）**来实现过程抽象： - 以函数作为参数 - 以函数作为返回值 - 常用于作为函数装饰器常用的高阶函数：
+ once用于确保一个函数只被调用一次。即使多次调用，结果也只有第一次的返回值被使用。常用于需要确保某些初始化操作只执行一次的场景。
- throtte(节流)
限制某个函数在一定时间内只能执行一次。常用于频繁触发的事件（如滚动、窗口缩放等），避免函数过度执行，提升性能。
- debounce（防抖）
在某个事件发生后，延迟一定时间再执行函数。如果在这个时间段内事件继续触发，则重新计算延迟时间。常用于输入框实时搜索、按钮点击等场景，避免高频繁操作。
- consumer/2
consumer是一种函数，它接受两个参数，并返回一个新的函数，这个函数使用这两个参数进行操作。通常是为了处理一些基于两个值的组合逻辑，如映射或归约等。
- iterative
一个高阶函数，接受一个函数和一个初始值，反复应用该函数直到满足某个条件。通常用来处理一些需要迭代的逻辑。
