这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
知识要点与个人感悟
一、如何写好JavaScript
- 书籍推荐
- 犀牛书（JavaScript权威指南）
- JavaScript语言精髓
- 红宝书（JavaScript高级程序设计）
1.各司其职
- 让HTML、CSS和JavaScript只能分离
- 例子：
一段JS，控制一个页面，让其支持深色浅色模式：
- 利用初始DOM的api：
>a. 点击按钮，当按钮是什么形状时变字体颜色和背景颜色，代码如下
const btn = document.getElementById( ' modeBtn ' );btn.addEventListener( 'click ', (e ) =→> {
const body = document.body ;
if( e.target.innerHTML === '1') {
body.style.backgroundColor = 'black ' ;body .style.color = 'white ' ;
e.target.innerHTML = '2';}else {
body.style.backgroundColor = 'white' ;body .style.color = 'black ' ;
e.target.innerHTML ='1';}
});
- 利用class类，定义一个nightclass类夜间模式，判断如果是夜间是添加上class为night的类，否则就默认的class模式
const btn = document.getElementById( ' modeBtn');btn.addEventListener( 'click ', (e)=> {
const body = document.body;
if( body.className !== 'night ' ) {
body.className = 'night ' ;}else {
body.className = ' ';}
});
上面来看第一个不好的在于他是用JavaScript去控制css的样式，没有行使各司其职的作用，这样后期PM更改需求时，作为开发人员不能很好地去理解原始需求是什么。
3. 因为白天夜间模式控制样式改变应该属于纯CSS改变，可以利用纯CSS实现，不需要JavaScript。
- 实现原理：只有html和css
1. 使用css高级功能：伪类选择器匹配元素状态
2. 给你个checkbox设置一个checked状态
3. 通过给checked状态设置样式
4. 对html代码作出相应修改：在一开始放入一个input标签CheckBox，更改为不显示（display：none），并设置一个label标签去for一个元素（这里就是那一个input标签-CheckBox），这样点击这一个label是与直接点击input标签中的CheckBox是一样的。
- HTML部分
<body>
<input id="modeCheckBox" type="checkbox"><div class="content">
<header>
<label id="modeBtn" for="modeCheckBox"></label><h1>深夜食堂</h1>
</ header>
<main>
</main></div>
</body>
- CSS部分
#modeCheckBox :checked + .content {
background-color: black;
color: white;
transition: all 1s;}
结论
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式可以用class来表示状态
- 纯展示类交互寻求零JS方案
2. 组件封装
- 好的UI组件具备正确性、扩展性、复用性
3. 过程抽象
- 应用函数式编程思想
