通常我们在 Vue 中使用组件，是像这样在模板中写标签：

<MyComponent :prop="value" @event="handleEvent" />

而函数式调用，则是让我们像调用一个普通 JavaScript 函数一样来使用这个组件，例如：

MyComponentFunction({ prop: value }).then(result => { /* ... */ })。

接下来我们就用一个实际的例子来看看这种函数式调用的写法是怎么写的。

我们来实现一个非常通用的功能，在系统中，如果某些操作需要进行身份验证才能进行下一步，我们就需要实现一个身份验证的弹框，只有验证了用户的账号密码的情况下，才能执行接下来的逻辑。

以下是这个AuthBox组件的部分，这里无需多言。

// src/components/AuthBox/src/AuthBox.vue
<template><el-dialogtitle="身份验证"v-model="state.dialogVisible"width="360px":custom-class="customClass"centeralign-centerdestroy-on-close:show-close="false":close-on-click-modal="false"@opened="handleOpened"@closed="handleClosed"><el-form ref="formRef" :model="state.formData" :rules="formRules" label-width="70px" :validate-on-rule-change="false"><el-form-item label="账号" prop="username"><el-inputref="usernameRef"v-model="state.formData.username"placeholder="请输入账号"@keyup.enter="handlePasswordFocus"/></el-form-item><el-form-item label="密码" prop="password"><el-inputref="passwordRef"v-model="state.formData.password"type="password"placeholder="请输入密码"@keyup.enter="handleConfirm"/></el-form-item></el-form><template #footer><div class="text-center"><el-button @click="handleCancel">取消</el-button><el-button type="primary" @click="handleConfirm">确认</el-button></div></template></el-dialog>
</template><script lang="ts" setup>
import { ref, reactive, nextTick, onMounted } from "vue";
import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElMessage } from "element-plus";
import { AuthBoxState } from "./type";// 定义组件属性
const props = defineProps({// 自定义类名customClass: {type: String,default: ""},// 提示文本message: {type: String,default: ""}
});// 定义事件
const emits = defineEmits(["confirm", "cancel", "close", "vanish"]);// 组件状态
const state = reactive<AuthBoxState>({dialogVisible: false,formData: {username: "",password: ""}
});// 表单校验规则
const formRules = {username: [{ required: true, message: "请输入账号", trigger: "blur" }],password: [{ required: true, message: "请输入密码", trigger: "blur" }]
};// 表单引用
const formRef = ref();
const usernameRef = ref();
const passwordRef = ref();// 聚焦密码输入框
const handlePasswordFocus = () => {passwordRef.value.focus();
};// 确认按钮处理
const handleConfirm = () => {formRef.value.validate((valid: boolean) => {if (valid) {// 在实际应用中，这里可能会调用API进行验证// 这里我们简化为直接模拟验证通过// 触发confirm事件，传递表单数据emits("confirm", {username: state.formData.username,password: state.formData.password});// 关闭对话框state.dialogVisible = false;}});
};// 取消按钮处理
const handleCancel = () => {emits("cancel");state.dialogVisible = false;
};// 对话框打开后处理
const handleOpened = () => {// 对话框完全打开后才设置焦点，确保元素已渲染完成并可见usernameRef.value?.focus();
};// 对话框关闭处理
const handleClosed = () => {emits("close");// 组件消失，用于清理资源nextTick(() => {emits("vanish");});
};// 公开给外部的关闭方法
const doClose = () => {state.dialogVisible = false;
};// 初始化
const init = () => {// 重置表单state.formData.username = "";state.formData.password = "";// 显示对话框state.dialogVisible = true;
};// 组件挂载时初始化
onMounted(() => {init();
});// 暴露方法给父组件调用
defineExpose({doClose,state
});
</script>

接下来重点看看关于函数式调用的部分：

// src/components/AuthBox/index.tsimport { AppContext, ComponentPublicInstance, createVNode, render } from "vue";
import AuthBoxConstructor from "./src/AuthBox.vue";
import { AuthBoxData, AuthBoxOptions, AuthBoxState, Callback, IAuthBox } from "./src/type";/*** 实例映射表 - 存储所有通过函数式调用创建的AuthBox实例** Key: 组件实例的代理对象(vm)，包含doClose方法* Value: 包含options、callback、Promise的resolve和reject函数** 作用: 让我们能够在异步事件(如用户点击确认)发生时，找到对应的Promise并解析它*/
const instanceMap = new Map<ComponentPublicInstance<{ doClose: () => void }>,{options: AuthBoxOptions;callback: Callback | undefined;resolve: (res: any) => void;reject: (reason?: any) => void;}
>();/*** 获取组件应该挂载到的DOM元素** @param props - 组件的props* @returns 挂载目标DOM元素，默认为document.body*/
const getAppendToElement = (props: AuthBoxOptions): HTMLElement => {// 这里简化处理，始终返回document.body// 在实际应用中，可以根据props.appendTo来自定义挂载位置return document.body;
};/*** 创建临时容器元素** @returns 新创建的div元素*/
const genContainer = (): HTMLDivElement => {return document.createElement("div");
};/*** 初始化组件实例** @param props - 传递给组件的属性* @param container - 临时容器元素* @param appContext - Vue应用上下文(可选)* @returns 创建的组件实例*/
const initInstance = (props: AuthBoxOptions, container: HTMLElement, appContext: AppContext | null = null) => {// 1. 使用组件构造函数和props创建虚拟节点const vnode = createVNode(AuthBoxConstructor, props);// 2. 如果提供了应用上下文，则设置到vnode上//    (这确保组件能访问到应用的全局组件、插件等)if (appContext) {vnode.appContext = appContext;}// 3. 将虚拟节点渲染到临时容器中render(vnode, container);// 4. 将容器中渲染好的DOM元素移动到目标挂载点(通常是body)getAppendToElement(props).appendChild(container.firstElementChild!);// 5. 返回组件实例return vnode.component;
};/*** 显示AuthBox对话框** @param options - 配置选项* @param appContext - 应用上下文(可选)* @returns 创建的组件实例代理对象*/
const showAuthBox = (options: AuthBoxOptions, appContext?: AppContext | null) => {// 1. 创建临时容器const container = genContainer();// 2. 设置组件销毁时的回调// 当组件通过transition动画完全消失后触发options.onVanish = () => {// 2.1 从DOM中彻底移除组件//     (将null渲染到container会清除其中的内容)render(null, container);// 2.2 从实例映射表中移除组件实例//     (防止内存泄漏)instanceMap.delete(vm);};// 3. 设置用户点击确认按钮的回调options.onConfirm = (userData: { username: string; password: string }) => {// 3.1 获取该组件实例对应的Promise解析函数const currentInstance = instanceMap.get(vm)!;// 3.2 创建返回数据const resolveData: AuthBoxData = {username: userData.username,password: userData.password,action: "confirm"};// 3.3 解析Promise，传递结果数据//     (这会使得await AuthBox()或.then()收到结果)currentInstance.resolve(resolveData);};// 4. 设置用户点击取消按钮的回调options.onCancel = () => {const currentInstance = instanceMap.get(vm)!;const resolveData: AuthBoxData = {username: "",password: "",action: "cancel"};currentInstance.resolve(resolveData);};// 5. 设置对话框关闭的回调options.onClose = () => {const currentInstance = instanceMap.get(vm)!;const resolveData: AuthBoxData = {username: "",password: "",action: "close"};currentInstance.resolve(resolveData);};// 6. 初始化并创建组件实例const instance = initInstance(options, container, appContext)!;// 7. 获取组件实例的代理对象//    (这是我们与组件交互的接口)const vm = instance.proxy as ComponentPublicInstance<{doClose: () => void;} & AuthBoxState>;// 8. 返回代理对象return vm;
};/*** AuthBox函数 - 用于函数式调用AuthBox组件** 用法:* const result = await AuthBox({ title: '登录', message: '请输入您的账号和密码' });* if (result.action === 'confirm') {*   console.log('用户名:', result.username);*   console.log('密码:', result.password);* }** @param options - AuthBox配置选项* @param appContext - Vue应用上下文(可选)* @returns Promise，解析为AuthBoxData*/
async function AuthBox(options: AuthBoxOptions, appContext?: AppContext | null): Promise<AuthBoxData>;
function AuthBox(options: AuthBoxOptions, appContext: AppContext | null = null): Promise<AuthBoxData> {// 1. 创建并返回一个新的Promise//    (这是函数式调用的核心，让我们可以使用await或.then()获取结果)return new Promise((resolve, reject) => {// 2. 获取应用上下文(优先使用传入的，否则使用预设的)const finalAppContext = appContext ?? (AuthBox as IAuthBox)._context;// 3. 显示AuthBox对话框，获取组件实例代理const vm = showAuthBox(options, finalAppContext);// 4. 将组件实例与Promise的resolve/reject函数关联起来//    (这样在事件回调中就能找到对应的Promise进行解析)instanceMap.set(vm, {options,callback: undefined, // 保留字段，便于扩展resolve,reject});});
}/*** 关闭所有通过AuthBox函数创建的对话框*/
AuthBox.close = () => {// 1. 遍历实例映射表中的所有组件实例instanceMap.forEach((_, vm) => {// 2. 调用每个实例的doClose方法关闭对话框vm.doClose();});// 3. 清空实例映射表//    (作为安全措施，确保不留下任何引用)instanceMap.clear();
};// 初始化应用上下文为null
(AuthBox as IAuthBox)._context = null;// 导出函数
export default AuthBox as IAuthBox;

下面我们就重点分析看一下，这个 indes.ts 做了什么：

  1. 导入依赖
import { AppContext, ComponentPublicInstance, createVNode, render } from "vue";
import AuthBoxConstructor from "./src/AuthBox.vue";
import { AuthBoxData, AuthBoxOptions, AuthBoxState, Callback, IAuthBox } from "./src/type";
  • vue：从 Vue 中导入了核心的 AppContext (应用上下文)、ComponentPublicInstance (组件公共实例类型)、createVNode (创建虚拟DOM节点) 和 render (渲染虚拟DOM) 函数。
  • AuthBoxConstructor：这是实际的 AuthBox.vue 组件。我们将其作为构造函数来创建组件实例。
  • ./src/type：从类型定义文件中导入了与 AuthBox 组件相关的各种类型，这里就不放出来了，根据自己实际业务来写就行。
  1. instanceMap：实例映射表
const instanceMap = new Map<ComponentPublicInstance<{ doClose: () => void }>,{options: AuthBoxOptions;callback: Callback | undefined;resolve: (res: any) => void;reject: (reason?: any) => void;}
>();
  • 作用：这是一个关键的数据结构。由于我们可以通过函数调用创建多个 AuthBox 实例，instanceMap 用于存储每一个动态创建的 AuthBox 组件实例 (vm) 以及与之关联的配置项 (options) 和 Promise 的 resolve / reject 函数。
  • 键 (Key)：ComponentPublicInstance<{ doClose: () => void }>，表示 AuthBox 组件的实例代理对象。这个代理对象上预期有一个 doClose 方法，用于关闭对话框。
  • 值 (Value)：一个对象，包含：
    • options: 调用 AuthBox 时传入的配置。
    • callback: 一个可选的回调函数 (这里标记为 undefined，保留了扩展性)。
    • resolve: Promise 的 resolve 函数。当用户在 AuthBox 中完成操作 (如点击确认) 时，我们会调用这个函数来解决 (fulfill) Promise，并传递结果。
    • reject: Promise 的 reject 函数。如果发生错误或需要中断操作，会调用此函数。
  • 为什么需要它？ 当 AuthBox 组件内部发生事件 (如用户点击按钮) 时，我们需要一种方式找到当初调用它时创建的那个 Promise，以便能将结果传递回去。instanceMap 就是通过组件实例这个桥梁来找到对应的 Promise 控制函数的。
  1. getAppendToElement：获取挂载目标
const getAppendToElement = (props: AuthBoxOptions): HTMLElement => {return document.body;
};
  • 作用：决定 AuthBox 组件的 DOM 元素最终应该被插入到页面的哪个位置。
  • 实现：这里简化了处理，固定返回 document.body， AuthBox 会被挂载到 <body> 元素的末尾。
  • 扩展性：在实际应用中，可以根据需要来自定义挂载位置。
  1. genContainer：创建临时容器
const genContainer = (): HTMLDivElement => {return document.createElement("div");
};
  • 作用：创建一个临时的 <div> 元素。
  • 为什么需要临时容器？ Vue 的 render 函数需要一个容器元素来渲染虚拟节点。我们先将组件渲染到这个临时容器中，然后再将容器内的实际 DOM 元素（即 AuthBox 的根元素）移动到由 getAppendToElement 指定的最终挂载点。
  1. initInstance：初始化组件实例
const initInstance = (props: AuthBoxOptions, container: HTMLElement, appContext: AppContext | null = null) => {// 1. 使用组件构造函数和props创建虚拟节点const vnode = createVNode(AuthBoxConstructor, props);// 2. 如果提供了应用上下文，则设置到vnode上if (appContext) {vnode.appContext = appContext;}// 3. 将虚拟节点渲染到临时容器中render(vnode, container);// 4. 将容器中渲染好的DOM元素移动到目标挂载点(通常是body)getAppendToElement(props).appendChild(container.firstElementChild!);// 5. 返回组件实例return vnode.component;
};
  • 作用：这个函数负责创建 AuthBox 组件的 Vue 实例并将其渲染到 DOM 中。
  • 步骤：
    1. 创建虚拟节点 (VNode)：使用 createVNode(AuthBoxConstructor, props)。AuthBoxConstructor 是导入的 .vue 文件，props 是传递给组件的属性。
    2. 设置应用上下文 (appContext)：如果调用时传入了 appContext，则将其设置到 vnode.appContext。它能确保动态创建的组件实例可以访问到主 Vue 应用实例中注册的全局组件、指令、插件以及 provide/inject 等。
    3. 渲染到临时容器：调用 render(vnode, container)，将虚拟节点转换成真实的 DOM 元素，并插入到 container（由 genContainer 创建的 div）中。
    4. 移动到最终挂载点：getAppendToElement(props).appendChild(container.firstElementChild!)。这一步是将 container 中的第一个子元素 (即 AuthBox 组件的根 DOM 元素) 移动到 document.body (或 getAppendToElement 返回的其他元素) 中。
    5. 返回组件实例：vnode.component 是实际的 Vue 组件实例对象，我们可以通过它访问组件的属性和方法。
  1. showAuthBox：显示对话框并处理回调
const showAuthBox = (options: AuthBoxOptions, appContext?: AppContext | null) => {const container = genContainer(); // 1. 创建临时容器// 2. 设置组件销毁时的回调options.onVanish = () => { // Linter Error: Property 'onVanish' does not exist on type 'AuthBoxOptions'.render(null, container); // 从DOM中彻底移除instanceMap.delete(vm);  // 从实例映射表中移除};// 3. 设置用户点击确认按钮的回调options.onConfirm = (userData: { username: string; password: string }) => { // Linter Errorconst currentInstance = instanceMap.get(vm)!;const resolveData: AuthBoxData = { /* ... */ action: "confirm" };currentInstance.resolve(resolveData);};// 4. 设置用户点击取消按钮的回调options.onCancel = () => { // Linter Errorconst currentInstance = instanceMap.get(vm)!;const resolveData: AuthBoxData = { /* ... */ action: "cancel" };currentInstance.resolve(resolveData);};// 5. 设置对话框关闭的回调 (例如点击遮罩层或右上角关闭按钮)options.onClose = () => { // Linter Errorconst currentInstance = instanceMap.get(vm)!;const resolveData: AuthBoxData = { /* ... */ action: "close" };currentInstance.resolve(resolveData);};const instance = initInstance(options, container, appContext)!;const vm = instance.proxy as ComponentPublicInstance< /* ... */ >; // 7. 获取组件实例代理return vm; // 8. 返回代理对象
};
  • 作用：这是实际处理 AuthBox 显示逻辑和事件回调的核心函数。
  • 步骤与解释：
    1. 创建容器：调用 genContainer()。
    2. 设置 options.onVanish：
      • 这个回调函数会在 AuthBox 组件从界面上完全消失时被调用。
      • 内部逻辑：
        • render(null, container): 这是 Vue 中卸载组件并从 DOM 中移除其内容的方法。
        • instanceMap.delete(vm): 从 instanceMap 中删除对此实例的引用，防止内存泄漏。
    3. 设置 options.onConfirm：
      • 当用户在 AuthBox 组件内部点击“确认”按钮时，AuthBox 组件会触发这个回调，并传入用户数据 (userData)。
      • 内部逻辑：
        • instanceMap.get(vm)!: 通过组件实例 vm 从 instanceMap 中获取之前存储的 Promise resolve 函数。
        • 构造 resolveData：包含用户名、密码和操作类型 (action: "confirm")。
        • currentInstance.resolve(resolveData): 调用 Promise 的 resolve 函数，将 resolveData 作为结果传递出去。这将使得等待此 Promise 的 await AuthBox(...) 调用得到结果。
    4. 设置 options.onCancel：
      • 当用户点击“取消”按钮时触发。
      • 逻辑与 onConfirm 类似，但 action 为 "cancel"，并且通常不包含用户输入数据。
    5. 设置 options.onClose：
      • 当对话框因其他方式关闭（如点击遮罩层、按下 Esc 键，或组件内部调用关闭逻辑）时触发。
      • 逻辑与 onCancel 类似，action 为 "close"。
    6. 初始化实例：调用 initInstance(options, container, appContext) 创建并挂载 AuthBox 组件。注意，这里的 options 对象已经被我们动态添加了 onVanish, onConfirm, onCancel, onClose 这些回调处理函数。AuthBox.vue 组件内部在合适的时机（如用户点击、组件卸载）就会调用这些通过 props 传递进来的函数。
    7. 获取组件代理 vm：instance.proxy 是组件实例的代理对象，通过它来调用组件的方法或访问其数据 (如果组件暴露了 doClose 方法和 AuthBoxState 中的状态)。
    8. 返回代理对象 vm：将 vm 返回。
  1. AuthBox 主函数 (函数式调用的入口)
async function AuthBox(options: AuthBoxOptions, appContext?: AppContext | null): Promise<AuthBoxData>;
function AuthBox(options: AuthBoxOptions, appContext: AppContext | null = null): Promise<AuthBoxData> {return new Promise((resolve, reject) => {const finalAppContext = appContext ?? (AuthBox as IAuthBox)._context;const vm = showAuthBox(options, finalAppContext);instanceMap.set(vm, {options,callback: undefined,resolve,reject});});
}
  • 作用：这是最终暴露给用户调用的函数。它使得我们可以像 const result = await AuthBox({ }); 这样使用。
  • 实现逻辑：
    1. 返回 Promise：核心在于 return new Promise((resolve, reject) => { ... });。这使得 AuthBox 函数的调用结果可以被 await 或者通过 .then() 方法处理。
    2. 确定应用上下文：const finalAppContext = appContext ?? (AuthBox as IAuthBox)._context;
      • 优先使用调用时直接传入的 appContext。
      • 如果没传，则尝试使用 (AuthBox as IAuthBox)._context。这是一个预设的或全局设置的 appContext (见后续解释)。
    3. 显示 AuthBox：const vm = showAuthBox(options, finalAppContext); 调用我们之前定义的 showAuthBox 函数，传入用户配置和确定的应用上下文。这将创建、挂载组件，并返回组件实例代理 vm。
    4. 存储到 instanceMap：instanceMap.set(vm, { options, callback: undefined, resolve, reject });
      • 它将当前创建的组件实例 vm 与新创建的 Promise 的 resolve 和 reject 函数关联起来，并存储到 instanceMap 中。
      • 这样，当 showAuthBox 中设置的 onConfirm, onCancel, onClose 等回调被 AuthBox.vue 组件内部触发时，它们可以通过 vm 从 instanceMap 中找到对应的 resolve (或 reject) 函数，从而完成 Promise，将数据传递给 AuthBox 函数的调用者。
  1. AuthBox.close：关闭所有实例
AuthBox.close = () => {instanceMap.forEach((_, vm) => {vm.doClose(); // 调用每个实例的doClose方法});instanceMap.clear(); // 清空映射表
};
  • 作用：提供一个静态方法，用于关闭所有当前通过 AuthBox 函数打开的对话框实例。
  • 实现：
    1. 遍历 instanceMap 中的所有组件实例代理 (vm)。
    2. 调用每个 vm 上的 doClose() 方法。这要求 AuthBox.vue 组件通过 defineExpose 暴露了一个名为 doClose 的方法，用于执行关闭自身的逻辑（比如设置一个内部状态让组件隐藏，然后触发过渡动画，最终触发 onVanish）。
    3. instanceMap.clear(): 清空映射表。

以上就是这个 index.ts 的详细解释，相信你能明白vue中的组件是如何通过函数式调用的了，这样的调用方式非常的方便。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/web/79352.shtml
繁体地址，请注明出处：http://hk.pswp.cn/web/79352.shtml
英文地址，请注明出处：http://en.pswp.cn/web/79352.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vite Proxy配置详解：从入门到实战应用

Vite Proxy配置详解：从入门到实战应用

Vite Proxy配置详解&#xff1a;从入门到实战应用 一、什么是Proxy代理&#xff1f; Proxy&#xff08;代理&#xff09;是开发中常用的解决跨域问题的方案。Vite内置了基于http-proxy的代理功能&#xff0c;可以轻松配置API请求转发。 二、基础配置 在vite.config.js中配置…
阅读更多...
图像画质算法记录(前言)

图像画质算法记录(前言)

一、背景介绍 本篇主要是对图像画质增强相关&#xff0c;进行简单整理和记录。 二、整体流程 整体效果主要受到两部分影响&#xff1a; 1、前端isp处理。 2、后端画质增强。 三、isp常规流程 可以参考&#xff1a;刘斯宁&#xff1a;Understanding ISP Pipeline 四、后端画质…
阅读更多...
Qt 中信号与槽（signal-slot）机制支持 多种连接方式（ConnectionType）

Qt 中信号与槽（signal-slot）机制支持 多种连接方式（ConnectionType）

Qt 中信号与槽&#xff08;signal-slot&#xff09;机制支持 多种连接方式&#xff08;ConnectionType&#xff09; Qt 中信号与槽&#xff08;signal-slot&#xff09;机制支持 多种连接方式&#xff08;ConnectionType&#xff09;&#xff0c;用于控制信号发出后如何调用槽…
阅读更多...
卷积神经网络实战（4）代码详解

卷积神经网络实战（4）代码详解

目录 一、导包 二、数据准备 1.数据集 2. 标准化转换(Normalize) 3.设置dataloader 三、定义模型 四、可视化计算图&#xff08;不重要&#xff09; 五、评估函数 六、Tensorboard 一、导包 import matplotlib as mpl import matplotlib.pyplot as plt %matplotlib i…
阅读更多...
深入解析进程地址空间：从虚拟到物理的奇妙之旅

深入解析进程地址空间：从虚拟到物理的奇妙之旅

深入解析进程地址空间&#xff1a;从虚拟到物理的奇妙之旅 前言 各位小伙伴&#xff0c;还记得我们之前探讨的 fork 函数吗&#xff1f;当它返回两次时&#xff0c;父子进程中同名变量却拥有不同值的现象&#xff0c;曾让我们惊叹于进程独立性与写时拷贝的精妙设计。但你是否…
阅读更多...
opencv处理图像（二）

opencv处理图像（二）

接下来进入到程序线程设计部分 我们主线程负责图形渲染等操作&#xff0c;OpenGL的限制&#xff0c;opencv技术对传入图像加以处理&#xff0c;输出预期图像给主线程 QThread 我之前也是在想给opencv开一个专门的线程&#xff0c;但经过了解有几个弊端&#xff0c;第一资源浪…
阅读更多...
学习threejs，使用Physijs物理引擎

学习threejs，使用Physijs物理引擎

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️Physijs 物理引擎1.1.1 ☘️…
阅读更多...
ARCGIS PRO DSK 选择坐标系控件（CoordinateSystemsControl ）的调用

ARCGIS PRO DSK 选择坐标系控件（CoordinateSystemsControl ）的调用

在WPF窗体上使用 xml&#xff1a;加入空间命名引用 xmlns:mapping"clr-namespace:ArcGIS.Desktop.Mapping.Controls;assemblyArcGIS.Desktop.Mapping" 在控件区域加入&#xff1a; <mapping:CoordinateSystemsControl x:Name"CoordinateSystemsControl&q…
阅读更多...
LangGraph(三)——添加记忆

LangGraph(三)——添加记忆

目录 1. 创建MemorySaver检查指针2. 构建并编译Graph3. 与聊天机器人互动4. 问一个后续问题5. 检查State参考 1. 创建MemorySaver检查指针 创建MemorySaver检查指针&#xff1a; from langgraph.checkpoint.memory import MemorySavermemory MemorySaver()这是位于内存中的检…
阅读更多...
深入理解Mysql

深入理解Mysql

BufferPool和Changebuffer是如何加快读写速度的? BufferPool 在Mysql启动的时候 Mysql会申请连续的空间来存储BufferPool 每个页16kb 当控制块不足以存储信息的时候就会向后申请一个新的页 每个控制块都对应了一个缓存页 控制块占chunk的百分之5左右 LRU链表 Changebuffer …
阅读更多...
Python核心编程深度解析：作用域、递归与匿名函数的工程实践

Python核心编程深度解析：作用域、递归与匿名函数的工程实践

引言 Python作为现代编程语言的代表&#xff0c;其作用域管理、递归算法和匿名函数机制是构建高质量代码的核心要素。本文基于Python 3.11环境&#xff0c;结合工业级开发实践&#xff0c;深入探讨变量作用域的内在逻辑、递归算法的优化策略以及匿名函数的高效应用&#xff0c…
阅读更多...
《用MATLAB玩转游戏开发》贪吃蛇的百变玩法：从命令行到AI对战

《用MATLAB玩转游戏开发》贪吃蛇的百变玩法：从命令行到AI对战

《用MATLAB玩转游戏开发&#xff1a;从零开始打造你的数字乐园》基础篇&#xff08;2D图形交互&#xff09;-&#x1f40d; 贪吃蛇的百变玩法&#xff1a;从命令行到AI对战 &#x1f3ae; 欢迎来到这篇MATLAB贪吃蛇编程全攻略&#xff01;本文将带你从零开始&#xff0c;一步步…
阅读更多...
Android平台FFmpeg音视频开发深度指南

Android平台FFmpeg音视频开发深度指南

一、FFmpeg在Android开发中的核心价值 FFmpeg作为业界领先的多媒体处理框架&#xff0c;在Android音视频开发中扮演着至关重要的角色。它提供了&#xff1a; 跨平台支持&#xff1a;统一的API处理各种音视频格式完整功能链&#xff1a;从解码、编码到滤镜处理的全套解决方案灵…
阅读更多...
AI大模型驱动的智能座舱研发体系重构

AI大模型驱动的智能座舱研发体系重构

随着AI大模型&#xff08;如LLM、多模态模型&#xff09;的快速发展&#xff0c;传统智能座舱研发流程面临巨大挑战。传统座舱研发以需求驱动、功能固定、架构封闭为特点&#xff0c;而AI大模型的引入使得座舱系统向自主决策、动态适应、持续进化的方向发展。 因此思考并提出一…
阅读更多...
Day20 常见降维算法分析

Day20 常见降维算法分析

一、常见的降维算法 LDA线性判别PCA主成分分析t-sne降维 二、降维算法原理 2.1 LDA 线性判别 原理 &#xff1a;LDA&#xff08;Linear Discriminant Analysis&#xff09;线性判别分析是一种有监督的降维方法。它的目标是找到一个投影方向&#xff0c;使得不同类别的数据在…
阅读更多...
Python----机器学习（模型评估：准确率、损失函数值、精确度、召回率、F1分数、混淆矩阵、ROC曲线和AUC值、Top-k精度）

Python----机器学习（模型评估：准确率、损失函数值、精确度、召回率、F1分数、混淆矩阵、ROC曲线和AUC值、Top-k精度）

一、模型评估 1. 准确率&#xff08;Accuracy&#xff09;&#xff1a;这是最基本的评估指标之一&#xff0c;表示模型在测试集上正确 分类样本的比例。对于分类任务而言&#xff0c;准确率是衡量模型性能的直观标准。 2. 损失函数值&#xff08;Loss&#xff09;&#xff1…
阅读更多...
cdn 是什么？

cdn 是什么？

内容分发网络&#xff0c;Content Delivery Network 介绍 CDN&#xff08;Content Delivery Network&#xff09;是一种将内容分发到靠近用户的边缘服务器&#xff0c;以加速访问速度、减少延迟、降低源站压力的网络系统。 CDN 把网站的静态资源&#xff08;如 HTML、JS、CSS、…
阅读更多...
BUCK基本原理学习总结-20250509

BUCK基本原理学习总结-20250509

一、电感伏秒平衡特性 处于稳定状态的电感，开关导通时间（电流上升段）的伏秒数须与开关关断（电流下降段）时的伏秒数在数值上相等，尽管两者符号相反。这也表示，绘出电感电压对时间的曲线，导通时段曲线的面积必须等于关断时段曲线的面积。 二、BUCK的基本概念和原理 基…
阅读更多...
【K8S系列】Kubernetes常用 命令

【K8S系列】Kubernetes常用 命令

以下为的 Kubernetes 超全常用命令文档&#xff0c;涵盖集群管理、资源操作、调试排错等核心场景&#xff0c;结合示例与解析&#xff0c; 高效运维 Kubernetes 环境。 一、集群与节点管理 1. 集群信息查看 查看集群基本信息kubectl cluster-info # 显示API Server、DNS等核…
阅读更多...
【Django】REST 常用类

【Django】REST 常用类

ModelSerializer serializers.ModelSerializer 是 Django REST framework&#xff08;DRF&#xff09;里的一个强大工具&#xff0c;它能极大简化序列化和反序列化 Django 模型实例的流程。下面从多个方面详细介绍它&#xff1a; 1. 基本概念 序列化是把 Django 模型实例转化…
阅读更多...
最新文章

Copyright @ 2022~2023