全网最详bpmn.js教材-事件篇

Posted 2023-05-04

参考技术A

bpmn.js 是一个BPMN2.0渲染工具包和web建模器, 使得画流程图的功能在前端来完成.

因为公司业务的需要因而要在项目中使用到 bpmn.js ,但是由于 bpmn.js 的开发者是国外友人, 因此国内对这方面的教材很少, 也没有详细的文档. 所以很多使用方式很多坑都得自己去找.在将其琢磨完之后, 决定写一系列关于它的教材来帮助更多 bpmn.js 的使用者或者是期于找到一种好的绘制流程图的开发者. 同时也是自己对其的一种巩固.

由于是系列的文章, 所以更新的可能会比较频繁, 您要是无意间刷到了且不是您所需要的还请谅解 😊.

不求赞👍不求心❤️. 只希望能对你有一点小小的帮助.

所有教材的github地址: 《bpmn-chinese-document》

上一章节我们介绍了利用 bpmn.js 与后台进行交互, 要是对 bpmn.js 不了解的小伙请移步:

《全网最详bpmn.js教材-http请求篇》

这一章节要讲解是关于 bpmn.js 的一些事件, 通过学习此章节你可以学习到:

很多时候你期望的是在用户在进行不同操作的时候能够监听到他操作的是什么, 从而做想要做的事情.

是进行了 shape 的新增还是进行了线的新增.

比如如下的一些监听事件:

继续在项目案例 bpmn-vue-basic 的基础上创建一个 event.vue 文件:

并在 success() 函数中添加上监听事件的函数:

如图所示, 在这里你就可以获取到相关节点的所有信息了:

案例Git地址: LinDaiDai-bpmn.js案例event.vue

上面介绍的是监听 modeler 并绑定事件, 可能你也需要监听用户点击图形上的 element 或者监听某个 element 改变:

继续在 success() 上添加监听事件:

配置好 addEventBusListener() 函数后, 在进行元素的点击、新增、移动、删除的时候都能监听到了.

但是有一点很不好, 你在点击“画布”的时候, 也就是 根元素 也可能会触发此事件, 我们一般都不希望此时会触发, 因此我们可以在 on 回调中添加一些判断, 来避免掉不需要的情况:

此时我们可以把监听到返回的节点信息打印出来看看:

如上图, 它会打印出该节点的 Shape 信息和 DOM 信息等, 但我们可能只关注于 Shape 信息(也就是该节点的 id、type 等等信息), 此时我们可以使用 elementRegistry 来获取 Shape 信息:

或者你也可以直接就用 e.element 获取到 Shape 的信息, 我比较了一下它们两是一样的. 但是官方是推荐使用 elementRegistry 的方式.

上面我们已经介绍了 modeler 和 element 的监听绑定方式, 在事件应用中, 你更多的需要知道用户要进行什么操作, 好写对应的业务逻辑.

这里我就以我工作中要用到的场景为案例进行讲解.

案例Git地址: LinDaiDai-bpmn.js案例event.vue 喜欢的小伙伴请给个 Star 🌟呀, 谢谢😊

系列全部目录请查看此处: 《全网最详bpmn.js教材》

系列相关推荐:

《全网最详bpmn.js教材-基础篇》

《全网最详bpmn.js教材-http请求篇》

《全网最详bpmn.js教材-renderer篇》

《全网最详bpmn.js教材-contextPad篇》

《全网最详bpmn.js教材-编辑、删除节点篇》

面向对象的三大特征——全网最详解析

面向对象的三大特征——封装性、继承性、多态性

类的封装性

　　封装是将数据以及对数据的操作组合起来构成类，类是一个不可分割的独立单位。类中提供与外部联系的方法，又尽可能隐藏类的实现细

节。

　　封装性提供一种软件模块化的设计思想，像组装硬件一样。类的设计者提供标准化的软件模块，使用者根据实际需求选择所需要的类模块，

集成为软件系统，各模块之间通过传递参数等方式进行工作。设计者需要考虑类的定义、类中数据和方法的访问权限以及方法如何实现等问题；

使用者需知道有哪些类，每个类的特点，每个类提供了哪些常量、成员变量和成员方法等，而不需知道方法实现的细节。

---

 

　　而要实现类的封装性，我们要先为类及类中成员变量和成员方法分别设置必要的访问权限，使所有类，子类，同一包中的类，本类等不同

