皮皮网

1.HarmonyOS NEXT应用开发之使用AKI轻松实现跨语言调用
2.generator 执行机制分析
3.使用 Next.js + Ethers.js 开发加密钱包
4.nodejs原理&源码赏析（7）Node.js中的源码事件循环，定时器和process.nextTick
5.next.js 源码解析 - API 路由篇
6.AI驱动的源码前端UI组件生成器（Next.js，GPT4，源码Langchain和CopilotKit）

HarmonyOS NEXT应用开发之使用AKI轻松实现跨语言调用

       针对跨语言访问场景，源码尤其是源码JS与C/C++之间的调用，NAPI的源码windos源码使用方式通常较为繁琐。而AKI（Application Kit Interface）则提供了简洁的源码语法糖，使开发者能够轻松实现JS与C/C++之间的源码无障碍跨语言互调，仅需一行代码即可完成调用。源码本示例将展示如何使用AKI实现C++跨线程调用JS函数的源码场景，具体而言，源码将通过调用C++的源码全局函数，并创建子线程来调用JS函数，源码实现对变量value的源码加操作。此示例旨在为开发者提供使用AKI进行跨语言调用的源码参考。

       示例中展示了如何通过AKI和NPAI（Node Package API）的libuv实现跨线程调用JS函数的对比。以下是实现步骤的对比总结：

       使用NAPI和libuv时，初始化需要定义`napi_property_descriptor`结构体，准备模块加载相关信息，并将`Init`函数与模块名等信息记录下来。在`hello.cpp`源码中，可以看到NAPI实现中在native侧的业务函数实现主要是在主线程中完成`UvWorkTest`接口，该接口接收ArkTS传入的JS回调函数后，创建子线程执行`CallbackUvWorkTest`函数。在该函数中，创建`workReq`任务，并通过`uv_queue_work`将任务添加到libuv队列中，等待执行。在`Index.ets`源码中，可以看到ArkTS侧调用C++全局函数`UvWorkTest`的实现。

       通过对比，币响财经源码可以明显看出使用AKI相较于NAPI在native侧的代码量更少，实现方式更为直观和方便。

       此外，高性能知识点、工程结构、模块类型、模块依赖等技术细节在实际项目中同样重要，这些内容通常需要根据项目需求和具体实现策略进行深入探讨和实践，以确保代码的高效执行和良好的维护性。

generator 执行机制分析

       本文以下面代码为例，分析 generator 执行机制相关的源码，版本为 V8 7.7.1。

       首先，当 let iterator = test() 开始执行时，V8 调用 Runtime_CreateJSGeneratorObject，创建一个生成器对象。此函数逻辑是创建 JSGeneratorObject 的实例，设置相关属性后返回生成器对象 generator。此时生成器对象 generator 被保存在累加器中。在字节码 SuspendGenerator 的处理函数中，该函数暂停当前函数的执行，并多次调用 StoreObjectField 来保存生成器函数当前运行的状态。最后返回累加器中的值，即生成器对象 generator。因此，生成器函数在执行到“第一次暂停”的位置时，处于暂停状态。

       在有了生成器对象后，可以调用其 next 方法让生成器函数继续执行。当 JavaScript 代码继续执行 iterator.next() 时，idea看源码插件生成器对象的 next 方法被调用。生成器函数恢复执行需要 CPU 的寄存器操作。在笔者的 Mac 下，调用链路为GeneratorBuiltinsAssembler::GeneratorPrototypeResume-> CodeFactory::ResumeGenerator-> Builtins::Generate_ResumeGeneratorTrampoline。之后，调用 X 汇编，使生成器函数在暂停处恢复执行。此过程通过 Builtins::Generate_ResumeGeneratorTrampoline 函数完成，函数通过将未来要返回的地址压栈，并跳转到生成器函数 test 暂停的地方，继续执行。

       生成器函数从暂停处继续执行后，字节码一行一行往下执行，直到遇到下一个 SuspendGenerator，即“第二次暂停”。这是由 yield 带来的。yield 被 V8 编译成 SuspendGenerator 和 ResumeGenerator 两条字节码，分别表示保存状态暂停和恢复状态继续执行。

       async/await 与 generator 的关系分析：async/await 和 generator 都有暂停当前函数执行并从暂停处恢复执行的能力。await 和 yield 对应的字节码都是 SuspendGenerator 和 ResumeGenerator。生成器函数暂停时，需要调用生成器对象的 next 方法来从暂停处恢复执行。async 函数依赖 Promise 和 microtask，当 V8 在执行 microtask 队列时，已经暂停的 async 函数恢复执行。async 函数通过 Generator 和 Promise 获得保存状态暂停和恢复状态执行的能力，以及自我驱动向下继续执行的能力，从而避免调用 next 方法。

       JavaScript 中的函数类型较为复杂。虽然在 JavaScript 中，看react的源码1 和 0.1 都是 number，但在 V8 中它们是不同的类型，内存表示和 CPU 运算指令也有所不同。因此，即使在 JavaScript 中 typeof 都返回 function 的 test、test1、test2，在 V8 中是不同的类型。日常开发中，当一个组件/方法需要一个函数做为参数时，需要确保正确传递 ES6 之前的函数、async 函数或生成器函数，以避免运行时错误。

       原生 generator 与 babel 转译的区别：在日常开发中，生成器/async 函数会被 babel 转译成类似下面的代码。这段代码中，test 函数被多次调用，但由于闭包保存了函数执行的状态，每次调用 test 都是新的 test。这种实现非常巧妙，但与 V8 中生成器函数的原理有较大区别。Babel 转译的代码无法生成字节码 SuspendGenerator 和 ResumeGenerator。

       总结：生成器函数被调用时，开始执行并返回生成器对象后暂停。调用 iterator.next() 后，生成器函数从第一次暂停的位置恢复执行，遇到 yield（SuspendGenerator）后第二次暂停。

