写好JS | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 9 天

（仅供自己参考，技术点请看字节整理的资料和相应官方技术文档）

这是前端入门 - 基础语言篇系列里的第3篇《写好JS》

1. 本堂课重点内容：

本节课从实践维度解读在实际编码过程中何种类型的 JavaScript 代码称之为“好代码”，并从 JS 出发，总结其他语言编码可遵循的共性原则

“各司其职”原则
“组件封装”原则：组件是 Web 页面上所抽取的模版、功能与样式的单元，自从 React，Vue 等前端框架在市面上大量使用之后，组件化开发逐渐成为了前端主流开发方式。

各司其职、组件封装、过程抽象

版本二没有直接操作CSS

满足原则：结构（HTML）、展现（CSS）、行为（JS）分离

因为主题只涉及展现，希望能纯CSS实现

伪类选择器，匹配元素状态（元素是否为checked的状态）

插件化

函数式编程

Throttle：节流函数：每隔100ms触发一次scroll这些事件

Debounce：防抖，如自动保存功能--编辑完成后（键盘不敲、内容编辑完成）

为什么要用高阶函数

纯函数：没有副作用，结果可预测的 -- a function that always gives you back the same output for a given input

高阶函数是纯函数，减少非纯函数的使用，提高库的可维护性

声明式：数组里的map, foreach

toggle的好处

多个状态切换。从on -> off -> on变为on -> warn -> off -> on

从实际使用场景，判断性能需求，来评价一段代码好不好