Latest

Uniswap v2 学习

合约开发

Uniswap v2 学习

UniswapV2 的源码对于理解 DeFi 协议的设计和实现具有重要意义。本文将从架构、分层、模块划分、设计模式、关键特性实现、Gas 优化和安全考量等方面对 UniswapV2 合约进行详细解读。 合约架构 Uniswap v2的合约主要分为两类:core合约和periphery合约。 core合约仅包含最基础的交易功能,由于用户资金都存储在core合约里,因此需要保证core合约最简化,避免引入bug。主要包括: * UniswapV2Factory:工厂合约,用于创建Pair合约 * UniswapV2Pair:Pair(交易对)合约,定义和交易相关的基础方法,如swap/mint/burn等 * UniswapV2ERC20:实现ERC20标准方法 periphery合约则针对用户使用场景提供更友好的接口,比如支持原生ETH交易、多路径交换等,其底层调用的是core合约。主要包括: * UniswapV2Router02:最常用的接口合约,如添加/移除流动性,使用代币交换等 * 各种Library合约:提供计算最佳交易数量等功能 下图展示了Unisw

React

Dva 框架源码解析

dva 是一个基于 Redux 和 redux-saga 的轻量级状态管理框架,由蚂蚁金服团队开源。它旨在简化 React 应用中的状态管理,提供了一套类似 Vue 和 Angular 中的单文件组件开发模式。本文将从前端架构师的视角,结合源码深入解析 dva 的整体架构、模块划分和调用流程。 整体架构 dva 的整体架构如下图所示: 从图中可以看出,dva 由以下几个核心模块组成: * dva-core: dva 的核心库,提供了 app.model、app.router 等 API,以及 Redux store 的创建和订阅功能。 * dva-loading: 用于处理异步操作的 loading 状态。 * dva-immer: 用于实现 immer 方式的不可变数据更新。 * dva-router: 对
Nextjs 是如何实现 production ready 的 react

React

Nextjs 是如何实现 production ready 的 react

让我们结合 Next.js 的源代码来深入探讨一下它的实现原理。我将选取几个核心模块进行讲解。 服务端渲染 服务端渲染是 Next.js 的核心功能之一。它主要由 next-server 包来实现。让我们看看其中的关键代码: // next-server/server/render.ts export async function renderToHTML( req: IncomingMessage, res: ServerResponse, pathname: string, query: ParsedUrlQuery, renderOpts: RenderOpts ): Promise<string | null> { // ... const { App: EnhancedApp, Component } = await loadComponents( distDir, buildId, pathname, serverless ) const html = await
Redux、MobX、Recoil、Zustand 、Jotai 对比

React

Redux、MobX、Recoil、Zustand 、Jotai 对比

