- 博客(48)
- 收藏
- 关注
RSS订阅原创 Vue2源码-diff算法详解
能在映射表中找到，那就将这个节点进行复用并且将他移动到旧的头部节点前，这里需要注意一下，将这个节点移出去以后会导致他本身的位置空缺，然后后面的节点就会往前补位，导致索引错乱的问题，所以为了不让这个问题出现，就需要在原来节点的地方给他赋值一个null来填补。当尾指针也匹配失败的时候，就需要通过旧节点头部与新节点尾部比对，旧节点尾部与新节点头部比对的方式来进行，比对到相同节点后，通过insertBefore这个api来操作节点，inseetBefore是具备移动性的，移动走了，原来的就不存在了。...
2022-07-28 16:37:01
2018
原创 webpack5学习：性能优化抽离公共代码以及多线程打包（2）
由于运行在Node.js之上的Webpack是单线程模型的，所以Webpack需要处理的任务要一个一个进行操作。开发环境与生产环境相同的webpack配置抽离到一个js文件中，通过webpack-merge这个包将两个webpack合并到一起。然后再在plugins中配置Happypack插件，注意这里的id要跟上面对应，然后use就是之前配置的那些。在原来的js匹配规则中将原来的use替换成下图这样，通过id来作为标识，意为打包js的多线程。...
2022-07-16 13:32:37
994
原创 数据结构（1）：树
树这种数据结构在前端日常开发中是比较常见的，诸如经常接触的DOM树、级联选择、树形控件等等，都是利用树这种数据结构实现的。在JS中一般是通过Object和Array这两家数据类型来构建树结构的。结构如下图口诀：顾名思义就是尽可能深入的去搜索树的分支并且访问他们。用图看一下就比较好理解了。算法实现：这个算法实现也比较简单，通过forEach去递归遍历子节点就可以了，代码如下结果如下口诀：先访问离根节点最近的节点，也可以理解成先访问完自己的子节点，再去访问子节点的子节点，概念图如下。算法实现：主要
2022-06-15 17:18:00
281
原创 JS冷知识（1）
之前的js中 单个值在栈中占有32个位存储单元，这些存储单元又分为标记位和数据，这个时候就只有五种数据类型，分别是 000object、001integer、010double、100string、110boolean，而null的存储单元从0到31位全都为0，标记位自然也为000，所以typeof null 就等于object了。直接通过map去遍历再用parseInt将其转为数字是有问题的。这里的原因在于 parseInt 传入的是两个参数，如下图定义和用法。上图代码块的代码可以理解成这样1、
2022-06-10 10:53:35
167
原创 JS笔记：设计模式（2）
概念：在不影响一个函数本身功能的情况下为这个函数赋能，也就是增强功能，它能动态的添加对象的行为。最典型的例子就是React中的高阶组件HOC了，通过传入一个组件并对其功能进行增强，再返回一个新的组件。代码理解如下：核心在于装饰类中要继承原始类中的功能，以便于扩展新功能而不会影响原始功能。概念：为其它对象提供一种代理以控制这个对象的访问，具体执行的功能还是这个对象本身。经典例子是图片预加载的了，主要思路是通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img
2022-06-08 11:20:28
130
原创 React+ts 封装antd拖拽上传组件
基于react+typescript封装了一个仿antd拖拽上传的组件，整个组件使用函数式组件编写，使用hooks进行封装，利用拖拽放置事件处理逻辑，后台上传服务器使用koa简单写了个接口来上传，接下来上代码。首先定义传入的props类型以及单个上传文件的类型定义拖拽进入、停留、离开、放置事件，这些事件都需要阻止默认事件和冒泡事件，比较简单就不多说了，主要是放置事件 onDragDrop ，主要的上传逻辑都在这里，upload 函数一会再来说。上传的处理逻辑通过useEffect在组件挂载完成
2022-05-11 11:54:07
1078
原创 ts中的interface与type的区别
1.typeof 的类型别名可以用于其他的类型，比如 联合类型、元组类型、基本类型，interface 不行。2.type 的别名不可以多次定义会报错，而 interface 则可以多次定义，会将其视为合并到一起。3.type 能用 in 关键字，而interface不行。4.默认导出的方式不同，inerface 支持同时声明，默认导出，而type必须先声明后导出5.扩展方式不同，interface 用 extends 来扩展，而type 用 & 操作符扩展...
2022-04-15 00:09:01
7627
2
原创 Vue3 自定义指令详解
vue开发中经常会用到v-for、v-model等vue给我们定义好的指令，其实vue也给我们提供了可以自定义自己的指令的方法。基本使用方式主要是利用 directive 这个api来实现的，先看下它的用法，在全局中我们可以这么用第一个参数是指令的名字，第二个参数就是我们指令实现的逻辑。在组件中可以这么用参数以及生命周期接下来说一下directives 这个api的一些参数以及生命周期每个指令都有自己对应的生命周期函数，一共是 7 个生命周期，跟组件的生命周期是一样的，具体如下每个生命
2022-04-14 16:37:32
2352
原创 webpack4学习：性能优化（1）
noParse当我们在文件中需要使用某些第三方包的时候，它里面一般是不会去引入其他的包的，例如我们在使用jquery的包的时候，那么我门就不需要去解析这种第三方包，这样就能提高打包的效率。只需要在webpack.config.js中去配置一下这个属性即可。exclude / include这两个属性是在rules中设置的属性，exclude 是用来排除某个文件的，也就是打包的时候不打包那个文件下的匹配文件；include 则是代表只打包某个文件下的匹配文件。IgnorePluginIgno
2022-04-01 21:47:35
880
原创 JS笔记：设计模式
单例模式：概念：在一个构造函数中，只能有一个实例，不管new多少次，都是这一个实例。应用：自定义弹出层 => 每次弹出的都是一个div 只是文本内容不同。代码实现：思路比较简单，第一次调用 singleTon 函数时，通过一个 instance 变量保存new出来的 Person 实例，并将这个实例返回出去，这样就保证了每次调用 singleTon 函数的时候都是用的同一个实例。上面的代码有些缺陷，首先我们需要把instance变量和构造函数都给保留下来，这个好办，可以用到闭包的知识来解决
2022-04-01 00:58:41
804
原创 webpack4学习：多页应用打包、配置source-map、watch的用法等等
多页应用打包：webpack配置文件：由于有两个页面需要打包，所以new了两个HtmlWebpackPlugin插件来对应各自的html模板。chunks就算用来引入js文件的，需要引入的js文件名放上去就行，如果有多个就可以这么写 chunks: [‘other’, ‘home’] 引入了other.js以及home.js这两个文件。配置source-map：source-map的配置可以便于我们打包后调试代码，如果有代码报错可以在控制台查看到报错代码的具体地方。source-map可以有很
2022-03-30 14:32:45
1231
原创 JS高级：深浅拷贝
浅拷贝：概念： 浅拷贝只会拷贝栈中的内容，而不会拷贝堆中的内容。也就是说当拷贝的对象是基本数据类型的话利用浅拷贝就可以完成拷贝，并且不会影响原来的内容；如果是引用数据类型的话，浅拷贝只会拷贝内容的第一层内容，而无法拷贝更深层的对象内容，也就是对于深层对象拷贝的是引用地址。方法：（1）Object.assign({}, target)（2）扩展运算符 …target（3）数组对象可以使用：arr.concat()、arr.slice...
2022-03-25 18:08:00
143
原创 JS高级笔记：CommonJs与ESModule的区别
区别：两者的模块导入导出语法不同，CommonJs是通过module.exports，exports导出，require导入；ESModule则是export导出，import导入。CommonJs是运行时加载模块，ESModule是在静态编译期间就确定模块的依赖。ESModule在编译期间会将所有import提升到顶部，CommonJs不会提升require。CommonJs导出的是一个值拷贝，会对加载结果进行缓存，一旦内部再修改这个值，则不会同步到外部。ESModule是导出的一个引用，内部修
2022-03-24 13:59:28
5497
原创 JS高级笔记：Proxy代理对象
作用：Proxy代理对象是ES6新增的类，它的作用是当我们希望监听一个对象的相关操作，可以通过创建一个代理对象，之后所有的操作都通过代理对象来完成，这样就可以通过代理对象监听我们想要对原对象进行哪些操作了。并且Proxy对象具有多达13种的监听方法可以使用。1.get和set捕获器：get包含三个参数分别是：target目标对象，key被获取的属性key，receiver调用的代理对象。set包含四个参数分别是：target目标对象，key被获取的属性key，newValue新属性值，receive
2022-03-17 12:04:10
3069
原创 JS高级笔记：函数柯里化
概念：柯里化是把接收多个参数的函数，变成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数，而且返回结果的新函数的技术。示例如下图：作用：1.让函数的职责尽可能单一函数式编程中，一般希望一个函数处理的问题尽可能的单一，而不是将一大堆的处理过程交给一个函数来处理。这么做的好处在于可以把复杂的逻辑抽离出来，放在单独的一个函数中处理，每个函数单独处理一部分逻辑并返回一个函数，在返回的函数中再处理一部分逻辑。2.逻辑复用3.可定制化函数柯里化函数的实现：在实际开发中，我们
2022-03-15 14:57:14
406
原创 手写简单版 Promise
Promise作为ES6新增的函数，帮助我们解决了回调地狱的难题，让我们的异步代码可以更加清晰简洁，作为一名前端程序员，手写简单版Promise应该是必备的技能。接下来不多说，直接上代码了。class Commitment { static PENDING = '待定'; static FULFILLED = '成功'; static REJECTED = '拒绝'; // 定义Promise的状态 constructor(func) { this.statu
2022-03-05 23:59:05
638
原创 JS实现拖拽功能
记录一下新学习到的拖拽功能。H5新增了一个draggable属性，用于对需要拖拽的元素进行标记，定义了这个属性后就可以定义拖拽事件了。拖拽事件如下图：接着就是上代码：HTML以及CSS部分：比较简单就不多说了<div class="wrapper"> <section class="show"> <h1>拖动你喜欢的图片</h1> <div class="tshirt"> <img s
2022-03-04 00:42:19
14002
3
原创 React学习笔记：受控与非受控组件
受控组件：什么是受控组件呢？在HTML中，表单元素（input、textarea、select）之类的表单元素通常会自己维护state，并根据用户输入的值进行更新。但是在 React 中一些需要改变的值通常都是放在 state 属性中的，并且规定只能通过 setState() 来改变值进行更新，这样将两者结合起来，使得 React 的 state 成为了“唯一的数据源”，并且渲染表单的 React 组件还控制着用户输入过程中表单发生的操作，被 React 以这种方式控制取值的表单输入元素就叫做**“受控
2022-03-02 16:50:12
435
原创 React学习笔记：useCallback与useMemo
在react中，useCallback与useMemo的主要作用在于进行性能的一个优化，这两者要怎么使用呢？另外这两者之间又有什么关系？在使用React时，当我们某一个值发生改变时，整个页面都会重新渲染一次，哪怕是一些没有任何变化的组件、函数都会被重新调用、渲染，这就造成了一很大的性能上的浪费，这个时候要想优化我们的页面性能，就需要用到我们的useCallback和useMemo这个两个hook来进行优化了，接下来就会说一下这两者的使用以及他们之间会有什么区别。useCallback：useCallb
2022-03-01 14:02:13
1299
原创 Vue源码学习（四）：子节点比较
初次渲染完毕以后，就到了我们最重要的部分，更新视图时新老节点比较来更新我们的页面。原理就是用新的虚拟节点和老的虚拟节点做对比，以此来跟新真实dom元素。下面就是我们要实现的代码，newVnode是更新后的新虚拟节点，oldVnode是更新前的虚拟节点，将新旧虚拟节点传到patch函数中做对比，接下来就是实现一下patch函数了。import {h,render,patch} from './vdom'let oldVnode = h('div',{id:'container'}, h('li
2021-12-21 23:35:47
369
原创 Vue源码学习（三）：虚拟Dom以及初次渲染
在实际开发中如果每次都去操作真实dom进行开发，那么性能就会无比的差劲，因为一个真实dom中包含的东西实在太多了，而我们开发的时候肯定是需要上千甚至上万个dom才能组成一个项目，所以为了性能考虑，我们都是通过操作虚拟dom，再让虚拟dom与真实dom进行比对，也就是diff生成一个新的对象，再将这个对象渲染到页面中来，这就是vue中帮我们做的事。接下来就来看看怎么实现一个虚拟dom。首先我们要知道虚拟dom其实就是一个对象，里面包含着一些我们要用到的属性，比如说标签名、属性名、子节点等等，在vue中是通
2021-12-21 00:07:18
1554
2
原创 React笔记 combineReducers函数
在React中，我们当有大量数据需要管理我们理所应当的想到使用redux来管理我们的数据。但是一个项目中肯定是不只有一个reducer的，而很可能每个页面都有一个自己的reducer，而怎么将这些子reducer整合到一个reducer中呢。这个时候就需要用到 combineReducers 函数了。使用方法很简单，只需要将子reducer导入，并且从redux-immutable库中引入combineReducers函数，combineReducers函数接收一个对象，这个对象就是子reducer以及它
2021-11-29 23:56:18
718
原创 React笔记 PureComponent与memo的作用
在React中当我们的组件被调用时，那么被调用的组件的render函数都会被调用一次，也就是组件会被渲染出来，但是当我们只改变其中一个组件的值，只想让那一个改变的组件的render函数被重新调用而其他组件不调用时，这时候可以用到 sholdComponentUpdate() 这个生命周期来阻断render函数。没调用sholdComponentUpdate前在这个生命周期中会传过来两个参数 分别时最新的props和最新的state 由于我们的组件中依赖counter这个属性 而不想阻断这个属性重新渲染
2021-11-16 23:39:30
1108
原创 Vue源码学习（二）： 手写简单版 h 函数
相信使用过vue的朋友都对这个h函数不陌生了，在vue中是通过调用 h 函数来生成虚拟DOM，今天就来简单实现一下这个 h 函数的功能。目录结构安装的依赖。这里的snabbdom依赖很重要，它是实现Virtual DOM的一种。然后就是webpack的配置了在vnode.js文件中把传入的5个参数组合成对象再返回，打撒、...
2021-11-07 15:09:48
1093
原创 Vue源码学习（一）：数据的双向绑定
我们知道在Vue中，数据的双向绑定在2.0中是通过 Object.defineProperty 来进行数据的监听，劫持对象的访问器,在属性值发生变化时我们可以获取变化,然后根据变化进行后续响应,而在vue3.0则是通过Proxy代理对象进行的。在Vue2.0中只有该数据是对象才会使用Object.defineProperty，如果是数组，则会把数组的方法重写。接下来就来简单实现一下Object.defineProperty的双向绑定原理。首先是对第一层的对象进行双向绑定，通过一个render函数来模拟
2021-10-24 15:08:47
230
原创 Vue3初识 学习记录（二）
customRef():自定义一个ref来实现防抖操作import {customRef} from 'vue'export default ({ setup() { function myRef(value, delay) { let timer return customRef((track,trigger) => { return { get() { console.log(`有人读取数据，我
2021-09-29 12:05:45
74
原创 JS高级 学习（一） 值传递和引用传递
调用函数时传递变量参数时，是值传递还是引用传递？（1）当数据是基本数据类型时，就是值传递，这个时候在函数中修改变量的时候不会影响外面的数据；（2）当数据是引用类型的数据是，就是引用传递，这个时候传递给参数的是这个变量的引用地址，在函数内部修改时，外部也会跟着一起修改。立即执行函数IIFE：作用：隐藏实现、不会污染全局命名空间、用来编写js模块；...
2021-09-29 12:04:47
131
原创 手写call、apply、bind
call首先要先判断this是否为function，若不是则抛出异常。接着如果第一个参数不传则默认为window，然后把需要调用的函数设置给context.fn，因为call可以传入多个参数，除了第一个参数以外，其他参数都是作为调用函数所用的参数，所以要将他们剥离出来，这里可以用[…arguments].slice(1)的方法。最后再用result接收调用的函数并传入参数，并且要记得删除这个函数并返回Function.prototype.myCall = function(context) {
2021-09-29 09:51:59
62
原创 TS实现贪吃蛇
TS很早以前就学了，但是一直没怎么用过，今天用一个贪吃蛇的小项目再来回顾一下TS的内容。话不多说，上代码。样式代码就不写了，比较简单，下面是HTML的结构。<div id="main"> <div id="stage"> <div id="snake"> <div></div> </div> <div id="food"> </div>
2021-09-27 22:43:24
350
原创 React学习 Hooks的使用（三）
**自定义Hook**自定义Hook就是将原来react提供的Hook进行抽取，放到一个新的函数中去，这样做的目的就是减少重复代码的编写，使Hook得以被复用，使代码看起来更加简洁明了。使用自定义Hook时要注意，名字要用use开头，不然可能会报错，有些函数用不了。对useEffect自定义：对useContext：父组件中要共享的数据将useContext封装在一个独立的js文件中，返回一个数组。在子组件中直接进行数组的结构拿到值。获取滚动位置的自定义Hook使用us
2021-09-12 16:46:39
162
原创 React学习 Hooks的使用（二）
Effect HookEffect Hook可以让我们完成一些类似class中生命周期的功能。在react中，不管是第一次渲染还是发生更新是渲染都会调用useEffect这个hook
2021-09-12 15:15:06
143
原创 React学习 Hooks的使用（一）
React框架中最大的亮点就是Hooks，它使得我们更容易的复用代码，大大减少了重复编写代码。不需要像类组件那样写props来获得状态，也不需要有那么多的this指向来扰乱我们。那hooks是什么呢？hook就是JavaScript函数，它可以帮助我们钩入 React State以及生命周期等特性；使用hooks的规则：只能在函数最外层调用。不要在循环、条件判断或子函数中调用。只能在React的函数组件中调用，不要在其他JavaScript函数中调用。Hooks初体验：接下来就用react包中
2021-09-11 15:08:07
352
原创 深入浅出学习 Redux（二）
前面已将将redux的简单使用过程敲了一遍，我们可以发现如果有很多组件都需要用到redux里的状态的话，那么如果按这样简单的使用，一个步骤一个步骤来的话，就会写很多重复的代码，没法复用，那么接下来就是封装一个工具函数，来让我们的代码更简洁优雅。首先就是创建一个connect.js的文件。导出一个connect函数，这个函数接收调用者传入的两个参数并且返回一个高阶函数，并且这个函数返回一个高阶组件，可以让调用者传入任何组件。再通过构造器设置一个storeState，将传进来的state的值赋值给它，然后
2021-09-09 19:45:03
165
原创 深入浅出学习 Redux （一）
Redux 的核心理念 – storeRedux 的核心理念 – actionredux要求我们通过action来跟新数据，所有数据的变化必须通过派发（dispatch）action来更新。action是一个JS对象，主要用来描述这次更新的type和content。强制用action来更新数据状态的好处是，所有的数据变化都是可追踪的。...
2021-09-06 23:15:49
88
原创 Vue3初识 学习记录(一)
Vue3的响应式Vue2的响应式是通过Object.defindeProperty的访问器属性来调用get和set方法,并且会通知观察者Wacher重新render组件. 这种方法对于深层的数据是不太友好的,不能直接监听对象和数组的变化.Vue3中的响应式则是通过 Proxy 替代Object.defineProperty,这样就可以直接监听对象和数组的变化，并且有多达13种拦截方法。实现深度观测的方法: 判断当前的Reflect.get的返回值是否为Object,如果是则再通过reactive方法
2021-08-31 22:22:22
195
原创 Node.js学习--开发自己的脚手架（Vue）（一）
开发自己的脚手架在实际开发中可以帮助我们省去很多重复的代码编写，比如说创建一个组件时需要写入的template,data,methods,生命周期函数等，还有创建一个页面需要配置的路由等等，都是很多重复的操作，而我们自己定义一个脚手架就可以通过一些简单的指令来帮助我们快速开发，这也就为我们省去了很多的时间。接下来进入正题第一步我们想要通过某些简单的指令来实现我们想要的功能我们需要通过 npm init -y来生成一个package.json的文件，并且创建一个index.js 的入口文件接下来
2021-07-29 22:11:08
488
原创 Typescript学习记录（3）
**Typescript的泛型泛型：泛型就是解决类、接口、方法的复用性，以及对不特定数据类型的支持（类型校验）。实际开发中可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就可以用自己的数据类型来使用组件。基本使用： // T表示泛型，具体是说明类型是调用这个方法的时候决定的 function getData<T>(value: T): T{ return value; } getData<number>(123);
2021-07-06 21:59:54
83
原创 Typescript学习记录（2）
Typescript的接口接口的作用：接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口不关心内部的状态数据以及实现的细节，只规定类里必须提供某些方法，提供这些方法的类可以满足实际需求，Typescript的接口类似与java，还增加了更灵活的接口类型，包括属性、函数、可索引和类等。（1）属性接口：...
2021-07-06 20:26:29
75
原创 Typescript学习记录（1）
Typescript的自动编译（Vs Code）（1）在cmd终端（注：必须进入文件目录）中输入命令行 tsc --init 生成tsconfig.json 文件（2）找到outDir将其注释删除，后面是编译后的js文件存放的目录（3）点击终端->运行任务->typescript->监视-tsconfig.json配置完成后就会自动生成js的代码了Typescript的数据类型（1）枚举型 enum Flag { success = 1, error =.
2021-07-05 00:52:34
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人