- 博客(82)
- 收藏
- 关注
原创 Vue 和 React 中的虚拟 DOM
虚拟 DOM是 Vue 和 React 都采用的核心技术,它帮助框架优化 DOM 操作,提升性能。React使用虚拟 DOM 来描述 UI,借助 JSX 和创建虚拟节点,并通过 diff 算法更新真实 DOM。Vue则结合了响应式数据和虚拟 DOM,通过模板编译生成渲染函数,渲染函数返回虚拟节点并通过虚拟 DOM 比较进行最小化更新。尽管实现方式有所不同,二者都借助虚拟 DOM 的优势来优化页面渲染和更新,从而提供更高效的用户界面。
2025-02-17 14:02:02
1336
原创 【模块化】 js 模块化(CommonJS, AMD, UMD, CMD, ES6)
将介绍几种 js 模块化的规范,以及它们各自的优缺点和差异…
2023-12-12 11:27:31
1495
原创 【计算机网络】127.0.0.1、0.0.0.0、localhost地址是什么?
127.0.0.1、0.0.0.0、localhost地址是什么?
2023-04-12 16:15:37
4914
5
原创 【Echarts】双x轴实现柱形图背景点击亮起
一切源于UI做了点击Echarts柱形图的点击亮起效果,测试便要求开发完成…虽然最后没做,毕竟优先上线重要嘛🌚但是有时间摸鱼的时候我又来研究了,写好之后再遇到类似问题咱就不慌,本CV工程师分分钟完成~
2022-12-13 16:29:43
2204
原创 【Echarts】echarts渐变色平滑折线图,端点虚线标注
echarts渐变色平滑折线图,端点虚线标注echarts随意一个示例代码直接点击上方链接↑↑↑将此段代码↓↓↓放到echarts的示例代码编辑框里:let dataList5 = { total: "123", list: [ { name: "00:00", value: 333, value1: 123 }, { name: "02:00", value: 144, value1: 23 }, { name: "04:00", value: 444, value
2022-03-09 16:56:55
847
1
原创 【Echarts】echarts虚线柱状图,双y轴图表
echarts虚线柱状图,双y轴图表echarts随意一个示例代码直接点击上方链接↑↑↑将此段代码放到echarts的示例代码编辑框里:const COLOR_ARRAY = { chart_3: { color_1: ['#EE940C', '#007041', '#008C8C'], color_2: ['#FAFF00', '#00FF57', '#00FFFF'], }};let dataList3 = { total: "123", list: [
2022-03-09 16:31:47
2511
原创 【Echarts】echarts多层嵌套环形图,鼠标选中透明效果
echarts多层嵌套环形图,鼠标选中透明效果echarts随意一个示例代码直接点击上方链接↑↑↑将此段代码放到echarts的示例代码编辑框里:const COLOR_ARRAY = { chart_1: { color: ['#32FFFE', '#00FE84', '#FFD234', '#FF6825'], border: ['#0BADAE80', '#08843280', '#8A4D0480', '#B03A0680'], background: ['#2
2022-03-09 16:22:28
2294
原创 【Echarts】echarts渐变色仪表盘
echarts渐变色仪表盘echarts随意一个示例代码直接点击上方链接↑↑↑将此段代码放到echarts的示例代码编辑框里:let dataList9 = { total: "85", list: [ { name: "待处置", value: 1501 }, { name: "处置中", value: 8667 }, { name: "处置完成", value: 12901 }, ],};var colors=["#0071C2", "#04B9FC",
2022-03-09 16:15:10
2410
原创 【Echarts】echarts渐变色进度条,透明渐变进度标注点
echarts渐变色进度条,透明渐变进度标注点echarts随意一个示例代码直接点击上方链接↑↑↑将此段代码放到echarts的示例代码编辑框里查看:(上图样式需要循环dataList6 数据获取多个option,并在循环内把option中的[0]项改为index)// 通用的颜色数组,由UI决定,在大部分场景都使用这个规范const COLOR_ARRAY = { chart_2: { color_1: ['#32FFFF', '#FFD80B', '#32FFFF', '#00
2022-03-09 15:57:01
2368
1
原创 【Echarts】echarts用树形图做拓扑图
echarts用树形图做拓扑图echarts随意一个示例代码直接点击上方链接↑↑↑将此段代码放到echarts的示例代码编辑框里:const data = { label: { backgroundColor: '#F4F4F4', borderRadius: [0, 0, 5, 5], formatter: [ '{first|综合授信额度}', '{second|(CR20
2022-03-09 10:39:34
1984
原创 【VUE】vue金额输入组件(包括不可填写非数字,去除前后空格,去除逗号分隔符)
目录vue金额输入组件组件:amount-input.vue父级引用:vue金额输入组件组件:amount-input.vue<template> <div class="input-content"> <el-input :placeholder="placeholder" v-model="amountValue" @input="handleAmountChange" :disabled
2022-01-18 15:39:01
2048
原创 【VUE】px转化vw的方法,postcss-px-to-viewport的使用方法,include属性为什么不生效
vue,px转化vw的方法,postcss-px-to-viewport的使用方法,postcss-px-to-viewport include属性为什么不生效,include属性无效
2022-01-06 18:45:09
5505
3
原创 【前端】正则表达式知识点
目录第一章 正则表达式字符匹配攻略1 两种模糊匹配1.1 横向模糊匹配1.2 纵向模糊匹配贪婪匹配和惰性匹配`.*`和`.*?`的不同:第二章 正则表达式位置匹配攻略1. 什么是位置呢?2. 如何匹配位置呢?2.1 ^和$2.2 \b和\B2.3 (?=p)和(?!p)第4章 正则表达式回溯法原理第5章 正则表达式的拆分1 字符组中的元字符2 匹配“[abc]”和“{3,5}”3 其余情况第6章 正则表达式的构建1 使用具体型字符组来代替通配符,来消除回溯2 使用非捕获型分组3 独立出确定字符4 提取分支公
2021-12-30 18:17:50
1066
原创 【VUE】vue内置指令(用于记忆)
v-bind相应并更新DOM特征v-on监听DOM事件v-model数据双向绑定v-show条件渲染指令,为DOM设置css的style属性v-if条件渲染指令,动态的添加和删除DOM元素v-if-else判断多层条件,必须跟v-if成对使用v-else条件渲染指令,必须跟v-if成对使用v-forv-for:循环指令;例如:<li v-for="(item,index) in todos"></li>v-text元素的textContentv-h
2021-12-27 17:54:48
309
原创 Object.prototype.toString.call()获取各数据类型的结果列举(用于记忆背诵)
Object.prototype.toString.call()获取各数据类型的结果列举(用于记忆背诵)
2021-12-17 09:57:46
374
原创 【JS】Math对象的常用方法,通过Math.random取得各种范围内的随机数
Math对象的常用方法,Math.random分布模式(Math.random获取各种数据方法),不要使用Math.random()生成随机数,Math.random()生成伪随机数为均匀分布。
2021-12-13 16:37:06
1390
原创 【前端】浏览器展示页面的渲染流程,重排、重绘和合成
这里写目录标题渲染流程生成DOM树:生成CSSOM树:生成布局树:生成分层树(LayerTree):分块:栅格化:绘制:相关概念重排(回流)重绘合成显示显卡显示器显示过程:帧 VS 帧率卡顿Chrome浏览器是怎么实现合成操作的?渲染流程生成DOM树:输⼊HTML⽂件,由HTML解析器解析,输出树状结构的DOM。生成CSSOM树:渲染引擎接收到CSS⽂本,执⾏转换操作,将CSS⽂本转换为浏览器可以理解的结构——styleSheets。该结构同时具备了查询和修改功能,这会为后⾯的样式操作提供
2021-12-08 17:16:55
1392
原创 【VUE】vue+element开发中的问题汇总(更新中……)
目录校验时弹出英文提示校验时弹出英文提示问题:校验未填时会显示英文,点击其他位置触发blur校验后,显示正常解决方法:将此项el-form-item上的required或required="true"删除
2021-12-06 13:42:43
605
原创 【CSS】浏览器合成层的生成方式及其优缺点
可以拥有渲染层的元素渲染层(RenderLayer)浏览器会为其创建新的渲染层的元素渲染层(RenderLayer)这是浏览器渲染期间构建的第一个层模型,处于相同坐标空间(z轴空间)的渲染对象,都将归并到同一个渲染层中,因此根据层叠上下文,不同坐标空间的的渲染对象将形成多个渲染层,以体现它们的层叠关系。所以,对于满足形成层叠上下文条件的渲染对象,浏览器会自动为其创建新的渲染层。浏览器会为其创建新的渲染层的元素能够导致浏览器为其创建新的渲染层的,包括以下几类常见的情况:根元素 document
2021-11-29 11:56:09
1398
1
原创 【JS】深拷贝的各种方式及其适用场景,不适用JSON.parse(JSON.stringify())的值有哪些?(ES6最新内容,记忆背诵内容)
深拷贝的各种方式及其适用场景JSON.parse(JSON.stringify())记忆背诵内容;简单且高频使用的方法:JSON.parse(JSON.stringify(obj)),不适用的场景;Object.prototype.toString.call()获取各数据类型举例。
2021-11-24 18:28:15
1439
原创 cmdn流程图编辑模板
#mermaid-svg-IbzbTEjfKgpsL7uI .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-IbzbTEjfKgpsL7uI .label text{fill:#333}#mermaid-svg-IbzbTEjfKgpsL7uI .node rect,#mermaid-svg-IbzbTEjfKg
2021-11-22 10:15:09
629
原创 【前端】从输入URL到页面展示,这中间发生了什么?(内含面试回答版本)
从输入URL到页面展示,这中间发生了什么?浏览器进程,渲染进程和网络进程的主要职责,内含面试回答版本
2021-11-17 18:18:20
1158
原创 【CSS】css所有选择器,css选择器权重,css权重,MDN内容整理(标注英文名称)
css所有选择器,css选择器权重,css权重,MDN内容整理(标注英文名称)
2021-11-15 11:48:01
380
原创 【CSS】伪类和伪元素, 伪元素用双冒号还是单冒号? 兼容各浏览器的placeholder样式的写法(MDN最新内容)
伪类和伪元素, 伪元素用双冒号还是单冒号? 兼容各浏览器的placeholder样式
2021-11-10 17:38:37
847
原创 【JS】&&与||如何使用,&&与||的优先级可以证明吗?
文章:运算符优先级规定:JS中规定&&优先级高于||,运算符的优先级决定了表达式中运算执行的先后顺序。但是如果理解&&与||的优先级为谁先执行运算,无法证明这一点// 设置一个会打印结果的函数,观察是否会运行此函数var a = 0function setA(val, res) { a = val; console.log(a); return res}setA(3, true) && setA(1, true) || setA(2, false
2021-11-10 11:56:08
1170
原创 【ES6】了解作用域,this的指向是什么(总结记忆)
this的动态作用域、全局对象、严格模式、非严格模式等情况下的默认指向,判断this指向时各情况优先级(总结记忆版本)????。
2021-11-04 11:25:51
520
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人