- 博客(68)
- 收藏
- 关注
RSS订阅原创 语义版本控制
在软件管理领域，存在一个令人生畏的地方，叫做“依赖地狱”。你的系统越大，你整合到软件中的软件包越多，你就越有可能在某一天发现自己陷入这个绝望的境地。在具有许多依赖项的系统中，发布新软件包版本可能会迅速变成一场噩梦。如果依赖项规范过于严格，那么您将面临版本锁定（无法升级软件包而无需发布每个依赖项软件包的新版本）的危险。如果指定的依赖项过于宽松，那么您将不可避免地受到版本滥用的困扰（假设与未来版本的兼容性比实际情况要合理得多）。当版本锁定和/或版本滥用阻止您轻松安全地推进项目时，您就会陷入依赖地狱。
2024-04-09 19:25:44
1116
原创 重新思考 React 最佳实践
深入探讨 React 从客户端视图库到应用程序架构的演变。十多年前，React 重新思考了客户端渲染 SPA 世界的最佳实践。如今，React 正处于采用的高峰期，并继续受到健康的批评和怀疑。React 18 与 React 服务器组件 （RSC） 一起，标志着从其最初的标语到客户端 MVC 中的“视图”的重大阶段转变。在这篇文章中，我们将尝试理解 React 从库 React 到 React 架构的演变。
2024-04-09 08:30:00
998
原创 Prefetch
请求和加载预取的模块。当浏览器处于空闲状态并计算出它有足够的带宽时，它将发出请求以加载资源并缓存它。缓存资源可以显著减少加载时间，因为我们不必在用户单击按钮后等待请求完成。） 是一种浏览器优化，它允许我们在需要后续路由或页面之前获取可能需要的资源。它可以在 HTML 中以声明方式完成（例如在下面的示例中），通过 HTTP 头（在展示如何根据可见性或交互导入模块的示例中，我们看到在单击按钮以切换组件和在屏幕上显示实际组件之间经常存在一些延迟。在许多情况下，我们知道用户会在页面初始呈现后不久请求某些资源。
2024-04-07 06:00:00
292
原创 设计模式 - 代理模式
使用代理对象，我们可以对与某些对象的交互进行更多的控制。代理对象可以在我们与对象进行交互时确定其行为，例如，当我们获取值或设置值时。一般来说，代理是指代替他人的人。你不是直接和那个人说话，而是和代表你试图联系的人说话的代理。在JavaScript中也是如此：我们不是直接与目标对象交互，而是与Proxy对象交互。让我们创建一个代表约翰·多伊的人物对象。我们不想直接与这个对象交互，而是想与代理对象交互。在 JavaScript 中，我们可以通过创建一个新的Proxy实例来轻松创建新的代理。
2024-04-06 06:00:00
1490
原创 压缩 JavaScript
压缩 JavaScript 并关注压缩后的块大小以实现最佳性能。过高的 JavaScript 打包粒度有助于消除重复项和缓存，但可能在 50-100 块范围内受到较差的压缩和加载影响（由于浏览器进程、缓存检查等）。最终，选择最适合您的压缩策略。JavaScript 是导致页面大小增大的第二大因素，也是互联网上仅次于图像的请求量第二大的网络资源。我们使用一些模式来减少 JavaScript 的传输、加载和执行时间，以提高网站的性能。压缩可以帮助减少通过网络传输脚本所需的时间。
2024-04-05 06:30:00
713
原创 设计模式 - 观察者模式
通过观察者模式，我们可以订阅某些对象（即观察者）到另一个对象（称为被观察者）。每当事件发生时，被观察者会通知其所有观察者！observersnotify()让我们来创建一个 Observable！创建 Observable 的一种简单方法是通过使用 ES6 类。现在，我们可以使用 subscribe 方法将观察者添加到观察者列表中，使用 unsubscribe 方法删除观察者，并使用 notify 方法通知所有订阅者。让我们用这个可观察对象构建一些东西。Button和一个我们希望跟踪用户与应用程序的。
2024-04-04 09:00:00
1582
原创 设计模式 - 模块模式
随着应用程序和代码库的增长，保持代码的可维护性和独立性变得越来越重要。模块模式允许您将代码拆分为更小的、可重用的部分。除了能够将代码拆分为更小的可重用部分外，模块还允许您将文件中的某些值保密。默认情况下，模块中的声明的作用域（封装）为该模块。如果我们不显式导出某个值，则该值在该模块之外不可用。这样可以降低在代码库的其他部分中声明的值发生名称冲突的风险，因为这些值在全局范围内不可用。
2024-04-03 06:00:00
596
原创 Google HTML/CSS 风格指南
在严格需要 id 属性的地方，总要在其值中包含一个连字符，以确保它不符合 JavaScript 标识符语法，例如，使用 user-profile 而不是仅仅使用 profile 或 userProfile。在没有工具的情况下 自动执行并强制执行一致的排序顺序，请考虑将声明放入 按字母顺序排列，以便以易于的方式实现一致的代码 学习、记忆和手动维护。CSS 提供了各种缩写属性（如 font），这些属性在可能的情况下应始终使用，即使在只显式设置一个值的情况下也应如此。使用缩写属性对于代码效率和可理解性是有用的。
2024-04-02 20:11:04
1195
原创 设计模式 - Mixin模式
混入（Mixin）是一个对象，我们可以使用它来向另一个对象或类添加可重用的功能，而无需使用继承。我们无法独立使用混入，它的唯一目的是向对象或类添加功能，而不使用继承。比如说，在我们的应用程序中，我们需要创建多个狗。然而，我们创建的狗的基本类型没有任何属性，只有一个名字属性。狗不仅仅应该有一个名字，它还应该能够叫、摇尾巴和玩耍！我们不必直接在Dog类中添加这些行为，而是可以创建一个混入（mixin）来为我们提供叫、摇尾巴和玩耍的属性。我们可以使用方法将mixin 添加到Dog原型中。此方法允许我们向。
2024-04-02 05:00:00
401
原创 PRPL模式
在使用 PRPL 模式时，我们需要确保我们请求的 bundle 包包含我们当时需要的最少资源，并且浏览器可以缓存。如果用户想要导航到 Service Worker 缓存的频繁访问的路由，则 Service Worker 可以快速从缓存中获取所需的资源，而不必向服务器发送请求。HTTP/1.1 在请求和响应中使用换行符分隔的明文协议，而 HTTP/2 将请求和响应拆分为更小的部分，称为帧。浏览器的缓存是有限的，你可能会通过请求客户端实际上不需要的资源来不必要地使用带宽。幸运的是，我们可以通过向关键资源添加。
2024-04-01 11:07:42
584
原创 前端 prefetch 和 preload 的区别？
总体而言，prefetch 和 preload 都可以帮助优化页面的加载性能。prefetch 用于获取非关键资源，而 preload 用于获取关键资源。选择使用哪种提示取决于资源的重要性以及是否需要在页面加载时立即使用。
2024-04-01 10:01:13
708
原创 设计模式 - 中介器模式
中介者模式使得组件通过一个中心点——中介者进行交互。组件不需要直接进行通信，而是将请求发送给中介者，由中介者进行转发！在JavaScript中，中介者往往只是一个对象字面量或一个函数。你可以将这种模式与空中交通管制员和飞行员之间的关系进行比较。飞行员不是直接互相交谈，这可能会相当混乱，而是与空中交通管制员交谈。空中交通管制员确保所有飞机接收到他们所需的信息，以便安全飞行，不与其他飞机相撞。虽然我们希望不要使用 JavaScript 控制飞机，但我们往往不得不处理对象之间的多向数据。
2024-04-01 07:00:00
1042
原创 设计模式 - 享元模式
享元模式是一种结构型设计模式，旨在最大程度地减少系统中对象的数量，通过共享相同状态的对象来减少内存占用和提高性能。在享元模式中，对象分为内部状态和外部状态，内部状态是可以共享的，而外部状态则是每个对象独立拥有的。当我们创建大量相似对象时，通过享元模式，可以有效地优化系统性能，减少内存占用，提高系统的扩展性和灵活性。如果一本书具有相同的 ISBN 编号，因此是完全相同的图书类型，我们不希望创建一个全新的。如果完全相同的书籍有多个副本，那么每次创建一个新的书籍实例都不是很有用。数组，其中包含库中的书籍总数。
2024-03-31 10:30:00
366
原创 前端代码规范
1、京东凹凸实验室前端代码规范：2、腾讯前端代码规范：3、腾讯前端代码规范手册：4、百度前端代码规范：5、JavaScript Standard Style：6、Vue 代码风格指南：
2024-03-30 22:36:25
942
原创 设计模式 - 工厂模式
使用工厂模式，我们可以使用工厂函数来创建新对象。如果一个函数不使用 new 关键字就返回一个新对象，那么这个函数就是工厂函数！假设我们的应用程序需要许多用户。我们可以使用firstNamelastName和email属性创建新用户。工厂函数还会向新创建的对象添加fullName属性，该属性返回firstName和lastName。现在，我们可以通过调用createUser函数轻松创建多个用户。如果我们在创建相对复杂且可配置的对象时，工厂模式会很有用。可能存在键和值的值依赖于特定环境或配置的情况。
2024-03-30 06:00:00
425
原创 设计模式 - Provider 模式
在某些情况下，我们希望为应用程序中的许多（如果不是全部）组件提供数据。尽管我们可以使用props将数据传递给组件，但如果应用程序中的几乎所有组件都需要访问 prop 的值，这可能很难做到。我们经常遇到所谓的属性钻探（prop drilling）问题，这在我们将属性向下传递至组件树的深层时就会出现。重构依赖属性的代码几乎不可能，也很难知道某些数据来自哪里。假设我们有一个包含某些数据的App组件。在组件树的下方，我们有一个ListItemHeader和Text组件，它们都需要这些数据。
2024-03-29 14:54:05
1065
原创 设计模式 - 命令模式
使用，可以将执行特定任务的对象与调用该方法的对象分离。假设有一个在线送餐平台。用户可以下订单、跟踪订单和取消订单。在类上，可以访问placeOrdertrackOrder和方法。直接使用这些方法将是完全有效的 JavaScript！但是，直接在manager实例上调用这些方法也有缺点。以后可能会决定重命名某些方法，或者方法的功能发生变化。假设现在不将其命名为placeOrder，而是将其重命名为addOrder！这意味着必须确保不会在代码库中的任何位置调用placeOrder。
2024-03-29 11:06:51
542
原创 了解 Code Review 过程
代码审查是软件开发的一个组成部分，在测试阶段之前识别错误和缺陷。在开发阶段，代码审查经常被忽视为一种持续的做法，但无数研究表明，它是最有效的质量保证策略。当代码审查没有得到应有的重视时，可能会发生意想不到的副作用，例如会议花费的时间比有意计划的时间要多。这些意想不到的后果往往成为代码审查可能遭到集体吐槽的原因。但是，可以通过包含适当升级过程的适当设置代码审查过程来避免这种情况。这一点至关重要，因为当公司没有固定的程序时，他们很可能不知道代码审查的有效性，或者它们是否正在发生。
2024-03-29 06:00:00
774
原创 Code Review 最佳实践
成功的同行评审策略要求严格记录的流程与非威胁性、协作性环境之间保持平衡。高度规范的同行评审可能会抑制生产力，然而，过于随意的流程往往效果不佳。经理们需要找到一种折中方案，使同行评审既高效又有效，同时促进团队成员之间的开放交流和知识共享。
2024-03-28 05:00:00
947
原创 在 Code Review 中寻找什么?
有很多工具可以确保代码的格式一致，遵循有关命名和最终关键字使用的标准，并发现由简单编程错误引起的常见错误。相反，这应该是你的组织中关于你目前在代码审查中寻找哪些东西，以及。无论你是通过像 Upsource 这样的工具来审查代码，还是在同事讲解他们代码的过程中进行审查，在任何情况下，有些事情都比其他事情更容易评论。这些都是需要检查的有效事项——您想要最小化不同代码区域之间的上下文切换并减少认知负载，因此您的代码看起来越一致，就越好。在代码审查中，我们能发现哪些我们无法委托给工具的东西？寻找什么的对话的开始。
2024-03-27 01:00:00
583
原创 Code Review 最佳实践
进行代码审查时需要考虑很多事情，如果每次审查我们都担心所有这些事情，那么任何代码都无法通过审查过程。我们为什么要进行审查？有了明确的目的，审查人员的工作就更容易了，代码作者也不会对审查过程感到意外。我们在寻找什么？当我们有了目标，我们就可以在审查代码时创建一套更集中的需要检查的事项谁参与了？谁负责审查，谁负责解决意见冲突，谁最终决定代码是否可以使用？我们什么时候审查，什么时候审查完成？在编写代码的过程中，审查可以迭代发生，也可以在过程结束时进行。
2024-03-26 05:00:00
991
原创 五种 Code Review 反模式
在代码审查期间，开发人员所能收到的最令人沮丧的反馈就是审查人员从根本上不同意解决方案的设计或架构，并且强迫开发人员通过一系列审查（参见下文）逐步重写代码，或者粗暴地拒绝代码并让开发人员重新开始。代码审查并不是检查设计的合适时机。如果团队遵循的是经典的“网关”代码审查，那么在最终由另一位开发人员审查代码之前，代码应该能够运行，并且所有测试都应该通过。此时，审查中的代码已经花费了数小时、数天或数周（尽管我真的不希望是数周；代码审查应该小而紧凑，但这是另一个话题）的努力。
2024-03-25 14:46:12
879
原创 使用 Vite 和 Bun 构建前端
虽然 Vite 目前可以与 Bun 配合使用，但它尚未进行大量优化，也未调整以使用 Bun 的打包器、模块解析器或转译器。为了简化这个命令，请将 package.json 文件中的 "dev" 脚本更新为以下内容。--bun 标志告诉 Bun 使用 bun 而不是 node 来运行 Vite 的CLI；这是一个简化版的指南，帮助你开始使用 Vite + Bun。Vite 可以与 Bun 完美兼容。从 Vite 的模板开始使用吧。现在，就可以使用 bun run dev 命令启动开发服务器。
2024-03-21 19:13:04
1161
原创 React 测试库 - FAQ
遵循这个库的指导原则，理解测试是如何围绕用户体验和与应用功能的交互来组织的，而不是围绕具体的组件本身，这是很有用的。我不想让我的测试等待动画结束。这看起来比浅渲染（shallow rendering）需要更多的工作（实际上也确实如此），但只要你模拟的东西足够接近你要模拟的东西，它就会给你更多的信心。由于用户不能直接与您的应用程序的组件实例进行交互，断言其内部状态或它们渲染的组件，或调用其内部方法，因此在测试中进行这些操作会降低它们能够给予的信心。你的测试越接近你的软件使用方式，它们能给你的信心就越多。
2024-03-19 01:00:00
1562
原创 React 测试库 - 入门
React Testing Library是在DOM Testing Library的基础上添加了用于处理 React 组件的 API。使用 Create React App 创建的项目默认支持 React Testing Library。如果不是这样，你可以通过 npm 添加它，如下所示：npm install --save-dev @testing-library/react// yarnyarn add --dev @testing-library/reactReact Tes
2024-03-17 06:30:00
453
原创 User Actions
为了解决这些问题，或者如果你需要在你的代码中依赖特定的时间戳，大多数测试框架都提供了用虚拟定时器替换测试中的实际定时器的选项。这是创建DOM事件的便捷方法，然后可以通过 fireEvent 来触发这些事件，使您能够引用所创建的事件：如果您需要访问无法通过编程方式初始化的事件属性（例如timeStamp），那么这可能很有用。如果一个元素被聚焦，那么就会派发一个聚焦事件，文档中的活动元素会发生变化，之前被聚焦的元素会变得模糊。触发这些事件时，你需要引用 DOM 中的一个元素和你要触发的键。
2024-03-16 01:00:00
911
原创 jest-dom
testing-library/jest-dom 可以与任何从查询中返回 DOM 元素的库或框架一起使用。以下自定义匹配器示例是使用 @testing-library 套件中的匹配器（例如 getByTestId、queryByTestId、getByText 等）编写的。从用户的角度来检查，一个元素是否被禁用。buttoninputselecttextareaoptgroupoptionfieldset和自定义元素。
2024-03-15 10:35:49
1100
原创 ByDisplayValue
如果是select，这将搜索一个匹配给定 TextMatch 的选定<option>的<select>。返回具有匹配显示值的 input、textarea 或 select 元素。
2024-03-15 01:00:00
678
原创 ByTestId
DOM 测试库中的 ...ByTestId 函数默认使用 data-testid 属性，这是遵循 React Native Web 的先例，后者使用 testID 属性在元素上发布 data-testid 属性，我们建议您在可能的情况下采用该属性。但是，如果您已经有一个现有的代码库，它使用不同的属性来实现此目的，您可以通过 configure({testIdAttribute: 'data-my-test-attribute'}) 覆盖此值。)的快捷方式（并且它还可以接受TextMatch）。
2024-03-14 09:26:56
581
原创 ByAltText
这将返回具有给定alt文本的元素（通常是<img>）。请注意，它仅支持接受alt属性或自定义元素的元素（因为我们不知道自定义元素是否实现了alt）：<img>、<input>和<area>（故意排除<applet>因为它已被弃用）。
2024-03-14 09:20:35
342
原创 ByText
这将搜索所有具有文本节点并且textContent与给定的TextMatch匹配的元素。有关如何使用和何时使用选择器选项的更多详细信息，请参阅 getByLabelText。
2024-03-14 01:00:00
1031
原创 bun test 不支持 toBeInTheDocument 怎么办？
【代码】bun test 不支持 toBeInTheDocument 怎么办？
2024-03-13 16:18:16
383
原创 ByPlaceholderText
这将搜索所有带有占位符属性的元素，并找到与给定的 TextMatch 匹配的元素。注意：占位符不能代替标签，因此你通常应该使用 getByLabelText 代替。
2024-03-13 09:56:58
320
原创 ByLabelText
上面的例子没有找到由元素分隔的标签文本的输入节点。你可以使用 getByRole('textbox', { name: 'Username' }) 代替，它对于切换到 aria-label 或 aria-labelledby 是很稳健的。这将搜索与给定的 TextMatch 相匹配的标签，然后找到与该标签相关联的元素。
2024-03-13 09:55:11
287
原创 ByRole
您可以通过调用 getByRole('link', { current: 'page' }) 来获取“👍”链接，通过调用 getByRole('link', { current: false }) 来获取“👎”链接。一个范围小部件可以通过任何值 getByRole('spinbutton') 或使用 level 选项 getByRole('spinbutton', { value: { now: 5, min: 0, max: 10, text: 'medium' } }) 来查询特定的值。
2024-03-13 00:45:00
874
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人