低代碼拖拽實現與bpmn-js詳解

低代碼平臺中的可視化拖拽功能是其核心魅力所在，它讓構建應用變得像搭積木一樣直觀。下面我將為你梳理其實現原理，并詳細介紹 vue-draggable 這個常用工具。

🧱 一、核心架構：三大區域與數據驅動

低代碼編輯器界面通常分為三個核心區域，它們協同工作：

  1. 物料區（左側）：存放所有可拖拽的預置組件（如按鈕、輸入框、容器等）。
  2. 畫布區（中部）：用戶在此進行拖拽編排，組件在此區域實時渲染。
  3. 屬性面板（右側）：當在畫布上選中某個組件時，這里會顯示其可配置的屬性。

所有這些操作的背后，都有一個核心數據驅動機制：整個頁面的結構完全由一個 JSON 對象 來描述和維護。你的每一個拖拽、配置操作，本質上都是在增刪改查這個 JSON 對象。

{"type": "container","children": [{"type": "input","props": { "label": "姓名", "placeholder": "請輸入..." }},{"type": "button","props": { "type": "primary", "text": "提交" }}]
}

🖱? 二、拖拽實現的兩種技術路徑

實現拖拽交互，主要有兩種主流方式：

  1. 原生 HTML5 Drag and Drop API：功能強大，支持跨瀏覽器文件拖拽，但事件控制相對復雜，定制化難度較高。
  2. 基于鼠標/觸摸事件模擬：通過監聽 mousedown, mousemove, mouseup（移動端則是 touchstart, touchmove, touchend）來實現。這種方式更靈活，能實現更精細的交互控制，是大多數低代碼平臺的選擇。

?? 三、Vue-Draggable 的工作原理與核心配置

vue-draggable 是一個基于 Sortable.js 的 Vue 組件，它封裝了拖拽的復雜邏輯，讓你可以輕松實現列表排序和跨列表拖拽。

核心工作機制：
  • 它通過 v-model 綁定你的數據數組，實現了數據與視圖的雙向同步。當你拖拽改變元素順序后，綁定的數組會自動更新，無需手動操作 DOM。
  • 它提供了豐富的生命周期事件（如 start, end, add, update），讓你可以在拖拽的不同階段插入自定義邏輯。
