coderwei的日常

JavaScript异步代码处理方案异步代码的问题​ 不得不说在早期的js中，处理异步代码是一个极具挑战性的问题，也是一个即为头疼的问题，不是说编写异步代码有什么难度，而是编写出维护性与阅读性并存的异步代码有难度，特别是async和await还没有出现的时代，经常在代码中出现一些回调地狱。所以今天我们就结合具体场景来看看异步代码的演进过程，了解历史才能更接近真相。 准备工作 首先很简单，我们就模拟实际开发中经常出现的场景，有的时候我们发送网络请求，需要拿到上一次网络请求的返回值，作为下一次发送网络请求的参数。我们将这个场景简化一下，定义一个Promise 123456function request(url) { return new Promise((resolve, reject) => { resolve(url); });}//我们定义一个函数，返回一个Promise，Promise内部做的事情也很简单，直接将传进来的参数丢出去 第一种解决方案​ 结合实际开发场景，出现了下面的代码 1234 ...

迭代器和可迭代对象迭代器认识什么叫迭代器维基百科对迭代器的定义：迭代器是确使用户在容器对象上遍访的对象，使用该接口无需关心对象内部实现的细节，维基百科的解释确实很正确，但是他喜欢用概念解释概念，所以说也不好理解。我觉得用大白话来形容：就是迭代器可以帮助我们对某个数据结构进行遍历的对象，在很多语言都有，比如说java、python… JavaScript中迭代器 在JavaScript中迭代器也是一个具体的对象，不过这个对象需要符合迭代器协议（iterator protocol）。迭代器协议定义了一系列的值产生的标准。 如果我们阅读英文文档会发现这个位置其实中文翻译的是有问题的，下面这副图才是正确解释 12let arr = [1,2,3,4,5]//符合迭代器协议的对象，可以通过某个标准拿到arr数组中的一个又一个的项，在js中这个标准就是一个特定的next方法 next方法也不是随便定义的一个方法，他也有一定的要求 他是一个无参数或者一个参数的函数，返回一个应当拥有以下两个属性的对象(done、value) 当done的值为false的时候，就代表迭代器可继续产出值，当迭代完毕 ...

JS的寄生组合式继承什么叫继承 在很多语言中，都有继承的概念，继承他可以让我们的代码更加简化，没有那么亢余，在实际开发过程中，我们肯定会遇到多个对象拥有共同属性的情况，这个时候我们是每个对象都写一遍重复的代码呢，还是考虑将其抽离出去，给他们一个共同的父类呢？当我们是开发中习惯了这种思维，我相信整个代码的可阅读性和可拓展性都是不可比的。 如何在js中实现继承首先给出个概念，ES6提出的class，他是一个全新的概念吗？并不是，他只是一种语法糖。一种基于寄生组合式继承的语法糖，下面就详细的看看这到底是一个什么东西？ 首先我们先定义一个普通的构造函数 12345//这里有个细节，或者是是一种规范，通常定义的构造函数我们会以大写字母开头，以便和普通的函数加以区分，这时社区的一种不谋而合规范，即便不遵守从代码层面来说也没问题function People(name, age) { this.name = name; this.age = age;} 然后我们给这个构造函数的原型上定义一些方法 12345678People.prototype.eating = fun ...

响应式原理 提到Vue难免离不开响应式原理，在学习响应式原理之前，首先需要搞明白一个概念：何谓响应式？Vue官方文档响应式的解释是：响应性是一种允许我们以声明式的方式去适应变化的编程范例，乍一看还挺难以理解，用通俗点的大白话来说：响应式就是在数据发生变化的时候执行某个或者某些回调，使页面发生更新，也就是数据驱动页面的更新。今天我们就动手使用原生JS实现Vue的响应式原理 如何实现响应式 首先我们需要准备一个对象 1234let info = { name:'coderwei', age:18} 首先我们可以先定义一个副作用函数，说白了就是我们需要告诉JS，当对象的属性发生变化后，你要做什么 1234//副作用函数:要求传递进来一个函数，函数内部直接执行function watchFn(fn) { fn();} 我们需要利用Proxy拦截info对象的get和set方法想要实现响应式 1234567891011const infoProxy = new Proxy(info, { get(targe ...

vite环境下实现动态路由和webpack的不同require.context和import.meta.glob今天在练习vite项目的时候，需要查询项目中的某个文件，在以前的webpack环境下，可以通过require.context来查询，他可以接受三个参数，第一个是目录，第二个是是否开启递归查询，第三个则是一个正则表达式，要查询那些文件。然后到vite中也有这种需求，经过一番查询，发现其实本质上差不多。文档地址，下面是两种环境下的写法 1234const modulesFiles = require.context('../router/main', true, /\.ts$/) // webpackconst modules = import.meta.glob('../router/main/**/*.ts') //vite写法1const modules = import.meta.globEager("../router/main/**/*.ts") // vite写法2//vite有两种写法：第一种在打包时会进 ...

