这是我参与「第四届青训营」笔记创作活动的的第2天

什么才是好的JS代码？

1.各司其责：让CSS，HTML,JS功能分离
2.组件封装:好的UI结构具有正确性,扩展性,复用性
3.过程抽象:应用函数式编程思想

各司其责简例:

写一段JS,控制一个网页,让他支持浅色和深色两种模式
方法1:

如图,点击之后会切换文字和背景的颜色

版本运行起来有什么问题呢?有没有优化空间呢

方法2:

对比方法1和2,方法1直接去操作DOM元素操作CSS,而方法2只是切换类,版本2更好,能实现代码各司其责

还有改进空间吗?

方法3

使用伪类选择器,没有JS操作,纯HTML和CSS

结论
1.HTML/CSS/JS 各司其责
2.避免不必要的由JS直接操作样式
3.可以用CLASS表示状态
4.纯展示类交互寻求零JS方案

组件是指web上抽出来的包含模板,功能,样式的单元,好的组件具备封装性,正确性,扩展性,复用性

基本方法

重构:插件化
解耦

高阶函数

-以函数作为参数
-以函数作为返回值
-常用做函数装饰器

输入不变则结果不变且可预测

如

尽可能的使用纯函数,可以提高代码的维护性

-命令式
-声明式