- 博客(42)
- 收藏
- 关注
RSS订阅原创 Client does not support authentication protocol requested by server； consider upgrading MySQL client
Client does not support authentication protocol requested by server; consider upgrading MySQL client
2024-01-22 23:34:41
359
1
原创 Vue组合式 api 的常用知识点
Vue组合式 api 的常用知识点 ，ref，customRef，reactive，shallowRef ，triggerRef，toRef，toRefs，toRaw，markRaw，isRef，isRef，readonly，shallowReadonly，sProxy，watch，生命周期，provide
2022-11-06 18:15:54
673
1
原创 A watch source can only be a getter/efefct function, a ref, a reactive object, or an array of these
A watch source can only be a getter/efefct function, a ref, a reactive object, or an array of these types.
2022-10-29 10:58:24
7050
3
原创 深入学习React,重塑了我对React的理解
Diff 算法的源码链路很长，但若真的把源码中的逻辑要点作提取，你消化它们可能也就不过一杯茶的功夫。把握住 React15下的Diff 过程下，“树递归”这个特征，这就够了如果你学有余力，可以了解一下React 16 对调和实现setState 的变现会因调用场景的不同而不同在React 生命周期函数及合成事件中，他表现为异步在setTimeout ,setInterval，包括在DOM原生事件中，它都表现为同步，这些情景下的this.setStaet 会从React的异步管控下逃脱掉，从而表现出。
2022-10-01 16:28:09
467
原创 flex布局常用属性总结
direction控制主轴和交叉轴的方向开始线和结束线flex-wrap-控制换行-控制主轴（横轴）上所有flex项目的对齐。-控制交叉轴（纵轴）上所有flex项目的对齐。align-self-控制交叉轴（纵轴）上的单个flex项目的对齐。-控制“多条主轴”的flex项目在交叉轴的对齐。flex-grow-分配空闲空间-分配负极空闲空间flex-basis-设置子项的宽度httpshttps。...
2022-07-21 16:49:15
1123
原创 Warning: [antd: Menu] `children` will be removed in next major version. Please use `items` instead.
Warning: [antd: Menu] `children` will be removed in next major version. Please use `items` instead.
2022-06-20 22:30:21
15943
原创 优化（学习）公司的webpack配置(二)
优化（学习）公司的webpack配置(二)文章目录优化（学习）公司的webpack配置(二)提高打包速度配置扩展名CSS 模块化读取静态资源错误成功启动了上周开始优化（学习）公司的webpack配置(一) https://blog.csdn.net/XiaoYige_97/article/details/123737624 ，想看从零开始配置webpak会遇到什么坑，可以去上一篇博客了解。现在我们故事还没有完，那是一个美丽的周末。。。我打开了公司的项目，继续学习配置webpack,遇到了很多精彩的故
2022-03-28 20:45:23
1198
原创 node 版本过高导致下载依赖报错 ERESOLVE unable to resolve dependency tree
npm版本导致找不到依赖树.md npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree在家里的电脑安装公司项目依赖报错。发现是 node 的 版本过高PS E:\webpack-web> npm --version8.1.2PS E:\webpack-web> node -vv16.13.1重新安装node 14.x 的nodePS E:\webpack-web> np
2022-03-26 19:53:21
696
原创 优化（学习）公司的webpack配置(一)
优化（学习）公司的webpack配置2021年遇到的项目中，我遇到了一些特别难受的问题：webpack 编译慢，多达50多秒( 我觉得是文件结构深，很多文件冗余的原因)打包体积大，优化过后还有90MCI/CD慢，一个小bug，因为CI/CD慢，甚至半天一天久过去了（当然也没有一把过的原因）项目首屏加载慢node_module 体积超级大，达到惊人的1.4G昨天，就是3.23号，我试着优化了node_module，经过一天的努力，我还是决定还是先不要搞这个问题，但是也不是一无所获。导致n
2022-03-25 15:49:59
1506
原创 antd引入css错误 Failed to parse source map: ‘webpack://antd/./components/config-provider/style/index.le
antd 引入css 报错报错内容如下再index.js 文件里面引用antd 文件中这样引用cssimport 'antd/dist/antd.css' orimport 'antd/dist/antd.lees'开始以为是对应的 loader 没有安装好，导致无法解析相关的文件，尝试了都不行网上看还以为是webpack 配置没有配好，但是看了webpack 的配置，又感觉无从下手。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8HW0PLFw-164758
2022-03-18 15:38:29
7294
原创 04 防抖节流实现，问：防抖节流有什么区别
防抖节流函数防抖函数最后一次事件触发的规定时间执行回调函数触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间点击事件防抖多次点击，只执行最后一次触发的事件，利用闭包的特点，在debounce 函数里面，return 一个函数。<script> let btn = document.querySelector('#btn') function debounce(fn, num) { let timeOutId = null
2022-01-08 23:58:01
370
原创 03 instanceof关键字
JavaScript 实现 instanceof 关键字instanceof 关键字的用法instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。// 定义构造函数function C(){}function D(){}var o = new C();o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototypeo instanceof D; // false，因为
2022-01-05 11:31:57
200
原创 02 手写 new 的过程
New 关键字手写一个New 关键字，一个简单的版本function myNew(fn, ...args) { // 创建一个对象 const obj = {} // 修改原型指向 obj.__proto__ = fn.prototype // 调用构造函数，修改this指向新创建的对象 fn.apply(obj, args) // 返回新对象 return obj}另一个比比较全一点的版本function _new(constructor, ...
2022-01-05 11:15:22
678
原创 初识React Hooks,函数式编程
React Hook 技术胖用了一年多的React.js 但是在公司一直用的是Class 组件，但是被问到React 提高性能有什么手段的时候，我却哑口无言，不能说出一个 一二三来，连React官方推荐的Hook也是没有用过。学了之后hook 之后，感觉和Class 组件对比来说，在很多场景用hook,函数组件是比较方便的，一些简单的页面如果用Class 组件，显得有些 “臃肿”。优化可以用useCallback ，useMemo和memoClass 组件和函数组件式两者是编程思想的改变：Clas
2021-12-26 22:44:50
757
原创 手撕源码 实现原生的AJAX请求
JavaScript Ajax 封装学习之旅在掘金上看了 《 56个JavaScript高级的手写知识点 》（链接在文章底部），里面描述了前端50多个前端手写题，然后想自己也想跟着理解一下。不求完全掌握，但是希望可以打一下基础。开始:对XMLHttpRequest对象不了解，找了相关的文章，然后发现文章的有写了和FetchApi的区别，去看了FetchApi, 设置response Header的时候，有一个Content-type，去看了，返回是img 的时候，用Blod 对象,数据流，Blod 对象
2021-11-28 15:29:41
277
原创 手撕源码 Axios的README 文件
axios看了aiost 的readme文件，感觉收获满满！过阵子要再看一遍！InstallingUsing npm:$ npm install axiosUsing bower:$ bower install axiosUsing yarn:$ yarn add axiosUsing jsDelivr CDN:<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script&g
2021-11-28 15:26:06
303
原创 javaScript 常见的类型转换
JavaScript 中的类型转换 javascript 可以进行强制类型转换和隐性类型转换，这里整理了一些常见的类型转换的情况，如有遗漏的情况，欢迎补充！字符串转数组字符串：const str = "hello World"const str = "helloWorld"let a = [], b = [], c = [], d = [], e = [], f = [], g = []// 第一种a = str.split('')// 第二种b = [...str]// 第三
2021-10-26 14:35:41
219
原创 JavaScript 闭包和递归
闭包闭包是 JavaScript 一个非常重要的特性，这意味着当前作用域总是能够访问外部作用域中的变量。 因为函数 是 JavaScript 中唯一拥有自身作用域的结构，因此闭包的创建依赖于函数。闭包是一种特殊的对象，它由两部分组成：执行上下文（代号 A），以及在该执行上下文中创建的函数 （代号 B），当 B 执行时，如果访问了 A 中变量对象的值，那么闭包就会产生，且在 Chrome 中使用这个执行上下文 A 的函数名代指闭包。JavaScript拥有自动的垃圾回收机制，关于垃圾回收机制，有一个重要
2021-10-10 18:57:26
723
原创 JavaScript 类型判断 判断Null和Undefined
js类型判断 判断Null和UndefinedjavaScript中判断数据类型的方法主要有三种： **typeof:**原理是通过根据变量的机器码来判断 instanceof:根据 构造函数的 prototype 属性是否出现在某个实例对象的原型链上typeof序号类型结果1Undefined“undefined”2Null“object”3Boolean“boolean”4Number“number”5BigInt(ECMA
2021-09-20 21:08:09
4539
原创 JavaScript 第N次看 《原形与原形链》
原型与原型链 众所周知，函数对象天生带有prototype属性，也就是每个函数在创建之后会天生拥有一个与之相关联的原型对象。这个原型对象中拥有一个constructor属性，该属性指向这个函数。function Person(name){ this.name = name this.getNam = function(){ console.log(this.name) }}访问原型对象的三种方式访问对象（Person）的原型对象的方式可以分为两种，一种
2021-09-19 23:38:39
103
原创 JavaScript 数组的判断方法
判断数组的方法isArray 方法isArray 是es6的数组的一个方法，用来判断是否是数组，返回一个布尔值console.log(Array.isArray([])) // trueconsole.log(Array.isArray(undefined))//falseconsole.log(Array.isArray(null))//falseconsole.log(Array.isArray(NaN))//false用constructor 构造函数判断console.log([]
2021-08-08 13:42:00
164
原创 05 数组去重的方法
数组的去重对数组进行去重let arr = [1,3,3] let result = []使用第三方库lodash的_uniq()创建一个去重后的array数组副本。使用了SameValueZero 做等值比较。只有第一次出现的元素才会被保留。result = _uniq(arr)); // [1,3]使用对象的key属性特点对象的obj.key1 = ‘value1’,如果对象obj 中有key1那么就会重新赋值，如果没有key1就会新增一个key1并赋值，再通过Object.keys
2021-08-08 13:30:42
253
原创 apply,call,bind 改变this的指向
apply call bindcall() 方法分别接受参数apply() 方法接受数组形式的参数。bind() 方法，分别接受参数，并返回一个函数，不会调用这个函数apply 方法，可以改变调用函数的调用者，person1 可以调用person 的fullName()var person = { fullName: function() { return this.firstName + " " + this.lastName; }}var person1
2021-07-18 19:28:13
102
原创 Vue study 入门前端万字笔记
Vue study 入门前端万字笔记什么是vue jsvue.js 是前端的主流框架之一，和Angular.js React.js ，前端的三大框架Vue.js是一套构建用户界面的框架，只关注视屏层，主要负责 M（数据）V（视图）C（业务逻辑） 中的V这一层，主要工作就是和界面打交道让开发人员只需要关注业务逻辑，不再化很多的精力关心DOM操作，提高开发效率官网：https://cn.vuejs.org/v2/guide/transitions.html框架和库的区别框架，是一套
2021-03-02 20:22:33
204
原创 JavaScript 数组常用方法
数组数组是一种特殊的对象，再javaScript中对数组使用typeof运算符返回"object"，所有 JavaScript 对象都拥有 toString() 方法。数组的length 属性（既然有属性，也可以从另一方面验证数组是对象）arr = [1,2,3,4]console.log(arr.length); //4arr[8] = 9console.log(arr.length); d//9数组的定义定义数组的两种方法let arr = [4,8];let a
2021-02-19 11:34:20
326
3
原创 node 学习笔记 基础入门
网址官网https://nodejs.org中文文档http://www.nodeclass.com/api/node.htmlnodejs什么是nodejs：是构建在 Chromes V8 引擎上 js 的运行环境，可以解析javaScript 代码。 javaScript 可以脱离浏览器运行，归功于node.js 事件驱动，非阻塞I/O 模型 （异步） nodejs npm 是世界上最大的开源生态系统 javaScript 绝大多数包存放在npm
2020-10-13 23:51:16
1272
原创 Vue.js 基础语法 入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法，入门语句，Vue学习笔记学习网站：https://www.bilibili.com/video/BV15741177Ehvue 的体验响应式：数据一旦改变，视图就会响应改变el:指定了这个Vue 对象挂载到哪一个元素data:该属性中通常存储一些数据<div id="app">{{massage}}</div> <!-- 显示helleWorld --><script src="./vue.js"></
2020-09-26 12:58:57
356
2
原创 jQuery基础入门 jq选择器 注册事件 jQuery事件机制 animate自定义动画
1使用js的缺点代码比较麻烦，需要遍历，可能还需要嵌套找对象麻烦，方法少，还长会有兼容性问题如果想要实现简单的动画效果 animatejs注册事件，会被覆盖css <style> div{ height:200px; margin-bottom:10px; background-color:#d12345; display:none; } </s
2020-08-15 10:39:17
262
原创 Mysql Mysql语句入门 燕十八老师练习笔记
Mysql 笔记文章目录Mysql 笔记数据库的入门语句mysql 的基础知识修改alter查询广义投影likegrouphavingorder by 与 limitwhere子查询exists 子查询奇怪的null两表全连接数据库的入门语句登录mysqlmysql -uroot -p;查看数据库 show databases;选数据库show tables;显示数据表show tables;创建数据库crete database test charset
2020-08-13 10:24:42
318
原创 数据类型 类型转换 NaN undefined
数据类型基本类型Number 任意数值String 任意字符串Boolean true/falseundefined 声明变量但是没有赋值时和接受函数的返回值为空时，就是undefinedvar a;console.log(a) //undefinedfunction fn(){} var f = fn()console.log(f) //undefined
2020-08-09 21:24:44
1121
原创 webpack 搭建使用webpack进行模块化开发
webpack 项目的搭建配置webpack 项目的搭建创建项目目录webpack_text // 项目名 src index.js index.html初始化项目npm init -y把webpack 安装到项目cnpm i webpack webpack-cli -D 这个时候，可以运行的你的webpack项目了 ,直接在终端输入webpack,没有错，就是那么简单，运行结束之后，就会自动生成一个dist文件，里面就有打包的好的代码 main.js文
2020-08-03 10:31:30
203
原创 浮动：float，清除浮动的四种方法
浮动的特性：浮动的主要作用是：让多个块级元素（display:block）在同一行显示 。 添加浮动的元素，脱离了标准文档流，不占位置，会影响标准流，后面的元素会向上移动，钻到浮动元素的下面。 浮动只有左右：float: left right none 添加浮动元素，进行了隐式转换变成了“行内块元素”，其实display虽然还是block /inline,但是添加了浮动的元素已经有了行内块元素的特性（inline-block）,可以设置宽和高浮动的应用： 让多个块级元素在同...
2020-07-31 21:48:54
2167
原创 position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性：position常见的定位模式：定位模式描述是否脱离文档流移动模式定位偏移属性static默认属性对象遵循常规流不移动不移动relative相对定位对象遵循常规流相对以自身移动top right bottom leftabsolute绝对定位对象脱离常规流相对以有定位的父级元素移动top right bottom leftfixed固定定位对象脱离常规流偏移定位是以窗口为参考top right bot
2020-07-30 20:14:03
1306
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人