自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 css八股

可以将link标签引入css文件,并放在head头部中,这样可以减少对html的阻塞,因为CSS文件的下载和解析可以与HTML文档的解析过程同时进行,不会阻塞HTML的渲染。:通过屏幕分辨率,尺寸等相关数据,动态的使用相关的css样式来进行适配,媒体查询使得网页能够根据设备特性和特定条件,灵活地调整样式,从而提升用户体验。,首次加载的时候,对css的样式进行缓存,下次就可以直接从缓存中获取,无需重新的下载。,当条件满足的时候才加载文件,这样可以延迟css文件加载的时间,避免阻塞。

2024-04-18 16:33:26 1131

原创 计算机网络八股

简单性:单线程使得JavaScript的编程模型相对简单。开发者不需要关注线程同步、锁等复杂的并发问题。这降低了学习JavaScript和编写稳定代码的难度。安全性:多线程环境下,多个线程同时访问和修改共享的数据时,可能会引发竞态条件(race condition)等并发问题。单线程模型可以避免这些问题,使开发者更容易编写安全的代码。同步操作:JavaScript通常用于浏览器环境中的前端开发。浏览器提供的JavaScript API(如DOM操作、AJAX请求等)都是基于异步和回调的方式。

2024-04-18 16:32:42 1714 8

原创 source map 开发优化工具

简单来说 Source map 就是一个存储信息的文件,里面储存着位置信息。Source map 英文释义:源程序映射。位置信息:转换后的代码 对应的 转换前的代码 位置映射关系。有了 Source map,就算线上运行的是转换后的代码,调试工具中也可以直接显示转换前的代码。这极大的方便了我们开发者调试和排错。就以上述案例生成的 main.js.map 为例,我们来了解一下,它的内容结构是怎样的。// version:Source map 的版本,目前为 3。// file:转换后的文件名。

2024-04-18 16:31:56 1277

原创 CSRF攻击

CSRF(Cross-Site Request Forgery)攻击并不直接盗取受害者的 cookie,而是利用受害者已登录的状态下,伪造一个请求,以达到攻击者的恶意目的。简单的说,是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己以前认证过的站点并运行一些操作(如发邮件,发消息,甚至财产操作(如转账和购买商品))。因为浏览器之前认证过,所以被访问的站点会觉得这是真正的用户操作而去运行。

2024-04-18 16:31:10 1006

原创 跨域和同源策略

如果你想在 a.cn.com、b.cn.com 这两个子域名下共享 Cookie,你可以在设置 Cookie 时将 domain 属性设置为 .cn.com,这样这个 Cookie 就可以在所有以 .cn.com 结尾的子域名下访问。它涉及设置一个位于客户端和目标服务器之间的代理服务器,客户端将请求发送到代理服务器,代理服务器再将请求转发给目标服务器,并将响应返回给客户端。反向代理服务器可以在处理来自客户端的请求时,添加一些HTTP响应头信息,使跨域请求能够被浏览器接受。

2024-04-18 16:30:39 1055

原创 闭包的使用

如果你想要直接调用 fn 函数并输出其内部函数 f1 的结果,可以将 fn 函数调用的结果保存到一个变量中,然后再调用该变量。同时,立即执行函数还可以用来创建闭包,保护内部作用域的变量不受外部影响。如果有不受外函数管制的内部函数,出栈时会保留该内部函数在调用栈内存中,以及它所使用的外函数变量。在原始代码中,fn() 直接调用了 fn 函数,但没有保存内部函数 f1 的返回值。这种形式中,函数被声明后,在后面立即加上 () 运算符进行调用,使得函数立即被执行。这个函数体和它使用的外部函数变量的这个集合称为。

2024-04-18 16:28:13 357

原创 js预编译原理

预编译(Hoisting)是指在代码执行之前,。这意味着在代码中,变量和函数的声明可能在实际代码执行之前已经被处理了。使用声明的变量会存在声明提升 ,在之前访问变量,但其值为。

2024-04-18 16:27:19 493

原创 vue的实现八股

Vue的双向绑定原理是通过和实现的。vue使用了响应式的对象,即当数据发生改变的时候,视图也会随之改变使用了object.definedproperty对数据的每个属性进行劫持,从而逐一对每个属性进行set或者get操作,对于一些动态操作和数组操作需要额外的处理使用了proxy来绑定整个对象,会拦截对象的每个新增,删除等操作,更加的快捷。vue会绑定一个watcher对象来监听数据的变化,当数据变化时就会进行相应的视图更新vue中有一个watcher对象,用于观察数据的变化以及收集依赖。

2024-04-18 16:26:18 774 1

原创 async和await