作为一名资深的 React 大型应用开发者，我将从架构、设计模式和原理最小实现代码等方面对比 Redux、MobX、Recoil、Zustand 和 Jotai 这几个状态管理库。 Redux： * 架构：Redux 遵循单一数据源原则，整个应用的状态存储在一个单一的 store 中。数据流是单向的，通过 dispatch action 来触发状态更新，reducer 函数根据 action 类型和负载来计算新的状态。 * 设计模式：Redux 采用了发布-订阅模式，store 作为发布者，组件作为订阅者。当 store 中的状态发生变化时，组件会收到通知并重新渲染。 * 原理最小实现代码 function createStore(reducer) { let state = reducer(undefined, {}); const subscribers = []; function dispatch(
Sentry SDK 架构解析

Sentry SDK 架构解析

Sentry 是一个广泛使用的错误监控和性能追踪平台，它提供了多个语言的 SDK，用于捕获和上报应用程序中的异常和性能问题。本文将深入探讨 Sentry SDK 源码，分析其架构设计、分层结构、设计模式和实现原理，重点关注错误捕获和性能追踪的流程，帮助读者理解 Sentry 是如何设计和实现其 SDK 的。 架构概览 Sentry SDK 的整体架构可以分为以下几个层次： * React 应用程序：集成了 Sentry SDK 的 React 应用程序代码。 * Sentry SDK：捕获异常、性能数据并将其发送到 Transport Layer。 * Transport Layer：负责将数据发送到 Sentry 服务器。 * Sentry Server：接收并处理来自 SDK 的数据，生成报告和可视化内容。 分层结构 Sentry React
Chakra UI 组件设计解读

React

Chakra UI 组件设计解读

Chakra UI 是一个优秀的 React UI 组件库,其源码蕴含了丰富的组件设计思想和技巧。本文将结合《React 进阶之路》、《React 组件模式》、《Atomic Design》等书籍的知识,深入剖析 Chakra UI 的内部设计,探寻其中的精妙之处。 一、组件的职责划分 《React 进阶之路》一书强调,组件应该遵循"单一职责原则",每个组件应该专注于做一件事情。Chakra UI 对此体现得淋漓尽致。以 Button 组件为例,其源码结构如下: <Button> <ButtonSpinner /> <ButtonIcon /> <ButtonLabel /> <

React

Typescript: Nest.js 中使用声明文件定义依赖注入的类型

Nest.js 是一个流行的 Node.js 服务端框架,它基于 TypeScript 构建,并采用了依赖注入(Dependency Injection, DI)的设计模式。在 Nest.js 中,我们可以使用声明文件(declaration files)来定义依赖注入的类型,从而获得更好的类型检查和智能提示。本文将从浅入深,结合 Nest.js 的源码,讲解如何使用声明文件定义依赖注入的类型。 Nest.js 中的依赖注入 在深入探讨声明文件之前,我们先来了解一下 Nest.js 中的依赖注入。在 Nest.js 中,依赖注入是通过 @Injectable 装饰器实现的。当一个类被 @Injectable 装饰时,Nest.js 会自动创建该类的实例,
TypeScript: MobX 中使用映射类型设计实现对象的响应式代理

React

TypeScript: MobX 中使用映射类型设计实现对象的响应式代理

MobX 是一个流行的状态管理库,它提供了一种简洁而强大的方式来实现数据的响应式和可观察性。在 MobX 中,我们可以通过将普通对象转换为可观察对象(observable)来实现响应式。MobX 内部广泛使用了 TypeScript 的映射类型来实现对象的响应式代理,使得类型推导更加精确和灵活。本文将从浅入深,结合 MobX 的源码,讲解如何使用 TypeScript 映射类型实现对象的响应式代理。 MobX 中的可观察对象 在深入探讨映射类型之前,我们先来了解一下 MobX 中的可观察对象。在 MobX 中,可观察对象是响应式系统的基础。当一个对象被标记为可观察对象时,MobX 会自动跟踪对象属性的变化,并在属性发生变化时通知相关的观察者(observer)。 我们可以使用 observable 函数将普通对象转换为可观察对象: import { observable } from 'mobx'; const person = observable({ name: '
TypeScript: RxJS 中使用条件类型实现 Observable 的链式操作

React

TypeScript: RxJS 中使用条件类型实现 Observable 的链式操作

RxJS 是一个流行的响应式编程库,它提供了一种优雅的方式来处理异步事件流。在 RxJS 中,Observable 是最核心的概念,它表示一个可观察的数据流。我们可以通过链式调用各种操作符来转换和组合 Observable,以满足不同的需求。RxJS 内部广泛使用了 TypeScript 的条件类型来实现 Observable 的链式操作,使得类型推导更加精确和灵活。本文将从浅入深,结合 RxJS 的源码,讲解如何使用 TypeScript 条件类型实现 Observable 的链式操作。 Observable 的基本结构 在深入探讨条件类型之前,我们先来了解一下 Observable 的基本结构。在 RxJS 中,Observable 是一个泛型类,它的类型定义如下: class Observable<T> { constructor(subscribe?: (observer: Observer<
Typescript: React 使用泛型定义组件 props 和 state

React

Typescript: React 使用泛型定义组件 props 和 state

在使用 TypeScript 开发 React 应用时,合理地定义组件的 props 和 state 类型可以提高代码的可读性、可维护性和类型安全性。React 中,我们可以使用泛型来定义组件的 props 和 state 类型,这种方式非常灵活和强大。本文将从浅入深,结合 React 源码,讲解如何使用泛型定义组件的 props 和 state 类型。 React 组件的基本类型定义 在深入探讨泛型之前,我们先来看看 React 组件的基本类型定义。React 组件可以是类组件或函数组件,它们都接受 props 作为输入,而类组件还可以有自己的 state。 对于类组件,我们通常这样定义 props 和 state 的类型: interface MyProps { name:
理解 Next.js 的 SSR , SSG 实现

理解 Next.js 的 SSR , SSG 实现

为了更深入地理解 Next.js 的 SSR 和 SSG 实现原理，我们确实需要结合 Next.js 和 React 的源码来分析 服务器端渲染（SSR）原理 在 Next.js 中，当用户请求一个页面时，服务器会执行以下步骤： 服务器端渲染（SSR）： * 在服务器端，当收到客户端的请求时，Next.js 会根据请求的 URL 查找对应的页面组件。 * Next.js 调用 getServerSideProps 函数获取组件所需的数据。 * 在 next/dist/server/render.js 中的 renderToHTML 函数中，Next.js 使用 React
Webpack 5 打包原理详解

工程化

Webpack 5 打包原理详解

Webpack 作为当前最流行的前端打包工具,其强大的功能和灵活的扩展机制为开发者提供了便利。本文将从源码级别深入探讨 Webpack 5 的打包原理,帮助你更好地理解和运用这个强大的工具。 首先,让我们通过一张架构图来了解 Webpack 5 的整体设计: 从上图可以看出,Webpack 5 的核心组件包括: * Entry: 入口文件,指定打包的起点。 * Compiler: 编译器,负责编译和构建整个项目。 * Compilation: 编译过程,包含了模块、代码块和资源的处理。 * Module: 模块,代表源代码中的模块单元。 * Chunk: 代码块,由多个模块组合而成,用于代码分割和懒加载。 * Asset: 资源文件,包括 JavaScript、CSS、图片等静态资源。 * Loader: 加载器,用于处理非 JavaScript 模块。 * Parser: 解析器,负责解析模块的依赖关系。 * Template: 模板,
ES2015 到 ES2020 的变更:一次 JavaScript 语言的深层进化

ES2015 到 ES2020 的变更:一次 JavaScript 语言的深层进化

JavaScript 作为一门动态类型的解释型语言,其性能和开发效率一直备受诟病。但从 ES2015 开始,JavaScript 引入了一系列新特性,使其无论在语法表现力,运行时性能,还是与其他语言的互操作性上,都得到了极大的提升。让我们从编译原理的角度,深入剖析这些年 JavaScript 的变革之路。 ES2015(ES6):一次颠覆性的变革 ES2015 可以说是 JavaScript 有史以来变化最大的一个版本。let/const 关键字和块级作用域的引入,解决了 var 的变量提升问题,使得 JavaScript 终于有了真正意义上的词法作用域。这不仅提高了代码的可读性,也方便了编译器对作用域的判断和优化。 箭头函数不仅简化了函数的语法,其词法绑定的 this 也解决了 JavaScript 长期以来 this 指向不明的问题。这使得高阶函数的使用更加直观,也为函数式编程打开了大门。 类和模块的引入,使得 JavaScript 终于有了和其他面向对象语言相媲美的代码组织能力。基于类的继承相比原型链更加清晰,也更易于编译器的静态分析。
Rollup 打包原理

工程化

Rollup 打包原理

Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,例如 library 或应用程序。它使用新的标准化格式 ES modules,允许按需编译代码。 Rollup 的主要特点包括: 1. 使用 ES2015 模块标准,可以静态分析代码 2. 支持 Tree-shaking,只打包使用到的代码 3. 打包结果简洁高效,适合库和框架的打包 4. 支持多种插件和Output选项,灵活性高 5. 配置简单,容易上手使用 打包流程如下 Tree-shaking 原理 Javascript Tree-shaking 原理基于 ES6 模块的静态分析。它通过分析模块的导入和导出语句,构建依赖图,并在打包过程中移除未使用的代码。下面是 Rollup Tree-shaking 的深入解释和流程: 1. 解析阶段 (Parsing)
See all