左手121-CSDN博客

原创 Promise.all 限制并发

实现function PromiseLimit(funcs, limit = 5) { const list = [...funcs] const result = [] const executing = [] function queue() { const func = list.shift() if (!func) return Promise.all(executing) const promise = func() result.push(pr

2022-04-20 10:24:09 351

原创 TypeScript 杂记十二《Multiply》

TypeScript 杂记十二《Multiply》Multiplytype T0 = Multiply<2, 3>; // '6'type T1 = Multiply<3, "5">; // '15'type T2 = Multiply<"4", 10>; // '40'type T3 = Multiply<0, 16>; // '0'type T4 = Multiply<"13", "21">; // '273'type T5 =

2022-03-07 16:24:39 543

原创 TypeScript 杂记十一《Assert Array Index》

TypeScript 杂记十一《Assert Array Index》Assert Array Index简介在获取数组中某一项的值时候，如下：const numbers = [5, 7];console.log(numbers[1].toFixed());TS 不会以任何方式检查我们正在访问数组的实际索引处的元素，如下使用会报错const numbers = [5, 7];// 校验不报错，但是运行报错console.log(numbers[100].toFixed());

2022-03-04 13:08:57 583

原创 TypeScript 杂记十《断言函数》

TypeScript 杂记十《断言函数》有一类特定的函数，在非预期结果出现时会抛出一个错误。这类函数就叫做断言函数。从 v3.7 开始，TypeScript 添加了一个名为 asserts 的新关键字，它能够使编译器从断言起就知道正确的类型。断言函数的几种形式：asserts 关键字，函数返回值是 voidis 关键字，函数返回值是 booleanfunction assert(input: any): asserts input {}function assert(input:

2022-03-03 13:04:02 718

原创 TypeScript 杂记九《Integers Comparator》

TypeScript 杂记八《Integers Comparator》Integers Comparator思路参考这篇文章中的思路：TypeScript 杂记五《Sort》完整示例type Reverser<T> = T extends 1 ? -1 : T extends 0 ? 0 : 1type StringToArray<T extends string, RR extends string[] = []> = T extends `${infer L

2022-03-02 18:16:41 259

原创 TypeScript 杂记八《Query String Parser》

TypeScript 杂记八《Query String Parser》Query String Parser思路求出每一个 k=v，可能会出现下边的情况：aaa=1&bbbaaatype ParserHelper< T extends string, R extends Record<string, unknown[]> = {}> = T extends `${infer A}&${infer B}` ? A extends `

2022-03-02 11:54:59 452

原创 TypeScript 杂记七《JSON Parser》

TypeScript 杂记七《JSON Parser》JSON Parser思路先写主类型的大概如果是 {} 包裹则返回 ParserObject如果是 [] 包裹则返回 ParserArray否则返回原本的数据，这里我们额外处理一下 true，false，null不考虑 Numbers 和 Unicodetype Parser<T extends string> = T extends `{${infer S}}` ? ParserObject<S>

2022-02-28 19:01:08 503

原创 TypeScript 杂记六《柯里化》

TypeScript 杂记六《柯里化》柯里化说明简单通过一个示例说明柯里化的结果const add = (a: number, b: number, c: number) => a + b + c;add(1, 1, 1);// 柯里化之后的效果const curriedAdd = DynamicParamsCurrying(add);curriedAdd(1, 2, 3);curriedAdd(1, 2)(4);curriedAdd(2)(3)(4);思路简单定义一

2022-02-25 13:45:11 410

原创 TypeScript 杂记五《Sort》

TypeScript 杂记五《Sort》说明SortSort<[]> // []Sort<[1]> // [1]Sort<[2, 4, 7, 6, 6, 6, 5, 8, 9]> // [2, 4, 5, 6, 6, 6, 7, 8, 9]Sort<[3, 2, 1], true> // [3, 2, 1]Sort<[3, 2, 0, 1, 0, 0, 0], true> // [3, 2, 1, 0, 0, 0, 0]扩展：

2022-02-24 17:40:16 1420

原创 TypeScript 杂记四《Sum》

TypeScript 杂记四《Sum》Sumtype T0 = Sum<2, 3> // '5'type T1 = Sum<'13', '21'> // '34'type T2 = Sum<'328', 7> // '335'type T3 = Sum<1_000_000_000_000n, '123'> // '1000000000123'输入的类型为 number string 和 bigint，大致定义如下：type Sum<

2022-02-17 11:37:19 462

原创 TypeScript 杂记三《Slice》

TypeScript 杂记三《Slice》Slice实现 Slice 的功能// Slice<Arr, Start, End>type Arr = [1, 2, 3, 4, 5];type Result = Slice<Arr, 2, 4>; // expected to be [3, 4]大致的定义如下，Start 和 End 可以省略，省略的时候一个默认是 0，一个默认是数组的长度type Slice< A extends any[], S

2022-02-15 21:27:15 780

原创 TypeScript 杂记二《类型体操》

TypeScript 杂记二《类型体操》type-challenges 题目前提type A = keyof any// ===type A = string | number | symbol// infer 表示待推断的类型，如下内置类型type ReturnType<T> = T extends (...args: any[]) => infer P ? P : anytype B = ReturnType<(value: string) => str

2022-02-15 21:26:37 569

原创 TypeScript 杂记一

TypeScript 杂记一string 和 String 的区别string 是一个 TypeScript 的基础数据类型String 是一个构造函数，通过 new 可以创建一个实例对象。直接使用返回的是一个类型是 string 的变量const a: String = new String("a");typeof a === "object";typeof a.toString() === "string";const b: string = String("b");typeof

2022-02-11 10:32:46 572

原创请求拦截 XMLHttpRequest和fetch

// 拦截请求const XHR = window.XMLHttpRequestwindow.XMLHttpRequest = class XMLHttpRequest extends XHR { method = 'GET' constructor() { super() const { open } = this this.open = ( method: string, url: string | URL, async?: b

2022-01-24 13:50:19 1190

原创使用 koa + typescript + 装饰器搭建 mock 服务

使用 koa + typescript + 装饰器搭建 mock 服务基本的包信息和运行的脚本{ "name": "mock", "version": "1.0.0", "license": "MIT", "main": "index.js", "scripts": { "start": "node index.js" }, "dependencies": { "chalk": "^4.1.0", "jsonwebtoken": "^8.5.1",

2021-07-06 17:33:36 893

原创 babel 插件（为组件自动添加高阶函数，例如 hot）

babel 插件（为组件自动添加高阶函数，例如 hot）目前只支持添加一个，感兴趣的可以自己去修改说明传递参数identifier: 导出组件的名字source: 组件的路径local: 接收的模式，默认 truetrue: import A from 'xxx'false: import { A } from 'xxxx'filter: 过滤函数识别规则符合下述规则的组件才会去进行修改文件中引入了 React组件通过 export default 导出export

2021-02-03 15:59:58 462

原创并查集（Disjoint Set）

并查集（Disjoint Set）简介并查集是一种非常精巧而实用的数据结构，它主要用于处理一些不相交集合的合并问题。一些常见的用途有求连通子图、求最小生成树的 Kruskal 算法和求最近公共祖先（Least Common Ancestors, LCA）等。常常在使用中以森林来表示。集就是让每个元素构成一个单元素的集合，也就是按一定顺序将属于同一组的元素所在的集合合并。详细内容可以参考视频：视频地址思路初始化将所有的元素都独立为一个集合/树，形成森林循环处理x -> y 组成一个路

2020-06-08 19:14:19 216

原创动态规划 (Dynamic programming / DP)

动态规划 (Dynamic programming / DP)简介动态规划主要用来解决一些希望找到问题最优解的优化问题。一种可以用动态规划解决的情况就是会有反复出现的子问题，然后这些子问题还会包含更小的子问题。相比于不断尝试去解决这些反复出现的子问题，动态规划会尝试一次解决更小的子问题。之后我们可以将结果输出记录在表格中，我们在之后的计算中可以把这些记录作为问题的原始解。以下是两种不同的动态规划解决方案：自上而下：你从最顶端开始不断地分解问题，直到你看到问题已经分解到最小并已得到解决，之后只用返

2020-06-08 19:13:48 169

原创快慢指针算法

快慢指针简介快慢指针就是定义两根指针，移动的速度一快一慢，以此来制造出自己想要的差值。这个差值可以让我们找到链表上相应的节点。求一个链表的中间值，我们将快指针每次走两步，慢指针每次走一步。当快指针到达末尾，慢指针就是中间值。删除链表的倒数第 N 个值，我们将快指针每次走 1 步，慢指针每次走 1 步但是比快指针慢 N 步。当快指针到达末尾，慢指针就是需要删除的点。判断链表是否是循环链表，我们将快指针每次走两步，慢指针每次走一步。当快指针和慢指针相遇就表示有环，否则没有。类似我们操场上跑步，如果是

2020-06-08 19:13:20 260

原创微前端工程之间的通讯

微前端工程之间的通讯原理使用发布订阅者模式：一方订阅，一方发布。使用单例模式：一个工程内使用同一个实例。微前端加载，首先加载父工程，随后根据配置加载对应的一个或者多个子工程。父工程先一步生成实例，并传递给子工程。子工程则使用这个实例初始化自己的实例。共享同一个实例。代码import { getState } from "./utils";let instance: BusI...

2020-04-12 14:18:22 1320

原创微前端

微前端简介借鉴微服务的概念来应用在前端上，将一个巨大的前端工程拆分成一个的小工程，这些小工程具备独立的开发和运行能力，而整个系统就由这些小工程协同合作。优点:应用自治 : 只需要遵循统一的接口规范或者框架，以便于系统集成到一起，相互之间是不存在依赖关系的。单一职责 : 每个前端应用可以只关注于自己所需要完成的功能。技术栈无关 : 你可以使用 Angular 的同时，又可以使用 Rea...

2020-04-12 14:15:33 1132

原创前端模块化的发展史

前端模块化的发展史1、早期Javascript 不是一种模块化编程语言，在 ES6 以前，它是不支持类 class，所以也就没有模块 module。因此社区一直在寻找如何实现模块化效果的最佳可行性方案。原始写法：模块就是实现特定功能的一组方法。只要将多个函数放到一个文件中，引入这个文件就可以直接使用。缺点：污染全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。...

2020-01-03 16:21:52 272

原创 ES6 Module 多种用法

ES6 Module 多种用法export用户需要知道所要加载的变量名或函数名，否则无法加载规定模块的对外接口，推荐使用第三种export const a = 1export const b = 1// 等价于const a = 1const b = 1export { a }export { b }// 等价于const a = 1const b = 1export ...

2020-01-03 16:19:01 277

原创重新封装Antd Input组件，解决中文输入问题

import React, { useState, useEffect } from 'react'import { Input } from 'antd'function BaseHOC(key) { return function(props) { const { defaultValue, value, onChange } = props const hasVal...

2020-01-02 18:36:11 4583 4

原创 Promise.all 并发限制

Promise.all 并发限制参考链接简介Promise.all 可以保证，promises 数组中所有 promise 对象都达到 resolve 状态，才执行 then 回调。这时候考虑一个场景：如果你的 promises 数组中每个对象都是 http 请求，或者说每个对象包含了复杂的调用处理。而这样的对象有几十万个。那么会出现的情况是，你在瞬间发出几十万 http 请求（tcp ...

2019-12-24 17:31:58 3207

原创 React 16.x+版本的生命周期变化

React 16.x+版本的生命周期变化官方文档参考简介componentWillMount : 实例挂载之前componentWillReceiveProps : props 发生变化时执行，初始化 render 时不执行componentWillUpdate : 每次页面更新之前调用这些生命周期经常被误解和滥用。此外，我们预计他们的潜在滥用可能在异步渲染方面有更大的问题。因此...

2019-11-22 17:22:03 696

原创 BEM 和 CSS Modules

BEM 和 CSS Modules简介CSS 入门简单，深入就比较难，样式简单维护难。因为 CSS 是全局性的，所以很容易就出现样式冲突的问题。为解决这个问题。最通常的做法是 CLASS 命名写长一点或者加一层父级选择器从而降低冲突的几率。但是这样 CSS 的命名就变得很混乱。因此就出现了这样一种解决方案：命名约定。例如：BEM、OOCSS、AMCSS、SMACSS。其中使用最为广泛的是 ...

2019-09-02 16:35:39 769

原创文件下载、上传和断点续传数据处理的公共基本方法

import axios from './axios'export const requestBaseUpload = (url, params, type = 'post', headers = { 'Content-Type': 'multipart/form-data' }, options = {}, loading = true) => { const data = new...

2019-06-18 16:58:26 546

原创浅谈前端测试

浅谈前端测试浅谈 TDD 和 BDDTDD Test Driven Development (测试驱动开发)一种使用自动化单元测试来推动软件设计并强制依赖关系解耦的技术。使用这种做法的结果是一套全面的单元测试，可随时运行，以提供软件可以正常工作的反馈。大概的流程是先针对每个功能点抽象出接口代码，然后编写单元测试代码，接下来实现接口，运行单元测试代码，循环此过程，直到整个单元测试都通过。这...

2019-03-25 12:04:11 4306

原创你可能不知道的 Promise

你可能不知道的 Promise简介Promise 有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态一旦状态改变，就不会再变状态只能 pending->fulfilled/rejected如果状态改变已经发生了，你再对 Promise 对象添加回调函数，也会...

2019-03-21 11:57:44 236

原创浏览器垃圾回收机制

浏览器垃圾回收机制简介由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。JavaScript 使用垃圾回收机制来...

2019-03-20 17:20:14 4599 1

原创 Async、Await 实现原理

Async、Await 实现原理简介async 用于声明一个函数是异步的await 用于等待异步完成await 只能在 async 函数中使用async 返回一个 promiseawait 后边永远跟的是一个 promise，如果是一个非 promise，则会自动转换为 promiseAsync、Await 是通过 Generator + Promise 实现babel 转码...

2019-03-20 15:54:01 2794 2

原创 TypeScript XXX.d.ts 文件描述

TypeScript XXX.d.ts 文件描述简介TypeScript 的核心在于静态类型，我们在编写 TS 的时候会定义很多的类型，但是主流的库都是 JavaScript 编写的，并不支持类型系统。TypeScript 身为 JavaScript 的超集，自然需要考虑到如何让 JS 库也能定义静态类型。TypeScript 经过了一系列的摸索，先后提出了 tsd(已废弃)、typings...

2019-03-07 15:41:15 2215

原创 Vue computed 实现原理

Vue computed 实现原理Vue 2.5.171、Vue 在初始化的时候会 initState ，这个方法会初始化 props methods data computed watch// 4069vm._self = vm;initLifecycle(vm);initEvents(vm);initRender(vm);callHook(vm, 'beforeCreate...

2019-03-03 16:35:47 4821

原创 JavaScript 异步

JavaScript 异步为什么 JavaScript 是单线程JavaScript 的主要用途是与用户互动，以及操作DOM。假定 JavaScript 同时有两个线程，一个线程在某个 DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript 就是单线程，这已经成了这门语言的核心特征，将来也不会改变。为了利用多核 ...

2019-03-03 16:33:55 191

原创 Vue 路由懒加载根据根路由合并chunk块

路由懒加载的小技巧一般来说当我们的项目越来越大的时候，我们打包的文件也越来越大。这时候我们的首屏加载就会很慢。因此我们会使用到路由的懒加载机制来对我们的模块进行划分。export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/A', ...

2019-03-01 11:53:26 2961

原创 Angular(7) 学习资料（9）i18n

i18n应用程序的国际化涉及到开发的很多方面，主要是如何让应用可以被全世界的用户使用而且用起来比较友好。本章内容主要讲的下面几个方面：Angular 内置国际化ngx-translate : 用来给我们自己的组件添加国际化支持，主要模块是 @ngx-translate/core,@ngx-translate/http-loaderng-zorro-antd : 使用的第三方组件库，其内部...

2019-03-01 10:00:27 1375

原创 Angular(7) 学习资料（8）HttpClient

HttpClient简介现代浏览器支持使用两种不同的 API 发起 HTTP 请求：XMLHttpRequest 接口和 fetch() API。@angular/common/http 中的 HttpClient 类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能。它基于浏览器提供的 XMLHttpRequest 接口。HttpClient 带来的其它优...

2019-03-01 09:24:47 2736

原创 Angular(7) 学习资料（7）RxJS

RxJS 6+ 入门学习简介与基本概念RxJS 是 ReactiveX 编程理念的 JavaScript 版本。ReactiveX 来自微软，它是一种针对异步数据流的编程。简单来说，它将一切数据，包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。RxJS 是...

2019-03-01 09:23:59 1324

原创 Angular(7) 学习资料（6）路由与导航

路由与导航基础Angular 的路由器是一个可选的服务，它用来呈现指定的 URL 所对应的视图。它并不是 Angular 核心库的一部分，而是在它自己的 @angular/router 包中。像其它 Angular 包一样，你可以从它导入所需的一切。&amp;lt;base url=&quot;/&quot;&amp;gt; : 大多数带路由的应用都要在index.html的 &amp;lt;head&amp

2019-02-28 15:21:06 663

SVM SMO Python 附加数据

空空如也