async 函数1)函数的返回值为Promise对象2)Promise对象的结果由async函数执行的返回值决定await 表达式1)正常情况下,await右侧的表达式一般为 promise对象 , 但也可以是其它的值2)如果表达式是promise对象,它会阻塞函数后面的代码,等着Promise对象resolve,然后得到resolve的值,作为await表达式的运算结果。3)如果表达式是其它值, 直接将此值作为await的返回值4)如果返回的是失败rejected,则需要使用catch。

2024-01-28 19:35:10 956 1

原创 promise方法大全

Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配(ES8),但是它们是基于promise的),从语法上讲,Promise是一个对象或者说是构造函数,用来封装异步操作并可以获取其成功或失败的结果。1.可以避免多层异步调用嵌套问题(回调地狱)2.Promise 对象提供了简洁的API,使得控制异步操作更加容易(js执行机制导致的异步问题)1.pending: 等待中,或者进行中,表示还没有得到结果2.resolved(Fulfilled): 已经完成,表示得到了我

2024-01-28 19:33:19 3344 1

原创 前端进阶原理面经(一万六千字超级干货)

数据驱动:在MVVM框架中,通过双向绑定将数据和视图进行关联,数据的变化会自动反映在视图上,而不需要手动操作DOM元素。这使得开发者能够更专注于业务逻辑,减少了操作DOM的工作量。组件化开发:MVVM框架鼓励将页面拆分为多个可复用的组件,每个组件都有自己的视图、行为和状态。这种组件化的开发模式能够促进代码的可维护性和可复用性,提高开发效率。响应式UI:MVVM框架能够实现响应式UI,即当数据发生变化时,界面会自动更新。

2023-12-02 14:29:31 213

原创 图片懒加载、路由懒加载

font-face// 路由配置// 异步加载组件的函数component: import('./AsyncComponent.vue'),//必写,其他的是可写项loading: LoadingComponent, // 加载时显示的组件error: ErrorComponent, // 加载失败时显示的组件delay: 200, // 延迟显示加载组件的时间timeout: 1000 // 加载超时时间});

2023-11-22 17:25:34 258 1

原创 vue的自定义指令以及封装实用案例

