- 博客(290)
- 资源 (12)
- 收藏
- 关注
RSS订阅
原创 前端常见面试题
HTML语义化的理解和的区别link 和 @import 有什么区别defer 和 asyncHTML5离线储存盒子模型居中常见方法BFCflex布局em 和 rem的区别CSS 中哪些属性可以继承CSS中position定位三栏布局字符串 数组处理数据类型检测ES6新特性作用域闭包原型和原型链继承thisPromiseasync 和 await事件循环：宏任务、微任务深拷贝 和 浅拷贝防抖 和 节流本地存储let 和 const：暂时性死区call、apply、bind数组算法：判断、去重、扁平化数组遍历
2023-08-29 18:54:33
284
原创 整理大厂高频核心前端面试题，五万多字，面试必考
如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。
2021-09-13 11:07:08
2362
2
原创 ES6之新特性汇总
一、let 与 const 变量ES6之let关键字ES6之const关键字二、解构赋值ES6之解构赋值三、扩展运算符ES6之扩展运算符四、字符串拓展ES6之字符串类型（string）五、数值拓展ES6之数值类型(number)六、数组拓展ES6之数组(array)七、函数优化ES6之函数优化八、高阶函数ES6之数组高阶函数九、PromisePromise异步操作详解Promise详细用法十、classES6之class（类）十一、Map和Se
2020-05-09 21:35:30
522
原创 yarn详细入门教程
Yarn是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript包管理工具。安装的时候无法保证速度/一致性安全问题，因为 npm 安装时允许运行代码Yarn 同样是一个从 npm 注册源获取模块的新的 CLI 客户端。注册的方式不会有任何变化 —— 你同样可以正常获取与发布包。
2018-01-31 11:51:47
75190
5
原创 CSS 预处理器
预处理器允许你使用变量来存储常用的值，如颜色、字体大小等。这意味着，如果你需要更改某个值，只需在一个地方进行修改，而不是在整个样式表中搜索和替换。此外，混合（mixin）功能允许你定义可重用的代码块，这些代码块可以在多个地方调用，从而减少了代码的重复，提高了代码的可维护性。
2024-04-17 18:27:07
800
原创 CSS 伪元素和伪类的用法和区别
在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。伪元素通常用双冒号来表示 （在实际使用中，一些旧的伪元素如:before和:after仍然被广泛接受）::before和::after：用于在选定元素的内容之前和之后插入内容通常与content属性一起使用，可以插入文本、图像或其他内容。它们不占用DOM节点，使得CSS能够解决一部分JavaScript的问题，同时避免增加无意义的页面元素。
2024-04-17 15:05:53
375
原创 CSS transition和animation的用法和区别
Transition和Animation在CSS中都是用于实现元素状态变化的效果，但它们在用法和特性上存在明显的区别。
2024-04-17 14:24:58
256
原创 Vue 3 性能飞跃：解析其性能提升的关键方面
Vue 3 提供了更好的 Tree Shaking 支持，可以消除代码中未使用的部分，减少了不必要的代码和模块，减少打包体积，从而降低了应用程序的加载时间和运行时的内存占用。Vue 3 引入了事件缓存机制，当事件被多次触发时，不会每次都执行事件处理函数，而是使用缓存的结果，从而减少了不必要的计算和处理时间，提高了应用程序的性能。对于多层嵌套的对象，由于proxy只能代理一层，所以vue3在真正访问到对象属性的时候，才去判断递归，而不是在初始化的时候就一股脑的递归。Proxy 是直接代理整个对象。
2024-04-16 16:43:26
802
原创 Vue router 与 route 的区别
在Vue Router中，router和route是两个不同的概念，它们各自具有不同的作用和功能。
2024-04-13 16:04:02
493
1
原创 Vue Router 路由动态缓存组件
Vue Router 允许你缓存路由组件，这样在用户导航回之前的页面时，组件的状态会被保留而不是重新渲染。这可以通过使用组件来实现。是一个内置抽象组件，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。它的主要作用是缓存不活动的组件实例，而不是销毁它们。当组件在包裹下被切换时，它的状态（包括数据、DOM 结构等）都会被保留，以便在下次重新显示时能够恢复之前的状态，而不是重新创建组件实例。根据路由的meta字段中的keepAlive属性来决定是否缓存组件。
2024-04-13 11:29:57
1321
1
原创 Vue Router 路由生命周期钩子/路由导航守卫
Vue Router 提供了路由钩子（Route Hooks），允许你在路由发生变化时执行一些操作。这些钩子可以在路由进入、离开等关键时刻触发，从而实现一些特定的功能，比如页面权限控制、数据预加载等。路由守卫简单来讲就是监听页面进入修改，和离开的功能。to：即将要进入的路由对象from：当前导航正要离开的路由next：一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是。
2024-04-12 15:41:43
1170
1
原创 Vue Router 4 与 Router 3 路由配置与区别
Composition API 的集成：Vue Router 4 提供了更好的对 Vue 3 Composition API 的支持，允许你使用。与 Vue 版本的兼容性：Vue Router 4 是专门为 Vue 3 设计的，而 Vue Router 3 与 Vue 2 兼容。TypeScript 支持：Vue Router 4 对 TypeScript 提供了更好的支持，类型定义更加完整和准确。路由守卫的改进：Vue Router 4 改进了路由守卫（导航守卫）的 API，提供了更多的灵活性和控制。
2024-04-12 15:37:38
442
1
原创 前端大文件分块上传、断点续传
大文件上传是一个复杂的过程，尤其是在前端，我们需要考虑用户体验、网络状况、文件完整性等多个方面。以下是一个使用HTML5的File API和进行大文件分块上传的详解和示例代码。
2024-04-11 16:25:35
378
原创 require和import的区别
require和import都是用于引入其他模块的关键字，它们的主要目的是为了实现代码的可重用性和模块化。当需要在一个文件中引用另一个文件或模块时，可以使用这两个关键字来实现这个功能。不过，它们之间存在着一些明显的区别。
2024-04-08 15:53:56
251
原创 服务端渲染SSR
服务端渲染（Server-Side Rendering，简称SSR）是一种网页渲染技术，它指的是在服务器端完成页面的HTML结构、CSS样式以及JavaScript脚本的渲染，然后将完整的页面发送给客户端（浏览器）。在客户端，浏览器直接解析并显示这个已经渲染好的页面，而不需要再执行额外的JavaScript代码来生成页面内容。
2024-04-03 12:04:13
869
原创 微信小程序支付流程
后端可以根据需要，将支付结果通知前端，前端更新界面状态。在小程序界面上，用户选择商品或服务，点击支付按钮。API 发起支付请求，传入后端返回的支付参数。用户在小程序内完成支付操作。
2024-04-03 11:41:31
442
原创 微信小程序登录流程
发送至开发者的后台服务器。这个步骤通常是通过HTTP请求完成的，可能还包含其他必要的参数，如小程序的。后端服务器保存 session_key 和 openid，并可以生成自定义的登录态。用户在小程序内部点击登录按钮或进行需要登录权限的操作，触发登录流程。后，保存到本地，以便后续的请求中携带(需要携带。当用户点击登录按钮后，小程序调用。(本次登录的会话密钥) 和。，请求微信服务器换取。
2024-04-02 16:44:40
334
原创 微信小程序中路由跳转方式
需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。分隔，参数键与参数值用=相连，不同参数用&分隔；可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层（页面不断出栈，直到目标返回页，新页面入栈）需要跳转的 tabBar 页面的路径 (代码包路径)（需在。的 tabBar 字段定义的页面），路径后不能带参数。
2024-04-02 15:58:32
820
原创 axios详解
Axios 是一个功能强大且易于使用的基于 Promise 的 HTTP 客户端库。可以用在浏览器和 node.js 中。这意味着它结合了 Promise 的特性和 HTTP 客户端的功能，为用户提供了一个强大且灵活的工具来发送 HTTP 请求和处理响应。
2024-03-29 17:19:15
1566
原创 Vue双向绑定原理
举例说明：小明最近看上了一套房子，到了售楼处之后才被告知，该楼盘的房子早已售罄。好在售楼 MM 告诉小明，不久后还有一些尾盘推出，开发商正在办理相关手续，手续办好后便可以购买。但到底是什么时候，目前还没有人能够知道。于是小明把电话号码留在了售楼处。售楼 MM 答应他，只要新楼盘一推出就马上发信息通知小明。除了小明，还有小红、小强、小龙也是一样，他们的电话号码都被记在售楼处的花名册上，新楼盘推出的时候，售楼 MM会翻开花名册，遍历上面的电话号码，依次发送一条短信来通知他们。
2023-10-17 15:55:04
182
原创 js构造函数
通过new 函数名来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分，主要从功能上进行区别的，构造函数的主要 功能为 初始化对象，特点是和new 一起使用。new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。构造函数定义时首字母大写（规范）。此时，p1就是一个新对象。
2023-10-16 17:44:38
260
原创 手把手教你从webpack迁移到vite，仅6步~！
当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。，也需要修改一下 ，
2023-10-11 11:59:43
2691
原创 优化SPA首屏加载速度
首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节。
2023-09-14 12:00:45
216
原创 Vue中 v-if 和 v-for 为什么不建议一起用
这块内容只会在指令的表达式返回 true值的时候被渲染。（页面渲染不生成dom节点），在这一层进行。指令基于一个数组来渲染一个列表。如果避免出现这种情况，则在外层嵌套。指令用于条件性地渲染一块内容。是源数据数组或者对象，而。则是被迭代的数组元素的别名。v-for 指令需要使用。形式的特殊语法，其中。值是独一无二的，这便于。即使只有一个元素满足。判断，然后在内部进行。
2023-09-14 11:43:46
352
1
原创 对SPA单页面的理解
SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过，这种方法。在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者举个例子来讲：就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶。我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子结构如下图我们熟知的JS框架如reactvueangularember都属于SPA。
2023-09-14 09:57:19
151
原创 CSS选择器和优先级权重
对于选择器的优先级标签选择器、伪元素选择器：1类选择器、属性选择器、伪类选择器：10id 选择器：100内联样式：1000选择器格式优先级权重id选择器#id100类选择器.class10属性选择器a[ref=“eee”]10伪类选择器div:last-child10标签选择器div1伪元素选择器div:after1相邻兄弟选择器h1+p0子选择器ul>li0后代选择器ul li0
2023-08-31 18:18:11
317
原创 HTML5离线储存
离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
2023-08-31 17:52:48
677
原创 script标签中defer和async的区别
一个标签同时使用了async和defer，则执行async，忽略defer。async优先于defer一个标签只使用defer，且，则脚本将在页面完成解析时执行。defer延迟async和defer都不使用，遇到脚本即会马上载入和执行脚本，此时会阻塞页面继续向下解析渲染。(默认同步)只使用async且，则脚本相对于页面的其余部分异步地执行。async异步，和DOM同时加载）
2023-08-31 17:28:04
202
原创 彻底理解浏览器的缓存机制
我们第一次进入页面，请求服务器，然后服务器进行应答，浏览器会根据来判断是否对资源进行缓存，如果响应头中expires或者字段，代表这是强缓存，浏览器就会把资源缓存在或disk cache中。第二次请求时，浏览器判断请求参数，如果符合强缓存条件就直接返回状态码200，从本地缓存中拿数据。否则把响应参数存在request header请求头中，看是否符合协商缓存，符合则返回状态码304，不符合则服务器会返回全新资源。
2023-08-30 17:57:26
2367
原创 Vue 项目性能优化 — 实践指南
Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验本文通过以下三部分组成：Vue 代码层面的优化、webpack 配置层面的优化、基础的 Web 技术层面的优化；来介绍怎么去优化 Vue 项目的性能。
2023-08-29 18:53:38
791
原创 Vue Router 路由懒加载
在Vue中，如果没有使用懒加载（Lazy Loading），那么。这通常意味着，。为了解决这个问题，Vue和Webpack提供了懒加载（或称为代码拆分）的功能。通过懒加载，你可以将应用拆分成多个小的代码块（chunks），并只在需要时加载它们。这可以显著提高应用的初始加载速度，并减少资源浪费。在Vue中，你可以使用动态导入（import()）语法来实现路由的懒加载，或者使用Webpack的特定配置来优化代码拆分。
2023-08-29 18:03:22
1110
原创 session、cookie、webstorage的区别
Cookie实际上是一小段的文本信息，是服务器发送到用户浏览器并保存在本地的一小块数据。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端会把Cookie保存起来。当浏览器下次向同一服务器再发起请求时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。
2023-08-29 16:55:07
333
原创 CSS中可继承与不可继承属性
CSS属性的继承是CSS的一项非常强大的功能。这些属性的继承可以让你的CSS代码更加简洁、易于管理，同时也可以大大提高网站的性能。在设置CSS样式时，你可以根据需要选择继承或不继承属性，以便更好地控制页面样式。属性可以被子元素继承，它可以将元素隐藏起来，但不会改变网页的布局。等列表属性也可以被子元素继承，用于设置无序列表和有序列表的样式。等属性是字体样式的属性，都可以被子元素继承。等属性也是可以被子元素继承的属性。等一些其他的属性也是可继承属性。等表格属性也是可继承属性。规定元素应该生成的框的类型。
2023-08-29 15:47:11
1602
原创 em 和 rem 的区别
em 和 rem 都是，在使用时由浏览器转换为像素值，具体取决于你的设计中的字体大小设置。如果你使用值 1em 或 1rem，它可以被浏览器解析成 从16px 到 160px 或其他任意值。
2023-08-24 14:55:10
207
原创 node多版本控制
最近在折腾Python，并将node升级至v18.14.2。突然发现一个旧项目无法运行，也无法打包，里面的node-sass报错，显然这是因为node版本过高导致的。将node版本降低至以前的v14.16.0，果然立马就能正常运行。存在不同项目使用npm时所需要的版本不一致，又不想每次都卸载又重新安装node，建议使用nvm，一个专门的node多版本管理器，下次想更换不同的node操作很方便，下面是nvm安装已经使用。
2023-03-17 17:46:58
3393
原创 Vue3 的 ref 和 reactive 问题
reactive 能做的 ref 也能做，并且还是用 reactive 做的当 ref 的参数为对象时，用的就是 reactive 方法在 Vue3 中，如果是把对象类型的数据弄成响应式，reactive 和 ref 都可以，且ref 内部是通过r eactive 来支持的。也就是说，你 reactive 能做的，我 ref 也能做。
2023-02-02 14:21:37
2060
原创 js实现日期天数、时分秒的倒计时
在用js实现倒计时的时候，可以先算出截止日期和今天之间相差的毫秒数，然后进行相应的比例进行day、month、hour、minute、second的计算，便可以准确的计算出相差的时间。
2022-12-13 09:15:31
626
原创 一行代码 网页变灰
想必大家都感受到了，很多网站、APP 在昨天都变灰了。先来感受一下变灰后的效果。让网页变为黑白配色，是个常见的诉求。而且往往是突如其来的诉求，是无法预知的。当发生这样的需求时，我们需要迅速完成变更发布。这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？这一行代码是个CSS代码：为了使整个网页生效，你可以把它放在 标签的样式里。直接写到 html 文件内，例如：也可以用内联样式，只要没用 important CSS 语法，内联样式优先级最高：为了更好的兼容性，你可以补一个带
2022-12-07 16:03:39
4963
aes.js小程序加密解密
2021-05-07
JavaScript实现图片上传并预览并提交ajax（完整demo）
2021-03-31
AngularJS权威教程
2017-11-03
ECMAScript6入门
2017-11-03
JQuery源码详细中文注释!
2017-11-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人