![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Other
小王学前端️
分享工作或学习中遇到的问题一同探讨
展开
-
Jest 是什么 如何使用
在这个例子中,我们使用 toMatchSnapshot 函数来生成一个快照。当测试运行时,Jest 会将 Component 的输出与之前保存的快照进行比较。如果输出发生了更改,测试就会失败。在这个例子中,我们使用 jest.mock 函数模拟了 getUsers 函数,使其返回一个预定义的值。以上只是 Jest 功能的一部分,Jest 还有许多其他的特性和选项,你可以在。Jest 提供了一整套测试工具,包括断言库、模拟函数、代码覆盖率报告等。Jest 还支持模拟函数,这是在测试中模拟复杂行为的一种方法。原创 2024-06-06 11:16:28 · 453 阅读 · 0 评论 -
什么是单元测试
单元测试是软件开发中的一种,它的目标是验证(如函数、方法或类)的正确性。单元测试通常由软件编写,并且可以自动运行。在单元测试中,你会为一个组件的每个可能的行为编写。每个测试都会调用该组件,并检查其返回值或效果是否符合预期。如果组件的行为改变了(例如,由于代码修改或错误),相关的单元测试应该会失败,从而提醒开发人员问题的存在。单元测试的主要优点是它可以帮助你,同时也使得重构和添加新功能变得更加安全和容易。通过编写和维护单元测试,你可以更好地理解你的代码,并确保它在未来的修改中仍然能够正确工作。原创 2024-06-06 11:07:52 · 166 阅读 · 0 评论 -
伪类和伪元素都有哪些 有什么区别
伪类使用单冒号语法(例如 :hover),而伪元素使用双冒号语法(例如 ::before)。但是,为了向后兼容,一些旧的伪元素(如 :before,:after)仍然可以使用单冒号语法。一个元素可以有多个伪类,但只能有一个 ::before 和一个 ::after 伪元素。:创建一个伪元素,它是其所在元素的最后一个子元素。:创建一个伪元素,它是其所在元素的第一个子元素。伪类用于选择元素的特定状态,而伪元素用于创建DOM树中实际不存在的元素。:当元素被激活时(例如,被鼠标点击或键盘回车),选择该元素。原创 2024-03-28 11:37:31 · 150 阅读 · 0 评论 -
移动端调试工具-Weinre
在你的电脑上打开浏览器,访问http://localhost:8080,你将看到Weinre的调试界面。:你需要在你想要调试的网页中引入Weinre脚本。:在你的移动设备上打开你想要调试的网页,然后在Weinre调试界面中,你将看到你的设备和网页。:现在,你可以像使用Chrome DevTools一样使用Weinre来调试你的网页了。:首先,你需要在你的电脑上安装Weinre。请注意,你需要将localhost:8080替换为你的Weinre服务器的地址。,可以用来调试移动设备上的网页。原创 2024-03-26 15:43:26 · 144 阅读 · 0 评论 -
重绘和回流 以及他们的原理
在这个过程中,如果 DOM 的改变影响了元素的几何属性(如宽度、高度、位置等),浏览器需要重新计算元素的布局,这个过程被称为回流(Reflow)。回流会导致渲染树的部分或全部重新计算,这是一个相对昂贵的操作。如果 DOM 的改变只影响了元素的外观,但没有改变布局,那么浏览器只需要重新绘制这些元素,这个过程被称为重绘(Repaint)。5.如果需要对一个元素进行复杂的操作,可以先将元素脱离文档流,操作完成后再插入。3.将 DOM 树和 CSSOM 树结合生成渲染树(Render Tree)原创 2024-03-20 11:50:27 · 109 阅读 · 0 评论 -
HTTPS 为什么比HTTP安全?
HTTPS 使用 SSL/TLS 协议对数据进行加密处理,保证数据在传输过程中不会被窃取或篡改。这意味着,即使数据在传输过程中被第三方截获,由于数据是加密的,第三方也无法解读数据内容。因此,对于需要处理敏感信息(如登录凭证、银行信息、个人隐私数据等)的网站,都应该使用 HTTPS 协议,以保护数据的安全性。:HTTPS 可以防止数据在传输过程中被篡改,确保用户接收到的数据是服务器发送的原始数据。:HTTPS 协议通过使用 SSL 证书来验证服务器的身份,防止用户被引导到假冒的网站。原创 2024-03-20 11:05:09 · 293 阅读 · 0 评论 -
Last-Modified 和 If-Modified-Since 如何使用
在这个例子中,If-Modified-Since 头告诉服务器,如果资源自 2022 年 1 月 3 日 08:00:00 GMT 以来没有被修改,那么就返回 304 Not Modified 状态码,不返回资源内容。3.如果资源自 If-Modified-Since 以来没有被修改,服务器会返回 304 Not Modified 状态码,不返回资源内容。2.客户端再次请求同一资源时,会在请求中包含 If-Modified-Since 头,其值为上次响应中 Last-Modified 的值。原创 2024-03-19 18:19:10 · 320 阅读 · 0 评论 -
如何在 JavaScript 中使用 Cache-Control 头来控制缓存?
需要注意的是,这只影响浏览器的行为,不影响服务器的行为。如果你想控制服务器的缓存行为,你需要在服务器端设置 Cache-Control 头。如果你想控制服务器的缓存行为,你需要在服务器端设置 Cache-Control 头。在这个例子中,Cache-Control: no-cache 指示浏览器不使用缓存的响应,而是向服务器发送请求以验证响应的新鲜度。在这个例子中,Cache-Control: no-cache 指示浏览器不使用缓存的响应,而是向服务器发送请求以验证响应的新鲜度。原创 2024-03-19 18:12:01 · 494 阅读 · 0 评论 -
Http 缓存之 Cache-Control 介绍
缓存必须在向原始服务器进行确认后,才能使用该响应进行后续请求的回答。这允许作者改变一个已发布的对象,然后让缓存更新其缓存的副本。5.max-age=:设置缓存存储的最大周期。超过这个时间缓存被认为过期(单位秒)。Cache-Control 提供了比 Expires 更精确和灵活的缓存控制方式。:响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存和重用)。:响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存。,用于控制浏览器和其他中间缓存如何缓存和重新使用已缓存的。原创 2024-03-19 18:07:12 · 392 阅读 · 0 评论 -
Expires 介绍 以及Node 如何设置
需要注意的是,Expires 的工作依赖于客户端和服务器的时间设置是否正确。因此,现代的 HTTP 应用通常使用 Cache-Control 头的 max-age 指令来代替 Expires,因为 max-age 指定的是相对时间,不受时间设置的影响。但是,Service Worker 不能直接设置 Expires 头,它使用的是 Cache API,这是一个更灵活的缓存机制。如果客户端的当前时间小于 Expires 的时间,那么客户端可以直接使用缓存的响应,而不需要向服务器发送请求。原创 2024-03-19 18:00:29 · 293 阅读 · 0 评论 -
Http的缓存有哪些
服务器在响应中发送 Last-Modified 字段,表示资源最后修改的时间。客户端在下次请求时,可以发送 If-Modified-Since 字段,如果资源没有修改,服务器会返回 304 状态码,表示可以使用缓存。客户端在下次请求时,可以发送 If-None-Match 字段,如果 ETag 没有变化,服务器会返回 304 状态码,表示可以使用缓存。例如,no-cache 表示每次都要向服务器验证缓存的有效性,no-store 表示不缓存响应,max-age 定义了缓存的最大有效时间。原创 2024-03-19 17:55:01 · 458 阅读 · 0 评论