- 博客(95)
- 收藏
- 关注
RSS订阅原创 C# 中的lambda表达式和JavaScript中的箭头函数
在许多编程语言中，都有一种轻量级的函数定义方式。在C#中，我们称之为lambda表达式，它允许我们定义一个匿名函数，可以用于创建委托或表达式树类型。在JavaScript中，我们有箭头函数，它提供了一种更简洁的方式来写函数表达式。
2024-06-13 17:48:12
371
2原创 JavaScript 和 TypeScript 开发者学习 C#
由于本人是做前端的 为了更快的学习和了解C# 并运用到工作中 于是使用了进行学习!!!elseswitchwhil e...while=>箭头函数asyncawait。
2024-06-12 16:28:42
766
原创 初步了解C Sharp (C#)
（读作 C Sharp）是一种现代、通用、面向对象的编程语言，由 Microsoft 在 .NET 框架中开发。C# 的设计目标是提供一种简单、现代、通用、面向对象的编程语言。
2024-06-12 15:59:29
280
原创 Qiankun 子应用之间 如何通信 主应用和子应用如何通信
你可以在主应用中通过 props 传递数据给子应用，然后在子应用中通过 props.onGlobalStateChange 和 props.setGlobalState 来监听和修改全局状态。这种方式可以避免命名冲突，但是需要手动管理事件的生命周期，例如在不需要事件时移除事件监听器。：你可以在 window 对象上定义全局变量，然后在其他应用中访问这些变量。然后你可以在一个应用中修改状态，然后在其他应用中监听状态的变化。在这个例子中，主应用通过 props 传递全局状态和两个函数给子应用。
2024-06-11 18:06:08
412
原创 什么是Web Worker 并示例
它允许主线程创建 Worker 线程，将一些任务分配给后台 Worker 线程去执行，当 Worker 线程完成任务后，再把结果返回给主线程。在这个例子中，主线程将一个大数发送给 Worker，Worker 接收到这个数后，计算从 0 到这个数的和，然后将结果返回给主线程。
2024-06-11 15:52:10
105
原创 如何在浏览器的开发者工具中查找和诊断内存泄漏？
在 “Profiles” 面板中，你可以记录和分析 JavaScript 的运行时性能，包括内存使用情况。堆快照是 JavaScript 内存堆的一个快照，它可以显示你的页面在某一时刻的内存使用情况。：在 Chrome 中，你可以右键点击页面，然后选择 “检查”，或者使用快捷键 Ctrl+Shift+I（Windows）或 Cmd+Option+I（Mac）。：获取堆快照后，你可以在 “Summary” 视图中看到所有对象的列表，以及它们的构造函数、大小和距离根的距离。
2024-06-07 14:28:40
283
原创 Jest 是什么 如何使用
在这个例子中，我们使用 toMatchSnapshot 函数来生成一个快照。当测试运行时，Jest 会将 Component 的输出与之前保存的快照进行比较。如果输出发生了更改，测试就会失败。在这个例子中，我们使用 jest.mock 函数模拟了 getUsers 函数，使其返回一个预定义的值。以上只是 Jest 功能的一部分，Jest 还有许多其他的特性和选项，你可以在。Jest 提供了一整套测试工具，包括断言库、模拟函数、代码覆盖率报告等。Jest 还支持模拟函数，这是在测试中模拟复杂行为的一种方法。
2024-06-06 11:16:28
464
原创 什么是单元测试
单元测试是软件开发中的一种，它的目标是验证（如函数、方法或类）的正确性。单元测试通常由软件编写，并且可以自动运行。在单元测试中，你会为一个组件的每个可能的行为编写。每个测试都会调用该组件，并检查其返回值或效果是否符合预期。如果组件的行为改变了（例如，由于代码修改或错误），相关的单元测试应该会失败，从而提醒开发人员问题的存在。单元测试的主要优点是它可以帮助你，同时也使得重构和添加新功能变得更加安全和容易。通过编写和维护单元测试，你可以更好地理解你的代码，并确保它在未来的修改中仍然能够正确工作。
2024-06-06 11:07:52
171
原创 Ts中的枚举类型
字符串枚举的概念很简单，但是有细微的 运行时的差别。在一个字符串枚举里，每个成员都必须用字符串字面量，或另外一个字符串枚举成员进行初始化。在这个例子中，我们定义了一个名为 Direction 的枚举，它有四个成员：Up、Down、Left 和 Right。所以在这个例子中，Up 的值为 0，Down 的值为 1，以此类推。在这个例子中，Up 的值为 1，Down 的值为 2，以此类推。
2024-05-08 13:35:50
254
原创 Ts static 介绍
scale 属性的值是在创建实例时通过构造函数传入的，calculateDistanceFromOrigin 方法是根据 Grid 类的定义来创建的。在代码中，Grid 是一个类，它有一个静态属性 origin，一个方法 calculateDistanceFromOrigin，和一个构造函数。每个实例都有其自己的属性和方法，这些属性和方法是根据类的定义来创建的。例如，你可以使用静态属性来存储类的全局状态，或者使用静态方法来创建工具函数。静态成员是那些属于类本身，而不是类的实例的成员。
2024-04-25 19:45:44
211
原创 TS中的public 是干什么用的
在 TypeScript 中，public（公共的） 是一个访问修饰符，它用于指定类的属性或方法的可见性。当一个属性或方法被标记为 public 时，在 TypeScript 中，如果你没有指定访问修饰符，那么属性或方法默认为 public。public 访问修饰符允许你在类的外部访问和修改类的属性和方法，这对于构建公共 API 是非常有用的。在这个例子中，greet 方法可以在 Person 类的内部和外部被访问。
2024-04-23 15:02:52
290
原创 TS 中的private 是干什么用的
在 TypeScript 中，private（私有的） 是一个访问修饰符，它用于限制一个类的属性或方法的可见性。当一个属性或方法被标记为 private 时，它只能在其所在的类中被访问。在这个例子中，name 属性只能在 Person 类中被访问，不能在 Person 类外部被访问。可能读到这里 大部分同学可以get到private是干什么的了 但是又出现了新的。点击这里查看public定义吧~
2024-04-23 11:09:30
626
原创 关于React 打包优化
你可以使用React.lazy和Suspense来实现动态导入，这样可以将代码分割成多个小的bundle，而不是一个大的bundle。这将启用Webpack的生产模式，进行更多的优化，如压缩代码和去除开发时的警告。7.使用Webpack的SplitChunksPlugin：这可以将公共的依赖模块提取到一个单独的chunk中，这样可以避免重复的代码。4.优化图片和其他静态资源：使用适当的loader，如url-loader和file-loader，可以优化图片和其他静态资源的加载。
2024-04-22 11:40:54
551
原创 react项目打包后点击index.html页面出现空白
3.然后将项目中的引用路由时候的BrowserRouter改为HashRouter,所有用到的地方都要改。2.在package.json文件中添加 “homepage”: “./” 如下。这样在你点击index.html时候路径没有问题不会报错,但是页面可能还是空白的。1.浏览器F12查看报错原因。
2024-04-22 11:27:51
341
原创 React hooks 是什么 解决了什么问题
在类组件中，副作用（如数据获取、订阅事件等）通常需要在生命周期方法（如componentDidMount、componentDidUpdate和componentWillUnmount）中进行管理，这可能导致代码逻辑分散。：在类组件中，特别是当组件包含多个生命周期方法时，代码逻辑可能会分散在各个生命周期方法中，导致同一块功能的代码被拆分到了不同的地方。总之，React Hooks通过提供新的函数组件特性和解决类组件中的一些问题，使得React组件的开发更加简单、灵活和可维护。
2024-04-02 13:04:10
225
原创 React ref的理解 和使用场景
React ref的理解：ref只能用于Class组件和部分原生DOM元素（如、等）。无状态函数组件不能使用ref。不过，对于函数式组件，你可以使用React.forwardRef来实现对ref的支持。：对于DOM元素，ref提供了一个current属性，你可以通过这个属性访问和修改DOM元素。对于组件实例，ref同样提供current属性，你可以通过这个属性访问组件实例的方法和属性。
2024-04-02 13:01:28
228
原创 React 高阶函数 以及应用场景
React中的高阶函数是一个非常重要的概念，尤其在，高阶函数的使用变得更加广泛。，或者返回一个函数的函数。在React中，高阶函数通常用于创建可重用的组件逻辑，增强组件的功能，或者实现一些高级的功能，如渲染条件、属性代理等。。高阶组件是一个纯函数，它接受一个组件并返回一个新的组件。这个新的组件可以具有更多的功能或更强大的行为。高阶组件在React社区中非常受欢迎，因为它们提供了一种强大的方式来复用组件逻辑，而无需使用继承或者修改组件的源代码。：高阶函数可以用于创建可重用的组件逻辑。
2024-04-02 12:53:50
272
原创 React 生命周期有哪些对应哪些阶段 对应的方式是哪些
React的生命周期（Lifecycle）是组件在其生命周期内经历的一系列阶段和方法。了解并正确使用这些生命周期方法可以帮助你更好地管理组件的状态和副作用，以及在不同阶段执行相应的逻辑。React的生命周期主要分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。以下是每个阶段对应的生命周期方法及其描述：这个阶段对应于组件首次被渲染到页面上的过程。以下是挂载阶段中的生命周期方法：在组件实例化时调用，用于初始化组件的状态和绑定事件处理函数。在组件即将被挂载到页面之
2024-04-02 12:49:30
450
原创 React 引入css的方式有哪些 有什么区别
使用Webpack等构建工具将CSS文件转换为JavaScript模块，从而实现样式的局部作用域和模块化。缺点：需要在HTML文件中手动引入CSS文件，与React组件的耦合度较高。优点：实现了样式的局部作用域，避免了全局样式冲突，同时便于样式复用。通过在HTML文件中引入外部CSS文件来为React应用提供样式。缺点：样式复用性较差，且当样式复杂时，代码结构可能变得混乱。缺点：不便于样式复用，且当样式复杂时，代码可读性较差。优点：样式复用性好，便于管理和维护大型项目的样式。例如：在React组件中通过。
2024-04-02 12:41:37
277
原创 React 绑定事件的方式有哪些 有什么区别
通过在render方法中使用bind方法，将事件处理函数作为实例方法绑定到组件实例上。然而，这种方式的缺点是每次组件渲染时都会创建一个新的事件处理函数实例，可能会影响性能。因此，可以在render方法中使用箭头函数来绑定事件处理函数。这种方式不会创建新的事件处理函数实例，因此性能更好。箭头函数是React推荐的方式来绑定事件处理函数。：使用bind方法在每次组件渲染时都会创建新的事件处理函数实例，可能会导致性能问题。而使用箭头函数则不会创建新的实例，性能更好。：箭头函数的语法更简洁，可读性更强。
2024-04-02 12:18:15
236
原创 React的事件机制
合成事件是React模拟DOM原生事件的一个事件对象，具有与原生事件相同的方法和属性。这样做的好处是，无论在不同的浏览器中事件如何实际触发，React都可以提供相同的事件对象，从而保证了跨浏览器的兼容性。：在React中，事件并不是直接绑定到真实的DOM元素上，而是绑定在组件的顶层（通常是document对象）。事件冒泡是指事件从触发元素开始，由内向外传播到整个DOM树的过程；：事件处理函数是普通的JavaScript函数，它们接收一个合成事件对象作为参数，可以访问事件的信息，如类型、目标、位置等。
2024-04-02 12:14:44
234
原创 React受控组件和非受控组件的区别
受控组件的值是由React的状态（state）控制的，当状态改变时，组件的值也会随之更新。而非受控组件的值则不由React的状态控制，通常是由DOM元素自身控制，例如原生的HTML表单元素。：受控组件的行为通常与状态紧密相关，当状态改变时，组件的显示内容或行为也会随之变化。而非受控组件的行为则更多地依赖于DOM事件或其他外部因素，它们的行为不受React状态的控制。而非受控组件则通常用于不需要精确控制组件值的情况，例如文本区域、文件上传等。
2024-04-02 12:08:39
314
原创 React中类组件和函数式组件的区别
类组件具有生命周期方法，如componentDidMount、shouldComponentUpdate等，用于在组件的不同生命周期阶段执行特定的操作。而函数式组件没有内置的生命周期方法，但它们可以通过使用React的Hooks（如useEffect）来模拟生命周期的行为。：类组件可以通过高阶组件（HOC）和渲染属性（render props）来实现组件的逻辑复用和功能的拓展。：类组件是基于类的语法，使用面向对象编程思想，而函数式组件则采用函数式编程思想。
2024-04-02 12:06:20
214
原创 super() 和super(props)有什么区别
super()：调用父类的默认构造函数，当父类不需要特定的初始化参数时使用。super(props)：在React组件中，将 props 从子类构造函数传递给父类构造函数，这允许父类在初始化时使用这些 props。如果你正在编写一个React组件，并且这个组件继承自另一个React组件，那么通常你会使用 super(props) 来确保父组件可以访问其 props。如果你没有继承任何特定的React组件，而是从React.Component或其他基础类继承，那么你可能只需要简单地调用 super()。
2024-04-02 12:00:37
516
原创 React 中state 和props 有什么区别
与props不同，state是组件私有的，并且可以被组件自己修改。state在组件的constructor方法中初始化，并在组件的生命周期内可以被修改。props（属性）是从父组件传递给子组件的值。如果父组件的props发生变化，子组件将会重新渲染。当父组件的props更新时，子组件的props也会更新。这种传递是单向的，即父组件可以向子组件发送数据，但子组件不能直接修改这些数据。也就是说，任何子组件都可以访问和使用父组件传递过来的props。当组件的状态发生变化时，它会触发组件的重新渲染。
2024-04-02 11:55:44
279
原创 对React的理解 有哪些特性
此外，React在设计时也带有函数式编程的基因，因为React组件本身就是纯函数，这使得代码更加简洁、可预测和可测试。虚拟DOM是在内存中创建并操作的一个轻量级的DOM树，当数据发生变化时，React会通过比较虚拟DOM和实际DOM的差异，然后只更新实际DOM中变化的部分，从而减少不必要的DOM操作，提高性能。声明式编程和响应式框架：React是一个声明式编程和响应式框架，开发者只需要定义数据和DOM的对应关系，当数据发生变化时，DOM会自动更新。这种编程方式使得代码更加简洁易读，同时也提高了应用的性能。
2024-04-02 11:52:10
224
原创 深拷贝和浅拷贝 分别示例
然后，它创建一个新的对象或数组，然后递归地拷贝输入对象的所有属性。当我们修改obj2.b.c的值时，obj1.b.c的值并没有改变，这是因为obj1.b和obj2.b指向的是两个不同的对象。当我们修改obj2.b.c的值时，obj1.b.c的值并没有改变，这是因为obj1.b和obj2.b指向的是两个不同的对象。：创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。当我们修改obj2.b.c的值时，obj1.b.c的值也跟着改变，这是因为obj1.b和obj2.b指向的是同一个对象。
2024-03-28 12:18:49
218
原创 闭包是什么 用在什么地方 分别示例
在这两个例子中，debounce和throttle函数都返回了一个闭包，这个闭包可以访问并修改debounce和throttle函数的timeout和inThrottle变量。在这个例子中，createCounter函数返回了一个闭包，这个闭包可以访问并修改createCounter函数的count变量。：当连续触发事件时，throttle会在n秒内只执行一次，所以节流会稀释函数的执行频率。：闭包可以用来模拟私有变量，因为闭包内的变量只能通过闭包函数来访问，无法直接访问。例子1：数据封装和私有变量。
2024-03-28 12:12:04
276
原创 词法环境和词法作用域
在JavaScript中，一个变量的作用域是在写代码的时候就决定了的，这就是词法作用域。换句话说，词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的，因此当词法分析器处理代码时会保持作用域不变（除了特殊的eval或with情况）。每个执行上下文都有一个与之关联的词法环境，当执行流进入一个由函数、模块、脚本或者with语句创建的块时，会创建一个新的词法环境。在这个例子中，inner函数形成了一个闭包，它可以访问其自身作用域内的y变量，也可以访问包含它的outer函数的作用域内的x变量。
2024-03-28 12:11:08
208
原创 匿名函数是什么 是干什么用的
当你使用函数作为参数（例如在setTimeout或addEventListener中）时，匿名函数非常有用。：当函数被用在表达式中时，例如赋值给变量，或者作为对象的方法，通常使用匿名函数。：匿名函数可以立即执行，这在初始化代码或创建作用域以隐藏内部细节时非常有用。：匿名函数可以形成闭包，闭包可以让函数拥有私有变量。
2024-03-28 12:00:33
216
原创 JS的数据类型 如何来判断这些数据类型
数字类型，包括整数和浮点数，例如：42，3.14159。：字符串类型，用于表示文本数据，例如：“Hello, World!：布尔类型，有两个值：true（真）和 false（假）。：对象类型，用于存储键值对的集合。：有一个值null，表示一个空值或者无值。：有一个值undefined，表示未定义或不存在的值。：符号类型，是一种新的数据类型（ES6引入），用于创建匿名的对象属性。：大整数类型，用于存储任意精度的整数。
2024-03-28 11:58:36
138
原创 伪类和伪元素都有哪些 有什么区别
伪类使用单冒号语法（例如 :hover），而伪元素使用双冒号语法（例如 ::before）。但是，为了向后兼容，一些旧的伪元素（如 :before，:after）仍然可以使用单冒号语法。一个元素可以有多个伪类，但只能有一个 ::before 和一个 ::after 伪元素。：创建一个伪元素，它是其所在元素的最后一个子元素。：创建一个伪元素，它是其所在元素的第一个子元素。伪类用于选择元素的特定状态，而伪元素用于创建DOM树中实际不存在的元素。：当元素被激活时（例如，被鼠标点击或键盘回车），选择该元素。
2024-03-28 11:37:31
154
原创 移动端调试工具-Eruda
Eruda 是一个专为手机网页前端设计的调试面板，类似于 DevTools。：现在，你可以在手机上打开你的网页，然后在页面中看到 Eruda 的调试面板。
2024-03-26 16:16:25
310
原创 移动端调试工具-vConsole
它可以直接嵌入到你的web页面中，提供了控制台日志，网络请求查看，元素查看等功能。：现在，你可以在手机上打开你的网页，然后在页面中看到vConsole的调试面板。
2024-03-26 16:13:24
410
原创 移动端调试工具-Weinre
在你的电脑上打开浏览器，访问http://localhost:8080，你将看到Weinre的调试界面。：你需要在你想要调试的网页中引入Weinre脚本。：在你的移动设备上打开你想要调试的网页，然后在Weinre调试界面中，你将看到你的设备和网页。：现在，你可以像使用Chrome DevTools一样使用Weinre来调试你的网页了。：首先，你需要在你的电脑上安装Weinre。请注意，你需要将localhost:8080替换为你的Weinre服务器的地址。，可以用来调试移动设备上的网页。
2024-03-26 15:43:26
180
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人