自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(165)
  • 收藏
  • 关注

原创 手写Promise源码

【代码】手写Promise源码。

2024-06-09 17:58:18 129

原创 SpringMvc参数传递(Post)

Get和Post的区别还是很大的,如果按照标准,Get请求一般是不携带参数的,并且get携带在请求体种的参数是会被忽略的(postman工具除外)。Post请求一般才被用来携带参数@RequestParam 用于接收url地址传参,表单传参【application/x-www-form-urlencoded】,例如中的Adong和20@PathVariable 用于接收包含在请求路径中的参数,例如Adong中的Adong和20。

2024-06-08 10:08:38 574

原创 SpringMVC的参数传递(Get)

最近自己在做项目的时候,前后端一起做,在发请求时,愣是搞不清楚该怎么传递参数,参数位置到底应该放在哪。所以我决定整理一下SpringMVC的参数传递,相信大家一定遇到过类似的问题。如果能够帮助到你,那是我的荣幸!这里前端使用axios(最常用的请求工具库)来发起请求,文章中还使用到了其他的第三方库,例如qs库,请注意!

2024-06-07 13:11:23 813

原创 令人惊艳的JS单行代码

【代码】令人惊艳的JS单行代码。

2024-06-04 10:27:17 142

原创 消息推送常见方式

平时所用到的HTTP协议是一种请求-应答方式的,而想要让服务器主动向前端推送消息,可以采取下列的4种常见的方式。下面我们会重点介绍WebSocket技术。

2024-05-30 09:48:39 164

原创 JS手写判断对象是否相等

Object.is()是js内置的一个api,但是和===基本上没有区别,只是对一些特殊情况做出了特殊处理,所以并不能用来比较两个对象是否相等。所以必须得手写一个判断对象是否相等的方法。

2024-05-29 11:36:42 379

原创 Vue3 图片懒加载插件

【代码】Vue3 图片懒加载插件。

2024-05-27 21:04:52 263

原创 Vue3 一键复制自定义指令

【代码】Vue3 一键复制自定义指令。

2024-05-27 20:58:22 257

原创 Vue3利用自定义ref实现防抖

ref的原理也是这样,依赖收集trackRefValue和派发更新triggerRefValue。

2024-05-27 16:50:13 299

原创 Vue3自定义节流指令

指令的使用不仅仅如此,指令还可以携带参数,例如v-model="value",还可以带修饰符,例如v-on.once。其实指令就是一个对象,对象中可以有七个钩子函数,每一个钩子函数中还有参数。如果想要更加详细了解vue指令,那么可以看看下面链接的文章。Vue3的自定义指令。

2024-05-27 16:17:52 295

原创 Vue3右键菜单组件

【代码】Vue3右键菜单组件。

2024-05-24 22:12:09 506

原创 Vue3对比Vue2做了哪些优化

(2)相对于Vue2的源码组织方式,menorepo把这些模块拆分到不同的package中,每个package有各自的API、类型定义和测试,使得模块拆分更细化,职责划分更明确,模块之间的依赖关系也更加明确,开发人员更容易阅读、理解和更改所有模块源码,提高代码的可维护性。数据是响应式的,必须劫持数据的访问和更新,使用了Proxy对数据进行劫持,Proxy不能监听到内部深层次的对象变化,因此Vue3的处理方式是在getter中去递归响应式,这样的好处是。,每个区块只需要以一个数组来追踪自身包含的动态结点。

2024-05-24 11:14:37 425

原创 原生JS实现拖拽边界改变宽度

【代码】原生JS实现拖拽边界改变宽度。

2024-04-06 14:56:52 263

原创 对于session的理解

标准来说,session这个单词指的是会话。(1).前端通过浏览器去查看cookie的时候,会发现有些cookie的过期时间是:session,意味着该cookie是会话cookie。(2).后端人员常常把【session会话存储】简称为:session存储,或者更简单的称为:session。

2024-04-06 12:49:01 201

原创 对于cookie的理解

本质就是一个【字符串】,里面包含着浏览器和服务器沟通的信息(交互时产生的信息)。存储的形式以:【key-value】的形式存储。浏览器会自动携带该网站的cookie,只要是该网站下的cookie,全部携带。

2024-04-06 12:13:54 293

原创 axios的理解和使用

axios中文文档。

2024-04-06 11:10:28 765

原创 webpack常用的插件

Plugin 的特点是一个独立的模块模块对外暴露一个 js 函数函数的原型上定义了一个注入compiler对象的apply方法apply函数中需要有通过compiler对象挂载的webpack事件钩子,钩子的回调中能拿到当前编译的对象,如果是异步编译插件的话可以拿到回调callback完成自定义子编译流程并处理complition对象的内部数据如果异步编译插件的话,数据处理完成后执行callback回调。

2024-04-03 11:45:35 667

原创 forEach使用的注意点

若forEach方法的参数是。

2024-04-03 11:34:15 315

原创 重绘(Repaint)和回流(Reflow)

重绘和回流是渲染步骤中的一小节,但是这两个步骤对于性能影响很大。color。回流所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列回流。很多人不知道的是,重绘和回流其实和 Event loop 有关。

2024-04-02 19:24:18 396

原创 cookie、localStorage、sessionStorage和indexDB

如果没有大量数据存储需求的话,可以使用。对于不怎么改变的数据尽量使用。cookie有以下常用属性。,我们还需要注意安全性。

2024-04-02 19:16:39 127

原创 浏览器的重绘和重排(回流)

单单改变元素的外观,肯定不会引起网页重新生成布局,但当浏览器完成重排之后,将会重新绘制受到此次重排影响的部分重排和重绘代价是高昂的,它们会破坏用户体验,并且让 UI 展示非常迟缓,而相比之下重排的性能影响更大,在两者无法避免的情况下,一般我们宁可选择代价更小的重绘。。

