独立于框架的前端开发方法及装置与流程

1.本技术涉及前端开发领域，特别是涉及一种独立于框架的前端开发方法及装置。


背景技术：

2.目前，前端开发中的逻辑复用依赖于具体的前端开发框架，主要有以下两种方式：react hooks方法和vue3 composition api方法。
3.其中，react hooks方法依赖react框架，提供一种状态和状态的更改方法分治的手段。react hooks方法从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用，并在无需修改组件结构的情况下复用状态逻辑。
4.vue3 composition api方法依赖vue3框架，将代码根据逻辑功能组织，一个逻辑功能所定义的所有api放在一起，在进行逻辑复用时定位具体功能即可定位到所用到的所有api。
5.以上两种能够实现前端开法中业务逻辑复用的方法，在应用过程中只能相同框架内进行业务逻辑复用，高度依赖框架本身的特性来组织复用逻辑。
6.现有技术中由于前端开发中业务逻辑难以脱离框架复用，导致在前端开发时，同样的业务逻辑需要重复书写，造成资源浪费、效率低下的问题。


技术实现要素：

7.针对现有技术中的问题，本技术提供了一种独立于框架的前端开发方法及装置。本技术的方案单独打包和框架无关的业务逻辑，可以和任何半开放的前端框架结合实现业务逻辑复用。
8.根据本技术的第一个方面，提出了一种独立于框架的前端开发方法，包括：以原生javascript语言中class类的形式封装一个或多个业务服务模块，一个或多个业务服务模块中的每一个包括对应的api接口；通过所选择的api接口将对应的业务服务模块注册到终端应用模块；通过终端应用模块调用对应的业务服务模块。
9.在一些实施例中，独立于框架的前端开发方法还包括：将业务服务模块打包为软件包集合；生成软件包集合的api接口列表，api接口列表包括api接口信息。
10.在一些实施例中，通过所选择的api接口将对应的业务服务模块注册到终端应用模块包括：根据api接口信息选择对应的api接口。
11.在一些实施例中，业务服务模块包括业务状态和业务方法。
12.在一些实施例中，终端应用模块包括逻辑应用模块和视图应用模块。
13.在一些实施例中，在终端应用模块为视图应用模块的情况下，通过终端应用模块调用对应的业务服务模块包括：
将对应的业务服务模块的业务状态显示在视图应用模块的视图中；在视图中调用对应的业务服务模块的业务方法。
14.在一些实施例中，视图应用模块包括基于vue2框架的视图应用模块、基于vue3框架的视图应用模块和基于react框架的视图应用模块。
15.在一些实施例中，在视图应用模块为基于vue2框架的视图应用模块的情况下，将对应的业务服务模块的业务状态显示在视图应用模块的视图中包括：将对应的业务服务模块的业务状态和vue2框架的视图数据进行绑定。
16.在一些实施例中，在视图应用模块为基于vue3框架的视图应用模块的情况下，将对应的业务服务模块的业务状态显示在视图应用模块的视图中包括：将对应的业务服务模块的业务状态进行reactive函数包装覆写。
17.根据本技术的第二个方面，提出了一种独立于框架的前端开发装置，包括：服务封装单元，用于以原生javascript语言中class类的形式封装一个或多个业务服务模块，一个或多个业务服务模块中的每一个包括对应的api接口；注册单元，用于通过所选择的api接口将对应的业务服务模块注册到终端应用模块；应用单元，用于通过终端应用模块调用对应的业务服务模块。
18.根据本技术的第三个方面，提出了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现如第一个方面所述的方法。
19.根据本技术的第四个方面，提供一种非瞬时性计算机存储介质，存储有计算机程序，当所述计算机程序被多个处理器执行时，使得所述处理器执行如第一个方面所述的方法。
20.本技术提供的一种独立于框架的前端开发方案，能够脱离框架限制，和各种前端框架自由结合，同时脱离了具体ui对业务逻辑进行统一的封装维护，避免了业务逻辑的重复书写，提高前端开发效率。并且，针对现有技术中前端开发中各终端的界面交互逻辑存在差异，传统的复用将ui也进行封装，导致业务逻辑和ui耦合过深，不宜做个性化复用的问题，本技术的方案将ui逻辑和非ui逻辑进行解耦和层次划分后，使得ui交互逻辑的应用可以自由接入非ui逻辑并个性化组织两者之间的关系，同时可以实现ui逻辑和非ui业务逻辑的并行开发和维护。
附图说明
21.为了更清楚地说明本技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图，而并不超出本技术要求保护的范围。
22.图1为本技术的一种独立于框架的前端开发方法的整体框架示意图。
23.图2为本技术的一种独立于框架的前端开发方法的步骤流程图。
24.图3为本技术的一种独立于框架的前端开发装置的示意图。
25.图4为本技术提供的一种电子设备的结构图。
实施方式
26.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
27.图1为本技术的一种独立于框架的前端开发方法的整体框架示意图。
28.如图1所示，首先以原生javascript语言中class类的形式封装一个或多个业务服务模块，一个或多个业务服务模块中的每一个包括对应的api接口。在一些具体实施例中，api接口可以是一个有具体命名的引用方法，使用该引用方法可以引用业务服务模块中的具体功能，并在视图应用模块或其他应用逻辑中使用。
29.将封装好的多个业务服务模块打包为软件包集合，在一些具体实施例中，通过前端打包工具完成打包过程。
30.在一些具体实施例中，通过浏览器网络加载或包管理工具加载软件包集合后，即加载了所有业务服务模块。将业务服务模块通过api接口注册到不同的终端，api接口列表中包括的api接口信息使得在注册时能够找到实现所需功能的具体的业务服务模块，这样就可以在不同终端应用业务服务模块的具体逻辑功能。
31.在一些具体实施例中，服务封装单元封装一个或多个业务服务模块，打包多个业务服务模块为软件包集合，生成api接口列表，通过api接口将业务服务模块注册到终端应用单元。
32.在一些具体实施例中，终端应用模块包括逻辑应用模块和视图应用模块。在一些具体实施例中，逻辑应用模块实现的功能不需要具体视图的呈现，逻辑应用模块实现的功能包括全局参数设置、权限获取、数据维护等。在一些具体实施例中，视图应用模块包括需要用视图呈现的功能。
33.在一些具体实施例中，视图应用模块包括基于vue2框架的视图应用模块、基于vue3框架的视图应用模块和基于react框架的视图应用模块。在一些具体实施例中，针对不同类型的视图应用模块，将对应的业务服务模块的业务状态显示在视图应用模块的视图中的方式不同。
34.图2为本技术的一种独立于框架的前端开发方法的步骤流程图。
35.步骤s101，以原生javascript语言中class类的形式封装一个或多个业务服务模块，一个或多个业务服务模块中的每一个包括对应的api接口。
36.在一些具体实施例中，api接口可以是一个有具体命名的引用方法，使用该引用方法可以引用业务服务模块中的具体功能，并在视图应用模块或其他应用逻辑中使用。在一些具体实施例中，业务服务模块包括业务状态和业务方法，其中业务状态包括在实现功能过程中定义的变量数值，业务方法包括改变业务状态的方法。
37.步骤s102，通过所选择的api接口将对应的业务服务模块注册到终端应用模块。
38.在一些具体实施例中，终端应用模块包括逻辑应用模块和视图应用模块。逻辑应用模块实现的功能不需要具体视图的呈现，在一些具体实施例中，逻辑应用模块实现的功能包括全局参数设置、权限获取、数据维护等。在一些具体实施例中，视图应用模块包括需要用视图呈现的功能。
39.在一些具体实施例中，视图应用模块包括基于vue2框架的视图应用模块、基于vue3框架的视图应用模块和基于react框架的视图应用模块。
40.步骤s103，通过终端应用模块调用对应的业务服务模块。
41.在一些具体实施例中，终端应用模块为基于vue2框架的视图应用模块。调用对应的usexxxxservice方法取出对应的业务服务模块后，将业务服务模块的业务状态和vue2框架的视图数据做绑定。在一些具体实施例中，业务服务模块可以是聊天逻辑模块，该模块对应的api接口为usechatservice方法，绑定的具体实现语句是this.$data.chatstate = this.chatservice.state。通过这一语句，业务服务模块里的业务状态可以被显示在视图上。然后在视图上调用业务方法来驱动逻辑，在一些具体实施例中，调用业务方法的具体实现语句可以是 this.chatservice.sendmessage。
42.在一些具体实施例中，终端应用模块为基于vue3框架的视图应用模块，调用对应的usexxxxservice方法取出对应的业务服务模块后，将视图应用模块的业务状态进行reactive函数包装覆写。在一些具体实施例中，业务服务模块可以是聊天逻辑模块，该模块对应的api接口为usechatservice方法，reactive函数包装覆写的具体实现语句是 chatservice.state = reactive(chatservice.state)，通过这一动作，业务服务模块里的业务状态可以被显示在视图上。然后在视图上调用业务方法来驱动逻辑，在一些具体实施例中，调用业务方法的具体实现语句是chatservice.sendmessage。
43.在一些具体实施例中，终端应用模块为基于react框架的视图应用模块，根据业务状态的变化直接调用业务方法，调用业务方法可以是调用react框架中的setstate方法。
44.步骤s104，将业务服务模块打包为软件包集合。
45.步骤s105，生成软件包集合的api接口列表，api接口列表包括api接口信息。
46.在一些具体实施例中，通过前端打包工具完成打包过程。在一些具体实施例中，打包软件包集合之后，生成api接口列表，其中包括多个usexxxxservice方法，与业务服务模块一一对应。通过调用对应的usexxxxservice方法就可以取出对应的业务服务模块并加以使用。对于没有框架的原生javascript环境而言，无需额外的引用方式，usexxxxservice即可使用。
47.在一些具体实施例中，业务服务模块可以是聊天逻辑模块，该模块对应的api接口为usechatservice方法。通过usechatservice方法可以使用聊天逻辑模块内部的业务方法和业务状态。
48.图3为本技术的一种独立于框架的前端开发装置示意图。
49.服务封装单元，用于以原生javascript语言中class类的形式封装一个或多个业务服务模块，一个或多个业务服务模块中的每一个包括对应的api接口。
50.在一些具体实施例中，api接口可以是一个有具体命名的引用方法，使用该引用方法可以引用业务服务模块中的具体功能，并在视图应用模块或其他应用逻辑中使用。在一些具体实施例中，业务服务模块包括业务状态和业务方法，其中业务状态包括在实现功能过程中定义的变量数值，业务方法包括改变业务状态的方法。
51.注册单元，用于通过所选择的api接口将对应的业务服务模块注册到终端应用模块。
52.在一些具体实施例中，终端应用模块包括逻辑应用模块和视图应用模块。逻辑应
用模块实现的功能不需要具体视图的呈现，在一些具体实施例中，逻辑应用模块实现的功能包括全局参数设置、权限获取、数据维护等。在一些具体实施例中，视图应用模块包括需要用视图呈现的功能。
53.应用单元，用于通过终端应用模块调用对应的业务服务模块。
54.在一些具体实施例中，终端应用模块为基于vue2框架的视图应用模块。调用对应的usexxxxservice方法取出对应的业务服务模块后，将业务服务模块的业务状态和vue2框架的视图数据做绑定。在一些具体实施例中，业务服务模块可以是聊天逻辑模块，该模块对应的api接口为usechatservice方法，绑定的具体实现语句是this.$data.chatstate = this.chatservice.state。通过这一语句，业务服务模块里的业务状态可以被显示在视图上。然后在视图上调用业务方法来驱动逻辑，在一些具体实施例中，调用业务方法的具体实现语句可以是 this.chatservice.sendmessage。
55.在一些具体实施例中，终端应用模块为基于vue3框架的视图应用模块，调用对应的usexxxxservice方法取出对应的业务服务模块后，将业务服务模块的业务状态进行reactive函数包装覆写。在一些具体实施例中，业务服务模块可以是聊天逻辑模块，该模块对应的api接口为usechatservice方法，reactive函数包装覆写的具体实现语句是 chatservice.state = reactive(chatservice.state)，通过这一动作，业务服务模块里的业务状态可以被显示在视图上。然后在视图上调用业务方法来驱动逻辑，在一些具体实施例中，调用业务方法的具体实现语句是chatservice.sendmessage。
56.在一些具体实施例中，终端应用模块为基于react框架的视图应用模块，根据业务状态的变化直接调用业务方法，调用业务方法可以是调用react框架中的setstate方法。
57.在一些具体实施例中，使用独立于框架的前端开发方法在不同终端开发简单的单人对单人聊天业务的过程包括：首先以原生javascript语言中class类的形式封装聊天数据业务服务模块和用户身份识别业务服务模块，这两个业务服务模块中的每一个包括对应的api接口。api接口命名为聊天数据方法和用户身份识别方法，使用该引用方法可以引用业务服务模块中的具体功能。将封装好的聊天数据业务服务模块和用户身份识别业务服务模块打包为软件包集合。
58.通过浏览器网络加载软件包集合后，即加载了两个业务服务模块。将业务服务模块通过聊天数据方法和用户身份识别方法注册到不同的终端，方法中包括的api接口信息使得在注册时能够找到实现所需功能的具体的业务服务模块，这样就可以在不同终端应用业务服务模块的具体逻辑功能。
59.用户身份识别业务服务模块为逻辑应用模块，不需要视图呈现。在终端a和终端b分别直接调用用户身份识别业务服务模块的业务方法。
60.聊天数据业务服务模块为视图应用模块，需要视图进行呈现。在一些具体实施例中，终端应用模块为终端a，聊天数据业务服务模块为基于vue2框架的视图应用模块，将聊天数据业务服务模块的业务状态和vue2框架的视图数据做绑定后，调用聊天数据业务服务模块的业务方法。在一些具体实施例中，终端应用模块为终端b，聊天数据业务服务模块为基于vue3框架的视图应用模块，将聊天数据业务服务模块的业务状态进行reactive函数包装覆写后，调用聊天数据业务服务模块的业务方法。
61.在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
62.参阅图4，图4提供一种电子设备，包括处理器以及存储器。存储器存储有计算机指令，当计算机指令被处理器执行时，使得处理器执行所述计算机指令从而实现如图2所示的方法以及细化方案。
63.应该理解，上述的装置实施例仅是示意性的，本发明披露的装置还可通过其它的方式实现。例如，上述实施例中所述单元/模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如，多个单元、模块或组件可以结合，或者可以集成到另一个系统，或一些特征可以忽略或不执行。
64.另外，若无特别说明，在本发明各个实施例中的各功能单元/模块可以集成在一个单元/模块中，也可以是各个单元/模块单独物理存在，也可以两个以上单元/模块集成在一起。上述集成的单元/模块既可以采用硬件的形式实现，也可以采用软件程序模块的形式实现。
65.所述集成的单元/模块如果以硬件的形式实现时，该硬件可以是数字电路，模拟电路等等。硬件结构的物理实现包括但不局限于晶体管，忆阻器等等。若无特别说明，所述处理器或芯片可以是任何适当的硬件处理器，比如cpu、gpu、fpga、dsp和asic等等。若无特别说明，所述片上缓存、片外内存、存储器可以是任何适当的磁存储介质或者磁光存储介质，比如，阻变式存储器rram（resistive random access memory）、动态随机存取存储器dram（dynamic random access memory）、静态随机存取存储器sram（static random-access memory）、增强动态随机存取存储器edram（enhanced dynamic random access memory）、 高带宽内存hbm（high-bandwidth memory）、混合存储立方 hmc（hybrid memory cube）等等。
66.所述集成的单元/模块如果以软件程序模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储器中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储器中，包括若干指令用以使得一台计算机设备（可为个人计算机、服务器或者网络设备等）执行本披露各个实施例所述方法的全部或部分步骤。而前述的存储器包括：u盘、只读存储器（rom，read-only memory）、随机存取存储器（ram，random access memory）、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
67.本技术实施例还提供一种非瞬时性计算机存储介质，存储有计算机程序，当所述计算机程序被多个处理器执行时，使得所述处理器执行如图2所示的方法以及细化方案。
68.以上对本技术实施例进行了详细介绍，本文中应用了具体个例对本技术的原理及实施方式进行了阐述，以上实施例的说明仅用于帮助理解本技术的方法及其核心思想。同时，本领域技术人员依据本技术的思想，基于本技术的具体实施方式及应用范围上做出的改变或变形之处，都属于本技术保护的范围。综上所述，本说明书内容不应理解为对本技术的限制。