前端青训营-语言篇-JavaScript ｜ 豆包MarsCode AI 刷题

各司其责

案例：实现页面夜间和白天模式的切换。

版本一：js控制css

版本二：js控制类名，css还是由css文件管理，才是各司其职

版本三：纯CSS进行控制

这里通过for把label和checkbox绑定了。

小结

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

组件封装

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。

好的组件具备封装性、正确性、扩展性、复用性。

案例：原生JS实现轮播图。

结构HTML

• 轮播图是一个典型的列表结构，我们可以使用无序列表<ul>元素来实现。

表现CSS

• 使用CSS绝对定位将图片重叠在同一个位置
• 轮播图切换的状态使用修饰符（modifier）
• 轮播图的切换动画使用CSS transition

行为API

• API设计应保证原子操作，职责单一，满足灵活性。

行为：控制流

• 使用自定义事件来解耦。

小结：组件设计的基本方法

• 结构设计
• 展现效果
• 行为设计
  • API-功能
  • Event-控制流

三级重构

• 插件化：通过解耦，将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。

• 模板化：通过解耦将HTML模板化，更易于拓展

• 抽象化：将通用的组件模型抽象出来

小结

• 组件设计的原则：封装性、正确性、扩展性、复用性
• 实现组件的步骤：结构设计、展现效果、行为设计
• 三次重构
  • 插件化
  • 模板化
  • 抽象化（组件框架）

过程抽象

过程抽象是用来处理局部细节控制的一些方法，函数式编程思想的基础应用

案例：任务列表删除

在这个案例中，我们需要对操作次数进行限制。如一些异步交互和一些一次性的HTTP请求。

为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

高阶函数HOF

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

常用的高阶函数：

• 单次调用，Once

function once(fn) {
  return function(...args) {
    if(fn) {
      const ret = fn.apply(this, args);
      fn = null;
      return ret;
    }
  }
}

const list = document.querySelector('ul');
const buttons = list.querySelectorAll('button');
// buttons.forEach((button) => {
//   button.addEventListener('click', once((evt) => {
//     const target = evt.target;
//     target.parentNode.className = 'completed';
//     setTimeout(() => {
//       list.removeChild(target.parentNode);
//     }, 2000);
//   }));
// });

const foo = once(() => {
  console.log('bar');
});

foo();
foo();
foo();

• 节流，Throttle

function throttle(fn, time = 500){
  let timer;
  return function(...args){
    if(timer == null){
      fn.apply(this,  args);
      timer = setTimeout(() => {
        timer = null;
      }, time)
    }
  }
}

btn.onclick = throttle(function(e){
  circle.innerHTML = parseInt(circle.innerHTML) + 1;
  circle.className = 'fade';
  setTimeout(() => circle.className = '', 250);
});

• 防抖，Debounce

var i = 0;
setInterval(function(){
  bird.className = "sprite " + 'bird' + ((i++) % 3);
}, 1000/10);

function debounce(fn, dur){
  dur = dur || 100;
  var timer;
  return function(){
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, dur);
  }
}

document.addEventListener('mousemove', debounce(function(evt){
  var x = evt.clientX,
      y = evt.clientY,
      x0 = bird.offsetLeft,
      y0 = bird.offsetTop;
  
  console.log(x, y);
  
  var a1 = new Animator(1000, function(ep){
    bird.style.top = y0 + ep * (y - y0) + 'px';
    bird.style.left = x0 + ep * (x - x0) + 'px';
  }, p => p * p);
  
  a1.animate();
}, 100));

• 延时调用，Consumer

function consumer(fn, time){
  let tasks = [],
      timer;
  
  return function(...args){
    tasks.push(fn.bind(this, ...args));
    if(timer == null){
      timer = setInterval(() => {
        tasks.shift().call(this)
        if(tasks.length <= 0){
          clearInterval(timer);
          timer = null;
        }
      }, time)
    }
  }
}

function add(ref, x){
  const v = ref.value + x;
  console.log(`${ref.value} + ${x} = ${v}`);
  ref.value = v;
  return ref;
}

let consumerAdd = consumer(add, 1000);

const ref = {value: 0};
for(let i = 0; i < 10; i++){
  consumerAdd(ref, i);
}

function consumer(fn, time){
  let tasks = [],
      timer;
  
  return function(...args){
    tasks.push(fn.bind(this, ...args));
    if(timer == null){
      timer = setInterval(() => {
        tasks.shift().call(this)
        if(tasks.length <= 0){
          clearInterval(timer);
          timer = null;
        }
      }, time)
    }
  }
}

btn.onclick = consumer((evt)=>{
  let t = parseInt(count.innerHTML.slice(1)) + 1;
  count.innerHTML = `+${t}`;
  count.className = 'hit';
  let r = t * 7 % 256,
      g = t * 17 % 128,
      b = t * 31 % 128;
  
  count.style.color = `rgb(${r},${g},${b})`.trim();
  setTimeout(()=>{
    count.className = 'hide';
  }, 500);
}, 800)

• 迭代，Iterative

const isIterable = obj => obj != null 
  && typeof obj[Symbol.iterator] === 'function';

function iterative(fn) {
  return function(subject, ...rest) {
    if(isIterable(subject)) {
      const ret = [];
      for(let obj of subject) {
        ret.push(fn.apply(this, [obj, ...rest]));
      }
      return ret;
    }
    return fn.apply(this, [subject, ...rest]);
  }
}

const setColor = iterative((el, color) => {
  el.style.color = color;
});

const els = document.querySelectorAll('li:nth-child(2n+1)');
setColor(els, 'red');

优势：纯函数不会改变外部状态，这些函数的输入输出是确定的，可以减少测试工作。

编程范式

js既有命令式（左侧）的特点，也有声明式（右侧）的特点。