初识webpack5为什么需要webpack再传统的项目开发中，我们会手动引入项目需要的各个文件，这会带来一个问题，如果我们某个文件依赖另一个文件，那么代码的书写顺序或者是引入的顺序就不能颠倒，不然可能会造成项目崩溃。也不方便后续维护。当然如果我们将所有的文件合并到一个js文件中，确实解决了引入顺序的问题，但是他导致我们的文件过大，如果我们分批加载，用户能够一点点的看到界面的内容，但是但我们合并到一个文件，那么这个文件会变得非常臃肿，界面可能会白屏一段时间才能加载出来，这在项目上线后是致命的。

集合类型基本定义在计算机科学中，集合是一组可变数量的数据项（也可能是0个）的组合，这些数据项可能共享某些特征，需要以某种操作方式一起进行操作。一般来讲，这些数据项的类型是相同的。几乎所有语言中都有集合的存在，常见的实现方式就是哈希表。目前先用js中的对象实现一下。 集合通常有两个特点，第一个就是无序，第二个就是不允许重复。和ES6提供的Set比较相似。 集合中常见的方法 add：向集合中添加一个元素 remove：从集合从移除一个元素 has：如果集合包含某个元素旧返回true，反之返回false clear：移除集合中所有的元素 size：返回集合中元素的数量 values：返回集合中所有的元素 并集操作 交集操作 差集操作 在js中实现集合类型当我们借助于js的对象来实现集合类型的时候就会显的非常简单 前置工作12345class MySet { constructor() { this.items = {}; }} 因为集合就是一个个的对象，我们在类中创建的对象已经能够满足集合的需求，它不像链表一样那么复杂 ...

双向链表基本定义在计算机科学中，双向链表又被称为双链表，也属于链表，但是他每个节点都有两个指针，指向他前一个节点和后一个节点。我们学习单向链表的时候会发现，我们只能从前端遍历到尾端或者是尾端遍历到前端，因为单向链表正如其名：单向，所以说我们可以轻松的得到下一个节点，但是想回到上一个节点是很难的。但是双向链表就不一样的，他每个节点不单单保存着他下一个节点，还保存着他上一个节点，对于操作的方便程度是单向链表无法比拟的。当然，它占用的内存也会大一些 双向链表常见的方法 append：向链表后端新增一个节点 insert：在指定位置插入一个节点 get：返回指定位置的节点 indexOf：返回指定节点在链表的索引，找不到则返回-1 update：修改某个位置的节点 removeAt：移除指定位置的节点 remove：移除链表后端的节点 isEmpty：判断链表有没有节点，有则返回true，反之返回false size：返回链表的节点个数 toString：输出链表的节点，因为实际上我们只需要节点的value，所以需要封装个方法打印出所有的value forwarrdString：从前端遍历到后 ...

单向链表基本概念在计算机科学中，链表（Linked list）是一种常见的基础数据结构，是一种线性表，但是并不会按线性的顺序存储数据，单向链表在每一个节点里存到下一个节点的指针(Pointer)。简单来说，单向链表可以用来储存数据，他在内存中不必是连续的内存空间，链表每个元素由元素本身的值和指向下一个元素的引用组成。 与数组比较数组在通过下标获取元素或者是修改元素的性能比链表高，而链表在插入或者是删除元素的时候性能比数组高，因为数组在插入或者是删除的时候需要做大量的位移，他要给这个元素腾一个位置出来 常见方法 append：向链表尾部添加一个新的元素 insert：向链表的特定位置插入一个新的元素 get：获取指定位置的元素 indexOf：返回指定元素在链表中的索引，如果没找到该元素，就返回-1 update：在链表修改指定位置的元素 removeAt：在链表删除指定位置的元素 remove：在链表删除指定元素 isEmpty：如果链表中不包含任何元素返回true，否则返回false size：返回链表包含的元素个数 toString：输出链表中元素的值 在js中实现链表前置工作1 ...

优先级队列基本概念优先队列是计算机科学中的一类抽象数据类型。优先队列中的每个元素都有各自的优先级，优先级最高的元素最先得到服务；优先级相同的元素按照其在优先队列中的顺序得到服务。优先队列往往用堆来实现。还是那句话，维基百科喜欢用概念解释概念，简而言之：正常的队列，插入一个元素，都会放到后端，优先级队列需要在插入元素的时候考虑这个数据的优先级，然后和别的元素比较优先级，最后得出这个元素在队列中正确的位置。 在js中实现优先级队列1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859// 因为我们每个元素都是一个对象，要包含本身的值，还有他的优先级，所以定义一个构造函数function QueueElement(item, priority) { this._item = item; this.priority = priority;}function PriorityQueue() { th ...