常用配置項：
配置項說明示例值/用途
v-model綁定數據，實現雙向同步v-model="myList"
group定義可拖拽的組。同名組內元素可相互拖拽。pull 和 put 可控制拖出和放入group="{ name: 'widgets', pull: 'clone', put: true }"
animation拖拽時的動畫時長（單位 ms），提升視覺體驗:animation="150"
ghost-class拖拽時被移動元素的占位符樣式類ghost-class="ghost-style"
chosen-class被選中拖拽元素的樣式類chosen-class="chosen-style"
drag-class正在拖拽元素的樣式類drag-class="dragging-style"
handle指定拖拽手柄的選擇器。只有點擊手柄才能拖拽handle=".drag-handle"
filter指定不可拖拽元素的選擇器filter=".no-drag"
disabled禁用拖拽:disabled="true"
force-fallback強制使用備用模式，增強兼容性:force-fallback="true"
基本代碼示例：
<template><div><!-- 物料區 --><div class="widget-area"><div v-for="item in widgetList" :key="item.type" class="widget" draggable="true" @dragstart="onDragStart($event, item)">{{ item.name }}</div></div><!-- 畫布區 --><draggable v-model="pageSchema" group="widgets" item-key="id" class="canvas-area" @add="onWidgetAdded"@change="onSchemaChange"><template #item="{ element }"><component :is="element.type" v-bind="element.props" /></template></draggable></div>
</template><script>
import draggable from 'vuedraggable'
import { Button, Input } from 'your-ui-library'export default {components: { draggable, Button, Input },data() {return {widgetList: [ /* 預定義的組件列表 */ ],pageSchema: [ /* 綁定畫布上的組件數據 */ ]}},methods: {onDragStart(event, widget) {// 傳遞拖拽數據，通常為組件類型或配置event.dataTransfer.setData('widget-type', widget.type)},onWidgetAdded(event) {console.log('新組件加入了畫布', event)// 通常在這里為新添加的組件生成唯一ID或初始化默認屬性},onSchemaChange(event) {console.log('畫布結構發生了變化', event)// 自動觸發保存或預覽}}
}
</script>

🧠 四、高級實現技巧與優化策略

  1. 跨 iframe 拖拽：
    復雜場景中，物料區和畫布可能在不同 iframe。這時需使用 postMessage 進行跨框架通信，協同拖拽狀態。

  2. 性能優化：

    • 虛擬滾動 (Virtual Scrolling)：當畫布內組件數量極多時，只渲染可視區域內的組件，大幅提升性能。
    • 懶加載 (Lazy Loading)：對圖片等非關鍵資源進行懶加載，減少初始負載。
    • 防抖 (Debounce)：對頻繁觸發的事件（如屬性實時更新）進行防抖處理，避免不必要的計算和渲染。

  3. 可視化反饋與用戶體驗：

    • 拖拽占位符 (Ghost Preview)：拖拽時顯示一個半透明的組件預覽，提升操作確定性。
    • 吸附對齊 (Snapping)：拖拽靠近參考線或網格時自動吸附，便于精準布局。
    • 實時預覽：提供“預覽模式”，切換后即可看到最終用戶所見的界面效果。

?? 五、設計考量與注意事項

  • 組件唯一標識：畫布上的每個組件都必須有唯一ID（如 id），用于精準定位、選中和更新屬性。
  • 撤銷/重做 (Undo/Redo)：實現命令歷史棧，記錄每一次對核心 JSON Schema 的操作，這是提供良好編輯體驗的關鍵。
  • 組件間通信：畫布上組件如何通信？通常可采用 Event Bus 或 Vuex/Pinia 進行狀態管理，也可利用父組件進行事件派發和監聽。

💎 總結

向面試官解釋時，你可以這樣總結：

“低代碼平臺的拖拽功能核心是 ‘數據驅動視圖’ 。我們通過 vue-draggable 這類庫監聽拖拽事件，本質上是操作一個代表頁面結構的 JSON 對象。當用戶在畫布上拖拽組件時，我們更新這個 JSON，然后由框架（如 Vue）自動遞歸渲染出最終界面。

關鍵點在于處理好數據同步（v-model）、組件映射（JSON type 到真實組件）和用戶體驗（如動畫、預覽）。同時，還要考慮性能（虛擬滾動）、擴展性（自定義組件）和專業功能（撤銷重做、吸附對齊）等。”

bpmn-js 拖拽、渲染和屬性修改實現詳解

1. 拖拽功能的實現

調色板（Palette）實現

function createAction(type, group, className, title, options) {function createListener(event) {var shape = elementFactory.createShape(assign({ type: type }, options));if (options) {shape.businessObject.di.isExpanded = options.isExpanded;}create.start(event, shape);}// ... return {group: group,className: className,title: title || translate('Create {type}', { type: shortType }),action: {dragstart: createListener,click: createListener}};
}

創建過程

當用戶開始拖拽時，會執行以下步驟：
3. 在拖拽過程中，系統會實時顯示元素的預覽效果
4. 當用戶在畫布上釋放鼠標時，元素會被正式添加到圖中

2. 畫布渲染（Canvas和SVG）

渲染器架構

bpmn-js使用基于SVG的渲染機制，主要通過[BpmnRenderer.js]實現。渲染器繼承自diagram-js的BaseRenderer，負責將BPMN元素轉換為SVG圖形。

具體渲染過程

  1. 每種BPMN元素類型都有對應的渲染方法：

    'bpmn:Task': function(parentGfx, element) {var attrs = {fill: getFillColor(element, defaultFillColor),stroke: getStrokeColor(element, defaultStrokeColor)};var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);renderEmbeddedLabel(parentGfx, element, 'center-middle');attachTaskMarkers(parentGfx, element);return rect;
}

  2. 元素通過SVG操作庫（tiny-svg）繪制：

    • 使用[drawRect]繪制矩形
    • 使用[drawCircle]繪制圓形
    • 使用[drawPath])繪制路徑

  3. 渲染結果被添加到畫布的SVG容器中：

    var defs = domQuery('defs', canvas._svg);

Canvas結構

畫布由多個圖層組成：

  • base layer - 基礎層，包含網格等
  • element layer - 元素層，包含所有BPMN元素
  • overlay layer - 覆蓋層，包含標簽等附加信息

3. 屬性修改和實時渲染

屬性面板

雖然bpmn-js核心庫不包含屬性面板，但通常與bpmn-js-properties-panel插件一起使用。屬性面板的實現原理是：

  1. 監聽元素選擇事件
  2. 根據選中元素的類型顯示對應的屬性表單
  3. 用戶修改屬性時，通過modeling模塊更新元素

