- 博客(18)
- 收藏
- 关注
RSS订阅原创 总结在 React 中用到的编程范式
总结起来，React框架使用了声明式、组件化、函数式、响应式和单向数据流等多种编程范式，这些范式使得React成为一个强大而灵活的前端开发工具。
2023-07-24 17:42:32
183
原创 对react State 和 Hooks的理解（三）在React中批处理多个事件
React 会等到事件处理函数中的 所有 代码都运行完毕再处理你的 state 更新，这也意味着只有在你的事件处理函数及其中任何代码执行完成 之后，UI 才会更新。这种特性也就是 批处理。在React中当一个事件被触发，react会更新相应的组件。如果多个事件同时发生，React不会自动将它们批处理起来，而是会分别处理。这样会导致不必要的重新渲染。如果在React中批处理多个事件，一种常见的做法是使用debounce 或者 throttle 函数。将多个事件合并成一个，然后在进行处理。
2023-07-24 14:14:50
239
原创 对react State 和 Hooks的理解（二）
在React中，通过调用setState函数来更新组件状态。当我们调用setState函数时，React会将新的状态存储在内存中，但不会立即更新组件的UI，会安排一个异步更新，将新的UI放到UI上。如果我们想立即获取更新后的值，应该使用useEffect hook 来监听状态变化。
2023-07-19 15:53:32
100
原创 对react State 和 Hooks的理解（一）
自定义 Hook 必须以 “use” 开头命名，这是为了让 React 能够识别和正确使用 Hook。自定义 Hook 本质上是一个函数，它可以使用其他的 Hook，但自身并不是一个 React 组件。自定义Hook，将一些逻辑抽离出来，可以在多个组件中复用逻辑。组件状态共享：自定义Hooks可以被多个组件共享，这意味着多个组件可以共享一个状态和操作该状态的方法。
2023-07-19 12:54:17
119
原创 前端 基于TypeScript 单例模式 模拟栈结构 并且 实现二进制转化
类对应的方法实现基本操作。通过这种方式，可以确保栈对象在系统中只存在一个实例，避免了多次创建和销毁对象的开销。方法获取栈类的单例实例，在进制转化函数中调用。
2023-04-07 15:22:07
90
原创 用typeScript举例说明单例模式
类的静态属性和类的实例属性有所不同，它们属于类本身而不是类的实例。类的静态属性可以通过类名直接访问，而不需要先创建类的实例。静态属性通常用于存储类共享的非实例化数据。在这个例子中，是一个静态属性，它属于MyClass这个类本身而不是MyClass的实例。实例属性则必须通过实例化后的对象才能访问。当使用类名来访问静态属性时，不需要先创建类的实例，直接使用即可访问。静态属性在很多设计模式中都有应用，例如单例模式。
2023-04-07 12:01:25
216
1
原创 前端准确倒计时解决方案
在这个例子中，我们使用了 setInterval() 来每秒钟更新一次倒计时，并将倒计时的结果呈现在页面上。同时，我们还使用了 Date 对象中的方法来计算目标时间戳和剩余时间，以确保了倒计时的准确性。
2023-04-07 10:51:28
1492
1
原创 抽象工厂模式 + 建造者模式
前言要深度理解对扩展开放，对修改关闭，并应用到实际开发项目当中。一、抽象工厂模式抽象工厂模式是一种创建型设计模式，它可以创建一系列相关或相互依赖的对象，而无需指定其具体类。在抽象工厂模式中，我们定义一个抽象工厂，它定义了创建一系列相关对象的方法，而不是实现它们。具体工厂类实现这些方法以创建特定类型的产品。这使得客户端从这些工厂中获取一个抽象产品，并不影响客户端，因为客户端仅与这些抽象类／接口交互。举个例子，假设我们正在开发一个多媒体播放器。这个播放器可以播放音频和视频文件。我们可以定义一个抽象工
2023-04-06 15:08:38
220
原创 前端设计模式的理解之构造器，原型，工厂
设计模式是在我们在解决问题的时候，针对特定的问题给出简洁而优化的处理方案。在js设计模式中，最核心的细想：封装变化，将变与不变分离，确保变化的部分灵活，不变的地方稳定。
2023-04-06 11:42:45
222
原创 Base64编码的算法来将包含特殊字符的字符串编码为字母和数字的组合
前端可以使用一种名为Base64编码的算法来将包含特殊字符的字符串编码为字母和数字的组合。Base64编码并不是一种加密算法，而是一种编码方式，它将数据表示为只包含字母和数字的ASCII字符串。请注意，Base64编码不会增加数据的安全性，因为它可以轻易地被解码。请注意，如果你需要在前端执行实际的加密操作，应该考虑使用诸如。之类的安全算法和工具，这可以为你提供更高级的加密和解密功能。用于将Base64格式的字符串解码为原始字符串。变量中保存了一个只包含字母和数字的字符串。
2023-04-04 17:29:36
598
原创 在使用 Lodash 库时，只想使用 `_.get` 方法而不是整个库
在使用 Lodash 库时，如果你只想使用_.get方法而不是整个库，你可以只引入所需的方法。这有助于减少最终构建的体积，因为只需要一个小的 Lodash 模块，而不是整个库。这里有三种方法可以实现这个目标。
2023-04-04 17:26:53
547
原创 React、Vue 和 Angular 简单总结
尽管 React、Vue 和 Angular 有许多相似之处，但它们各自的设计原则使得它们在不同的应用程序场景下有着自己的特点。开发者可以根据项目需求和个人喜好选择合适的框架。
2023-04-04 17:18:32
371
原创 前端组件库设计思想
设计一个前端组件库需要考虑多个因素，以确保库的可用性、扩展性和易于维护。下面是一些建议和关键事项：一：规划和目标：确定组件库的目标、受众和用途。它将用于解决哪些问题？它将主要服务于哪些用户？二：组件选择：评估需要哪些组件，例如按钮、输入框、导航菜单等。考虑通用的组件以及特定于你的应用程序需求的组件。三：设计原则：组件库应该遵循一致性、可扩展性和易于维护的设计原则。四：UI设计：根据产品的需求和品牌设计语言，为组件制定统一的UI风格和设计规范。五：设计模式：确定常用的设计模式，如表单提交、编辑等。
2023-04-01 11:42:39
551
原创 学习总结-＞设计模式-＞命令模式
有时候需要向某些对象发送请求，但是并不知道请求的接受者是谁，也不知道请求的操作是什么，需要一种松耦合的方式来设计程序，使得发送者和接受者能够消除彼此间的耦合关系。
2023-03-10 16:46:27
45
原创 学习总结-＞设计模式-＞组合模式
组合模式在对象间形成树行结构；组合模式中基本对象和组合对象被一致对待；无需关心对象有多少层，调用时，只需在根部进行调用；在树形结构的问题中，模糊简单元素和复杂元素的概念，客户程序可以向处理简单元素一样来处理复杂元素。从而使得客户程序与复杂元素内部结构解藕。
2023-03-10 15:44:03
29
原创 学习总结-＞设计模式-＞桥接模式
因此，桥梁模式中的所谓脱耦，就是指在一个软件系统的抽象化和实现化之间使用组合/聚合关系而不是继承关系，从而使两者可以相对独立地变化。所谓耦合，就是两个实体的行为的某种强关联。非组合是将几个对象收集在一起生成一个新对象的行为，其特性是聚合的内部对象与聚合的外部对象相对独立，但两者的生命周期不一致。组合是将几个对象收集在一起生成一个新对象的行为，其特性是聚合的内部对象与聚合的外部对象相对独立，但两者的生命周期一致。聚合是将几个对象收集在一起生成一个新对象的行为，其特性是聚合的内部对象与聚合的外部对象相对独立。
2023-03-10 14:17:51
57
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人