- 博客(52)
- 收藏
- 关注
RSS订阅
原创 自己写一个webpack plugins
webpack构建流程:1.校验配置文件 2.生成Compiler对象 3.初始化默认插件4.run/watch：如果运行在watch模式则执行watch方法，否则执行run方法5.compilation：创建Compilation对象回调compilation相关钩子6.emit：文件内容准备完成，准备生成文件，这是最后一次修改最终文件的机会 7.afterEmit：文件已经写入磁盘完成8. done：完成编译在编写Webpack插件过程中，最常用也是最主要的两个对象就是Webpac
2022-04-29 17:56:23
468
原创 react将组件打平，避免组件间的深嵌套，优化props的深度传递
react props父子组件传值优化，react组件嵌套，react优化
2024-04-26 16:17:03
138
2
原创 图片url地址转base64格式
// url地址转bace64export function getImageBase64Data(imgSrc) { function getBase64(img) { let canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; let ctx = canvas.getContext("2d");
2022-05-12 16:14:23
1706
原创 react-父组件访问子组件中的方法和state（函数组件使用ref）
函数组件中：父组件想要访问子组件中的方法和数据；子组件使用forwardRef做转发，使用useImperativeHandle把方法暴漏出去，在父组件中即可访问到；子组件代码示例import { useImperativeHandle, forwardRef } from 'react';const Children = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ getL
2022-05-05 11:26:04
2122
原创 fetch请求超时取消请求封装
AbortController 可以终止一个或者多个fetch请求1创建一个 AbortController 实例2该实例具有 signal 属性3将 signal 传递给 fetch option 的 signal4调用 AbortController 的 abort 属性来取消所有使用该信号的 fetch。一．简单使用：const controller = new AbortController();const { signal } = controller;fetch("http:
2022-04-02 17:58:56
1091
原创 前端 @功能的实现，在react、vue中通用
废话不多说，先上需求：在输入框中输入@后，弹出选人的浮框，然后选择人（可多选），选完后，关闭浮框，然后在输入框中加入@XXX，然后焦点定位刚开始输入@的位置。删除的时候，@XXX要一块删除。分析：1.因为要在输入框中把@xxx高亮显示，所以需要用到可编辑元素。 <div contentEditable></div>2.用到selection和range对象开撸：<div className={styles.talkInput} id="talkInput
2022-02-26 20:53:17
2887
8
原创 发布-订阅模式
归纳：简单来说就是通过对象这种key，value的映射特性把一个我们未来可能会用到的事件类型和对应事件先注册到一个全局的对象中，这一步也叫做订阅，就是我们的on事件，然后再在其他地方去触发这个事件，这一步也叫做发布，对应我们的emit事件，发布的时候可以携带参数，从而触发我们订阅的这个事件，这个被订阅的事件被触发并且接受到触发时候携带的参数。通常应用的场景：页面之间的通信，比如在A页面订阅一个事件，在B页面去发布这个事件并且携带参数，A页面的事件被触发拿到B页面发布时携带的参数，从而达到组件之间的通.
2022-01-12 13:57:53
352
原创 js实现继承，什么是原型、构造函数、实例和原型的关系，原型链继承的优缺点，组合式继承，寄生式继承。继承的最优解决方案
js实现继承的主要方式是原型链，想要理解原型链，首先需要理解原型下面我们讲解构造函数、实例、原型之间的关系，最后来理解原型链实现继承原型：即原型对象，当我们创建一个函数，该函数都会生成一个prototype属性，这个属性是一个指针，指向原型对象；实例可以共享原型对象上定义的属性和方法；原型对象里也有一个指针constructor指向构造函数；构造函数：构造函数和普通函数的区别：1、命名上，构造函数一般命名时候约定首字母大写；2、 调用方式上，构造函数使用new操作符调用；实例当
2022-01-07 15:58:54
417
原创 WebSocket和心跳机制
HTTP 协议有一个缺陷：通信只能由客户端发起。对一些功能需要实时获取信息的功能就需要使用js的轮询。就是每隔一段时间掉一次接口使用setIntval轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）WebSocket最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话协议标识符是ws（如果加密，则为wss与 HTTP 协议有着良好的兼容性。默认端口也是80和443使用：created () {this.initWeb
2022-01-04 07:27:45
7993
原创 git 多人协作总结
a和ba:Gitlab新建一个a分支（远程），git clone下来master分支，然后git checkout,直接切换到本地的a分支，在a分支开发。（或者，先git clone master分支，然后git checkout -b a创建本地a分支并切换到a分支，然后通过本地分支创建远程分支）开发完毕后，然后push代码到远程a分支，然后打包发布，push到a分支，是为了让同一个分支下的同事更新最新的代码。另一个维度的人在b分支开发，需要用到a分支的代码，需要a分支的我，先checkout到ma
2021-11-30 17:46:44
317
原创 react - HOC 的个人理解与使用场景
一句话介绍HOC高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意。使用场景将几个功能相似的组件里面的方法和react特性（如生命周期里面的副作用）提取到HOC中，然后向HOC传入需要封装的组件。最后将公用的方法传给组件。优势使代码简洁优雅、代码量更少代码示例：高阶组件：`//定义高阶组件 //放在common公用方法里面import React, { Component} from 'react';ex
2021-11-07 19:17:56
460
原创 form组件
创建form组件：import React from ‘react’;import { Form, Input, Button } from ‘antd’export default Form.create()(function CreateCollect(props){const { getFieldDecorator, getFieldsValue } = props.form;console.log(props)return ( <div>aaa</div>
2021-10-19 14:21:11
196
原创 构造函数、实例、原型对象之间的关系（笔记草稿）
每个函数都会创建一个prototype属性，这个属性是一个对象，即原型对象，包含实例共享的数据和方法，实际上这个属性就是实例的原型，使用原型的好处就是定义在原型对象上的属性和方法可以被实例共享总结 ：每个函数都有一个prototype属性（是一个对象）指向原型对象，所有原型对象都会有一个constructor 属性(指回构造函数)，原型对象上的属性和方法可以被实例共享Person.prototype.constructor 指向 Personprototype :{ -> 指向原型对象Cons
2021-10-18 14:59:19
182
原创 antd Table合并行 rowSpan
实现这种效果，同一种知识点类型合并行。 <Table columns={columns} // dataSource={dataSource} dataSource={createNewArr(dataSource)} pagination={false} />.
2021-08-17 10:04:22
2075
原创 js函数柯里化 a=＞b=＞{}
function add(a) { return function(b) { return a + b }}等价于：let add = a => b => a + b
2021-04-20 11:52:48
328
原创 js 函数防抖和函数节流 理解和掌握
函数防抖概念：规定函数至少间隔多久执行场景：代码：remitSearch (val) { if (this.timeOutId) clearTimeout(this.timeOutId) this.timeOutId = setTimeout(() => { this.key = val; this.getdetaillist() },300) console.log(this.timeOutId);},在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计
2021-04-20 11:42:35
105
原创 js的Object.getOwnPropertyDescriptor
对象原型的toString方法，以及数组的length属性都是不可枚举的。对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。let obj = { foo: 123 };Object.getOwnPropertyDescriptor(obj, 'foo')// {// value: 123,// writable: true,// enumerable:
2021-04-19 16:41:25
2391
原创 js 遍历对象常用方法
for…inconst obj = { id:1, name:'zhangsan', age:18} for(let key in obj){ console.log(key + '---' + obj[key]) }输出：id—1name—zhangsanage—181）、Object.keys（obj）2）、Object.values（obj）const obj = { .
2021-04-19 16:32:46
78
原创 js 寻找节点的所有父级元素
deptList树状结构（每一项有parentID）element该节点 loop(deptList , element){ var arrRes = []; if (deptList.length == 0) { if (!!element) { arrRes.unshift(deptList) } return arrRes; } let rev = (data, nodeId) => {
2021-04-19 15:55:31
1167
原创 js闭包的使用和误区纠正
闭包就是能够读取其他函数内部变量的函数。–来自阮一峰的文章两种常见形式：(function() { var local= "变量"; function foo(){ console.log(local)}window.fooFun = foo})()local变量和foo就形成了闭包。function foo(){ var local = 1 function bar(){ local++ return local } return bar
2021-04-19 15:35:56
144
2
原创 js的！和！！的使用
!null 为true!undefined 为true!’ ’ 为true!100为false！'abc’为falsevar a;if(!!a){ 判断变量a为非空，未定义或者非空串才能执行方法体的内容。 //a有内容才执行的代码... }来代替：var a;if(a!=null&&typeof(a)!=undefined&&a!=''){ //a有内容才执行的代码 }使代码更简洁。...
2021-04-19 15:06:28
68
原创 moment笔记
moment应用：本周 区间 日期：const currentMon = moment().isoWeekday(1)const currentSun = moment().isoWeekday(7)上周 区间 日期：const prevMon = moment().isoWeekday(-6)const prevSun = moment().isoWeekday(0)本周 区间 时间戳const currentMon = moment().isoWeekday(1).startOf(‘d
2021-04-01 15:15:48
130
原创 react 16.4生命周期图
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
2021-03-30 11:15:47
150
原创 前端必会的排序算法
排序算法有十种吧，好像是。常见的有冒泡排序、选择排序、插入排序、快速排序。1.冒泡排序1.比较相邻的元素。如果第一个比第二个大，就交换他们两个。2.对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数。3. 针对所有的元素重复以上的步骤，除了最后一个。4.持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 var data = [3, 2, 4, 6, 4, 7, 9, 1, 5] function selectionSort
2021-03-12 17:30:04
446
原创 前端常见的数据结构整理及应用
一定要及时查看巩固！栈后进先出javaScript中Array数组模拟栈：var arr = [1, 2, 3, 4, 5];arr.push(6); // 存入数据 arr -> [1, 2, 3, 4, 5, 6]arr.pop(); // 取出数据 arr -> [1, 2, 3, 4, 5]堆"无序"的key-value"键值对"存储方式，堆的存取方式跟顺序没有关系，不局限出入口队列先进先出JavaScript中Array数组模拟队列：var arr
2021-03-12 17:14:42
1169
原创 建议小体积的图片转为base64
对于小体积的图片，几kb的，建议使用base64格式，因为：直接使用图片，会使用一个http链接进行请求，一个小图片也运行一次http,得不偿失。但是也有缺点：如果过大的图片使用了base64，会加大html文件或者css文件的体积，导致 关键渲染路径 （html css渲染到浏览器的过程）变慢，但是大图片不会减慢关键渲染路径的速度。使用webpack 的loader (url-loader) 进行处理小体积的图片:{ test: /\.(png|jpe?g|gif)$/,
2021-03-12 16:42:59
1387
原创 js的事件循环（Event loop）、执行上下文、执行栈和事件队列的手记
js是一个单线程非阻塞的脚本语言。单线程意味着，javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务。非阻塞则是当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。为什么要单线程？因为js是和浏览器交互的，需要操作各种dom， 如果javascript是多线程的，那么当两个线程同时对dom进行一项操作，例如一个向其添加事件，而另一个删除
2021-02-23 10:47:56
300
1
原创 WebGL和Three.js工作原理
WebGL的工作原理WebGL绘制过程包括以下三步：1、获取顶点坐标2、图元装配（即画出一个个三角形）3、光栅化（生成片元，即一个个像素点）第一步：获取顶点之后存入缓存区，方便GPU（opengl es）更快读取第二步：图元装配。顶点坐标传入顶点着色器，如果是绘制3d图形，即传入的顶点坐标是一个三维坐标，顶点着色器需要把三维坐标转换成屏幕坐标。顶点着色器处理流程。顶点着色器会先将坐标转换完毕，然后由GPU进行图元装配，有多少顶点，这段顶点着色器程序就运行了多少次。运用投影矩阵（mat
2021-02-20 16:33:16
1882
原创 WebGL和 Three.js 的关系（类似于对jQuery的关系）
WebGL和 Three.js 的关系如今浏览器的功能越来越强大，而且这些功能可能通过JavaScript直接调用。你可以用HTML5标签轻松地添加音频和视频，而且可以在HTML5画布上创建各种交互组件。现在这个功能集合里又有了一个新成员，即支持webGL。通过webgl可以直接使用显卡的计算资源，创建高性能的二维和三维计算机图形，然后在JavaScript里直接使用webGL编程，创建三维场景并生成动画，这个过程非常复杂，而且容易出错。three.js库可以简化这个过程。----摘自《Three.js
2021-02-20 15:08:45
621
原创 react函数组件中引用antd＜Form/＞组件demo
```xmlimport React, { forwardRef, useEffect } from 'react';import { Input, Select, Row, Col, Button, Form, Switch } from 'antd';/** * 函数组件中使用antd3<form>表单demo */const { Option } = Select;const FCForm = forwardRef(({ form, onSubmit }, ref) .
2021-01-14 14:30:56
1184
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人