實時更新機制

當屬性發生變化時，會觸發以下流程：

  1. 通過[modeling.updateProperties)更新元素屬性
  2. 觸發相應的事件，如’element.changed’
  3. 重新渲染元素以反映更改

示例代碼：

// 更新元素屬性
modeling.updateProperties(element, {name: '新任務名稱'
});// 這會觸發重繪，更新畫布上的顯示

重繪過程

當元素屬性更新后，會觸發重繪：

  1. 觸發’element.changed’事件
  2. Canvas檢測到變化，標記元素為dirty
  3. 在下一次渲染周期中，重新調用對應的renderer方法
  4. 舊的SVG元素被移除，新的SVG元素被創建并插入DOM

總結

整個流程可以概括為：

  1. 拖拽實現：PaletteProvider提供可拖拽元素，通過create模塊處理拖拽創建過程
  2. 畫布渲染：BpmnRenderer根據元素類型生成對應的SVG圖形，并添加到Canvas中
  3. 屬性修改：通過屬性面板修改元素屬性，使用modeling模塊更新數據
  4. 實時渲染：屬性更改后觸發重繪事件，重新渲染對應元素

這套架構設計使得bpmn-js具有良好的擴展性和可維護性，各個模塊職責清晰，便于定制和擴展。

讓我通過分析bpmn-js中的相關引用和代碼來解釋Canvas的實現原理。

Canvas的具體實現

Canvas是diagram-js框架的核心組件之一，它負責管理整個繪圖區域。雖然我們無法直接查看diagram-js的源碼，但通過bpmn-js中的使用方式和相關文檔，我們可以理解其實現原理。

1. Canvas的核心職責

Canvas在bpmn-js中主要負責：

  1. SVG容器管理 - 管理根SVG元素
  2. 圖層管理 - 管理不同的繪圖層
  3. 視圖變換 - 處理縮放、平移等操作
  4. 元素生命周期管理 - 添加、刪除、更新元素
  5. 坐標系統管理 - 處理不同坐標系之間的轉換

2. Canvas的結構實現

Canvas的內部結構大致如下：

djs-container (div)
└── djs-svg (svg)└── viewport (g)├── base layer (g)├── element layer (g)└── overlay layer (g)

3. 圖層管理實現

Canvas通過圖層來組織不同類型的元素：

// 簡化的圖層實現概念
Canvas {_layers: {'base': SVGElement,'element': SVGElement,'overlay': SVGElement},// 獲取指定圖層getLayer(name) {return this._layers[name];},// 創建新圖層createLayer(name) {var layer = document.createElementNS('http://www.w3.org/2000/svg', 'g');layer.setAttribute('class', 'layer ' + name);this._svg.appendChild(layer);this._layers[name] = layer;return layer;}
}

4. 視圖變換實現

Canvas通過管理viewport元素的transform屬性來實現視圖變換：

// 簡化的視圖變換實現概念
Canvas {_viewport: SVGElement,  // viewport元素_viewbox: {x: 0,y: 0,width: 1000,height: 1000},// 縮放實現zoom(scale, center) {var transform = 'translate(' + this._viewbox.x + ',' + this._viewbox.y + ') scale(' + scale + ')';this._viewport.setAttribute('transform', transform);// 觸發視圖變化事件this._eventBus.fire('canvas.viewbox.changed', { viewbox: this._viewbox });},// 平移實現scroll(delta) {this._viewbox.x += delta.dx;this._viewbox.y += delta.dy;var transform = 'translate(' + this._viewbox.x + ',' + this._viewbox.y + ') scale(' + this._scale + ')';this._viewport.setAttribute('transform', transform);}
}

5. 元素管理實現

Canvas負責管理添加到畫布中的所有元素：

// 簡化的元素管理實現概念
Canvas {_elements: {},  // 存儲所有元素的字典// 添加形狀元素addShape(shape, parent) {// 創建SVG元素var gfx = this._elementRegistry.getGraphics(shape) || this._graphicsFactory.create('shape', shape);// 添加到對應圖層this.getLayer('element').appendChild(gfx);// 存儲元素引用this._elements[shape.id] = shape;// 觸發事件this._eventBus.fire('canvas.shape.added', { shape: shape });},// 獲取元素的圖形表示getGraphics(element) {return this._elementRegistry.getGraphics(element);}
}