使用 Next.js + Ethers.js 开发加密钱包

       本文详尽介绍了如何使用 Next.js 和 Ethers.js 开发一个加密钱包，是 Web3 前端开发者的理想入门教程。Ethers.js 是zblogphp网址导航源码在 Web3 交互中常用的 SDK，尤其在与智能合约打交道时，它能简化繁琐的原生 JS 工作。

       Ethers.js 入门与优势

       Ethers.js 作为与智能合约交互的首选库，相较于早期的 web3.js，更受欢迎。它支持节点即服务模式，无需本地部署高昂成本，像 Alchemy、Infura 和 Tenderly等服务提供了便捷的连接。

       使用 Alchemy 作为服务提供商

       我们以Alchemy为例，首先在dashboard.alchemy.com创建应用，选择 Ethereum 和 Goerli 网络，获取 API key。在接下来的开发中，Key 会被用于连接服务。

       构造合约和读取信息

       要与合约互动，首先需要构造一个合约对象，包括地址、abi 和 provider。ethers.js 提供多种Provider选项，如JsonRpcProvider。

       连接 MetaMask 钱包

       MetaMask 是最常见的数字钱包，通过浏览器插件与Ethers.js配合，调用ethereum.request方法获取用户已登录的账户信息，进行安全的交易操作。

       创建钱包和转账交易

       转账前需创建 Wallet 实例，可以随机生成或使用助记词和私钥。转账时，创建交易对象并调用wallet.sendTransaction，异步等待交易确认。

       通过合约转账

       在合约实例中，使用transfer方法执行转账，同样异步等待交易完成。

       使用 Next.js 开发钱包应用

       用 Next.js 开发的加密钱包项目包含连接钱包、显示信息和转账功能。通过Context简化状态管理，并将组件化设计应用到Wallet、Connect、Details和Transfer组件中。

       源码与体验

       完整代码可参考GitHub链接，或在线体验地址webnext.cloud。对Web3感兴趣的同学，欢迎加入Web3交流群，与Noah探讨更多内容，添加微信：LZQ。

nodejs原理&源码赏析（7）Node.js中的事件循环，定时器和process.nextTick

       事件循环是Node.js的核心机制，确保了其非阻塞I/O模型的实现。尽管JavaScript在Node.js中是单线程运行的，它却能利用系统内核的多线程特性处理并发任务。Node.js在开始执行时初始化事件循环，处理脚本文件或REPL环境中的异步调用。事件循环通过检查异步I/O、定时器和process.nextTick调用，然后进入各个阶段，处理回调函数。每个阶段维护一个先进先出的回调队列，处理与阶段相关操作后执行队列中的回调，直至队列为空或达到最大函数执行数量。系统操作回调、定时器和处理关闭回调的阶段各有功能。setImmediate()与setTimeout()相似，但执行顺序受调用上下文影响，setImmediate()在I/O周期中通常优先执行。process.nextTick()则在当前操作执行后立即执行回调，不受事件循环阶段限制，但需谨慎使用以防阻塞事件循环。

