【技术实现步骤摘要】
本申请涉及页面开发，尤其涉及一种跨端页面开发方法、装置、设备及存储介质。
技术介绍
1、前端代码通常可以封装为npm(node package manager，模块管理工具)模块，并将其发布至npm仓库，使得开发人员可以通过npm模块的管理工具，从仓库中下载和使用该模块。
2、在业务产品需要面临多端(pc/pad)使用时，开发团队需要针对每一端开发一套单独的代码仓库，维护成本巨大。当前行业比较常规的做法是将页面封装为公用模块，发布到npm模块仓库，供每一端的业务项目使用，完成复用。
3、在该方案中，ui状态代码和ui功能业务逻辑耦合在公共逻辑模块中，但由于不同端尺寸和交互特性不同，相应的页面交互也会有区别，公共逻辑模块中需要适配不同交互逻辑和ui样式，当前公共逻辑模块中需要添加同时满足用于不同设备的业务逻辑代码，在相应设备引用该公共逻辑模块后，还需要运行相应的选择程序，从公共逻辑模块中选择用于当前设备的业务逻辑代码，从而导致相应页面开发时的效率低。
4、申请内容
5、本申请的主要目的在于提供一种跨端页面开发方法、装置、设备及存储介质，旨在解决公共逻辑代码包含用于不同设备的业务逻辑代码，导致开发页面的开发效率低的技术问题。
6、为实现上述目的，本申请提供一种跨端页面开发方法，所述跨端页面开发方法包括以下步骤：
7、在开发目标页面对应的业务项目组件之前，从预设的公共代码仓库中直接引用与所述业务项目组件对应的公共逻辑模块，其中，所述公共逻辑模块包含用于不同设备页面
8、根据所述公共逻辑模块和所述业务项目组件，对所述目标页面进行开发。
9、可选地，所述在开发目标页面对应的业务项目组件之前，从预设的公共代码仓库中直接引用与所述业务项目组件对应的公共逻辑模块的步骤之前，所述方法还包括：
10、获取目标页面的各业务项目组件的目标业务逻辑和ui代码，其中，所述目标业务逻辑和所述ui代码之间为耦合状态；
11、将所述目标业务逻辑和所述ui代码中用于不同设备页面的逻辑抽取成公共逻辑模块，得到公共逻辑模块，其中，所述公共逻辑模块包括通用业务逻辑和ui状态。
12、可选地，所述将所述目标业务逻辑和所述ui代码中用于不同设备页面的逻辑抽取成公共逻辑模块，得到公共逻辑模块的步骤，包括：
13、抽取得到所述业务逻辑中用于改变所述ui状态的通用业务逻辑；
14、根据抽取到的通用业务逻辑和所述ui状态，定义得到预设自定义函数，以根据所述预设自定义函数，抽取得到公共逻辑模块。
15、可选地，所述将所述目标业务逻辑和所述ui代码中用于不同设备页面的逻辑抽取成公共逻辑模块，得到公共逻辑模块的步骤之后，所述方法还包括：
16、将所述业务项目组件对应的ui和所述公共逻辑模块添加至预设的公共代码仓库中，使得所述公共代码仓库将每个ui和每个公共逻辑模块均作为独立工程进行保存，以满足所述ui对应工程直接从所述公共代码仓库中引用所述公共逻辑模块的条件。
17、可选地，所述根据所述公共逻辑模块和所述业务项目组件，对所述目标页面进行开发的步骤之后，所述方法还包括：
18、在所述业务项目组件中任一组件模块的状态产生变更时，通过状态变更的组件模块与所述业务项目组件中其他的组件模块之间进行全局状态联动，以更新所述目标页面内满足预设状态变更条件的业务项目组件的状态。
19、可选地，所述根据所述公共逻辑模块和所述业务项目组件，对所述目标页面进行开发的步骤之后，所述方法还包括：
20、通过状态变更的业务项目组件，修改预设的全局公用状态；
21、根据修改后的全局公用状态，对所述目标页面中其他的业务项目组件的状态进行修改，以使得所述目标页面中满足预设状态变更条件的业务项目组件进行全局状态联动。
22、可选的，所述通过状态变更的业务项目组件，修改预设的全局公用状态的步骤，包括：
23、确定状态变更的业务项目组件对应的修改函数，并确定所述业务项目组件的状态变更内容；
24、根据所述状态变更内容，通过所述修改函数对所述预设的全局公用状态进行修改；
25、所述根据修改后的全局公用状态，对所述目标页面中其他的业务项目组件的状态进行修改，以使得所述目标页面中满足预设状态变更条件的业务项目组件进行全局状态联动的步骤，包括：
26、根据修改后的全局公用状态，对所述目标页面中满足预设状态变更条件的业务项目组件对应的修改函数进行修改，使所述满足预设状态变更条件的业务项目组件进行全局状态联动。
27、此外，为实现上述目的，本申请还提供一种跨端页面开发装置，所述跨端页面开发装置包括：
28、引用模块，用于在开发目标页面对应的业务项目组件之前，从预设的公共代码仓库中直接引用与所述业务项目组件对应的公共逻辑模块，其中，所述公共逻辑模块包含用于不同设备页面的通用业务逻辑；
29、开发模块，用于根据所述公共逻辑模块和所述业务项目组件，对所述目标页面进行开发。
30、此外，为实现上述目的，本申请还提供一种跨端页面开发设备，所述跨端页面开发设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的跨端页面开发程序，所述跨端页面开发程序配置为实现如上所述的跨端页面开发方法的步骤。
31、此外，为实现上述目的，本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有跨端页面开发程序，所述跨端页面开发程序被处理器执行时实现如上所述的跨端页面开发方法的步骤。
32、本申请通过在开发目标页面对应的业务项目组件之前，从预设的公共代码仓库中直接引用与所述业务项目组件对应的公共逻辑模块，其中，所述公共逻辑模块包含用于不同设备页面的通用业务逻辑；根据所述公共逻辑模块和所述业务项目组件，对所述目标页面进行开发，即通过将通用业务逻辑和业务项目组件解耦并放入至公共代码仓库中，使得业务项目组件可直接引用到通用业务逻辑，避免从公共逻辑模块中选择适配逻辑的情况，以此提高了目标页面的开发效率。
技术实现思路
本文档来自技高网...【技术保护点】
1.一种跨端页面开发方法，其特征在于，所述跨端页面开发方法包括以下步骤：
2.如权利要求1所述的跨端页面开发方法，其特征在于，所述在开发目标页面对应的业务项目组件之前，从预设的公共代码仓库中直接引用与所述业务项目组件对应的公共逻辑模块的步骤之前，所述方法还包括：
3.如权利要求2所述的跨端页面开发方法，其特征在于，所述将所述目标业务逻辑和所述UI代码中用于不同设备页面的逻辑抽取成公共逻辑模块，得到公共逻辑模块的步骤，包括：
4.如权利要求2所述的跨端页面开发方法，其特征在于，所述将所述目标业务逻辑和所述UI代码中用于不同设备页面的逻辑抽取成公共逻辑模块，得到公共逻辑模块的步骤之后，所述方法还包括：
5.如权利要求1所述的跨端页面开发方法，其特征在于，所述根据所述公共逻辑模块和所述业务项目组件，对所述目标页面进行开发的步骤之后，所述方法还包括：
6.如权利要求1所述的跨端页面开发方法，其特征在于，所述根据所述公共逻辑模块和所述业务项目组件，对所述目标页面进行开发的步骤之后，所述方法还包括：
7.如权利要求6所述
8.一种跨端页面开发装置，其特征在于，所述跨端页面开发装置包括：
9.一种跨端页面开发设备，其特征在于，所述跨端页面开发设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的跨端页面开发程序，所述跨端页面开发程序配置为实现如权利要求1至7中任一项所述的跨端页面开发方法的步骤。
10.一种存储介质，其特征在于，存储介质上存储有实现跨端页面开发方法的程序，实现跨端页面开发方法的程序被处理器执行以实现如权利要求1至7中任一项所述跨端页面开发方法的步骤。
...【技术特征摘要】
1.一种跨端页面开发方法，其特征在于，所述跨端页面开发方法包括以下步骤：
2.如权利要求1所述的跨端页面开发方法，其特征在于，所述在开发目标页面对应的业务项目组件之前，从预设的公共代码仓库中直接引用与所述业务项目组件对应的公共逻辑模块的步骤之前，所述方法还包括：
3.如权利要求2所述的跨端页面开发方法，其特征在于，所述将所述目标业务逻辑和所述ui代码中用于不同设备页面的逻辑抽取成公共逻辑模块，得到公共逻辑模块的步骤，包括：
4.如权利要求2所述的跨端页面开发方法，其特征在于，所述将所述目标业务逻辑和所述ui代码中用于不同设备页面的逻辑抽取成公共逻辑模块，得到公共逻辑模块的步骤之后，所述方法还包括：
5.如权利要求1所述的跨端页面开发方法，其特征在于，所述根据所述公共逻辑模块和所述业务项目组件，对所述目标页面进行开发的步骤之后，所述方法还包括...
【专利技术属性】
技术研发人员：吴俊辉，
申请(专利权)人：招商银行股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。