【青训营】写好JS——做好抽象

2022-06-19 143

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【青训营】写好JS——做好抽象

所谓"抽象化"，就是指从具体问题中，提取出具有共性的模式，再使用通用的解决方法加以处理。

一个例子：交通灯切换

让你用原生JS实现一个交通灯切换的组件，怎么抽象？怎么提高扩展性和复用性？

新手入门

你可能会觉得红绿灯很简单，三个状态用setTimeout()嵌套一下就可以了：

const traffic = document.getElementById('traffic');
(function reset() {
  traffic.className = 's1';
  setTimeout(function () {
    traffic.className = 's2';
    setTimeout(function () {
      traffic.className = 's3';
      setTimeout(reset, 1000)
    }, 1000)
  }, 1000);
})();
复制代码

但是，这时候如果需要复用，再加两个灯怎么办？再嵌套两个状态？

(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);
})();
复制代码

这样显然不行，多个异步函数回调会造成“callback hell”，有同学可能会说那用setInterval()就可以了，但是如果每个灯的持续时间不同呢？

数据抽象

第二个版本我们对交通灯做一个数据的抽象封装：

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);
复制代码

通过传参调用setTimeout()来创建新的状态和持续时间，这样我们就得到了一个通用的版本。如果需要新的状态就在stateList里添加即可：

const stateList = [
  { state: 'wait', last: 1000 },
  { state: 'stop', last: 3000 },
  { state: 'pass', last: 3000 },
  { state: 'new', last: 500}
];
复制代码

不过因为我们没有做模板的抽象，所以要手动地添加部分HTML和CSS代码。

过程抽象

第三个版本我们使用刚讲过的过程抽象将其抽象成一个轮询的函数，每次去执行异步函数就可以了：

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();
  }
}());
复制代码

简化通用

过度的抽象是一种负担。

wait()是异步的，setState()是瞬间的，这样既简化了代码，也更符合人的直觉：

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();
复制代码