javascript

最近翻看张鑫旭大佬的博客，发现了一篇不错的文章，于是就把大佬的代码拷贝下来学习了下，作为多年前端的我居然看的不是很懂，自信息大大受打击了，于是把其中关键部分写出来，方便日后学习。

通过变量查找这条线来贯穿了js中的作用域链、闭包及this机制。变量根据作用域链查找，链的确定按照词法作用域的规则确定。闭包是一类特殊变量，它能实现私有变量的特性。this机制是为了弥补作用域链的不足

异步任务里面的错误需要正确利用try catch捕获，需要配置`async await`一起使用，因为它利用协程的概念，能切换执行的上下文。

本文利用indexDB构建一个前端数据库体系，这样前端可以不必依赖后台就能完成一个完整的应用。同时，可以利用这套体系进行MOCK，当对接的时候换成真正的后台接口即可，非常快速。

axios库是前端开发中最常用的库，用好axios能给前端开发带来很多遍历，本文模仿axios库实现了一个简化版的axios，它实现了灵活调用，拦截器功能等功能。

现在有一个需求，可以让用户来定义异步任务的执行状态，axios就给我们演示了如何让用户决定异步任务的执行状态。重点是把reslove函数传递到外部，方法是通过一个函数包裹然后扔给外部变量。

axios对配置的处理是非常值得学习的，首先是对config各个key采取不同的合并策略，接着是利用用户自定义函数对请求和相应配置进行自定义，最后利用create函数创建单独的实例，以免污染整个实例。

异步函数的并行和串行是面试中经常被问到的。串行无非就是前面一个异步回调结束后调用下一次异步函数，可以使用async和递归两种方式来使用。注意，异步函数都需要被用包装成promise的形式。

axios拦截器本质上就是在请求前后对config和response对象进行修改，那就要求有一个任务链来收集用户定义的拦截器，然后链式调用，这里采用Promise来完成了链式调用。

文章中演示了原生js帧动画库的普通使用和高级使用方法，高级使用是通过自定义动画逻辑来实现了特殊的效果。它们的核心原理就是把所有的任务存放在队列中，然后依次去执行。

利用raf实现了一个不断循环执行一段逻辑的功能，就是弊端改变图片的position位置形成动画效果。这段逻辑定义在animation类中，可以使用户自定义运动逻辑。

帧动画就是在时间轴上的每帧绘制不同的内容，使其连续播放而成的动画，本文采用把所有动画关键帧绘制在一张图片中，把图片作为元素的background-image，定时改变元素的position。

封装一个功能完善，代码健壮的需求并不是一个简单的事情，在本文中的图片预加载功能，不仅考虑了数据格式，回调函数以及超时时间，同时对边界条件的处理非常严谨。

现在框架流行，导致自己对原生js的使用越来越生疏，本文利用datepicker组件来温习下javascript是如何实现一个组件的，主要难点是利用js来操作dom。

我们通过事件循环来处理运行过程中产生的任务，然后通过消息队列来接受其他进程传来的任务，这样就能处理页面中的所有任务了。

最初的浏览器都是单进程的，它们不稳定、不流畅且不安全，之后出现了 Chrome，创造性地引入了多进程架构，并解决了这些遗留问题。

前端在工作中其实不太关注垃圾回收，因为一般用户使用之后就会关闭浏览器，不像后台服务需要7*24小时运行。但是，随着前端页面越来越复杂，这时候考虑垃圾回收就显得很有必要了。

如果做web的性能优化，那么必须要对js的内存机制有很详细的了解。本文对栈内存和堆内存做了详细的讲解，最后站在内存模型的角度分析了闭包的产生机制。

数组的操作是工作中常用的，我们要熟练掌握，不要等到用的时候才去到网上找它的用法，本文整理了数组中的常用方法，方便日后查阅。

promise在流程比较复杂的情况也存在局限性，所以async/await应运而生，本文首先从生成器和协程入手，最后过渡到async/await的实现原理，彻底搞懂async/awaite。