关系的类之间具有不同的访问权限。Java语言中为类成员设置了4种访问权限，为类（内部类有3种）设置了两种访问权限。

1. 类成员的访问权限

　　　　Java语言中定义4种权限修饰符来修饰类成员的访问权限：public（公有）、protected（保护）、默认和private（私有）。

　　　　这4种权限修饰符说明如下：

　　　　①public：说明该成员可被所有类的对象访问，public指定的访问权限最大。

　　 ②protected：说明该类成员能被同类中的其他成员、该类的子类成员或同一包中的其他类成员访问，不能被其他包的非子类成员访问。protected指定有限的访问权限范围，使保护成员在子类和非子类中具有不同的访问权限，即保护成员可被子类访问，不能被非子类访问。

　　③default(默认)：当没有使用访问权限修饰符声明成员时，说明该类成员能被同一类中的其他成员访问或被同一包中的其他类访问，不能被包之外的其他类访问。默认权限以包为界划定访问权限范围，使同一包中的类具有访问权限，其他包中的类则没有访问权限。

　　④private：说明该成员只能被同一类中的其他成员访问，不能被其他类的成员访问，也不能被子类成员访问。private指定的访问权限范围最小，对其他类隐藏类的成员，防止其他类修改该类的私有成员。

　　　　我们用一个表格来清楚的展示：

　　　　

类成员的访问权限

权限修饰符	同一类	同一包	不同包的子类	所有类
public	√	√	√	√
protected	√	√	√
默认	√	√
private	√

　　　　　　