2024-04-02 15:35:02 451

原创 打开一个浏览器界面到底发生了什么?(浏览器渲染原理)

附着到 DOM Tree 上,因此需要根据选择器提供的信息对 DOM Tree 进行遍历,才能将样式附着到对应的 DOM 元素上。我们知道 DOM Tree 与 Style Rules 合成为 Render Tree,实际上是需要将。而从左向右的匹配规则的性能都浪费在了失败的查找上面。对应的 DOM Tree 如下。解析 CSS 选择器。以下这段 css 为例。

2024-04-02 15:28:05 598

原创 浏览器的组成部分

值得注意的是,和大多数浏览器不同,Chrome 浏览器的每个标签页都分别对应一个呈现引擎实例。每个标签页都是一个独立的进程。

2024-04-02 15:19:02 291

原创 前端接口防止重复请求实现方案

例如用户多次点击按钮,多次请求接口,怎样才能做到将多余的请求筛掉,后端只返回一次结果呢?首先我想到的就是处理,多次发起请求,一段时间间隔内只有一次请求会生效,但想了想还有其他更加好的解决方案。

2024-03-29 11:31:23 453

原创 10.webpack 减少代码体积

如果没有特殊处理的话我们打包时会引入整个库,但是实际上可能我们可能只用上极小部分的功能。是一个术语,通常用于描述移除 JavaScript 中的没有使用上的代码。开发如果项目中引用了较多图片,那么图片体积会比较大,将来请求速度比较慢。开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。Babel 为编译的每个文件都插入了辅助代码,使代码体积过大!默认情况下会被添加到每一个需要它的文件中。这样将整个库都打包进来,体积就太大了。我们可以对图片进行压缩,减少图片体积。并且使所有辅助代码从这里引用。

2024-03-14 12:22:39 369

原创 9.webpack提高打包构建速度

开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。HotModuleReplacement(HMR/热模块替换):在程序运行中,替换、添加或删除模块,而无需重新加载整个页面。用法此时 css 样式经过 style-loader 处理,已经具备 HMR 功能了。但是 js 还不行。上面这样写会很麻烦,所以实际开发我们会使用其他 loader 来解决。。

2024-03-14 12:11:12 865

原创 8.webpack Loader的原理

帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。

2024-03-14 11:32:27 857

原创 7.webpack对css文件优化

Css 文件目前被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式这样对于网站来说,会出现闪屏现象,用户体验不好我们应该是单独的 Css 文件,通过 link 标签加载性能才好2.配置webpack.config.js。

2024-03-14 10:41:49 412

原创 6.webpack处理js资源

Webpack,导致 js 不能在 IE 等浏览器运行,所以我们希望做一些兼容性处理。其次开发中,团队对代码格式是有严格要求的,我们不能由肉眼去检测代码格式,需要使用专业的工具来检测。我们先完成 Eslint,检测代码格式无误后,在由 Babel 做代码兼容性处理。

2024-03-14 10:32:32 844

原创 5.webpack对图片资源进行优化

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源。

2024-03-14 10:15:05 372

原创 4.webpack五大核心概念(基础配置)

指示 Webpack 从哪个文件开始打包指示 Webpack 打包完的文件输出到哪里去,如何命名等webpack 本身只能处理 js、json 等资源,其他资源需要借助 loader,Webpack 才能解析扩展 Webpack 的功能采用common.js模块化规范。

2024-03-14 10:08:06 464

原创 3.webpack proxy工作原理

即webpack提供的代理服务器基本行为就是接受客户端发送的请求后转发给其他服务器其目的是为了方便开发者在开发模式下解决跨域问题。

2024-03-12 20:16:48 457

原创 2.webpack的构建流程

从Entry发出,针对每个Module串行调用对应的Loader去翻译文件内容,再找到该Moudule的依赖,递归进行编译处理。:从配置文件和Shell语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数。:对编译后的Module组合成Chunk,把Chunk转换成文件,输出到文件系统。

2024-03-12 20:08:34 365

原创 1.webpack热更新及原理

HMR全程Hot Module Replacement,可以理解为模块热替换,是指在应用程序运行过程中,替换、添加、删除模块,而无需刷新整个应用。

2024-03-12 19:58:41 359

原创 35.Vue中key的作用

使用index 作为 key和没写基本上没区别,因为不管数组的顺序怎么颠倒,index 都是 0, 1, 2...这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作。key 是为 Vue 中 vnode 的唯一标记,通过这个 key,diff 操作可以更准确、更快速。为什么不建议用index作为key?

2024-03-12 19:15:01 395

原创 34.Vue diff算法的原理

在diff算法中,只对同层的子节点进行比较,放弃跨级的节点比较,。

2024-03-11 21:37:26 1048

原创 33.params和query的区别

query要用path来引入,params要用name来引入,接收参数都是类似的,分别是。:query更加类似于ajax中get传参,params则类似于post,说的再简单一点,

2024-03-11 20:40:20 342

原创 32. Vue-router跳转和location.href有什么区别

【代码】32. Vue-router跳转和location.href有什么区别。

2024-03-11 20:39:43 451

原创 31.Vue 路由钩子

有的时候,需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。,或者vue-router全局有三个路由钩子;具体使用beforeEach(判断是否登录了,没登录就跳转到登录页)afterEach(跳转之后,滚动条回滚到顶部)

2024-03-11 20:36:43 382

原创 30.如何定义动态路由?如何获取传过来的动态参数?

2.路由跳转3.参数获取参数获取 通过获取传递的值。

2024-03-11 20:22:34 429

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除