增加了较复杂的接口和抽象类的例子

2026-07-16 10:33:49 +00:00 · 2024-04-08 21:28:16 +08:00
parent 4cc8cca557
commit 4fad7a3eb9
2 changed files with 542 additions and 3 deletions
@@ -546,7 +546,7 @@ edible.howToEat();

 ## 3. 接口的使用

-### 3.1. Comparable接口（理解）
+### 3.1. Comparable接口（了解）

 首先来回忆一下在数组那一章学习到的排序函数：

@@ -620,7 +620,7 @@ public class SortRectangles {

 > 挑战：如果圆形和方形面积可以参与比较，是不是数组中可以存在圆形和方形的对象，而且也可以排序？答案是肯定的。可以尝试对圆形和方形的混合数组进行排序。提示：最好不要在 圆形和方形的类上实现 Comparable 接口，而应该在其父类实现 Comparable 接口。想一想为什么？

-## 4. 接口和抽象类
+## 4. 接口和抽象类(了解)

 > In an interface, the data must be constants; an abstract class can have all types of data. Each method in an interface has only a signature without implementation; an abstract class can have concrete methods.
 >
@@ -637,6 +637,165 @@ public class SortRectangles {
 1. 实线箭头表示类的扩展；虚线街头表示接口的扩展方向；
 2. 所有类都有一个共同的超类 Object，但是接口没有共同的**超接口**。

-## 本章重点
+### 4.1. 补充说明（了解）
+
+Java 在类的继承的关系上是单继承方式，也就是说，在定义一个类的时候，有且只能有一个父类（C++是多继承，可以有多个父类）。但是在接口实现上可能有多个。一般来说，接口用来统一某些能力，但是这种能力很难以类属的方式来抽象。
+
+### 4.2. 接口与类属关系
+
+如下图：数码产品的分类。圆形的是耳机接口，半圆是`USB`接口（接口中的数字代表是2.0还是3.0接口标准）。
+
+![Alt text](img/%E6%8E%A5%E5%8F%A3%E8%AF%B4%E6%98%8E.drawio.svg)
+
+我们看到不论是耳机接口还是`USB`接口都很难抽象到父类，这两个能力（特性）是和类属无关的，但是又广泛存在于不同的数码产品中。同时我们注意到，`USB3`是`USB2`的升级，也就是说`USB3`由`USB2`扩展而来。接下来我们`UML`的方式来描述：
+
+#### 4.2.1. 类属关系：
+
+```mermaid
+classDiagram
+
+DigitalDevice <|-- Speaker
+DigitalDevice <|-- Mobile
+DigitalDevice <|-- Laptop
+
+Speaker <|-- SpeakerA
+Speaker <|-- SpeakerB
+
+Mobile <|-- MobileX
+Mobile <|-- MobileY
+
+Laptop <|-- LaptopA
+Laptop <|-- LaptopB
+
+class DigitalDevice{
+	<<Abstract>>
+	+ boolean status
+	+ on()
+	+ off()
+}
+
+class Speaker{
+	<<Abstract>>
+	+speak()*
+}
+
+class Mobile{
+	<<Abstract>>
+	+phoneCall(String number)*
+}
+
+class Laptop{
+	<<Abstract>>
+	+runProgram(String file)*
+}
+
+```
+
+我们把相同的能力尽量向上级抽象，更便于我们使用多态的机制。
+
+抽象类：`DigitalDevice`
+
+1. 所有的数码设备都有状态`status`，要么开机，要么关机；
+2. 所有的数码设备都有开，和关的功能，因此用两个函数`on()`和`off()`描述；
+
+因此可以把上述的变量和函数抽象到`DigitalDevice`这样，所有的子类都具备上述的能力（注意：函数可能被覆盖）。
+
+对于特定的子类型：`Speaker`，`Mobile`，`Laptop`都有自己特有的能力：
+
+1. Speaker：`speak()` 播放声音；
+2. Mobile：`phoneCall(String number)`打电话；
+3. Laptop：`runProgram(String file)`运行程序。
+
+上述三个类，连同`DigitalDevice`都是抽象类。真正可以实例化的类是：
+
+1. `SpeakerA`
+2. `SpeakerB`
+3. `MobileX`
+4. `MobileY`
+5. `LaptopA`
+6. `LaptopB`
+
+#### 4.2.2. 接口描述
+
+`Line35` 是`3.5mm` 的耳机接口。
+
+```mermaid
+classDiagram
+
+Usb2 <|-- Usb3
+
+class Line35{
+	<<Interface>>
+	+lineOn()*
+	+lineOff()*
+}
+
+class Usb2{
+	<<Interface>>
+	byte[] read()*
+	write(byte[] data)*
+}
+
+class Usb3{
+	<<Interface>>
+	negotiationSpeed()*
+}
+
+Line35 <|.. SpeakerA
+Usb2 <|.. SpeakerA
+Usb2 <|.. MobileX
+Line35 <|.. MobileX
+Line35 <|.. LaptopB
+
+Usb3 <|.. MobileY
+Usb3 <|.. LaptopA
+Usb3 <|.. LaptopB
+
+
+Line35 <|.. SpeakerB
+
+
+
+```
+
+再看看接口的实现关系：
+
+1. Usb3 的父接口是 Usb2；
+2. 最终不同的数码产品实现的不同的接口。
+
+### 4.3. Java 代码
+
+
+
+```java
+Object speakerA = new SpeakerA();
+Object speakerB = new SpeakerB();
+
+Object mobileX = new MobileX();
+Object mobileY = new MobileY();
+
+Object laptopA = new LaptopA();
+Object laptopB = new LaptopB();
+
+System.out.println(laptopB instanceof DigitDevice);		// true
+System.out.println(laptopB instanceof Speaker);			// false
+System.out.println(laptopB instanceof Laptop);			// true
+System.out.println(laptopB instanceof LaptopB);			// true
+
+Usb2 usb2 = (Usb2)laptopB;								// 合法，因为USB3是USB2的子接口，具备USB2的所有能力
+usb2.read();											// 合法
+usb2.negotiationSpeed();								// 编译错误，没有这个函数。Java认为 usb2 的引用变量类型是 USB2 没有该函数；
+Usb3 usb3 = (Usb3)laptopB;								// 合法，实现了USB3的接口
+usb3.negotiationSpeed();								// 合法
+
+Line35 line35 = (Line35)laptopB;						// 合法，实现了Line35的接口
+line35.lineOn();										// 合法
+
+Laptop laptop = (Laptop)laptopB;						// 合法，是Laptop的子类型
+laptop.runProgram("C:/a.exe");							// 合法
+laptop.on();											// 合法，因为是DigitalDevice的子类型，具有`on()`和`off`的函数；
+```
+顺着继承的关系和接口的实现关系来阅读上述的代码。
+## 5. 本章重点

 除特别标注，其他都是重点，需要掌握。
@@ -0,0 +1,380 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="684px" height="391px" viewBox="-0.5 -0.5 684 391" content="&lt;mxfile&gt;&lt;diagram id=&quot;oLvpesJ21wSQ_ucKyNbu&quot; name=&quot;Page-1&quot;&gt;7Ztbc9o4FMc/jR+TkS3feOSWtJlNpllyafqmYgFaZMtrTIB++pWxjC0LCswCap1mhtg6loz0O8d/XSwM2A2XtwmKJ/cswNSwQLA0YM+wLM+H/H9mWOUG17RzwzghQW4yS8OA/MDCCIR1TgI8kzKmjNGUxLJxyKIID1PJhpKELeRsI0blb43RGCuGwRBR1fpKgnSSW30HlPZPmIwnxTebQFwJUZFZGGYTFLBFxQT7BuwmjKX5WbjsYpqxK7jk5W52XN1ULMFRekgBT1QjXRVtwwFvqkhGLOKHziQNKU+Z/JTfNll95Qlw7RTJtyxZJHpLKbXapIJ2Br68KbfcEErF9VmKkrTI8Z2y4bQwikzZl6uNE+2dsXkyFPW3RDygZIxFLjc3ZS2rFBNAbjELMa8qz5BgilLyLjsZiVgZb/KVOPmJILqdbutYukuS5nA9RyTfKpdKtlliVQX9u7nE1+USU9zjHdG5uOtHeARM69TARdEvjPCaWEBIu+MLYRPKbrpAvkVeKVGq5rZNNQ7ypLXFkS5NM2gxiiSPuv/OM0HtVM9AgFJ0NeOtxVejBI3DgmiR5e7ppXv3FPDP51XwiS6+DZ5X9+T5x2N2jDqTYXgT8c8Cddf21eOKH8MHhl6X02H4Ms/K3T09yPe5fbGDbuU+07/jbxYFb68Lev/PZ/oAHunD82NxrFd+nB17ZExSRIvGckx5e/OrSjAnbB4FOBDxs5iQFA9itA6VBe+c5djeGV7vOEnx8qeRI67Cli9FgCcCYFF2lC1hmlT6SAh2h9qhz/bxj/JGb60m6a275fm3dQmuBf90gruc4uhyiqto5yDGaIoTxVd7BENWlxPIx2ZkvOlAnMP0wzlBqNoX1g8bwmqwXoFr4Jp7I5anvuCE8OZxf106jP0tYaxtfG05f7Rll1M8XU7xFW25Z98Jd4huabFNjdLiXlharF80VIuJiBSr2maDx69/NFNAtnqlpcsrRW0qEvIXilMWa5cQF+iTkGIIrw7a2tq5bKb5q2IkdeCs7xRcnF1c1MnwxUeznkYu6iA/74i/ascCfY1YvB1Y3rRjsVsasajDtlxz9YtLXXQviqW1A4t+bfFMfVhsVXMtBchsguLslCX7Fx5HfMDSZTTLyotCAHwEsiHOiEVpxT5a/61HOQmbYqmE461LnKI38xyZrG8qZK0zrWHaqmo3iCxsQX1kVeFXlyb/F1kH4NFxZM1ep3saso6lMWbVvqNBZN3aiuRFyardT4PIelAf2WKvxk/fA1NK4hneTxXN4nybyYgssy6+jnkEEARIxQzWf9swd3oeOJXoWmC/NMBzYT7kdXszMMP6MPWSmK0Pg9m2fH2Y1SWYpmL26is6l8SsjoGbitm0rWtZnWFLncadC7S7RZ37vuEDowONvmu0ukannZ34faPtGH3H8G+MtjoC4Y1NZeoyNLF6XSUvTIiSccSTQ44we5vZydCRIaJtcSEkQUB3ubmcUxczGrFX1HRO5B7Tq7nHhqp7/HO5R1X1Bs0F60K+LfDPNfpzj37TX7zC2STWL3DK9znHvK0/OFCl/SPisZM2topw0LCBBCqh2aCJiVObmFw0NNWltedBx7oGCt7Gqm59C+FFNVcde3D88CPhd2oTmTPi58nytw75HuDyByOw/x8=&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <path d="M 285.22 33.33 L 148 95" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 291.61 30.46 L 286.66 36.52 L 283.79 30.14 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 347.21 38.01 L 338 95" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 348.32 31.1 L 350.66 38.57 L 343.75 37.46 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 371.42 32.99 L 528 95" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 364.91 30.41 L 372.71 29.74 L 370.13 36.24 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="281" y="0" width="90" height="30" rx="4.5" ry="4.5" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 15px; margin-left: 282px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <span data-slate-fragment="JTVCJTdCJTIydHlwZSUyMiUzQSUyMnBhcmFncmFwaCUyMiUyQyUyMmNoaWxkcmVuJTIyJTNBJTVCJTdCJTIydGV4dCUyMiUzQSUyMkRpZ2l0YWwlMjIlN0QlNUQlN0QlNUQ=" style="">
+                                    Digital
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="326" y="19" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Digital
+                </text>
+            </switch>
+        </g>
+        <path d="M 119.95 135.92 L 88 170" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 124.74 130.82 L 122.5 138.32 L 117.39 133.53 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 175.1 136.69 L 198 170" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 171.13 130.92 L 177.98 134.71 L 172.21 138.67 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="103" y="95" width="90" height="35" rx="5.25" ry="5.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 113px; margin-left: 104px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Speaker
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="148" y="116" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Speaker
+                </text>
+            </switch>
+        </g>
+        <path d="M 312.77 137.64 L 301.97 167.87" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 315.12 131.05 L 316.06 138.82 L 309.47 136.47 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 367.16 134.64 L 418 170" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 361.42 130.64 L 369.16 131.76 L 365.17 137.51 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="293" y="95" width="90" height="35" rx="5.25" ry="5.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 113px; margin-left: 294px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Mobile
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="338" y="116" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Mobile
+                </text>
+            </switch>
+        </g>
+        <path d="M 505.5 138.12 L 505.5 170" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 505.5 131.12 L 509 138.12 L 502 138.12 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 557.88 133.38 L 638 170" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 551.52 130.46 L 559.34 130.19 L 556.43 136.56 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="483" y="95" width="90" height="35" rx="5.25" ry="5.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 113px; margin-left: 484px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Laptop
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="528" y="116" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Laptop
+                </text>
+            </switch>
+        </g>
+        <rect x="43" y="170" width="90" height="35" rx="5.25" ry="5.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 188px; margin-left: 44px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                SpeakerA
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="88" y="191" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    SpeakerA
+                </text>
+            </switch>
+        </g>
+        <rect x="153" y="170" width="90" height="35" rx="5.25" ry="5.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 188px; margin-left: 154px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                SpeakerB
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="198" y="191" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    SpeakerB
+                </text>
+            </switch>
+        </g>
+        <rect x="263" y="170" width="90" height="35" rx="5.25" ry="5.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 188px; margin-left: 264px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                MobileX
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="308" y="191" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    MobileX
+                </text>
+            </switch>
+        </g>
+        <rect x="373" y="170" width="90" height="35" rx="5.25" ry="5.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 188px; margin-left: 374px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                MobileY
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="418" y="191" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    MobileY
+                </text>
+            </switch>
+        </g>
+        <rect x="483" y="170" width="90" height="35" rx="5.25" ry="5.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 188px; margin-left: 484px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                LaptopA
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="528" y="191" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    LaptopA
+                </text>
+            </switch>
+        </g>
+        <rect x="593" y="170" width="90" height="35" rx="5.25" ry="5.25" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 188px; margin-left: 594px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                LaptopB
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="638" y="191" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    LaptopB
+                </text>
+            </switch>
+        </g>
+        <path d="M 58 211 Q 78 211 78 226 Q 78 241 58 241 Z" fill="#008a00" stroke="#005700" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 226px; margin-left: 59px;">
+                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                2
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="68" y="230" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    2
+                </text>
+            </switch>
+        </g>
+        <path d="M 276 211 Q 296 211 296 226 Q 296 241 276 241 Z" fill="#008a00" stroke="#005700" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 226px; margin-left: 277px;">
+                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                2
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="286" y="230" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    2
+                </text>
+            </switch>
+        </g>
+        <path d="M 408 211 Q 428 211 428 226 Q 428 241 408 241 Z" fill="#0050ef" stroke="#001dbc" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 226px; margin-left: 409px;">
+                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                3
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="418" y="230" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    3
+                </text>
+            </switch>
+        </g>
+        <path d="M 503 211 Q 523 211 523 226 Q 523 241 503 241 Z" fill="#0050ef" stroke="#001dbc" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 226px; margin-left: 504px;">
+                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                3
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="513" y="230" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    3
+                </text>
+            </switch>
+        </g>
+        <path d="M 613 211 Q 633 211 633 226 Q 633 241 613 241 Z" fill="#0050ef" stroke="#001dbc" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 226px; margin-left: 614px;">
+                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                3
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="623" y="230" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    3
+                </text>
+            </switch>
+        </g>
+        <ellipse cx="103" cy="226" rx="15" ry="15" fill="#f0a30a" stroke="#bd7000" pointer-events="all"/>
+        <ellipse cx="198" cy="226" rx="15" ry="15" fill="#f0a30a" stroke="#bd7000" pointer-events="all"/>
+        <ellipse cx="326" cy="226" rx="15" ry="15" fill="#f0a30a" stroke="#bd7000" pointer-events="all"/>
+        <ellipse cx="658" cy="226" rx="15" ry="15" fill="#f0a30a" stroke="#bd7000" pointer-events="all"/>
+        <ellipse cx="40.5" cy="335" rx="15" ry="15" fill="#f0a30a" stroke="#bd7000" pointer-events="all"/>
+        <rect x="0.5" y="360" width="80" height="30" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 375px; margin-left: 2px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                耳机接口
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="41" y="380" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="15px" text-anchor="middle">
+                    耳机接口
+                </text>
+            </switch>
+        </g>
+        <path d="M 311 320 Q 331 320 331 335 Q 331 350 311 350 Z" fill="#008a00" stroke="#005700" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 335px; margin-left: 312px;">
+                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                2
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="321" y="339" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    2
+                </text>
+            </switch>
+        </g>
+        <path d="M 413 335 L 337.37 335" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 332.12 335 L 339.12 331.5 L 337.37 335 L 339.12 338.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 413 320 Q 433 320 433 335 Q 433 350 413 350 Z" fill="#0050ef" stroke="#001dbc" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 18px; height: 1px; padding-top: 335px; margin-left: 414px;">
+                        <div data-drawio-colors="color: #ffffff; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(255, 255, 255); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                3
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="423" y="339" fill="#ffffff" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    3
+                </text>
+            </switch>
+        </g>
+        <rect x="281" y="360" width="80" height="30" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 375px; margin-left: 282px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                USB2.0
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="321" y="380" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="15px" text-anchor="middle">
+                    USB2.0
+                </text>
+            </switch>
+        </g>
+        <rect x="383" y="360" width="80" height="30" fill="none" stroke="none" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 375px; margin-left: 384px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 15px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                USB3.0
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="423" y="380" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="15px" text-anchor="middle">
+                    USB3.0
+                </text>
+            </switch>
+        </g>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>