女王控的博客

前端

123 篇文章

插件机制、拦截器、中间件

前言 前端中的库很多,开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求,但是总有无法预料到的,所以优秀的库就需要提供一种机制,让开发者可以干预插件中间的一些环节,从而完成自己的一些需求。 本文将从 koa、axios、vuex 和 redux 的实现来教你怎么编写属于自己的插件机制。 axios 首先我们模拟一个简单的 axios,这里不涉及请求的逻辑,只是简单的返回一个 Promise,可以通过 config 中的 error 参数控制 Promise 的状态。 axios… »

异步异常处理的演进

我们需要一个健全的架构捕获所有同步、异步的异常。业务方不处理异常时,中断函数执行并启用默认处理,业务方也可以随时捕获异常自己处理。 优雅的异常处理方式就像冒泡事件,任何元素可以自由拦截,也可以放任不管交给顶层处理。 回调 如果在回调函数中直接处理了异常,是最不明智的选择,因为业务方完全失去了对异常的控制能力。 下方的函数请求处理不但永远不会执行,还无法在异常时做额外的处理,也无法阻止异常产生时笨拙的 console.log… »

手写async await的最简实现

示例 思路 对于这个简单的案例来说,如果我们把它用generator函数表达,会是怎么样的呢? 我们知道,generator函数是不会自动执行的,每一次调用它的next方法,会停留在下一个yield的位置。 利用这个特性,我们只要编写一个自动执行的函数,就可以让这个generator函数完全实现async函数的功能。 那么大体上的思路已经确定了,asyncToGenerator接受一个generator函数,返回一个promise, 关键就在于,里面用yield… »

Promise 实现原理

简化版 代码 这个 Promise 的实现不考虑任何异常情况,只考虑代码最简短,从而便于读者理解核心的异步链式调用原理。 核心案例 本文将围绕这个最核心的案例来讲,这段代码的表现如下: 500ms 后输出 1 500ms 后输出 2 实现 构造函数 首先来实现 Promise 构造函数 好,写到这里先回过头来看案例 分开来看,fn 就是用户传的函数,这个函数内部调用了 resolve 函数后,就会把 promise 实例上的 cbs 全部执行一遍。 到此为止我们还不知道 cbs… »

Webpack原理入门

概括 Webpack 以其使用简单著称,在使用它的过程中,使用者只需把它当作一个黑盒,需要关心的只有它暴露出来的配置。 本节将带你走进这个黑盒,看看 Webpack 是如何运行的。 基本概念 在了解 Webpack 原理前,需要掌握以下几个核心概念,以方便后面的理解: Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。 Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry… »

0%