这是我参与「第四届青训营 」笔记创作活动的第3天
写好JS的一些原则
各司其职
让HTML、CSS和JavaScript职能分类
如图下代码，使用js操作了CSS代码，当二次开发或修改需求时，使开发者难以理解代码用途或是很难进行需求调整
而下图的代码，则将JS和HTML、CSS的职能进行分类，使代码用途容易理解，JS仅控制元素样式，而不修改元素本来的样式，且当需要进行需求调整更容易进行需求调整
下图的代码更为精妙，仅是通过checkbox与CSS伪类的结合就成功实现了夜间模式与白昼模式的切换
结论
综上所述，在使用JS时，我们应该注意以下几点
- HTML/CSS/JS各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class表示状态
- 纯展示类交互寻求零JS方案
组件封装
好的UI组件具备正确性、扩展性、复用性
如何检查一个组件是否还有改进空间
- 结构设计
- 展现效果
- 行为设计
-
- API（功能）
-
- Event（控制流）
下面是改进组件的方法
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
过程抽象
应用函数式编程思想
常用高阶函数
- Once
- Throttie
- Debounce
- Consumer/2
- Iterative
Once
在实际的工作中我们可能经常遇到某些内容只执行一次，不再需要执行，我们可以把这些内容封装成函数，作为once函数的参数，达到我们的需求。
function once(fn,context){
let res;
return function(){
if(fn){
res=context?fn.apply(context,arguments):fn(...arguments)
fn=null
}
return res;
}
}
Throttie
限制一个函数在一定时间内只能执行一次，简称节流函数。
Debounce
验证用户的输入，在多少时间后才做某个事情,限制某一个方法的频繁触发。防止函数在极短的时间内反复调用，造成资源的浪费。被称为防抖函数。
Consumer
每隔一段时间会触发一次事件
Iterative
一个可迭代方法
