vue 組件函數式調用實戰：以身份驗證彈窗為例

通常我們在 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