JavaScript由浅入深 | 青训营笔记

---

theme: smartblue

highlight: androidstudio

这是我参与「第四届青训营 」笔记创作活动的第3天 # JavaScript由浅入深

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

由浅入深

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

比如月影老师举的例子： - 类似红绿灯的状态切换：

```js 版本一: //通过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); })(); ``` 我们可以对其进行数据抽象： 将需要使用的数据给抽象出来，这样会方便修改数据，就不需要去动较大范围的代码了

```js 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); 将过程抽象： 如果在某一过程出现了错误直接去看该过程的方法就可以了 js 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(); } }()); ``` 异步加函数式： 分别写出等待和状态的函数，然后使用异步函数调用。

```js 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是不断升级不断优化的一门语言，需要不断的学习，防止落后于时代。