setup() {// 在组件挂载后,通过 inputRef.value 访问引用的输入框元素});return {inputRef,},

2023-11-11 23:18:33 296 1

原创 vue h函数以及jsx的配置

"render"函数是Vue组件的核心构建部分,它接受一个名createElement的参数,用于编程式地创建组件的虚拟DOM树并描述组件的视图结构。而"h()"函数,则是"render"函数的重要工具,它用于创建虚拟DOM节点,并将其添加到虚拟DOM树中。实际上,"h()"函数是一个用于创建VNode(虚拟节点)的实用程序,也经常被称为createVNode(),但由于其使用频繁且简洁,通常被为"h()"。总的来说,这两个函数都对于创建和渲染Vue组件起着至关重要的作用。

2023-11-11 17:20:14 513 1

原创 vue3的composition API高级语法

它使用匿名函数表达式(Function Expression)来封装一些代码,并且这段代码会在定义后立即执行。

2023-11-11 17:19:29 211 1

原创 vue的hook使用以及案例

它们以use开头。它们可以调用其他的hook。如果我们编写的代码符合这两个约定,那么我们就可以编写自己的hook,然后在Vue组件中使用它。一般我们会在src文件夹下新建一个hooks文件夹,用于统一存放程序中用到的hooks代码。

2023-11-11 17:18:54 473 1

原创 vue3的watch、watchEffect、computed

在Vue 3中,"副作用" 指的是与组件生命周期之外的操作相关的行为。这通常包括对 DOM 的操作、数据请求、订阅外部事件或资源等。副作用通常在组件的生命周期钩子函数之外执行,比如在。

2023-10-18 15:37:08 187 1

原创 composition API

ref:定义基本数据类型reactive:定义对象或数组类型的数据。

2023-10-18 15:35:48 137 1

原创 位运算 字符串的查找

表示一个正则表达式模式,它将匹配一个或多个连续的空白字符。例如,在上一个回答中提到的代码中,它被用来拆分字符串为单词数组,其中空白字符被视为分隔符。然而,它们也可以变得复杂和难以理解,因此在编写复杂的正则表达式时要小心谨慎,同时可以使用注释和测试工具来帮助理解和调试正则表达式。需要注意的是,位运算符通常会将操作数转化为32位的有符号整数进行运算,因此在执行位运算时要特别小心负数的处理。方法,可以用于查找一个字符串在另一个字符串中第一次出现的位置。方法或正则表达式的其他方法来执行高级的字符串查找操作。

2023-10-10 17:35:05 156 1

原创 IP地址与MAC地址、DNS解析

总的来说,IP地址和MAC地址都在网络中起着关键作用,但它们用途不同,更改能力也不同。包括会话令牌、身份验证凭据等。攻击者可以利用CSRF攻击来伪造用户的请求,将用户的浏览器带入攻击者控制的恶意网站,然后执行恶意操作。这些步骤描述了用户在浏览器中输入 URL 后,浏览器与服务器之间的交互过程,以及最终将页面呈现给用户的过程。这个过程确保了域名到IP地址的映射,使互联网用户能够轻松地通过域名访问网站,而无需记住复杂的数字地址。这些机制可根据应用程序的需求来选择和结合使用,以实现身份验证和状态管理。

2023-10-10 17:34:22 1460 1

原创 Vue-Cli脚手架和Vite

vue-cli(俗称:vue脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。特点:① 开箱即用,② 基于webpack,③ 功能丰富且易于扩展,④ 支持创建 vue2 和 vue3 的项目如果每个项目都使用webpack一个个去配置,就太过于麻烦了,因此vue-cli出现了。

2023-10-10 17:33:23 780 1

原创 webpack的使用与配置

现代 javascript 应用程序的静态模块打包器 (module bundler)把很多文件打包整合到一起, 缩小项目体积, 提高加载速度ES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩合并是安装node后用来存放用包管理工具下载安装的包的文件夹。比如这些工具。在node.js中模块与文件是一一对应的,也就是说一个node.js文件就是一个模块。

2023-10-10 17:32:26 415 1

原创 微信小程序实现登录,支付功能

access_token 的刷新通常应该在后端服务器上进行,然后将新的 access_token 发送到前端应用。这是为了确保 access_token 的安全性,并将刷新操作的控制留在后端。拿到里面的数据之后,uni.requestPayment发起微信的支付接口,并且传入相关的参数,这些参数都在后端返回的biz_content里面。微信的 access_token 通常需要定期刷新,以确保安全性和有效性。这个方法将会返回一个临时登录凭证。:当用户点击登录按钮时,小程序调用微信提供的。

2023-09-19 16:45:11 226

原创 详细讲解事件循环、宏任务与微任务(附三个详细例题讲解!!)

注意宏任务内部嵌套了一个微任务的情况,或者微任务内部嵌套微任务 ,只有外层的异步任务在主线程执行完毕后,才能执行判断内部的微任务/宏任务,并放入任务队列中。

2023-09-04 16:58:57 450 3

原创 前端promise与async、await(异步编程)

async 函数1)函数的返回值为Promise对象2)Promise对象的结果由async函数执行的返回值决定await 表达式1)正常情况下,await右侧的表达式一般为 promise对象 , 但也可以是其它的值2)如果表达式是promise对象,await就忙起来了,它会阻塞函数后面的代码,等着Promise对象resolve,然后得到resolve的值,作为await表达式的运算结果。3)如果表达式是其它值, 直接将此值作为await的返回值async和await基于promise的。

2023-09-04 16:45:47 233 1

原创 vue的computed与watch (详细讲解区别和用法)

官方并没有给出直接的概念解释;而是说:对于任何包含响应式数据的复杂逻辑,你都应该使用计算属性;计算属性将被混入到组件实例中。所有 getter 和 setter 的 this 上下文自动地绑定为组件实例;开发中我们在data返回的对象中定义了数据,这个数据通过插值语法等方式绑定到template中;当数据变化时,template会自动进行更新来显示最新的数据;但是在某些情况下,我们希望在代码逻辑中监听某个数据的变化,这个时候就需要用侦听器watch来完成了;

2023-09-02 18:36:36 710

原创 websocket实现聊天uni-app

由于收到不符合约定的数据而断开连接. 这是一个通用状态码, 用于不适合使用 1003 和 1009 状态码的场景.由于接收到不允许的数据类型而断开连接 (如仅接收文本数据的终端接收到了二进制数据).由于收到了格式不符的数据而断开连接 (如文本消息中包含了非 UTF-8 数据).终端离开, 可能因为服务端错误, 也可能因为浏览器正从打开连接的页面跳转离开.客户端期望服务器商定一个或多个拓展, 但服务器没有处理, 因此客户端断开连接.客户端由于遇到没有预料的情况阻止其完成请求, 因此服务端断开连接.

2023-09-02 18:32:00 1129

原创 https加密协议全过程(结合全站文章,最简单直观的小白文)

摘要算法能够把任意长度的数据"压缩"成固定长度、而且独一无二的"摘要"字符串,就好像是给这段数据生成了一个数字"指纹"。任意微小的数据差异,都可以生成完全不同的摘要。所以可以通过把明文信息的摘要和明文一起加密进行传输,数据传输到对方之后再进行解密,重新对数据进行摘要,再比对就能发现数据有没有被篡改。这样就保证了数据的完整性。

2023-09-02 18:26:20 777 4

空空如也

空空如也

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

TA关注的人

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