案例：命令式实现

switcher.onclick = function(evt){
  if(evt.target.className === 'on'){
    evt.target.className = 'off';
  }else{
    evt.target.className = 'on';
  }
}

案例：声明式实现，可以更好的实现多种状态的切换

function toggle(...actions){
  return function(...args){
    let action = actions.shift();
    actions.push(action);
    return action.apply(this, args);
  }
}

switcher.onclick = toggle(
  evt => evt.target.className = 'off',
  evt => evt.target.className = 'on'
);

质量优化

代码的好坏也应该根据代码的实际应用场景和需求来进行判断。

从Left-Pad事件来了解代码优化。

原始版本：

优化版本1：

优化版本2：

案例：交通灯

版本一：用setTimeout

const traffic = document.getElementById('traffic');

(function reset(){
  traffic.className = 's1';
  
  setTimeout(function(){
      traffic.className = 's2';
      setTimeout(function(){
        traffic.className = 's3';
        setTimeout(function(){
          traffic.className = 's4';
          setTimeout(function(){
            traffic.className = 's5';
            setTimeout(reset, 1000)
          }, 1000)
        }, 1000)
      }, 1000)
  }, 1000);
})();

版本二：把状态抽象出来

const traffic = document.getElementById('traffic');

const stateList = [
  {state: 'wait', last: 1000},
  {state: 'stop', last: 3000},
  {state: 'pass', last: 3000},
];

function start(traffic, stateList){
  function applyState(stateIdx) {
    const {state, last} = stateList[stateIdx];
    traffic.className = state;
    setTimeout(() => {
      applyState((stateIdx + 1) % stateList.length);
    }, last)
  }
  applyState(0);
}

start(traffic, stateList);

版本三：过程抽象

const traffic = document.getElementById('traffic');

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function poll(...fnList){
  let stateIndex = 0;
  
  return async function(...args){
    let fn = fnList[stateIndex++ % fnList.length];
    return await fn.apply(this, args);
  }
}

async function setState(state, ms){
  traffic.className = state;
  await wait(ms);
}

let trafficStatePoll = poll(setState.bind(null, 'wait', 1000),
                            setState.bind(null, 'stop', 3000),
                            setState.bind(null, 'pass', 3000));

(async function() {
  // noprotect
  while(1) {
    await trafficStatePoll();
  }
}());

版本四：简单的异步函数

const traffic = document.getElementById('traffic');

function wait(time){
  return new Promise(resolve => setTimeout(resolve, time));
}

function setState(state){
  traffic.className = state;
}

async function start(){
  //noprotect
  while(1){
    setState('wait');
    await wait(1000);
    setState('stop');
    await wait(3000);
    setState('pass');
    await wait(3000);
  }
}

start();

案例：判断4的幂

版本一：对四取模

function isPowerOfFour(num) {
  num = parseInt(num);

  while(num > 1) {
    if(num % 4) return false;
    num /= 4;
  }
  return num === 1;
}

版本二： 按位与

function isPowerOfFour(num) {
  num = parseInt(num);

  while(num > 1) {
    if(num & 0b11) return false;
    num >>>=2;
  }
  return num === 1;
}

版本三：O(1)的方法，依靠二进制数，用数学方法判断。

function isPowerOfFour(num){
  num = parseInt(num);
  
  return num > 0 &&
         (num & (num - 1)) === 0 &&
         (num & 0xAAAAAAAAAAAAA) === 0;
}

版本四：正则表达式匹配

function isPowerOfFour(num) {
  num = parseInt(num).toString(2);
  
  return /^1(?:00)*$/.test(num);
}

案例：洗牌（随机顺序）

错误写法：数越前面出现概率越大

function shuffle(cards) {
  return [...cards].sort(() => Math.random() > 0.5 ? -1 : 1);
}

正确写法：随机抽牌放到最后

function shuffle(cards) {
  const c = [...cards];
  for(let i = c.length; i > 0; i--) {
    const pIdx = Math.floor(Math.random() * i);
    [c[pIdx], c[i - 1]] = [c[i - 1], c[pIdx]];
  }
  return c;
}

优化写法：使用生成器

const cards = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

function * draw(cards){
    const c = [...cards];

  for(let i = c.length; i > 0; i--) {
    const pIdx = Math.floor(Math.random() * i);
    [c[pIdx], c[i - 1]] = [c[i - 1], c[pIdx]];
    yield c[i - 1];
  }
}

const result = draw(cards);

案例：分红包

版本一：切西瓜法（每次切大），会相对均匀

function generate(amount, count){
  let ret = [amount];
  
  while(count > 1){
    //挑选出最大一块进行切分
    let cake = Math.max(...ret),
        idx = ret.indexOf(cake),
        part = 1 + Math.floor((cake / 2) * Math.random()),
        rest = cake - part;
    
    ret.splice(idx, 1, part, rest);
    
    count--;
  }
  return ret;
}

版本二：抽牌法（序列随机抽，从小到大，把值中间的差值作为红包）

function * draw(cards){
  const c = [...cards];

  for(let i = c.length; i > 0; i--) {
    const pIdx = Math.floor(Math.random() * i);
    [c[pIdx], c[i - 1]] = [c[i - 1], c[pIdx]];
    yield c[i - 1];
  }
}

function generate(amount, count){
  if(count <= 1) return [amount];
  const cards = Array(amount - 1).fill(0).map((_, i) => i + 1);
  const pick = draw(cards);
  const result = [];
  for(let i = 0; i < count - 1; i++) {
    result.push(pick.next().value);
  }
  result.sort((a, b) => a - b);
  result.push(amount);
  for(let i = result.length - 1; i > 0; i--) {
    result[i] = result[i] - result[i - 1];
  }
  return result;
}