JS学习 | 青训营笔记

27 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第3天,今天学习的内容是前端基础三件套中的JavaScript。

本次课程没有介绍语法与基本用法这些内容,而是从具体问题分析提出写好JS的几个原则,对于其他语言写项目的时候同样适用。

什么是好的JavaScript代码?

  • 懂语法不代表能写好代码
  • 三个原则:各司其职、组件封装、过程抽象

各司其职

简化后的问题:如何使用JS实现网页的深色浅色模式切换?

  • 方案一:监听到点击事件发生时,通过判断按钮内容是深色(🌛)还是浅色(🌞)来切换style,会使用DOM API即可实现;

  • 优化方案二:通过更改body的状态(className)改变样式,而不是直接操控CSS

  • 优化方案三:使用纯CSS方案实现这种仅样式切换的功能

tips:::after 在原始元素的实际内容之后立即表示一个可设置样式的子伪元素

小结

  • HTML/CSS/JS各司其责
  • 应当不必要的由JS直接操作样式
  • 可以用class表示状态
  • 纯展示类交互寻求零JS方案

组件封装