- 博客(52)
- 收藏
- 关注
RSS订阅原创 2021-03-29 最后一次在CSDN记录博客
2021-03-29 最后一次在CSDN记录博客今天是最后一次在CSDN做记录了，文章已经迁移到掘金去了，CSDN是我的第一个博客地址，记录了我这快两年的职业生涯文章，以后不会在这里继续下去了，感谢！...
2021-03-29 11:19:53
136
原创 2021-03-26 CSS样式之Flex实战
2021-03-26 CSS样式之Flex实战问题描述：如下图，案件类型是根据业务范围选择而变化的，所以案件类型这行的宽度是会动态变化的，既要保证不能超出，又要使更多文字不能与证券与资本市场这一类最后一行的按钮重合；并且点击更多会显示剩余的选项解决方法：利用flex布局，全部与中间选项以及更多分为三个部分，统一放在一个div里面，布局为dispaly:flex然后中间按钮布局如下：内部使用flex布局，而且使得超出换行flex-wrap:wrap.el-checkbox-group { dis
2021-03-26 12:26:13
142
原创 2021-03-15 详解HTTP协议
2021-03-15 HTTP协议详解概述一、HTTP协议详解之URL二、HTTP协议详解之请求篇三、HTTP协议详解之响应篇四、HTTP协议详解之消息报头篇概述HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统HTTP协议的主要特点如下：1、支持客户/服务器模式2、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同，由于HTTP协议简单，使得HTTP服务器的程序规
2021-03-15 15:09:20
328
原创 2021-03-07 React原理解析04
2021-03-07 React原理解析04理解协调React中的数据结构React合成事件系统常见的组件优化技术定制组件的shouldComponentUpdate钩子PureComponentReact.memouseMemouseCallback理解协调React中的数据结构Flags注：这里的flags都是二进制，这个和React中用到的位运算有关。首先我们要知道位运算只能用于整数，并且是直接对二进制位进行计算，直接处理每一个比特位，是非常底层的运算，运算速度极快；其次，一个节点可能有多
2021-03-07 17:04:56
267
原创 2021-03-06 React原理解析03
2021-03-05 React原理解析03Hook简介Hook APIHook简介Hook是React16.8的新增特性，它可以在你不编写class的情况下使用state以及其他的React特性1、Hooks是什么？为了拥抱正能量函数式2、Hooks带来的变革，让函数组件有了状态和其他的React特性，可以替代class没有破坏性改动完全可选。无需重写任何已有代码就可以在一些组件中尝试Hook100%向后兼容。Hook不包含任何破坏性改动现在可用。Hook发布于v16.8没有计划从R
2021-03-06 19:18:57
133
原创 2021-03-05 通用正则校验方法
2021-03-05 通用正则校验方法1、邮箱校验const EMAIL = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/function validatePhone(str) { const regex = new RegExp(PHONE) return regex.test(str)}2、手机号码const PHONE = /^134[0-8]\d{7}$|^13[^4]\d{
2021-03-05 11:57:50
682
原创 2021-03-03 React原理解析02
2021-03-03 React原理解析02协调-reconciliationfiber协调-reconciliation设计动力调用React的render()方法会创建一颗由React元素组成的树，在下一次state、props或context更新时候，相同的render()方法会返回一颗不同的树。React需要基于这两颗树之间的差别来判断如何有效的更新UI以保证当前UI与最新的树保持同步React提出了一套O(n)-n是树中元素的数量，启发式算法(diff算法)：1、两个不同类型的元素会产生
2021-03-03 22:38:58
159
原创 2021-02-08 React原理解析01
2021-02-08 React原理解析01一、深入虚拟DOM二、JSX三、React核心API一、深入虚拟DOMReact本身只是一个DOM的抽象层，使用组件构建虚拟DOM什么是Virtual DOM、为什么用以及何处使用what：用Javascript对象表示DOM信息和结构，当状态变更的时候，重新渲染这个Javascript对象结构。这个Javascript对象称为Virtual DOM传统的dom渲染过程：将html解析成dom树将CSS解析成css tree合并二者为rende
2021-02-28 20:59:53
200
3
原创 2021-02-19 React面试题集合
2021-02-19 React面试题集合1、React中的key是什么，有什么作用key是react在渲染一系列相同类型的兄弟元素时，给每个元素指定一个稳定、可预测、兄弟间唯一的值，来帮助React识别哪些元素改变了，比如添加和删除，这样做可以避免在某些场景下的错误渲染并且提升React的渲染性能key的作用是用在使用diff算法对比react更新前后两棵树的比较时使用的，使得树的转换效率得以提高，组件实例基于它们的key来决定是否更新以及复用持续更新…...
2021-02-19 10:18:02
4625
1
原创 2021-02-04 React-router的使用及源码API实现
2021-02-03 React-router的使用及源码API实现react-router简介react-router包含三个库，react-router、react-router-dom和react-router-native。react-router提供最基本的路由功能，实际使用的时候根据应用运行的环境选择安装react-router-dom(在浏览器中使用)或react-router-native(在react-native中使用)yarn add react-router-dom 或yar
2021-02-04 15:44:00
206
原创 2021-02-01 React-redux的API设计与实现
2021-02-01 React-redux的API设计与实现Hooks APIuseReducerconst [state, dispatch] = useReducer(reducer, initialArg, init);其中init是个函数处理initialArg参数的useReducer是useState的替代方案。它接收一个形如(state, action)=>newState的reducer，并返回当前的state以及配套的dispatch方法useEffectuseEf
2021-02-01 17:39:55
161
原创 2021-01-29 Redux的源码简单实现
2021-01-29 Redux的源码简单实现Reducerreducer是什么，其实就是一个纯函数，接收旧的state和action，返回新的state(preState,action)=>newState之所以叫reducer，是和Array.prototype.reduce(reducer, initialValue)里的回调函数属于相同的类型。保持reducer的纯净非常重要，永远不要再reducer里做以下操作：修改传入参数执行有副作用的操作，如API请求和路由跳转调用非
2021-01-29 17:07:02
106
原创 2021-01-27 React高级API-Context
2021-01-27 React高级API-Context组件化优点增强代码重用性，提高开发效率简化调试步骤，提升整个项目的可维护性便于协同开发注意点：降低耦合性组件跨层级通信-ContextReact应用中，大部分数据是通过props属性自上而下(由父及子)进行传递的，遇到复杂的嵌套组件关系时，可以使用Context实现祖代组件想后代组件跨层级传值，类似于Vue中的provide&inject就是来源于ContextContext APIReact.createContext
2021-01-27 14:53:53
298
原创 2021-01-17 Vue组件化思想及实践
2021-01-15 Vue组件化思想及实践组件化组件化vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率、方面重复使用、简化调试步骤、提升项目可维护性，便于多人协同开发组件通信常用方式props$emit/$onevent busvuex边界情况$parent$children$root$refsprovide/inject非props特性- $attrs- $listeners
2021-01-17 14:48:55
207
原创 2021-01-06 Vue的设计思想及简版实现
2021-01-06 Vue的设计思想及简版实现理解Vue的设计思想数据响应式原理Vue中的数据响应化理解Vue的设计思想将视图View的状态和行为抽象化，让我们将视图UI和业务逻辑分开Vue是MVVM框架的实现，其包括三大要素：数据响应式、模板引擎和渲染数据响应式：监听数据变化并在视图中更新Object.defineProperty()（Vue2）Proxy（Vue3）模板引擎：提供描述视图的模板语法插值：{{}}指令：v-bind, v-on, v-model, v-for,
2021-01-06 22:13:11
319
原创 2020-01-03 Vuex设计原理及简单实现
2020-01-03 Vuex设计原理及简单实现Vuex核心概念Vuex原理解析Vuex核心概念Vuex是集中式存储管理应用的所有组件的状态，并以相应的规则保证以可预测的方式发生变化安装插件：vue add vuex组成部分：state状态、数据mutations更改状态的函数actions异步操作store包含以上概念的容器状态-statestate保存应用状态，store.jsexport default new Vuex.Store({ state: {counter:0
2021-01-03 20:04:47
161
原创 2021-01-02 Vue-router插件简单原理实现
2021-01-02 Vue-router插件简单原理实现Vue-router官方介绍Vue-router源码实现Vue-router官方介绍Vue-Router是Vue.js官方的路由管理器安装：vue add router使用步骤：使用vue-router插件，router.jsimport Router from 'vue-router'Vue.use(Router)创建Router实例，router.jsexport default new Router({...})
2021-01-03 00:56:17
158
原创 2020-12-24 JS中的相等性比较方法
2020-12-24 JS中的相等性比较方法`==`方法`===`方法`Object.is(value1, value2)`方法==方法1、两个复合类型(对象、数组、函数)比较时，不是比较它们的值是否相等，而是比较它们是否指向同一个地址，所以两个对象总是不相等的[] == [] // false{} === {} // false(function(){} === function(){}) // false2、两侧类型不相同时，会发生隐式转换NaN和其它任何比较永远false，包括它自
2020-12-24 15:15:32
144
转载 2020-12-15 Javascript定义类(class)的三种方式
@[TOC](2020-12-12 Javascript定义类(class)的三种方式)
2020-12-15 14:18:45
810
原创 2020-09-18 前端性能优化
2020-09-18 前端性能优化主要分为两个大方面：1、文件加载的更少；2、代码执行的更少一、从输入URL到浏览器到底发生了什么第一步，DNS解析，将域名解析为对应的ip地址第二步，建立TCP连接，经过三次握手直到双方都能明确自己和对方的收发能力是正常的第三步，发送HTTP/SSL请求第四步，解析服务器返回的响应第五步，浏览器渲染页面PS：1、TCP三次握手分为以下步骤：第一次，客户端发送网络包，服务端收到，服务端确认自己的接收正常，以及客户端的发送正常第二次，服务端发送网络包，
2020-09-18 13:13:02
124
原创 2020-09-14 Vue源码剖析
2020-09-14 Vue源码学习入口文件初始化数据响应式入口文件初始化首先，在package.json文件中script里找到dev=>配置文件scripts/config.js；然后根据TARGET:web-full-dev找到入口文件web/entry-runtime-with-compiler.jssrc\platforms\web\entry-runtime-with-compiler.js文件扩展了$mount方法：处理了template和el选项，尝试编译它们为render
2020-09-15 15:32:11
174
原创 2020-07-02 HTTP协议、状态码和跨域
2020-07-02 HTTP协议、状态码和跨域HTTP与HTTPS跨域HTTP与HTTPSHTTP协议：全称Hyper Text Transfer Protocol，翻译过来就是超文本传输协议，是一个基于请求与响应，无状态的，应用层的协议，常基于TCP/IP协议传输数据，互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准。设计HTTP的初衷是为了提供一种发布和接收HTML页面的方法通过请求>>>响应的方式，在客户端和服务器之间进行通信缺点是不够安全HTTP
2020-07-02 16:07:21
2652
原创 2020-06-16 JS数据类型之间的相互转换
2020-06-16 JS数据类型之间的相互转换运算符数据类型转换运算符常用的有算术运算符（加减乘除和赋值）、比较运算符和布尔运算符加法运算符：加法运算符（+）是最常见的运算符也是最复杂的，用来求两个数值的和1 + 1 // 2JavaScript允许非数值的相加true + true // 21 + true // 2上面两代码，第一个是两个布尔值相加，第二个是数值和布尔值相加，这两种情况布尔值都会自动转成数值，然后相加；比较特殊的是如果两个运算子中有一个是字符串，这时非字符串会转成
2020-06-16 14:44:10
356
原创 2020-06-08 JavaScript数据结构与算法
2020-06-08 JavaScript数据结构与算法JS中的堆栈-内存的分配和使用深拷贝和浅拷贝JS中的堆栈-内存的分配和使用堆是动态分配内存，内存大小不一，也不会自动释放栈是自动分配相对固定大小的内存空间，并由系统自动释放JS的数据类型分为基本数据类型（也称为原始数据类型）和复杂数据类型（引用数据类型）原始数据类型又分为string、number、boolean、undefined和null（ES6中新增Symbol），这些都是直接按值存储在栈中的，每种类型数据占用的内存空间大小是确定的
2020-06-09 14:04:18
254
原创 2020-05-25 JS执行机制
2020-05-25 JS执行机制进程与线程执行机制记住两点：Javascript是一门单线程语言Javascript的执行机制是Event Loop（事件循环）进程与线程进程：CPU是计算机的核心，承担所有的计算任务，进程是CPU资源分配的最小单位，字面意思是进行中的程序，可以将它理解为一个可以独立运行且拥有自己的资源空间的任务程序进程包括运行中的程序和程序所使用到的内存和系统资源线程：是CPU调度的最小单位，线程是建立在进程的基础上的一次程序运行单位，通俗点解释线程就是程序中的一个执行
2020-05-25 10:50:15
205
原创 2020-05-12 JavaScript基础-原型与原型链
2020-05-12 JavaScript基础-原型与原型链面向对象面向对象面向对象编程（Object Oriented Programming，缩写OOP）：将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟对象：对象是单个实物的抽象对象是一个容器，封装了属性（property）和方法（method）构造函数：就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构，为了与普通函数区别，构造函数名字的第一个字母通常大写有两个特点：
2020-05-14 13:53:52
217
原创 2020-05-11 JavaScript基础-变量和类型
2020-05-11 JavaScript基础-变量和类型变量类型原始数据类型对象数据类型特殊数据类型判断值类型变量变量是对”值“的具名引用，说直白点儿就是为”值“赋个名字，然后引用它，变量的名字就是变量名变量有变量提升和区块作用域的概念，变量名的命名（标识符）是区分大小写的，还有一些不合法的标识符以及保留字不能作为命名，var 声明的作用域是全局的，let和const后面会补充类型javascript中的数据类型分为两大类：原始类型、对象类型以及特殊类型（ES6新加Symbol）原始数据类型
2020-05-11 11:05:46
187
原创 2020-03-16 JS-原生js实现机顶盒页面键盘事件
2020-03-16 JS-原生js实现机顶盒页面键盘事件问题描述-bug复现Bug原因以及解决方法简介：最近做一个电视机顶盒项目，要用到遥控器去实现页面上焦点的移动，来选择产品以及后续操作，遇到的问题是键盘keydown事件在绑定一个div元素后，没有在离开div解除绑定的话，当再次移动到此div上，会出现重复操作的Bug。问题描述-bug复现初始化页面，焦点在一个产品上，键盘向下移...
2020-03-16 15:37:53
1083
9
原创 2020-03-12 CSS-grid之网格布局
2020-03-12 CSS-grid之网格布局grid布局简介布局属性grid布局简介CSS Grid布局是一个二维的布局系统CSS Grid 相比传统布局在页面整体划分布局上更加出色CSS Grid 并不是只能单独使用，依然可以搭配Flexbox以及传统定位布局一起使用布局属性给容器元素添加display:grid或display:inline-grid即创建了网格容器(Gr...
2020-03-12 14:19:58
151
原创 2020-01-10 vue-cropper图片裁剪
2020-01-10 vue-cropper图片裁剪需求：对本地上传、远程FTP上传和视频截取三种方式的获得图片放入裁剪区进行裁剪无论哪种方式，都需要得到裁剪图片的文件file，然后通过window.URL.createObjectURL方法取得图片url，最后通过vue-cropper组件裁剪图片产出图片信息...
2020-01-13 10:45:48
260
1
原创 2020-01-09 本地上传文件速率的计算
2020-01-09 本地上传文件速率的计算文件上传使用的组件是element-ui中的el-upload计算文件上传速率函数每个文件都有个唯一值，这个值就是MD5，获取方法如下描述：项目中对上传视频文件要求显示进度和速率文件上传使用的组件是element-ui中的el-upload使用el-upload中的钩子函数on-progress和before-upload中的参数计算出上传速率...
2020-01-09 14:44:10
2043
原创 2019-11-15 CSS-flex弹性布局
2019-11-15 CSS-flex弹性布局flex布局简介父元素属性子元素上属性补充简介：本文章结合项目经历来介绍下flex弹性布局的使用flex布局简介Flex是Flexible Box的缩写，简称“弹性布局”，用来为盒装模型提供最大的灵活性。采用Flex布局的元素，简称容器，它的所有子元素自动成为容器成员，简称项目。父元素属性display:flex;定义了一个flex容器...
2019-11-15 13:26:14
288
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人