6. 坐標系統實現

Canvas管理多種坐標系統之間的轉換：

// 簡化的坐標轉換實現概念
Canvas {// 畫布坐標轉視圖坐標viewboxToCanvas(point) {return {x: (point.x - this._viewbox.x) / this._scale,y: (point.y - this._viewbox.y) / this._scale};},// 視圖坐標轉畫布坐標canvasToViewbox(point) {return {x: point.x * this._scale + this._viewbox.x,y: point.y * this._scale + this._viewbox.y};}
}

7. 事件系統實現

Canvas集成了事件系統來處理各種交互：

// 簡化的事件系統實現概念
Canvas {_eventBus: EventBus,  // 事件總線// 綁定事件on(event, callback) {this._eventBus.on(event, callback);},// 觸發事件fire(event, context) {this._eventBus.fire(event, context);}
}

在bpmn-js中的使用

在bpmn-js中，Canvas通過依賴注入方式提供服務：

// 在BpmnRenderer中使用Canvas
export default function BpmnRenderer(config, eventBus, styles, pathMap,canvas, textRenderer, priority) {BaseRenderer.call(this, eventBus, priority);// 使用canvas獲取SVG定義部分var defs = domQuery('defs', canvas._svg);// ...
}

Canvas還用于創建和管理SVG元素：

// 在PaletteProvider中使用canvas
function PaletteProvider(palette, canvas, /* ... */) {this._palette = palette;this._canvas = canvas;// ...
}

實際工作流程

當創建一個元素時，完整的流程如下：

  1. 用戶交互 - 用戶從調色板拖拽元素
  2. 創建元素 - PaletteProvider調用create.start創建元素
  3. 添加到畫布 - Canvas負責將元素添加到SVG中
  4. 渲染元素 - BpmnRenderer負責繪制元素的SVG表示
  5. 事件通知 - 觸發相應事件通知其他組件
// 簡化的完整流程
// 1. 創建元素
var shape = elementFactory.createShape({ type: 'bpmn:Task' });// 2. 添加到畫布
canvas.addShape(shape);// 3. 渲染（由框架自動處理）
// BpmnRenderer會收到添加元素的通知并進行渲染// 4. 觸發事件
eventBus.fire('shape.added', { shape: shape });

總結

Canvas的具體實現基于以下幾個關鍵點：

  1. SVG容器管理 - 管理根SVG元素和視圖
  2. 圖層系統 - 通過分層組織不同類型的元素
  3. 視圖變換 - 通過viewport的transform屬性實現縮放和平移
  4. 元素管理 - 負責元素的添加、刪除和更新
  5. 坐標系統 - 管理不同坐標系之間的轉換
  6. 事件系統 - 集成事件總線處理各種交互

這種設計使得Canvas既保持了SVG的所有優勢（矢量圖形、高清晰度、可交互等），又提供了高級的管理功能，大大簡化了復雜圖形應用的開發。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/922074.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/922074.shtml
英文地址，請注明出處：http://en.pswp.cn/news/922074.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【科研繪圖系列】R語言繪制模型預測與數據可視化

【科研繪圖系列】R語言繪制模型預測與數據可視化

禁止商業或二改轉載，僅供自學使用，侵權必究，如需截取部分內容請后臺聯系作者! 文章目錄 介紹 加載R包 數據下載 函數 導入數據 數據預處理 畫圖 總結 系統信息 介紹 本文介紹了一種利用R語言進行海洋微生物群落動態分析的方法，該方法通過構建多個統計模型來預測不同環境…
閱讀更多...
TODO的面試（dw三面、sqb二面、ks二面）

TODO的面試（dw三面、sqb二面、ks二面）

得物的前端三面&#xff08;通常是技術終面&#xff09;會深入考察你的技術深度、項目經驗、解決問題的思路以及職業素養。下面我結合搜索結果&#xff0c;為你梳理一份得物前端三面的常問問題及詳解&#xff0c;希望能助你一臂之力。 &#x1f9e0; 得物前端三面常問問題及詳解…
閱讀更多...
開發 PHP 擴展新途徑 通過 FrankenPHP 用 Go 語言編寫 PHP 擴展

開發 PHP 擴展新途徑 通過 FrankenPHP 用 Go 語言編寫 PHP 擴展

