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

JavaScript由浅入深

简介

JavaScript是一门轻量级、可插入 HTML 页面、可由所有的现代浏览器执行的脚本语言。它也是一门易学、不断升级、优化的语言。是前端开发人员必学的一门语言。

由浅入深

在JavaScript的学习中，一个功能可能有很多种写法，也许方法一简单易懂、方法二插件化容易更换、方法三代码量少、方法四性能强。因此，我们在不同的应用场景可以使用不同的方法，有时候效率优先、有时候数据需要经常更换，所以，每一种方法都有其优点和适合的应用场景。

比如月影老师举的例子：

类似红绿灯的状态切换：

版本一:
//通过id定位
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();

JavaScript是不断升级不断优化的一门语言，需要不断的学习，防止落后于时代。

JavaScript由浅入深 | 青训营笔记

JavaScript由浅入深

简介

由浅入深