- 博客(92)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 一文带你了解，前端性能指标&优化那些事
CDN 是内容分发网络的缩写，它是一种将互联网内容快速传输给用户的技术。CDN 通过在不同地区部署多个服务器，将内容缓存到离用户最近的服务器上，从而减少延迟和带宽消耗。CDN 回源是指当 CDN 节点没有缓存用户请求的内容时，需要向源站（原始服务器）请求资源，并重新设置缓存的过程。回源可以保证 CDN 节点总是能够提供最新和最完整的内容给用户，但也会增加源站的负载和流量成本。
2023-03-15 14:34:21
725
1
原创 浏览器对象详解
window.screen.deviceXDPI/deviceYDPI 屏幕实际的水平 DPI、垂直 DPI。100 信息性|200 成功|300 重定向|400 客户端错误|500 服务器错误。既是 window 对象属性，也是 document 的对象属性。提供当前窗口中的加载的文档有关的信息和一些导航功能。封装 XMLHttpRequest 请求。用来表示浏览器窗口外部的显示器的信息等。先区别 IE 的不同之处。浏览器系统信息大集合。不携带cookies。
2023-03-13 17:31:35
821
原创 一文带你了解，前端模块化那些事儿
该文章主要讲述了前端模块化的发展历史和各个阶段的技术方案，包括无模块化（IIFE）、CommonJS、AMD、CMD、ESModule、UMD。其中，无模块化时期的文件拆分是最基础的模块化，但也存在函数命名冲突的问题；IIFE 是现代模块化的基石，利用函数的块级作用域进行隔离，可以控制作用域；CommonJS 文件即模块，模块加载同步，适用于服务器端 node，浏览器端使用 webpack 或 browserfy。
2023-03-09 17:41:19
678
原创 数据结构与算法(十一)-图(Graph)
文章目录图结构(Graph)一、图的介绍1. 什么是图？2.图的特点3. 图的常用术语：4. 图的表示4.1 邻接矩阵邻接矩阵存在的问题：4.2 邻接表邻接表的问题：二、图结构的封装2.1 图类的创建2.2 添加顶点和边2.3 实现toString()方法测试代码2.4 图的遍历方式图的遍历思想：遍历图的两种算法：2.5 广度优先搜索(BFS)思路：**实现思路：**代码实现：测试代码过程详解简版BFS2.6深度优先搜索(DFS)思路：实现思路：代码实现：测试代码过程详解简版DFS2.7 完整代码图结构
2022-01-17 14:45:03
2150
10
原创 数据结构与算法(十)-红黑树(RedBlackTree)
文章目录红黑树(RedBlackTree)一、红黑树的介绍二、红黑树的五条规则红黑树的相对平衡三、红黑树的三种变化3.1 变色3.2 左旋转3.3 右旋转四、红黑树的插入操作情况1情况2情况3情况4情况5五、实际插入案例插入10插入9插入8插入7插入6插入5插入4插入3插入2插入1红黑树(RedBlackTree)一、红黑树的介绍红黑树（Red–black tree）是一种自平衡二叉查找树，是在计算机科学中用到的一种数据结构，典型用途是实现关联数组。它在1972年由鲁道夫·贝尔发明，被称为"对称二叉
2022-01-14 15:01:01
769
8
原创 数据结构与算法(九)-二叉搜索树(BinarySearchTree)
二叉搜索树(BinarySearchTree)一、对二叉搜索树的介绍二叉搜索树（BST，Binary Search Tree），也称为二叉排序树和二叉查找树1. 二叉搜索树的特性非空左子树的所有键值小于其根节点的键值。比如：下图三，中节点 6 的所有非空左子树的键值都小于 6非空右子树的所有键值大于其根节点的键值；比如：下图三，中节点 6 的所有非空右子树的键值都大于 6；左、右子树本身也都是二叉搜索树图二和图三符合二叉搜索树的特效，所以属于二叉树图一中的节点5要比节点7大，不符合
2022-01-13 17:45:50
17076
7
原创 数据结构与算法(八)-树(Tree)和二叉树(BinaryTree)
树(Tree)和二叉树(BinaryTree)一、树结构的介绍我们大家都见过现实生活中的树????，例如：1.1 树的特点：树一般都有一个根，连接着根的是树干树干会发生分叉，形成许多树枝，树枝会继续分化成更小的树枝树枝的最后是叶子现实生活中很多结构都是树的抽象，模拟的树结构相当于旋转180°的树，如下：1.2 树结构 对比于数组/链表/哈希表 有哪些优势呢？数组：优点：可以通过下标值访问，效率高；缺点：查找数据时需要先对数据进行排序，生成有序数组，才能提高查找效率；并且在插入
2022-01-12 15:01:24
2334
4
原创 数据结构与算法(七)-哈希表(HashTable)
哈希表（HashTable）一、介绍哈希表并不好理解，不像数组、链表和树等可通过图形的形式表示其结构和原理。哈希表的结构就是数组，但它神奇之处在于对下标值的一种变换，这种变换我们可以称之为哈希函数，通过哈希函数可以获取HashCode。哈希表通常是基于数组实现的，但是相对于数组，它存在更多优势1. 哈希表的优点哈希表可以提供非常快速的插入-删除-查找操作；无论多少数据，插入和删除值都只需要非常短的时间，即O(1)的时间级。实际上，只需要几个机器指令即可完成；哈希表的速度比树还要快，基本可以瞬
2022-01-11 17:05:08
5162
2
原创 数据结构与算法(六)-字典(Dictionay)
字典(Dictionay)一、介绍字典是用来存储唯一值的一种数据结构，通常以 [键, 值] 对 的形式来存储数据，主要特点是一一对应，也称为映射。在js中字典是使用Map类实现的，每个语言实现的类名不同，比如：Python 中是 dict，Java 中的 HashMap 和 TreeMap，但是实现字典的特点都是一样的二、字典的实现为了区分ES6中的Map，这里使用Dictionay作为类名字典常见的操作set(key,value) 向字典中添加新元素remove(key) 通过使用键
2022-01-10 15:33:42
2753
2
原创 数据结构与算法(五)-集合(set)
集合(set)结构一、介绍集合通常是由一组无序的、不能重复的元素构成。数学中常指的集合中的元素是可以重复的，但是计算机中集合的元素不能重复。集合是特殊的数组。特殊之处在于里面的元素没有顺序，也不能重复。没有顺序意味着不能通过下标值进行访问，不能重复意味着相同的对象在集合中只会存在一份。二、集合的实现集合比较常见的实现方式是哈希表，这里使用 JavaScript 的 Object 进行封装集合常见的操作add(value) 向集合添加一个新的项remove(value) 从集合移除一
2022-01-09 15:33:21
3676
2
原创 数据结构与算法(四)-双向链表(DoublyLinkedList)
双向链表(DoublyLinkedList)结构一、双向链表的介绍既可以从头遍历到尾，也可以从尾遍历到头。链表相连的过程是双向的。实现原理是一个节点既有向前连接的引用，也有一个向后连接的引用单向链表的特性只能从头遍历到尾或者从尾遍历到头（一般从头到尾）链表相连的过程是单向的，实现原理是上一个节点中有指向下一个节点的引用单向链表有一个比较明显的缺点：可以轻松到达下一个节点，但回到前一个节点很难，在实际开发中, 经常会遇到需要回到上一个节点的情况。由于双向链表的节点指向是双向的，所以双向链表可以
2022-01-07 16:20:45
6679
2
原创 数据结构与算法(三)-链表(LinkedList)
链表结构一、介绍链表和数组一样，可以用于存储一系列的元素，但是链表和数组的实现机制完全不同。链表又可以分作单向链表和双向链表。链表的每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（有的语言称为指针或连接）组成。类似于火车头，一节车厢载着乘客（数据），通过节点连接另一节车厢。如下图所示链表的火车结构链表的数据结构 head 属性指向链表的第一个节点。 链表中的最后一个节点指向 null。 当链表中一个节点也没有的时候，head 直接指向 null。给火车加上数
2022-01-06 14:43:49
6327
2
原创 数据结构与算法(二)-队列(queue)
队列(queue)结构一、介绍队列是一种特殊的线性表，生活中类似队列结构的场景：排队:比如在电影院，商场，甚至是厕所排队。优先排队的人，优先处理。 (买票、结账、WC)。如图所示：队列的限制先进先出 (FIFO：First In First Out)只允许在表的前端（front）进行删除操作只允许在表的后端（rear）进行插入操作如图所示：二、程序中的队列打印队列：计算机打印多个文件的时候，需要排队打印线程队列：当开启多线程时，当新开启的线程所需的资源不足
2022-01-05 17:23:05
4005
2
原创 数据结构与算法(一)-栈(stack)
栈(stack)结构一、介绍数组是一个线性结构，并且可以在数组的任意位置插入和删除元素。 但是有时候，我们为了实现某些功能，必须对这种任意性加以限制。 栈和队列就是比较常见的受限的线性结构。特点：栈是后进先出（last in first out）的，就是后进入的元素，先出栈。类似于自动餐托盘，最后放上的托盘，往往先拿出去使用栈的最上面的元素被称为栈顶，栈的最内的元素，被称为栈底向一个栈插入新元素又称作进栈、入栈或压栈，它是把新元素放到栈顶元素的上面，使之成为新的栈顶元素；从一个
2022-01-04 16:09:20
5012
4
原创 数据结构与算法(零)-前言
JavaScript数据结构与算法本系列文章是作者在B站学习完 《数据结构与算法》后，为了进行总结和复习而整理的学习笔记，视频讲解的特别好，给大家安利一波～一、什么是数据结构？数据结构（data structure）是计算机中存储、组织数据的方式。通常情况下，精心选择的数据结构可以带来最优效率的算法。—中文维基百科一句话总结：数据结构就是在计算机中，存储和组织数据的方式。例如：图书馆中存放了很多书籍，怎样摆放图书既能放很多书，还方便取？其实我们主要思考两个问题新书怎么插入？怎么快速对找
2022-01-04 15:13:11
5075
2
原创 （程序猿专属）1024-从我做起，关爱程序员-漫画篇
为什么1024被称做程序员节？这是因为2¹⁰ = 1024运行程序的硬件进制是以1024为基础的例如：1G=1024MB ；1MB=1024KB因此1024也就成了程序员们最熟悉的数字在此先祝愿大家：⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️⬇️if (today === 1024) { console.log("没有加班");} else { console.log("没有bug");}⬆️⬆️⬆️⬆️
2021-10-24 14:14:56
53320
21
原创 一篇文章带你揭 秘现代浏览器原理
现代浏览器原理揭秘首先我们先了解一些关键的计算机术语以及Chrome浏览器的多进程架构。前提计算机基础概念1.CPU（Central Processing Unit）中央处理器, 解释计算机指令以及处理计算机软件中的数据, 功能强大，它可以串行地一件接着一件处理交给它的任务现代电脑上cpu通常会有多个核心, 比如经常听到的8核处理器, 4核处理器等等。因为多核心CPU可以大大提高手机和电脑的运算能力CPU的核心数是指物理上，也就是硬件上存在着几个核心。比如，双核就是包括2个相对独立的CPU核心
2021-10-10 13:52:07
65637
14
原创 docker下YApi部署教程-支持swagger数据导入
前言：作为一个前端开发人员，经常会遇到一种情况就是 在后端接口没有出来之前，需要去mock数据，等待真实接口开发完后，替换成真实的接口，而在mock的过程中如果采用假数据的方式进行mock，一是增加无趣的工作量，二是造成了代码入侵，所以应该如果减少这种工作量呢？其实作为前端可以搭建一个自己的mock平台，去帮我们完成mock和接口管理的工作经过一番探索，最终选择由去哪儿开源的YApi进行接口mock管理特性：免费开源，内网部署，信息再也不怕泄露了支持 postman, har, swagger
2021-09-14 16:05:26
67887
4
原创 vue中使用防抖
/** * @desc 函数防抖 * @param fnName 函数 * @param time 延迟执行毫秒数 */export default function VueDebounce(fnName, time) { let timeout = null; return function () { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(() => {
2021-04-06 10:19:56
284
4
原创 vue中rules对身份证号校验
data() { // 身份证号校验 var checkIdNum = (rule, value, callback) => { const reg = /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/ if (!value) {
2021-03-09 11:24:21
64079
2
原创 js中数组扁平化几种方式
数组扁平化概念扁平化:其实就是将多层数组展开，平摊成为一维数组> let arr1=[[1],[2,3],[4]];> //扁平化后--> [1, 2, 3, 4]实现扁平化方式ES6新增加方法–>Array.prototype.flat() + Infinity作为参数数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维数组。该方法返回一个新数组，对原数据没有影响//flat()方法的参数写成一个整数
2021-03-04 15:45:31
431
9
原创 带你深入理解什么叫js闭包
闭包用一句话总结：闭包就是作用域的延伸解释：函数内部的作用域属于局部作用域，导致只有函数内部才可以访问声明的变量。而闭包可以将局部作用域延伸，使其在函数外部也可以访问内部声明的变量等。关于变量的作用域js变量的作用域无非就两种 局部变量和全局变量JavaScript在函数内部可以访问全局变量var n = 0;//全局变量function f1() { console.log(n)//0}f1();而在函数内部声明的局部变量，外部无法直接访问function f1(
2021-02-20 09:05:52
61304
7
原创 day01-TS面试总结-TS随手笔记
TS的接口是什么意思？参照TS来解释它们。接口是在我们的应用程序中充当契约的结构。它定义了要遵循的类的语法，这意味着实现接口的类必须实现它的所有成员。它不能被实例化，但是可以被实现它的类对象引用。无论对象是否具有特定的结构，TypeScript编译器都使用接口进行类型检查(也称为“duck typing”鸭子类型或“结构化子类型”)语法:interface interface_name { // 字段声明 // 方法声明} 你如何理解Typ
2021-01-21 08:42:26
523
5
原创 在el-tabs中echarts图表宽高设置style=“width: 100%； height: 100%“不起效变成100px的问题
出现的问题在开发过程中发现el-tabs在默认页echarts正常显示，其他页中echarts设置的宽高为100%不起效，最后都是100px问题原因echarts绘制图表计算宽度的时候，由于第二个及后面的tab的属性display: none; 所以无法获取到clientWidth，而 parseInt(stl.width, 10)) 将width: 100%;转为100，所以计算出的图表宽度高度为100px。解决方案结合v-if，将echarts绘图封装成一个组件，然后在el-tab中
2021-01-14 14:50:31
68308
7
原创 使用Object.defineProperty进行数据劫持,实现响应式原理-剖析vue2.0
数据响应式是vue的特性之一，在面试过程中也会常常被问起响应式原理，现在就让我们深入了解一下vue2.0中如何实现响应式,下图是Vue2.0中对响应式原理的描述，其核心就是使用Object.defineProperty中的get/set进行数据劫持,虽然Vue3.0中使用Proxy(代理)去实现响应式，其实原理都差不多，在3.0中主要是使用Proxy的get和set实现响应式，如果理解defineProperty，Proxy也会很快理解的Object.defineProperty是什么？.
2021-01-11 16:24:07
62528
4
原创 前端性能优化之rel=“prefetch“预/懒加载功能
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.举个例子说明:比如要预先加载某个页面,可以这样:<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox --> 但如果是google的话,要用另外的一个名称,即://XML/HTML.
2021-01-04 10:19:40
64720
1
原创 常用js函数的封装库
以下是开发过程中对一些utils的积累一、针对vue中table为tree类型的表格进行数据封装使用方法this.deptList = this.handleTree(response.data, "deptId");deptList为数组类型数据/** * 构造树型结构数据 * @param {*} data 数据源 * @param {*} id id字段 默认 'id' * @param {*} parentId 父节点字段 默认 'parentId' * @param {*}
2020-12-31 09:51:05
850
2
原创 element-ui的table表格导出成excel表
1、安装依赖npm install --save xlsx file-saver2、在放置需要导出功能的组件中引入import FileSaver from ‘file-saver’import XLSX from ‘xlsx’3、HTML中的设置，简单来说就是给需要导出的table标签el-table上加一个id：如exportTab，对应下面的exportExcel方法中的 document.querySelector(’#exportTab’)4、在methods中设置真
2020-12-25 09:21:25
63784
5
原创 node永久设置淘宝镜像npm
确保安装node后 在cmd命令行直接设置npm config set registry https://registry.npm.taobao.org
2020-12-16 17:20:09
903
4
原创 前端唤起相机的方法H5+JS
主要使用H5新整API getUserMedia唤起相机HTML 5 的getUserMedia API提供了访问媒体的能力, 基于该特性, 开发者可以不依赖任何浏览器插件下去访问视频和音频等设备.旧版API : navigator.getUserMedia语法：getUserMedia(constraints, successCallback, errorCallback);新版API : navigator.mediaDevices.getUserMedia语法：getUse
2020-12-15 08:50:19
6078
3
原创 面试宝典-浏览器交互常见问题汇总
学习目标一次完整的http服务过程 能够说出一次完整的http服务的几个阶段 能够说出html的渲染过程 能够说出常见的http请求状态码http缓存控制 能够理解http缓存控制 主要是指浏览器缓存 知道强缓存和协商缓存 知道http强缓存的控制字段 知道协商缓存的配置方式和各自的优缺点fetch与axios 理解fetch和axios分别是什么？ 掌握fetch的优缺点 掌握axios的优缺点浏览器内多个标签页之间的通讯 知道浏览器多个标签页通讯的常见使用场景
2020-11-05 21:21:44
653
1
原创 （程序猿专属）1024-我用代码写成浪漫情话表白你
今天1024，程序员节！不祝你们节日快乐了，祝你们穿着拖鞋和裤衩去相亲吧！祝你们和甜蜜的爱情撞个满怀！一、“我是你的什么啊？”“你是我的bug啊。因为，我每时每刻都在找你呀。”二、“这么多需求，从哪个先做起？”“先做icon吧”“不是应该先做我的女朋友吗？”三、我一生都在等待，直到你闯进我的世界，我只想对你说:余生请多指教！四、自从遇见了你，就不停地想你。五、我一直在寻找，找到了你，便找到了整个世界。六、看看这个键盘缺少了什么字母？七、执子之.
2020-10-24 10:25:35
64105
3
原创 常见面试题汇总-第一篇
一、前端面试题1：重绘和重排(回流)1.1 核心：浏览器的运行机制构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；构建渲染树（construct）：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如<b></b>），构建渲染树（RenderingTree/Frame Tree）；re
2020-10-08 16:19:01
677
2
原创 js每日一题
const str1 = 'abcaakjbb' const str2 = 'abbkejsbcccwqaa'function getMax(str) { let obj = {},arr = [...str],current='',max=0; for (let i=0,len=arr.length; i<len; i++){ if(current === arr[i]){ obj[arr[i]] +=1;
2020-09-29 09:24:09
600
原创 前端vue常见面试题
1.v-show和v-if区别一、vue中的v-show和v-if是做什么用的，两者区别是什么 ？v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染
2020-09-03 08:42:33
61407
原创 js电子邮箱正则表达式
邮箱正则：/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
2020-08-24 16:09:27
55336
6
原创 随手笔记24-组件通信、组件进阶
一、组件通信1.父子组件自定义属性和props来实现父子组件之间的数据通信第一步：创建两个组件，并建立父子关系第二步：在父组件上，使用子组件时，通过自定义属性来传递数据/src/component/parent.vue<子组件名 :自定义属性名="要传递的数据"></子组件名>第三步：在子组件中，需要用props来接收父组件传递的数据/src/components/child.vue<script>export default { props:['
2020-08-21 21:20:56
186
原创 随手笔记23-过滤器-过渡动画-组件-vue-cli脚手架
一、过滤器作用：是对页面中展示的数据进行处理。1.局部定义new Vue({ el: .... filters:{ 过滤器名称(形参){ 业务逻辑 return 处理结果; }, 过滤器名称N(形参){ 业务逻辑 return 处理结果; }, }})在挂载点内通过管道符“|”来使用定义好的过滤器<标签名>{{ 变量名 | 过滤器名称 }}</标签名>管道符左边的值会默认作为过滤器的第一个形参进行传递，然后在过滤
2020-08-21 21:15:12
410
2
原创 随手笔记22-修饰符-侦听器-计算属性-生命周期
一、修饰符1.按键修饰符keyup、keydown修饰符说明.left键盘左键.right键盘右键.up键盘上键.down键盘下键.enter键盘回车键.esc键盘esc键.delete键盘退格键.space键盘空格键输入框获取焦点后，对应的修饰符才会起作用2.表单元素修饰符(1).lazy不再进行实时数据双向绑定，直到遇到change事件才会进行数据的双向绑定(2).number强制的把用户输入的内容转换为
2020-08-21 21:11:37
185
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人