- 博客(60)
- 收藏
- 关注
RSS订阅
原创 个人CSDN说明
个人CSDN说明不定期发表，主要是拿来记录自己学习过程中的一些笔记，碰到什么问题就会做一些简单的记录，已发表的文章也会不定期更新。学习过程中，写的内容可能不够完整描述不够清晰，但是所有代码都是自己学习过程中敲过的，错误几乎是不存在的。我也是小白，学习过程中碰到相似问题可以看我的文章参考学习，希望对大家有所帮助一起进步。...
2021-08-25 23:51:19
59
原创 React-HOOKS常用知识点总结
React-HOOKS常用知识点总结.md文章目录React-HOOKS常用知识点总结.md1、类组件与函数组件的区别2、HOOK使用原则3、useState4、useEffect5、useContext6、useReducer7、userCallbcak8、useMemo9、useRef10、useImperativeHandle11、useLayoutEffect12、自定义hook1、类组件与函数组件的区别类组件：可以定义自己的state保存自己的内部状态有自己的生命周期，在对应的生命周
2022-03-20 18:27:06
912
原创 Vue 中文本内容超出规定行数后展开收起的处理的实现方法
参考文章：https://www.jb51.net/article/160354.htm<template> <div> <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'"> <div class="intro-content" :aaa="introduce" ref="desc"> <span class="merchant-
2022-02-17 22:21:26
1011
原创 webpack-Plugin
webpack-Plugin文章目录webpack-Plugin1、认识Plugin2、CleanWebpackPlugin2、HtmlWebpackPlugin3、DefinePlugin4、CopyWebpackPlugin1、认识PluginWebpack核心是PluginLoader是用于特定的模块类型进行转换；Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；2、CleanWebpackPlugin自动删除dist文件安装：npm install
2022-01-18 22:39:58
566
原创 webpack-资源模块类型
webpack-资源模块类型文章目录webpack-资源模块类型1、asset2、加载字体文件1、asset通过asset 不需要额外安装loader在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；在webpack5之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；资源模块类型(asset module type)，通过添加4 种新的模块类型，来替
2022-01-12 22:36:26
338
原创 webpack-处理图片等其他资源
webpack-处理图片等其他资源文章目录webpack-处理图片等其他资源1、file-loader2、url-loader1、file-loader处理jpg、png等格式的图片，我们也需要有对应的loader：file-loaderfile-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；安装：npm install file-loader -D引入图片资源方式：require("../img/ali.png
2022-01-12 21:29:16
316
原创 Webpack初识--常用loader
Webpack初识–常用loader文章目录Webpack初识--常用loader1、背景2、webpack与cli3、webpack1、webpack依赖2、配置入口和出口4、loader1、概念2、css-loader1、安装2、使用方案3、处理less4、处理scss5、postcss1、postcss的作用：2、使用postcss6、browserslist1、背景开发中存在的问题开发过程中需要通过模块化开发部分高级特性，比如ES6，less、scss等开发过程中，希望监听文件实时变化
2022-01-12 20:56:13
134
原创 Webpack初识--常用loader
Webpack初识–常用loader1、背景开发中存在的问题开发过程中需要通过模块化开发部分高级特性，比如ES6，less、scss等开发过程中，希望监听文件实时变化并反应到浏览器中开发完成后需要对代码进行压缩合并等优化操作webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；模块化mo
2022-01-10 22:35:17
597
原创 初识数据结构与算法
初识数据结构与算法1、栈stack1、基本概念栈是一种遵从后进先出原则的有序集合添加新元素的一端叫做栈顶，另一端称为栈底操作栈的元素时，只能从栈顶操作（添加、移除或取值）2、栈的实现push：入栈方法pop：出栈方法top：获取栈顶size：获取栈的元素个数clear：清空栈// push的实现class Stack { constructor() { // 存储栈的数据 this.data = {}; // 记录栈的数据个数（相当于数组的 le
2022-01-10 21:27:15
162
原创 深拷贝函数
深拷贝函数1、深拷贝基础对象赋值的三种方式引用赋值：指向同一个对象，相互之间会影响；浅拷贝：浅层的拷贝，内部引入对象时，依然会相互影响；深拷贝：两个对象不再有任何关系，不会相互影响；实现深拷贝的方式：通过JSON序列化但是会存在bug对函数、Symbol等无法处理如果存在对象循环引用，会报错自定义深拷贝函数实现深拷贝基本功能对Symbol的key做处理对其他数据类型的值进行处理：数组、函数、Symbol、Set、Map对循环引用做处理2、基本实现//
2021-12-26 19:38:26
1530
原创 手写防抖和节流函数
手写防抖和节流函数文章目录手写防抖和节流函数1、防抖函数1、函数防抖2、应用场景3、防抖案例1、第三方库2、手写2、节流函数1、函数节流2、应用场景3、节流案例1、第三方库2、手写1、防抖函数1、函数防抖在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。关键点：事件在n秒内再次触发，则重新计时。直到n秒后不再触发，再执行回调防抖相当于做了一次延迟2、应用场景频繁输入内容、提交或搜索信息频繁点击按钮，触发某个事件监听浏览器滚动，完成特定操作用户缩放浏览器的resize事
2021-12-19 12:51:19
221
原创 本地存储Storage与Cookie
本地存储Storage与Cookie文章目录本地存储Storage与Cookie1、Storage2、Storage常见的方法和属性3、Storage常见封装4、IndexedDB5、cookie1、StorageWebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式：localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；sessionStorage：会话存储，提供的是本次会话的存储，
2021-12-12 22:57:53
212
原创 JSON详解与JSON深拷贝
JSON详解与JSON深拷贝文章目录JSON详解与JSON深拷贝1、JSON简介2、JSON基本语法3、JSON序列化4、Stringify补充5、Parse补充6、JSON序列化实现深拷贝1、JSON简介JSON是一种非常重要的数据格式，它并不是编程语言，而是一种可以在服务器和客户端之间传输的数据格式。JSON的全称是JavaScript Object Notation（JavaScript对象符号），主要应用于JavaScript中，但是目前已经独立于编程语言，在各个编程语言中都可以使用。目
2021-12-12 17:14:18
2736
1
原创 ES6——Proxy与Reflect浅析
ES6——Proxy与Reflect浅析文章目录ES6——Proxy与Reflect浅析1、监听对象操作2、Proxy类1、Proxy用途2、捕捉器1、get2、set3、has4、deleteProperty5、函数捕捉器apply6、函数捕捉器construc3、Reflect对象1、基本使用2、Receiver关于ES6的proxy，先从Object.defineProperty开始了解1、监听对象操作通过属性描述符Object.defineProperty//当我们需要获取对象属性值或
2021-12-06 21:18:50
687
1
原创 ES7-ES12知识点浅析
ES7-ES12知识点浅析文章目录ES7-ES12知识点浅析1、ES71、Array Inculdes2、指数运算符2、ES81、Object values2、Object entries3、String Padding4、Trailing Commas5、Object Descriptors6、async和await3、ES91、Async iterators2、Object spread operators：3、Promise finally4、ES101、flat flatMap2、Object f
2021-12-05 21:40:34
527
原创 ES6默认参数、解构、剩余参数arguments与展开语法
ES6默认参数、解构、剩余参数arguments与展开语法默认参数ES5写法//1.写起来很麻烦, 并且代码的阅读性是比较差//2.这种写法是有bugfunction foo(m, n) { m = m || 'aaa'; n = n || 'bbb'; console.log(m, n);}foo(); //aaa bbbES6写法//给函数参数提供默认值function foo(m = 'aaa', n = 'bbb') { console.log(m, n);}
2021-12-05 13:11:21
1039
原创 JavaScript中var、let、const浅析
JavaScript中var、let、const浅析文章目录JavaScript中var、let、const浅析基本使用var关键字let关键词const关键字作用域提升window对象添加属性块级作用域暂时性死区var、let和const选择基本使用在ES5，声明变量采用的都是var关键字，从ES6开始，新增了let、const用于声明变量和常量var关键字ES5中声明变量的一种方式var name;var age;let关键词ES6中用于声明变量不允许重复声明变量le
2021-12-05 12:04:49
581
1
原创 重学前端-JavaScript高级
重学前端-JavaScript高级更新日期：11-23第一次更新：11-23第二次更新：11-24第三次更新：11-25第四次更新：11-26第五次更新：11-27第六次更新：11-281、浏览器原理1、浏览器工作原理输入服务器➡️index.html➡️遇到link标签下载css文件，遇到JavaScript标签下载JavaScript文件2、浏览器内核pGecko：早期被Netscape和Mozilla Firefox浏览器浏览器使用；Trident：微软开发，被IE4~IE
2021-11-28 22:12:26
765
1
转载 （转载）CSS动画性能——重绘与重排（回流）
文章原链接身为一个前端，只考虑动画怎样实现就够了么？也许后续的动画性能优化才是你最大的敌人。为什么会有这篇博文，说来惭愧。虽然用过CSS3制作过大量的动画效果，但在PC端和移动端，动画表现时佳时不佳，会卡顿会掉帧，有大量动画的页面更是会使移动设备的耗电和发热状态达到跟玩高FPS大型手游一样。小动画的卡顿掉帧问题也够让人抓耳挠腮一段时日。这篇博客并不会给出解决方案（因为我也没找到解决方案），因为导致动画卡顿的原因数不胜数，比如低端安卓设备，纵使用transform，动画还是有可能从直接从一边运行一段时间…
2021-11-26 23:30:37
513
原创 H5读取预览上传文件
通过createObjectURL拿到blob格式file.name获取到上传的文件名reader.result拿到data:image/png;base64格式<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <met
2021-11-17 22:26:44
352
原创 重学前端-Hooks
重学前端-Hooks更新日期：11-7第一次更新：11-7第二次更新：11-13第三次更新：11-141、React Hooks 介绍1、React Hooks 是⽤来做什么的对函数型组件进⾏增强, 让函数型组件可以存储状态, 可以拥有处理副作⽤的能⼒.让开发者在不使⽤类组件的情况下, 实现相同的功能.2、React Hooks 使⽤1、useState说明使用闭包来实现保存数据状态，页面重新渲染时状态保持不变接收唯⼀的参数即状态初始值. 初始值可以是任意数据类型.返回值为数组.
2021-11-14 18:03:09
882
原创 html2canvas的简单使用
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl
2021-11-09 23:04:43
202
原创 重学前端-JavaScript性能优化
重学前端-JavaScript性能优化更新日期：11-2第一次更新：11-2第二次更新：11-31、内存管理1、内存管理开发者主动申请空间、使用空间和释放空间2、垃圾回收和常见GC算法JavaScript中的内存管理是自动的对象不再被引用时是垃圾对象不能从根上访问到是垃圾1、JavaScript可达对象可以访问到的对象（引用、作用域链）从根出发JavaScript中的根理解为全局变量对象2、GC算法1、概念GC就是垃圾回收机制的简写GC可以找到内存中的垃圾、并释
2021-11-06 20:06:24
73
原创 重学前端-JavaScript异步编程
重学前端-JavaScript异步编程文章目录重学前端-JavaScript异步编程更新日期：11-11、单线程2、同步模式与异步模式1、同步模式2、异步模式3、Promise1、链式调用2、异常处理3、静态方法4、并行执行5、执行时序4、Generator异步方案4、Generator异步方案更新日期：11-1第一次更新：11-11、单线程优点：安全简单2、同步模式与异步模式1、同步模式同步执行：依次排队执行同步任务会导致阻塞，用户页面出现卡死情况2、异步模式异步编程根基：回调函数
2021-11-01 22:09:38
82
原创 重学前端-函数式编程范式
重学前端-函数式编程范式文章目录重学前端-函数式编程范式更新日期:10-31大前端JavaScript1、函数式编程2、高阶函数3、常用的高阶函数4、闭包5、纯函数6、柯里化1、柯里化基础1、解决硬编码问题2、Lodash中的柯里化3、柯里化案例4、Loadsh中的柯里化实现原理7、函数组合更新日期:10-31第一次更新：10-31第二次更新：11-1大前端开发方向：BFF（中间层）开发、泛客户端开发、传统Web技术的深入JavaScript1、函数式编程尽可能的重用函数2、高阶函数概
2021-11-01 19:39:28
107
原创 react核心知识笔记
react核心知识笔记10.6更新1、对象的不可变性：原理Object.freeze()不可扩展不可删除不可修改 17+的版本扩展：Object.seal()不可扩展不可删除可以修改注意点：Object.freeze()默认是浅冻结，深层采用递归。应用场景：immutable不可变数据类型，react内部采用freeze。immer相对于immutable更轻量。function deepFreeze(obj){ Object.freeze(obj); for(let k
2021-10-10 21:32:22
115
原创 TS学习笔记二
TS学习笔记二项目https://gitee.com/hucongcong/geek-pc-hz21/tree/master1、类型保护联合类型，类型保护，类型断言interface Bird { fly: boolean; sing: () => {};}interface Dog { fly: boolean; bark: () => {};}// |联合类型，可以使bird也可以是dog// 类型断言的方式实现类型保护function trainAnim
2021-08-31 23:29:07
136
原创 HOOKS笔记
HOOKS学习笔记类组件与函数组件的区别类组件可以定义自己的state，用来保存自己的内部状态，类组件有自己的生命周期，可以在对应的生命周期中完成对应的逻辑操作。在componentDidMount发送网络请求，在数据更新时可以调用componentDidUpdate生命周期，在状态发生改变只会重新执行render函数类组件中产生的副作用需要在componentWillUmmount中清除，比如redux中手动调用subscribe函数组件不可以，函数每次调用都会产生新的临时变量，函数组件被重新渲染
2021-08-30 00:03:44
357
原创 TS学习笔记
TS学习笔记1、编译TS将.ts文件编译为js文件。tsc --init,tsc demo.ts。直接运行需要借助插件：ts-node2、TS类型定义：静态类型：let b:number = 123;interface Point{ x:number, y:number}//定义point的静态类型为Pointconst point:Point={ x:3, y:4}3、基础类型和对象类型基础类型：null，undefined，symbol，boo
2021-08-29 13:08:33
192
原创 react-CSS学习
react-CSS学习1、内联样式（不推荐）：写法：style接收一个采用小驼峰命名属性的JavaScript对象，而不是CSS字符串，并且可以引用state中的状态来设置相关样式优点：内联样式，样式之间不存在冲突，可以动态获取当前state中的状态import React, { PureComponent } from 'react';export default class App extends PureComponent { constructor(props) { supe
2021-08-27 23:06:29
105
原创 axios简单封装以及get/post发送网络请求
axios简单封装以及发送网络请求目录结构：services->config.js,player.js,request.jsconfig.js:存放接口基准地址，包括对生产环境和开发环境的判断，设置延迟时间const devBaseURL = "http://123.207.32.32:9001";const proBaseURL = "http://123.207.32.32:9001";export const BASE_URL = process.env.NODE_ENV === 'd
2021-08-25 23:46:04
591
1
原创 三道笔试小题目：拆解url，数组结构转树状结构，深拷贝（包括函数）
三道笔试小题目：拆解url，数组结构转树状结构，深拷贝（包括函数）1、对 url 中的 query 部分做拆解，返回一个 key - value 形式的 object使用split对字符串进行切割，再通过遍历配合数组解构可以轻松实现效果// 入参格式参考：const url = 'http://sample.com/?a=1&b=2&c=xx&d#hash';// 出参格式参考：// const result = { a: '1', b: '2', c: 'xx', d:
2021-08-25 21:33:01
323
原创 高阶组件学习-练习——应用场景
高阶组件学习-练习——应用场景增强propsimport React, { PureComponent, createContext } from 'react';// 定义一个高阶组件function withUser(WrappedComponent) { return props => { return ( <UserContext.Consumer> { user => { retu
2021-08-25 00:04:25
215
原创 react-memo浅析
react-memo浅析React.memo是一个高阶组件，类似于React.PureComponent，不同于React.memo是function组件，React.PureComponent是class组件。memo默认情况下只会对复杂对象做浅层比较，如果需要控制对比过程，需要传入第二个参数，function MyComponent(props) { /* 使用 props 渲染 */}function areEqual(prevProps, nextProps) { /* 如果把
2021-08-24 23:58:22
446
原创 前端JS字符串数组数字数组相互转换
字符串数组转化数字数组let values = ['0', '1', '5', '10', '15', '2'];let valueArr = values.map((item) => { return Number(item);});console.log(valueArr); //[0, 1, 5, 10, 15]数字数组转化为字符串数组let strArr = valueArr.map((item) => { return String(item);});cons
2020-09-05 11:00:50
1575
原创 JS实现前端本地Excel表格上传到网页显示并实现反向导出（解决乱码问题）
演示效果使用到的第三方库：导入：xlsx.full.min.js导出：export.js<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxim
2020-08-29 11:35:54
1295
1
原创 react全局事件传递
React全局事件传递安装events第三方库： yarn add eventsimport React, { PureComponent } from 'react';// 在组件库中导入相关类import { EventEmitter } from 'events';// 创建事件总线const eventBus = new EventEmitter();class Home extends PureComponent { // 添加事件监听 componentDidMoun
2020-08-01 15:34:47
1047
原创 React组件之间通信（tab栏切换）
index.js渲染app组件import React from 'react';import ReactDOM from 'react-dom';import App from './App';import './index.css';ReactDOM.render(<App />, document.getElementById('root'));app.jsimport React, { Component } from 'react';import TabContr
2020-07-31 13:38:42
259
原创 react父子组件之间通信
父子组件之间通信父传子通信——类组件index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />, document.getElementById('root'));App.jsimport React, { Component } from 'react';// 这是子组件class ChildCpn
2020-07-31 11:49:20
180
原创 Vuex复习
目录结构vuex页面展示效果home.vue文件调用了store中state中的counter<template> <div> {{ $store.state.counter }} </div></template><script>export default { name: 'about',};</script>App.vue<template> <div id=
2020-07-28 14:08:08
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人