2. 类的访问权限(只讨论外部类）

类的访问权限有两种：public和默认，不能使用其他两种权限声明类。

在一个Java源程序文件中可以声明多个类，但是public修饰的类智能有一个，并且类名需要与文件名相同。

　　　　

　

---

类的继承性

　　继承是软件重用的一种形式，在声明新类时复用现有类的成员，然后赋予其新的功能，或修改原有的功能，通过继承，程序员在程序开发中已验证和调试过的高质量软件，可节省开发时间，也使系统更有可能得到有效的实现。

　　1. 继承的概念

　　当程序员创建类时，可以指定新类从现有类中继承某些成员，而不需要完全从头开始声明新的成员。这个现有类称为超类或父类，新创建的类称为子类。子类也可以成为其他类的超类或父类

　　通常子类会添加自己的变量和方法，因此子类比其超类或父类更详细，表示更为特定的对象，典型的情况是，子类既有父类的功能，又有其专门的性能。

　　继承性在父类和子类之间建立起联系，子类自动拥有父类的全部成员，包括成员变量和成员方法，使父类成员得以传承和延续；子类可以改父类的成员，使父类成员适应新的需求；子类也可以增加自己的成员，使类的功能得以扩充。但是，子类不能删除父类的成员！！

　　Java语言只支持单重继承，可以通过接口实现多重继承。在单重继承中父类与子类是一对多的关系。一个子类只有一个父类；一个父类可以有多个子类，每个父类又可以作为父类再定义自己的子类。

　　2. 继承原则

　　　　类的继承包括以下基本原则。

　　　　①子类继承父类的所有成员变量，包括实例成员变量和类成员变量。

　　②子类继承父类除构造方法外的成员方法，包括实例成员方法和类成员方法。因为父类构造方法创建的是父类对象，子类必须创建自己的构造

　　方法，创建子类自己的对象

　　　　③子类不能删除父类的成员。

　　　　④子类虽然继承了父类的私有成员，但子类不能使用父类的私有成员

　　　　⑤子类可以增加自己的成员变量和成员方法。

　　　　⑥子类可以重新定义父类成员（方法重写）。

　　　　3. 子类的声明

　　　　在Java语言中，子类对父类的继承是通过extends关键字来实现的。语法格式如下：

　　　　[修饰符] class类 [extends 父类] [implements 接口列表]

　　　　其中，extends说明当前声明的类将要继承父类的属性和方法。父类中哪些属性和方法将被继承取决于父类对成员的访问控制：

　　　　①子类对父类的私有成员没有访问权限。

　　　　②子类对父类的公有成员和保护成员有访问权限。

　　③子类对默认权限成员分两种情况，对同一包中的父类的默认权限成员具有访问权限，而对不同包中父类的默认权限成员则没有访问权限。

　　　　4. 子类方法的覆盖

　　在面向对象语言的程序设计中，子类可以改写从父类中继承来的某个方法，形成与父类方法同名，解决的问题也相似，但具体实现和功能却不尽一致的新方法。

　　　　定义与父类完全相同的方法以实现对父类方法的覆盖是，必须注意以下几点：

　　　　①完全相同的方法名。

　　　　②完全相同的参数列表。

　　　　③完全相同的返回值类型。

　　　　注意：在满足上述三个条件的同时，还必须保证访问权限不能缩小。

　　　　5.super关键字

　　　　在子类的方法中，可以使用关键字super调用父类成员。super的使用有两种方法。

　　　　①调用父类的构造方法

　　　　父类的构造方法不能够被继承，但在子类的构造方法体中，可以使用super调用父类的构造方法。语法格式如下：

　　　　super([参数列表]);

　　　　其中，参数列表是父类构造方法的参数列表。

　　　　②调用父类的同名成员

　　子类继承父类的成员，当子类没有重定义父类成员时，则不存在同名成员问题。子类的对象访问的都是父类声明的成员变量，调用的也都是父类定义的成员方法，所以不需要使用super。

　　　　当子类重定义了父类成员时，则存在同名成员问题。此时，在子类方法体中，成员变量和成员方法均默认为子类的成员变量或成员

　　方法。如果需要引用父类的同名成员，则需要使用super引用。在以下两种同名成员情况下，需要使用super引用。

　　　　1）子类隐藏父类的成员变量

 　　　　 当子类成员变量隐藏父类的同名成员时，如果需要访问被子类隐藏的父类的同名成员变量，则需要使用super只带父类的同名成员变

　　量，则需要使用super指代父类的同名成员变量。语法格式如下：

　　　　super.成员变量；

　　　　2）子类覆盖父类成员方法

　　　　当子类成员方法覆盖父类同名成员方法时，如果需要调用被子类覆盖的父类成员方法，则可以使用super调用父类的同名成员方法。

　　语法格式如下：

　　　　　super.成员方法([参数列表]);

 

---

 

类的多态性

 　　　　类的多态性提供了类中的方法设计的灵活性和执行的多样性。通过多态，就能对“对通用情况进行编程”，而不是“对特定情况编程”。

　　多态的特别之处是使程序能够处理类层次中共享同一父类的对象，就好像他们都是父类的对象一样。

　　多态性的概念

　　　　在面向对象语言中，多态性是指一个方法可以有多种实现版本，即“一种定义，多种实现”。对于一个方法的多种实现，在程序运行

　　时，系统会根据方法的参数或调用方法的对象自动选择一个方法执行，不会产生混淆和混乱。例如，算数运算中不同类型的数据的混合

　　运算就是一个典型的多态运用。

　　　　类的多态性表现为方法的多态性，下面主要讨论在不同层次的类中以及在同一个类中多个同名方法之间的关系问题。方法的多态性

　　主要有方法的重写和重载。下面进行一个多态小程序举例：

　　　　

 1 /**
 2  * 声明打印机类
 3  */
 4 public abstract class Test03_Print {
 5     private String name;
 6 
 7     public String getName() {
 8         return name;
 9     }
10 
11     public void setName(String name) {
12         this.name = name;
13     }
14     
15     public abstract void Print();
16 }

 

 1 /**
 2  *  声明黑白打印机类
 3  */
 4 public class Test03_Black extends Test03_Print {
 5 
 6     @Override
 7     public void Print() {
 8         // TODO Auto-generated method stub
 9         super.setName("黑白");
10         System.out.println(super.getName()+"打印机");
11     }
12 
13 }

 1 /**
 2  *  声明彩色打印机类
 3  */
 4 public class Test03_Color extends Test03_Print {
 5 
 6     @Override
 7     public void Print() {
 8         // TODO Auto-generated method stub
 9         super.setName("彩色");
10         System.out.println(super.getName()+"打印机");
11     }
12 
13 }

 1 /**
 2  * 多态小程序举例:
 3  * 利用多态性分别进行黑白打印机和彩色打印机的打印
 4  */
 5 public class Test03_Test {
 6 
 7     public static void main(String[] args) {
 8         // TODO Auto-generated method stub
 9         Test03_Print p1 = new Test03_Black();
10         p1.Print();//黑白打印机
11         p1 = new Test03_Color();
12         p1.Print();//彩色打印机
13     }
14 
15 }