通過 FrankenPHP 用 Go 語言編寫 PHP 擴展 在 PHPVerse 2025 大會上&#xff08;JetBrains 為紀念 PHP 語言 30 周年而組織的會議&#xff09;&#xff0c;FrankenPHP 開發者 Kvin Dunglas 做了一個開創性的宣布&#xff1a;通過 FrankenPHP&#xff0c;可以使用 Go 語言創建 …
閱讀更多...
完美解決：應用版本更新，增加字段導致 Redis 舊數據反序列化報錯

完美解決：應用版本更新，增加字段導致 Redis 舊數據反序列化報錯

完美解決&#xff1a;應用版本更新&#xff0c;增加字段導致 Redis 舊數據反序列化報錯 前言 在敏捷開發和快速迭代的今天&#xff0c;我們經常需要為現有的業務模型增加新的字段。但一個看似簡單的操作&#xff0c;卻可能給正在穩定運行的系統埋下“地雷”。 一個典型的場景是…
閱讀更多...
66-python中的文件操作

66-python中的文件操作

1. 文件的編碼 UTF-8 GBK GB2312 Big5 GB18030 2. 文件讀取 文件操作步驟: 打開文件 讀\寫文件 關閉文件 open(name,mode,encoding) name:文件名字符串 “D:/haha.txt” mode: 只讀、寫入、追加 r:以只讀方式打開 w: 只用于寫 a :用于追加 encoding:編碼方式 # -*- coding: utf…
閱讀更多...
FPGA實例源代碼集錦：27個實戰項目

FPGA實例源代碼集錦：27個實戰項目

本文還有配套的精品資源&#xff0c;點擊獲取 簡介&#xff1a;FPGA是一種可編程邏輯器件&#xff0c;允許用戶根據需求配置硬件功能。本壓縮包提供27個不同的FPGA應用實例源代碼&#xff0c;旨在幫助初學者深入學習FPGA設計&#xff0c;并為專業工程師提供靈感。內容涵蓋了…
閱讀更多...
基于 Vue+Mapbox 的智慧礦山可視化功能的技術拆解

基于 Vue+Mapbox 的智慧礦山可視化功能的技術拆解

01、項目背景 在全球礦業加速向 “高端化、智能化、綠色化” 轉型的浪潮下&#xff0c;傳統礦業面臨的深地開采難題、效率瓶頸與安全隱患日益凸顯。 在礦業轉型的迫切需求與政策、技術支撐的背景下依托 GIS 技術&#xff0c;開展了 “中國智礦” GIS 開發項目&#xff0c;旨在…
閱讀更多...
進程狀態（Linux）

進程狀態（Linux）

進程狀態Linux進程狀態Linux進程狀態進程描述R運行狀態S睡眠狀態D磁盤休眠狀態T停止狀態t被追蹤狀態(調試狀態)X死亡狀態Z僵死狀態其實大致也就可以分為三種運行&#xff0c;阻塞&#xff0c;掛起。運行狀態每個cpu里都有一個運行隊列&#xff0c;進程在運行隊列里&#xff0c;…
閱讀更多...
物聯網領域中PHP框架的最佳選擇有哪些？

物聯網領域中PHP框架的最佳選擇有哪些？

物聯網&#xff08;IoT&#xff09;作為近年來快速發展的技術領域&#xff0c;已經滲透到智能家居、工業自動化、智慧城市等方方面面。作為Web開發中廣泛使用的語言&#xff0c;PHP憑借其易學易用、開發效率高和生態豐富的特點&#xff0c;也在物聯網領域找到了用武之地。 本文…
閱讀更多...
java反射（詳細教程）

java反射（詳細教程）

我們平常創建類的實例并調用類中成員需要建立在一個前提下&#xff0c;就是已經知道類名和類中成員的信息&#xff0c;靈活性大大降低。甚至在一些項目中還需要修改源碼來滿足使用條件&#xff0c;大大降低了操作的靈活性。Java 反射&#xff08;Reflection&#xff09;是 Java…
閱讀更多...
消息隊列-初識kafka

消息隊列-初識kafka

優缺點 消息隊列的優點&#xff1a; 實現系統解耦&#xff1a; :::color5 系統解耦解釋 有 MQ 時是 “服務 A 發消息到隊列&#xff0c;其他服務從隊列拿消息&#xff0c;新增服務接隊列就行”&#xff1b;無 MQ 時是 “服務 A 直接調其他服務的接口 / 依賴&#xff0c;新增 / …
閱讀更多...
實踐《數字圖像處理》之Canny邊緣檢測、霍夫變換與主動二值化處理在短線段清除應用中的實踐