next.js 源码解析 - API 路由篇

       本文深入解析 next.js 的 API 路由实现细节，以清晰的步骤指引，帮助开发者更好地理解此框架如何管理与处理 API 请求。首先，我们确认了源码的位置位于 next.js 的 packages 文件夹中，重点关注与 API 路由相关的组件。

       在排查 CLI 源码的过程中，我们注意到启动 API 路由的命令，如 `start` 和 `dev`，其实际操作逻辑位于 `next/dist/bin/next` 文件中。通过分析这一文件，我们得知这些命令最终调用的是 `lib/commands.ts` 文件中的 `start` 和 `dev` 函数。

       深入 `lib/commands.ts` 文件，我们发现 `start` 和 `dev` 函数通过 `lib/start-server` 中的 `startServer` 方法实现。在 `startServer` 方法中，`ponents`的文件夹，并在其中包含`Header.tsx`与`CodeTutorial.tsx`两个文件。`Header.tsx`负责定义导航栏，`CodeTutorial.tsx`则展示生成的UI组件、嵌入式代码编辑器及实现教程。在`page.tsx`文件中，导入并定义`Home`函数组件，用于整合`Header`和`CodeTutorial`组件。在完成上述步骤后，删除`globals.css`中的CSS代码，并添加自定义CSS以优化界面外观。运行`npm run dev`命令，然后访问`http://localhost:/`，以预览UI组件生成器的前端界面。

       接下来，我们将利用CopilotKit将AI功能集成到组件生成器中。CopilotKit提供了前端与后端包，允许您通过React状态与AI代理进行互动。首先，在`CodeTutorial.tsx`中导入`useMakeCopilotReadable`和`useCopilotAction`自定义钩子。在`CodeTutorial`内部，使用这些钩子设置上下文与生成代码及教程的动作。这将允许通过应用内聊天机器人进行交互，以生成UI组件代码和实现教程。

       在`page.tsx`文件中，导入CopilotKit前端包，并将`CopilotSidebar`与`CodeTutorial`组件集成，以实现在前端展示生成的代码与教程。通过配置CopilotKit后端端点与聊天机器人，您能够利用AI代理处理请求，生成代码并提供教程。此外，集成Tavily AI代理，以进行在线主题研究。

       配置完后端服务，通过在终端中运行命令并访问`http://localhost:`，您将能体验到AI驱动的UI组件生成器功能。通过应用内聊天机器人提示生成特定组件，如“生成一个联系表单”，生成的代码与教程将立即呈现于界面上，您可直接在嵌入式代码编辑器中进行调整。

       至此，您已成功构建了一个AI驱动的前端UI组件生成器。CopilotKit的集成使得AI功能变得触手可及，极大地提升了开发效率。这一构建过程不仅展示了AI在软件开发领域的强大应用，也为未来的项目集成提供了灵感与参考。通过GitHub链接，您可以访问完整的源代码，深入了解实现细节。在AI技术的驱动下，未来的开发流程将更加智能化与高效。

Node.js 时序异步API：setTimeout、setImmediate、nextTick、queueMicrotask(上)

       本文介绍Node.js版本v..0和libuv版本v1..2在Unix平台下的时序异步API：setTimeout和setInterval，以及nextTick和queueMicrotask的上篇内容。

       1. 定时器 setTimeout

       setTimeout是非I/O相关的异步API，Node.js通过js侧定时器调度管理和libuv的uv_timer_t执行层实现。执行时机在事件循环的定时器阶段。setInterval与setTimeout原理相同，仅多了循环控制。

       1.1 setTimeout源码

       Node.js中的setTimeout并非完全遵循规范，返回的是Timeout类实例而非整数。Timeout类管理超时元数据，如回调函数。插入新定时器到js的Map和优先队列，确保按时间顺序执行。

       1.2 优先队列与Map结构

       定时器的插入操作通过insert()，利用Map和按超时时间排序的链表实现。队列结构确保了定时器按时间先后顺序执行。

       1.3 定时器启动与执行

       scheduleTimer()启动定时器，与Environment环境类相关，用定时器句柄uv_timer_s控制执行。在libuv中，实际只有一个uv_timer_t，Node.js通过维护Map和优先队列进行调度优化性能。

       1.3.4 js侧回调函数：processTimers

       processTimers是回调函数的核心，从优先队列取出超时的Timeout执行，确保按时间顺序触发回调。

       2. 定时器 setInterval

       setInterval的源码与setTimeout类似，仅在实例化时设置重复执行标志。执行机制完全一致。

       总结

       本文详细阐述了setTimeout和setInterval的工作原理，包括异步调度、Map和优先队列在Node.js中的应用，以及从事件循环到回调函数的执行流程。