- 博客(35)
- 收藏
- 关注
RSS订阅原创 《深入理解react》之调度引擎——Scheduler
实际上 Scheduler 中一共维护了两个队列，本文并没有提到关于timerQueue的相关信息，那是因为在 react 的调度流程中基本不会涉及到timerQueue所以如果单纯理解 react 其实以上的知识已经足够，出于篇幅原因，timerQueue 相关的信息我会在后续的文章中进行详细分析。如果你喜欢这样的行文风格，可以关注我的《深入理解react》专栏，持续更新中…当前时间startTime。
2024-04-01 19:18:49
1283
原创 lodash源码中的memoize函数
lodash源码中的memoize函数一、背景为什么要写这样的一篇博客，因为在蚂蚁一面的时候，面试官就出了这样的一道面试题；题目是这样的：写一个函数，接受一个函数作为参数，另外接受一个resolver，返回一个函数，要求返回的这个函数需要实现以下的目标；调用这个函数的时候，如果传入相同的参数，那么第二次相同参数会返回缓存的结果，从而减少不必要的计算过程；二、实现这道面试题是基于lodash源码的；因为在lodash源码中就要这样的一个函数；它的名字叫做memoize；它的实现思路是这个样子的，
2022-02-03 21:10:17
1550
原创 lodash源码中debounce函数分析
lodash源码中debounce函数分析一、使用在lodash中我们可以使用debounce函数来进行防抖和截流，之前我并未仔细注意过，但是不可思议的是，lodash中的防抖节流函数是一个函数两用的，所以今天我就简单分析一下，它是如何做到的；lodash中的debounce官网用法// 情况一：当resize事件触发后，并不会立即执行，而是会直到密集程度大于150的时候，才会触发calculateLayout执行；也就是我们常说的防抖函数；jQuery(window).on('resize',
2022-02-01 16:16:17
4892
原创 克隆一个数据结构
克隆一个数据结构；一、克隆一个正则表达式众所周知，在javascript语言中，正则表达式是一个引用类型的数据结构;typeof /[a-z]/// object如果需要克隆一个正则表达式，我们不仅需要克隆实例的正则字面量，还需要克隆正则的实例属性，详情可见正则表达式；我们可以通过reg.source取到一个正则表达式的文本。然后通过new RegExp的方式构建一个新的正则表达式；let reg = /[a-z]/g;function cloneReg(reg) { let ne
2022-01-30 14:17:49
784
原创 如何在vue项目中使用Iframe使得任务分区
如何在vue项目中使用Iframe使得任务分区！一、问题描述背景：前两天，我和我的同事遇到一个问题，大概是这样子的，在一个项目的一个页面中使用websocket获取后台的实时数据，实时数据每一秒钟得到一条，一条数据大约有12组（可能会更多），前端需要分组将其动态的绘制到12个echarts图表中；画出来的图是基于这个图例的，也就是说，每一秒钟浏览器都需要绘制超过12个这样的图例，项目设计上是没有做分页或是其他的分页处理的；因此只能硬着头皮同时绘制在一个页面中；问题：问题在于，因为需求是想要看到从业务
2022-01-18 11:38:37
658
原创 聊聊generator生成器
聊聊generator生成器一、创建一个生成器function * gen(){};function *gen(){};function* gen(){};上面就是生成器的基本写法，在函数的申明时加一个*号；如果调用这个生成器函数；就会返回一个迭代器；所谓迭代器就是一个具有 next的属性，并且这个属性的值是一个函数的对象；二、迭代器当我们将生成器调用后会返回一个迭代器，迭代器就是一个对象，这个对象中有一个next的方法，调用这个方法后，会收到一个类似{value:值,done:结束状态
2022-01-17 19:43:34
467
原创 class的继承
class的继承！一、实现一个继承；先来看一个简单的例子class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return this.x + '-' + this.y }}class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的construct
2022-01-08 11:34:56
2187
原创 异步遍历器
异步遍历器一、概念异步遍历器是ES6的新语法，主要是为了解决异步任务的遍历问题。现在有下面的代码；const arr = [ new Promise(resolve=>{ setTimeout(()=>{ console.log('1') },1000) }), Promise.resolve('2'), Promise.reject('3')]// 现在需要遍历这个数组arr.forEach(promise=>{ promise.then(r
2021-12-30 21:22:07
427
原创 redux的使用教程
题目:redux的使用教程前言：学习react的过程中一定会碰到redux，我在学习redux的时候，每每感觉自己记住了，但是用的时候，感觉总是不知如何写起，或者会用的时候总会出错，所以打算写一篇redux的教程，把自己在学习和使用过程中的心得记录下来。一：认识redux官网：redux中文网我的理解：redux是一个独立的（也就是说它并不属于react,在其他框架下也都是可以使用的），开源的，第三方的集中式的状态管理器。提供可预测的状态管理。二：为什么那么我们为什么要使用redux呢？这就
2021-12-11 16:27:25
1723
原创 VSCode如何与ESLint和prettier结合使用
VSCode如何与ESLint和prettier结合使用前言：作为一名前端开发者，在大多数的情况下，我们都需要和vscode编辑器打交道，因此熟悉vscode对于我们而言是一件很重要的事情，前两天我发现自己始终没有很清楚关于如何使我们的编辑器能够很好的自动格式化代码相关的问题，今天我写这篇博客，就是想好好记录一下，相关的问题。首先先了解第一个问题，如何配置vscode的默认配置。注意：以下效果均保证自己的vscode编辑器没有任何关于格式化的第三方插件的情况下才可以生效哦。mac : comman
2021-11-20 16:21:28
990
原创 基于Vue3+TS+StoryUI+elementPlus的个人网站——StoryWeb
基于Vue3+TS+StoryUI+elementPlus的个人网站——StoryWeb前言：各位读者，大家好，很开心你能够阅读这篇文章，这篇文章的目的是对我通过近2个月，利用工作之余，开发的个人网站做一个总结。同时，我认为写博客最大的意义在于能够记录自己的成长以及帮助他人。所以我会尽量在分享自己心得体会的同时，尽量多写一些干货，希望能够对得起看这篇文章的你，好了，接下来我们开始吧！1.简介篇访问地址：http://songxiaopenggitee.gitee.io/story-web-v1源码
2021-11-16 23:00:37
1322
原创 关于前端导出文件打不开的问题
关于前端导出文件打不开的问题前言：不知道小伙伴们在开发当中有没有遇到这样的问题，业务需求是需要导出一个文件，后端会返回回来一个文件流，然后我们需要将其处理成为一个文件类型，常用的是导出excel文件。如果在百度上一搜会发现其实很简单，思路大概是这样的文件流|Blob类型|URL|创建a标签|指定href为URL|设置download属性来指定文件名代码大概是这样的。const downloadDoc = function(content, filename) { le
2021-11-01 21:53:02
4797
3
原创 Gulp构建工具
Gulp构建工具前言：gulp是一个基于流的，轻量的前端构建工具，常用于打包一些第三方的库，插件等。我将一部分的使用方法做一个简单的介绍和笔记。一、安装首先全局先安装gulp-cli工具npm i gulp-cli -g创建一个项目npx mkdirp demo-gulpcd demo-gulpnpm init -ynpm i gulp -D检查gulp的版本，以下是根据gulp4.0以上的二、gulpfile.js在根目录下创建一个gulpfile.js的文件，这个是gulp用
2021-10-08 22:55:17
334
原创 Vuex源码解析
题目: Vuex源码解析前言：vuex在vue生态中有着举足轻重的地位，它是vue项目在做集中式的状态管理时的首选，vuex的优势是可以做集中式的状态管理，也就是说如果你有一个状态需要在全局使用，并且希望在任意组件都可以对状态进行管理。那么vuex绝对是最佳的一个选择。那么这一篇文章我们将好好阅读一下vuex的源码，感受一下vuex的各种api究竟是怎么实现的。那么就开始吧一、目录分析1.源码下载首先从git下载源码git clone https://github.com/vuejs/vuex.g
2021-10-06 13:39:46
1602
原创 vue-router源码分析
vue-router 源码分析前言：在vue的生态当中，vue-router必然是有一席之地的，我们有用到过其中各种好用的api，比如addRoute、.push、.replace、vm.$route、vm.routes等等，可以这么说，在单页面应用盛行的今天，我们如果使用vue来开发项目，一定离不开vue-router。而我们今天就来认真的分析一下vue-router的源码，了解一下vue-router的各种各样api的原理，以及他是怎么嵌入vue项目中运行的，好了废话不多说我们开始吧！一、源码结
2021-09-30 17:30:43
1856
原创 vue2.0源码分析——内置组件
题目：vue2.0源码分析——内置组件前言：本篇文章，我将对vue2.0中所有的内置组件的源码进行一个分析，包括keep-alive , transition , transition-group , slot , component 。我希望通过这篇文章的分析，不仅我自己也包括看这篇文章的所有小伙伴都能对vue的内置组件都有一个较为深入的了解。那接下来我们就开始吧。一、keep-alive这个内置组件相信大家都很熟悉，这里要说一个比较丢脸的事情，就是笔者曾经第一次找工作面试时，问道了keep-ali
2021-09-23 09:22:09
353
原创 vue2.0源码——diff算法
题目：vue2.0源码——diff算法一、diff概述1.为什么vue需要diff算法我们都知道vue的diff是为了更新DOM去服务的，那更新DOM是在什么样的场景下发生的呢？想象一下，你的组件中一个状态发生改变了，按照我们之前讲的，会触发响应式数据的setter，一旦触发setter，就会调用相应watcher的get方法，这个get方法中会执行this.getter,而这个getter就是相应的渲染函数，这个渲染函数会生成一个全新的带有最新数据的虚拟DOM。以上都是我之前文章的内容哦，如果不
2021-09-22 09:00:31
1135
原创 Vue2.0源码解析——编译原理
Vue2.0源码解析——编译原理前言：本篇文章主要对Vue2.0源码的编译原理进行一个粗浅的分析，其中涉及到正则、高阶函数等知识点，对js的考察是非常的深的，因此我们来好好啃一下这个编译原理的部分。一、编译流程1.为什么需要编译流程？不知道各位有没有思考过这样一个问题，为什么我们无论是在脚手架项目中还是在单文件html中，只要使用Vue框架开发，我们就可以书写出千奇百怪且好用的指令，比如v-for、v-model、@event…等等，但是浏览器默认情况下是只认识原生js、css以及html的呀，为什
2021-09-20 21:12:32
1598
2
原创 Vue2.0 源码解析 --- 响应式原理
题目 : Vue2.0 源码解析 — 响应式原理前言：vue的响应式原理不仅是面试时的高频考点，也是Vue区别于其他框架的一个很重要的特点，本文尝试用文图结合的方式来剖析响应式原理。理解几个核心的类（Observer 、Watcher 、Dep 、VNode）,以及诸如依赖收集 、派发更新 等核心的概念一、Vue在执行时的流程<1> 概括首先来看一张图片当你通过npm下载vue时，模块化开发时的源码在src目录下，dist是通过rollup打包后，运行在生产环境下的js文件。找
2021-09-16 17:10:02
896
原创 JavaScript数据结构与算法
JavaScript结构与算法一、栈二、队列三、哈希表四、字典五、集合六、链表七、树八、图九、遍历算法十、排序算法
2021-08-30 13:10:56
1056
原创 手写A+ Promise
题目：手写A+ Promise一、前言在手写promise之前我们先来了解一下什么是promiseA+ 规范，附上链接：Promise A+规范，我简单根据这个A+规范总结一下，包括本次手写Promise也是简单实现一下部分的需求；（1）：如果用面向对象的角度考虑，Promise是一个类，所有实例拥有三个属性，而且应该属于是私有属性（2）：三个属性分别是state（保存着当前promise的状态），状态的取值必须是pending （进行中）, fullfilled （成功）, rejected（失败
2021-08-20 14:43:24
186
原创 Vue-vben-admin Vue3+TS Axios的封装源码分析
Vue-vben-admin Vue3+TS Axios的封装源码分析前言一、近期再用Vue3+TS 重构之前Vue2的项目，因此想着借鉴一下业界较为优秀的代码，在Git上面找了好久，经过同事推荐，我发现由anncwd出品的Vue-vben-admin是很不错的，截止目前在git上面已经有5.9k个star了，目前将这个模板看完了，我觉得里面写的最好的莫过于对于Axios的封装了，在此我简单对这个源码进行一个分析，里面也涉及一些TS+Vue3的知识点，最重要的是，能够发现其中写的特别优秀的地方，我们也可
2021-08-14 14:30:00
3160
1
原创 TypeScript 知识点总结（下）
一、前言各位读者 ，大家好，今天我来完成TypeScript的下篇了，上篇我们主要介绍了TypeScript的类型声明，接口等概念，如果读者朋友还没有了解过这部分的概念，请前往上一篇进行查看哦，今天我们将对TypeScript(以下简称TS)的类，泛型等概念做一个总结和介绍。话不多说我们接下来开始。。。在开始之前，我希望各位能够准备几样知识储备，ES6中的类，面向对象对象编程思想。二、认识类类是面向对象编程思想中非常重要的概念，ES6对类进行了支持，既我们class 声明方式，在此之前我
2021-07-11 13:51:12
103
原创 Typescript 知识点总结（上）
一、前言各位读者大家好，感谢你能够阅读这篇博客，近期在整理 和学习Typescript 的知识点，我认为很有意义，这篇博客主要会将typescript的一部分内容结合自己的理解进行一个总结，希望能够帮助正在学习或使用typescript开发的你。(1) 为什么要学习typescript：在学习typescript之前我们最好了解我们为什么学这个，它到底能够为我们提供哪些好处和帮助。我认为typescript 是未来的一个趋势，因为它大大的补充的javaScript的缺点，那就是类型检测的问题..
2021-07-10 17:00:13
166
原创 迪克斯特拉算法
##1.6迪克斯特拉算法1.概念：什么是迪克斯特拉算法，这是在有些情况下，我们虽然使用广度优先搜索找到了路程或者说路径最短的道路，但是不一定是用时最少的，也就是说在某种情况下，如果出现了具有权重的图，那么广度优先搜索就无法做到了，而迪克斯特拉可以将权重考虑到，计算出用时，或者说开销最小的路径，在这里需要说明的是，迪克斯特拉不适合循环引用的图，以及权值为负值的图。2.写这篇博客我自己试过很多很多的方法去验算迪克斯特拉算法，可能是笔者很菜，我发现自己对于这个算法的理解是很浅显的，所以每次...
2021-06-13 16:32:50
1966
原创 《关于算法》
##1.0什么是算法1.《算法图解》这本书上对什么是算法做了一个简单的定义，算法是一组完成任务的指令，我的理解是任何可以用来完成计算任务或者提升计算效率的函数表达式或函数引用集合都可以称之为算法。算法就像一台加工机器，可以丢给他一种或若干中原料（参数）它可以帮我们生成出令我们满意的结果（返回值或者一种处理）。<script>functioncalc(a,b){returna+b}console.log(calc(1,2))//=>3&...
2021-06-06 15:34:46
116
1
原创 关于javascript闭包的一些理解
一、概念：我理解的闭包其实就是，一个内层函数被一个外层函数所包裹，内层函数引用着外层函数中的变量，当外层函数被调用后，由于其中的变量被内层函数所引用，因此无法被垃圾回收机制所清除...
2021-06-04 12:57:28
79
1
原创 关于axios源码中mergeConifg.js的分析
'use strict';//开启严格模式var utils = require('…/utils'); //导入工具函数// 这个函数专门用来合并配置项module.exports = function mergeConfig(config1, config2) { // config2 如果没有传默认就是一个空的对象 config2 = config2 || {}; // 声明一个新的对象 var config = {}; // 取出config2中的关键Key .
2021-06-03 09:20:14
256
原创 Vue当中的api小结
#1.2.6Vue.component()作用：在实际开发过程中，我们可能需要全局注册一些组件，比如全局搜索框，全局计数器等等。。。这个时候使用全局注册组件，就不用在每一个组件中单独的进行注册了，提高代码复用率语法：Vue.component('my-component',{/*...*/})#1.2.7Vue.use(plugin)作用：使用插件，比如elementui中每一个组件其实就是一个插件，我们需要通过Vue.use(ELE)来进行使用...
2021-06-02 22:25:37
1394
原创 一、认识promise
一、认识Promise1.Promise是一种异步编程的解决方案，主要用来解决回调地狱的问题，那么什么是回调地狱呢！那就是在实际开发当中，我们经常会遇到这样的业务场景，我们通过异步任务拿到了数据A，但是下一个数据B必须等到数据A拿到之后才能执行异步任务获取，数据C才需要等到数据B拿到之后再获取，下面我用定时器模拟异步任务来展示一下！我们来看一看：//案例一//发送ajax请求获取datafunction ajax(data){ setTimeout(()=>{ c
2021-02-26 21:33:50
90
原创 HTML的基本标记语言及特点
一、标题标记语法： n是为1-6的数字例如：、属性：align 控制标题的对齐方式的属性值： “left” “center” “right” 分别为左对齐 居中对齐 右对齐特点：标题都有加粗的效果标题都有一定的行间距标题有大小的变化二、段落标记语法：内容特点：普通大小的字体上下的行间距是有一定距离属性：依然三种对齐方式 左中右 同上三、标线标记语法特点：默认宽度为整个页面的宽度默认灰色 2px的像素属性：width height color 宽
2020-09-17 15:29:35
1327
原创 学Web我们需要知道的基础知识
一、Web基础知识定义：各种类型的网站，一种Internet环境之上的基于浏览器和服务器和传输协议的应用于程序，用来进行数据传输和展示。传输协议：http/https 区别是后者更加安全，因为是加密的 用来规范数据包的传输二、结构浏览器：产品：IE、Chrome、Firefox、Safari、Opera作用: 发送请求给服务器解析数据，以图文的方式呈现给用户技术：HTML、CSS、Javascript服务器：产品：Apche、Tomcat、IIS作用：接受前端请求响应结果
2020-09-16 20:31:40
855
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人