實踐《數字圖像處理》之Canny邊緣檢測、霍夫變換與主動二值化處理在短線段清除應用中的實踐

在最近的圖像處理項目中&#xff0c;其中一個環節&#xff1a;圖片中大量短線&#xff08;不是噪聲&#xff09;&#xff0c;需要在下一步處理前進行清除。在確定具體實現時&#xff0c;碰到了Canny邊緣檢測、霍夫變換與主動二值化處理的辯證使用&#xff0c;相關邏輯從圖片灰度…
閱讀更多...
vue3與ue5通信-工具類

vue3與ue5通信-工具類

工具 ue5-simple.js /*** UE5 通信工具* 兩個核心方法&#xff1a;發送消息和接收消息*/// 確保全局對象存在 if (typeof window ! undefined) {window.ue window.ue || {};window.ue.interface window.ue.interface || {}; }/*** 生成 UUID*/ function generateUUID() {retu…
閱讀更多...
在kotlin中如何使用像java中的static

在kotlin中如何使用像java中的static

在 Kotlin 中&#xff0c;沒有直接的 static 關鍵字&#xff0c;但有幾種等效的方式來實現 Java 中靜態成員的功能&#xff1a; 1. 伴生對象 (Companion Object) - 最常用 class MyClass {companion object {// 靜態常量const val STATIC_CONSTANT "constant value"…
閱讀更多...
如何在 Spring Boot 中指定不同的配置文件？

如何在 Spring Boot 中指定不同的配置文件？

介紹 Spring Boot 提供了多種方式來管理和加載配置文件&#xff0c;特別是在多環境配置下&#xff0c;比如開發、測試和生產環境。通過指定不同的配置文件&#xff0c;可以靈活地調整應用程序的行為&#xff0c;以適應不同的需求。本文將介紹在 Spring Boot 中如何指定使用不同…
閱讀更多...
在centOS源碼編譯方式安裝MySQL5.7

在centOS源碼編譯方式安裝MySQL5.7

一、前言 在生產環境中部署數據庫時&#xff0c;很多人會選擇直接使用 yum/apt 包管理器 安裝 MySQL&#xff0c;這樣簡單快速&#xff0c;但缺點是版本受限&#xff0c;靈活性不足。對于需要指定版本、啟用特定編譯參數或優化的場景&#xff0c;源碼編譯安裝 MySQL 就顯得非常…
閱讀更多...
探討Hyperband 等主要機器學習調優方法的機制和權衡

探討Hyperband 等主要機器學習調優方法的機制和權衡

本篇文章Master Hyperband — An Efficient Hyperparameter Tuning Method in Machine Learning深入探討了Hyperband這一高效的超參數調優方法。文章的技術亮點在于其結合了多臂老虎機策略和逐次減半算法&#xff0c;能夠在大搜索空間中快速剔除表現不佳的配置&#xff0c;從而…
閱讀更多...
Mysql：InnoDB 關鍵特性

Mysql：InnoDB 關鍵特性

目錄 一、插入緩沖&#xff08;Change Buffer&#xff09;→ 快遞驛站的 “臨時存放區” 二、兩次寫&#xff08;Double Write&#xff09;→ 重要文件的 “備份存檔” 三、自適應哈希索引&#xff08;AHI&#xff09;→ 圖書館的 “熱門書快捷查找區” 四、異步 IO&#x…
閱讀更多...
STM32-----SPI

STM32-----SPI

SPI簡介SCK:和I2C中SCL的時鐘線一個作用&#xff0c;都是在高電平拿出數據&#xff0c;在低電平寫數據MOSI:主機輸出從機輸入MISO:主機輸入從機輸出&#xff0c;只有當對應從機的SS為低電平&#xff0c;從機的MISO引腳才能設置推挽輸出&#xff0c;當從機SS為高電平時&#xff…
閱讀更多...
華為考試：HCIE數通考試難度分析

華為考試：HCIE數通考試難度分析

隨著信息技術的飛速發展&#xff0c;網絡技術已成為支撐各行各業運轉的重要基礎&#xff0c;市場對高水平網絡技術人才的需求持續增長。HCIE作為華為認證體系中的最高級別認證&#xff0c;代表了網絡技術領域的專業頂尖水平。本文將對HCIE數通認證的考試內容、難度及備考策略進…
閱讀更多...
最新文章

Copyright @ 2022~2023