前端与 JS | 青训营笔记

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

01编码原则——各司其责

JS抽取状态，完成class切换

• 不要直接用JS完成DOM操作
• 抽取状态后，可以扩展其他功能，且利于后续修改样式

const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
  const body = document.body;
  if(body.className !== 'night') {
    body.className = 'night';
  } else {
    body.className = '';
  }
});

body.night {
  background-color: black;
  color: white;
  transition: all 1s;
}

#modeBtn::after {
  content: '🌞';
}
body.night #modeBtn::after {
  content: '🌜';
}

CSS代替JS逻辑

• CSS伪类代替JS代码
• 选中后为.content类增添新的样式
• 这里checkbox的状态充当了记录工具，因此不需要再验证classname

#modeCheckBox:checked + .content {
  background-color: black;
  color: white;
  transition: all 1s;
}

02JS的组件封装-轮播图

基本设计

• 结构设计-HTML

• • ul实现

• 表现设计-CSS

• • 绝对定位
  • 切换状态使用修饰符
  • 切换动画CSS transition

• 行为-JS

• • 

重构优化-插件化解耦

重构优化-模板化

抽象-将组件模型抽象出来

03过程抽象

操作次数限制

• 封装一个高阶函数once

• • 

节流函数

• 

• • 延时释放timer锁，此时操作都不能触发

防抖

• 

• • 频繁触发时，timer会被销毁，静下来才能被触发

consumer

• 

• • 延时调用

04编程范式

命令式

怎么做

声明式

做什么

05实战代码优化

求一个数是否是4的幂

1. 基本实现
   最基本的实现当然是一个最常用的“算法”，暴力递推。因为如果一个数是4的幂次，那么他累除4的结果绝对是1，%4的结果绝对是0。

2. 位运算优化 在上节代码之上做优化最基础的方法就是把数学计算都改成位运算。

3. 数学优化
   通过数学归纳法，我们可以发现，4的幂 & 4的幂-1的结果绝对是0，并且4的幂 & 0xAAAAAAAA的结果也需要为0（因为2的幂次同样可以满足第一条规则）。

4. 或者可以使用正则来实现。因为四的幂的二进制一定是一个1和n个00。