- 博客(36)
- 收藏
- 关注
RSS订阅原创 手把手教你在 Vue 项目中集成 Sentry：从接入到私有部署全流程解析
)设置之后，在私有化部署的sentry上，能按照特定用户来区分错误信息。
2025-05-26 18:54:18
789
原创 打造自己的浏览器插件：一万字干货大放送
想象一下，你的浏览器是个老实巴交的打工仔，每天只会按部就班地干活。插件就是给它装备的"外挂"屏蔽鸡汤文弹窗，装个广告拦截想在电商网站自动比价，写个比价插件替换网页所有的图片。
2025-04-29 12:07:58
1019
原创 从零实现 Vue 响应式机制：带你吃透依赖收集与更新原理
通过电商网站购物车案例，演示传统 DOM 操作 vs Vue 自动更新的效率对比：二、响应式系统架构全景Vue2 响应式系统架构#### **核心流程说明**数据劫持（初始化阶段）依赖收集（读操作触发）派发更新（写操作触发）关键角色响应式对象创建依赖收集（ 过程）派发更新（ 过程）从 中获取该属性对应的所有 。通过 调度器（） 批量处理 的执行，避免频繁更新导致性能损耗。调度机制：默认将 加入微任务队列（基于 或 ），在同一事件循环末尾合并执行。三 minVue
2025-04-21 17:43:29
1001
原创 DOM元素尺寸全解析：盒模型与宽高属性的指南
getBoundingClientRect.width = (content + padding + border) * transform缩放系数。// 如果设置overflow-y:hidden，container.scrollHeight = 800 + 20 = 820。宽： 200 + 20 * 2 + 10 * 2 = 260px。scrollHeight = 内容实际高度 + padding。scrollWidth = 内容实际宽度 + padding。
2025-04-14 14:56:23
512
原创 CSS Grid布局：从入门到放弃再到真香
Grid 布局是一个基于网格的二维布局系统，专门用于创建复杂的网格结构，能够同时在行和列两个维度上精确控制元素的位置与大小。通过display: grid属性将容器定义为网格容器，容器内的子元素成为网格项。网格区域（grid area）是由四条网格线围成的矩形区域，可以通过grid-template-areas属性来定义。结合grid-area属性，可将网格项放置到对应的网格区域中。Grid 布局引入网格轨道的概念，其指的是网格中的行或列；同时，也可以给网格线命名，方便在布局中引用。
2025-04-09 11:29:02
1428
2
原创 RESTful API 规范
RESTful API 是基于 REST（Representational State Transfer）架构风格的接口设计方式。RESTful API 通过 HTTP 协议来实现不同客户端和服务端之间的资源交互，采用 CRUD（创建、读取、更新、删除）操作来管理资源，使得 API 更加简洁和易于维护。
2024-10-31 17:34:30
387
原创 简单请求和预检请求
以上报文中就可以看到，使用了OPTIONS请求，浏览器根据上面的使用的请求参数来决定是否需要发送，这样服务器就可以回应是否可以接受用实际的请求参数来发送请求。Access-Control-Request-Headers告知服务器，实际请求将携带两个自定义请求标头字段：X-PINGOTHER 与 Content-Type。服务器据此决定，该实际请求是否被允许。发送跨域请求时，请求头中包含了一些非简单请求的头信息，例如自定义头（custom header）等；不满足简单请求的条件，都认为是非简单请求。
2023-07-03 20:40:17
396
原创 关于lnsomnia的使用
1.下载软件傻瓜式安装，我就不演示了附上官网的链接 insomnia官网安装完成之后软件就长这个样子：2.使用实例该软件的作用就是为了测试接口是否可以正常使用我这里就用网易云api作为测试案例1.点击左上角的manage Envirments 管理环境2.再次点击左上角的Sub Envirments ，这里面有两个选项，环境和私人环境，如果你是和其他人共同开发的，就选择环境，如果是你一个人开发的，就选择私人环境。3.双击你新建的环境，可以修改名字4.这个时候你可以在
2022-05-02 11:39:06
1169
1
原创 关于Git右键打开窗口失败的问题
问题原因：可能是你移动了你自己本机的git的位置，导致右键Git Bash Here和Git GUI Here打开失败解决方案:1.win+r 输入 regedit 打开注册表编辑器2.找到HKEY_CLASSES_ROOT 下的 Directory 的 shell修改shell下的git_gui和git_gui下的command修改git_gui:将数值数据下的路径改为你当前git文件夹下的git-gui.exe所在的路径修改git_gui下的command路径和上面一样
2022-04-24 10:47:50
2141
原创 TypeScript中类的继承
特点：避免重复创建类，减少代码数量通过extends关键字继承父类通过super继承父类的属性和方法实例：class Person1 { // 定义属性 name:string age:number gender:string constructor(name:string,age:number,gender:string){ this.name = name this.age = age this.ge
2022-04-24 09:46:09
1531
原创 TypeScript中的多态
概念在由子类生成的实例对象时，实例对象的类型既是父类的类型，也是子类的类型实例：class Person2{ // 定义属性 name:string constructor(name:string){ this.name = name } sayName(){ console.log(this.name); }}// p1类继承至Person2类class p1 extends Person2
2022-04-22 22:04:46
535
原创 TypeScript中定义类
和JavaScript中的一些区别加强了对类中属性的类型的限制必须要定义属性实例：class Person { // 定义属性 name:string age:number gender:string //对构造函数中传入的参数个数（3个），参数类型（string，number，string），做了一些限制 constructor(name:string='旺旺',age:number=13,gender:string='狗'){ t
2022-04-22 21:56:23
1350
原创 TypeScript中的存取器
特点：监视某个属性，在他的值被读取和修改时分别调用对应的函数（get和set）实例：class Car{ name:string price:number constructor(name:string,price:number){ this.name = name this.price = price } get Info(){ console.log('有人读取Info属性了'); ret
2022-04-22 21:48:06
246
原创 TypeScript中的抽象类
特点：抽象类是为子类服务的抽象类定义属性和方法，然后在之类中实现对应的属性和方法实例：// 抽象类是为子类服务的abstract class Dog{ // 抽象属性 abstract name:string // 抽象方法 abstract eat() sayHi(){ console.log('111'); }}class dog extends Dog{ //实现抽象类中的属性 name: s
2022-04-22 21:43:16
243
原创 Vue中的路由守卫
路由守卫的概念：作用：对路由进行权限控制。分类：全局守卫，独享守卫，组件内守卫。全局守卫：编写位置：在路由配置的文件夹里面进行编写：全局守卫又分为：全局前置守卫和全局后置守卫，分别在进入组件前和进入组件后触发。const router = new VueRouter({ mode:'hash', routes: [ { path: "/about", component: About, meta:{ title:'关于'
2022-04-14 17:33:39
1611
原创 Vue组件自定义事件
自定义事件的作用：一种组件间通信的方式，适用于：子组件 ===> 父组件使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）自定义事件的使用方式：本质：给子组件的实例对象上绑定自定义事件第一种方式：在父组件中，直接给子组件的标签上面添加自定义事件（相当于给子组件的实例对象上绑定自定义事件）：<children @demo="test"/>或 <children v-on:demo="test"/>，子组件再
2022-04-14 16:40:13
375
原创 Vue中v-model的使用和原理
v-model的特点：双向数据绑定：从数据到视图，从视图到数据v-model在一些常用标签中的使用：v-model与标签里的value属性进行双向绑定<div id="app"> // input输入框 <input type="text" placeholder="输入内容" v-model="message" /> <p>{{message}}</p> // textarea文本框 &l
2022-04-09 18:48:01
1213
原创 CSS如何实现元素的水平垂直居中？
flex布局利用flex布局的属性justify-content: center;实现水平方向居中align-items:center;实现垂直方向居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
2022-04-07 14:51:49
335
原创 JavaScript的事件流模型有哪些？以及如何阻止事件冒泡和事件默认行为
JavaScript的事件流模型有哪些？事件冒泡：由最具体的元素开始接收事件，并往上传播事件捕获：由最不具体的元素接收，并往下传播Dom事件流：事件捕获 → 目标阶段 → 事件冒泡如何阻止事件冒泡stopPropagation方法：用于取消所有后续事件冒泡cancelBubble 属性：默认为 false，设置为 true 可以取消冒泡（与 DOM 的stopPropagation()方法相同），这个属性是为了兼容IE8及更早版本的浏览器。function stopBubble(eve
2022-04-04 20:42:58
1469
原创 JavaScript的装箱和拆箱操作
装箱把基本数据类型转化为对应的引用数据类型的操作先看代码：const str = 'good_student'const index = str.indexOf('_')console.log(index);//4上面代码中str只是一个基本数据类型，为什么他可以使用indexOf方法呢？是因为在JavaScript内部发生了装箱的操作：1.创建String类型的一个实例2.调用这个实例上的方法3.销毁这个实例let temp = new String('good_stu
2022-04-04 20:03:28
1310
原创 手写JavaScript的call，apply函数
apply和call函数的使用和区别转换调用函数this的指向，将调用者的this指向传入的对象在只传入this指向的对象而不传参的情况下,apply和call使用基本一致如果不传入对象，默认传入的对象为window对象//call的使用 function name() { //此时this指向call函数传入的对象 console.log(this); } let dog = { name: "旺财", }; nam
2022-04-02 10:56:14
733
原创 Css选择器种类以及优先级
元素选择器以标签名开头，选择所有span元素 /* 元素选择器 */ span { margin: 0; padding: 0; }id选择器给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘p1’”的元素 /* id选择器 */ #p1 { margin: 0; padding: 0; }类选择器给标签取class名，以点.加class名开头，选择所
2022-04-01 19:45:17
3073
2
原创 关于浏览器的本地存储
浏览器本地存储大小存储内容大小一般支持5MB左右（不同浏览器可能还不一样）存储的实现机制浏览器通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制存储操作的相关apilocalStorage.setItem('key','value')//该方法接受-一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。localStorage.getItem('key')//该方法接受一个键名作为参数，返回键名对应的值。
2022-03-29 20:11:53
829
原创 JavaScript中关于字符串的操作方法
字符串的拼接：concat()用于将一个或多个字符串拼接成一个新字符串concat()方法可以接收任意多个参数，因此可以一次性拼接多个字符串，concat()方法不会改变原字符串let string = 'hello'//接收一个参数let result = string.concat(',world')//接收多个参数let result1 = string.concat(',world',' !')console.log(string);// helloconsole.log(r
2022-03-27 09:00:56
194
原创 JavaScript中数组拼接的几种方式
concat()方法拼接concat方法不会更改现有数组，而是返回一个新数组。let a = [1,2,3,4,5,6]let b = ['喵喵','旺财','大黄']//concatlet c = a.concat(b)console.log(c);//[1,2,3,4,5,6,'喵喵','旺财','大黄']循环拼接let a = [1,2,3,4,5,6]let b = ['喵喵','旺财','大黄']for(let i=0;i<b.length;i++){ a.
2022-03-25 21:04:39
10113
原创 Es6中关于对象方法的扩展
Object.is()这个方法与===很像，但同时也考虑到了边界情形。这个方法必须接收两个参数：主要用于判断两个对象是否相等，但和’===有一些不一样的地方console.log(Object.is(true, 1)); // false console.log(Object.is({}, {})); // false console.log(Object.is("2", 2)); // false // 正确的 0、-0、+0 相等/不等判定console.log(Object.is(+
2022-03-25 20:46:27
400
原创 利用生成器函数解决回调地狱的问题
需求：1秒后控制台输出111，然后2秒后输出222，然后三秒后输出333原始做法setTimeout(() => { console.log(111); setTimeout(() => { console.log(222); setTimeout(() => { console.log(333); }, 3000); }, 2000);}, 1000);这只是三层嵌套，想象一下，如
2022-03-21 21:35:42
194
原创 ES6新特性：生成器函数
定义生成器函数生成器函数和普通函数定义没有太大的差别，只是函数名前面多了一个*function * gen(){ console.log(111)}执行生成器函数生成器函数直接调用函数不会执行，需要调用生成器函数内部的next方法函数才会执行function * gen(){ console.log(111)}let result = gen()result.next()//输出111yield语句yield语句会把函数分为几个部分，然后调用next函数异步去执行funct
2022-03-21 20:49:17
372
原创 关于Vue中如何自定义指令（简写形式）
1.自定义指令的作用在实际项目开发过程中，除了vue自身提供的一些固定指令，如v-if,v-show,v-model等除外，我们可能根据项目的需求来自己注册一些自定义的指令，更好的提高开发和工作效率。2.自定义指令的两种方式自定义指令有全局注册和局部注册两种方式，3.一个自定义指令的案例（局部注册）先看需求：定义一个v-big指令，要求和v-text功能类似，但会把绑定的数值放大10倍 <body> <div id="app"> <
2022-03-19 20:29:50
2672
12
原创 let num1=num＞＞n什么意思？
'num>>n’代表num除以一个数并向下取余,结果永远为整数;其中n为2的n次方，const num = 19console.log(num>>3);//输出的结果为2
2022-03-16 20:35:47
490
原创 一篇就够了，JavaScript中this的指向问题
文章目录1.直接输出的this指向window2.全局非嵌套函数的this指向window，嵌套函数this的指向他的父级函数3.对象的方法输出this，指向这个对象4.dom事件方法输出this，指向dom元素5.构造函数中this的指向：6.箭头函数的this指向箭头函数的调用者1.直接输出的this指向window //直接输出指向window console.log(this); //output：window2.全局非嵌套函数的this指向window，嵌套函数this的
2022-03-16 17:51:54
862
2
原创 Es6新特性：关于Promise的保姆级教程
文章目录1.Promise是什么？2.Promise的三种状态3.创建Promise对象4.执行promise的回调函数6.Promise对象的作用是什么？7.扩展：利用promise封装AJAX函数1.Promise是什么？Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。 ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。2.Promise的三种状态1.初始化状态：pending（进行中）2.当调用re
2022-03-15 20:47:55
286
1
原创 Es6新特性：set
1.set的一些重要的特性(1)Set.prototype.constructor，构造函数，默认是set函数(2)Set.prototype.size,返回set实例的成员总数(3)set是一种数据结构，是伪数组，无法访问长度，可以Array.from方法可以将set结构转化数组，再访问它的长度；(4)set里面添加的对象即使相同也是不相等的，例如：set.add({a:1}); set.add({a:1}); 可以同时存在；2.set的四种操作方法： // 添加元素
2022-03-12 11:31:11
1581
原创 正则表达式的几种用法
0.判断特定字符串要检验某一字符串是否符合特定的格式，最方便的方式就是正则表达式:<!-- 判断变量是否符合命名规则，v是要进行判断的变量名 -->const value = /[a-zA-Z\_\$][0-9a-zA-Z\_\$]*/;value.test(v)- test>>> var value=/[a-zA-Z\_\$][0-9a-zA-Z\_\$]*/;>>> value.test('v')// true1.切割字符串在读
2022-03-12 10:48:08
260
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人