[发明专利]一种逻辑跨端思路的设计与实现

说明书

本发明涉及前端场景建设的技术领域，特别是涉及一种逻辑跨端思路的设计与实现,适用于重逻辑的业务场景下，结合普通项目中提取公共逻辑进行封装的技术方案应用于多端开发中，提高跨端开发效率；包括以下步骤：S1、选择合适语言作为Web端和App端的一个桥梁；S2、逻辑分离；S3、差异化。

技术领域

本发明涉及前端场景建设的技术领域，特别是涉及一种逻辑跨端思路的设计与实现。

背景技术

随着业务场景的增加，很多时候我们都需要PC端，App端各一套代码，耗费人力成本，时间成本巨大，导致效率低下；跨技术栈调试一直是难题，问题排查成本越来越高，由于技术方案的特殊性，需要量身定制许多配套设施(包括但不限于IDE、调试、性能、监控)，才能将各个环节的成本降下来，耗费成本巨大，效率低下成了该方案的关键。

现有技术中，跨端方案有如下三种：

Web类方案的研发配套和一致性较好，但是性能有着显著差距，rem、媒体查询、scale/zoom等适配经验都不一定适用；

React-Native类方案的性能比Web好，但是多端一致性差，研发配套建设难度高；

Flutter的两端一致性和性能优秀，但是在Web上的性能表现则近乎不可用。

发明内容

为解决上述技术问题，本发明提供一种逻辑跨端思路的设计与实现,适用于重逻辑的业务场景下，结合普通项目中提取公共逻辑进行封装的技术方案应用于多端开发中，提高跨端开发效率。

本发明的一种逻辑跨端思路的设计与实现，包括以下步骤：

S1、选择合适语言作为Web端和App端的一个桥梁；

S2、逻辑分离；

S3、差异化。

本发明的一种逻辑跨端思路的设计与实现，所述步骤S1中语言为Dart。

本发明的一种逻辑跨端思路的设计与实现，所述S2具体步骤如下：构建一个抽象的Hooks层，用Hooks的方式写的Dart代码，通过这个抽象的Hooks层去抹平Flutter和React的一些底层差异，然后用Hooks把Web端和App端的这个逻辑都抽离到一个模块里。

本发明的一种逻辑跨端思路的设计与实现，所述步骤S3指的是如何让S2抽取的逻辑在Web端和App端均可以使用。

与现有技术相比本发明的有益效果为：本方案适用于重逻辑的业务场景下，结合普通项目中提取公共逻辑进行封装的技术方案应用于多端开发中，提高跨端开发效率；

由于Dart是可以通过浏览器的Devtools去调试代码的，所以比跨多端技术栈调试要方便；

该技术方案不需要多个IDE，只需要在VS Code中配置插件，并且安装对应的sdk即可。

附图说明

图1是Flutter和React的构成图；

图2是构建Hooks抽象层的结构图；

图3是React Hooks的理解图；

图4是实施例中“在Flutter中实现，触发改变时重置Hooks的计数在闭包中存取当前组件，让Hooks知道该渲染谁”的示意图；

图5是实施例中“在Web环境下去加载Web的代码，在Flutter环境下就去加载Flutter的代码”的示意图；

图6是实施例中“通过Dart的js/js包和外部的JavaScript进行互交互把函数直接映射到JavaScript函数上”的示意图；