CN110837367B - 用户界面处理方法、装置及电子设备 - Google Patents
用户界面处理方法、装置及电子设备 Download PDFInfo
- Publication number
- CN110837367B CN110837367B CN201810936445.9A CN201810936445A CN110837367B CN 110837367 B CN110837367 B CN 110837367B CN 201810936445 A CN201810936445 A CN 201810936445A CN 110837367 B CN110837367 B CN 110837367B
- Authority
- CN
- China
- Prior art keywords
- model
- interface
- function
- model data
- data management
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/35—Creation or generation of source code model driven
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
本申请公开了用户界面处理方法、装置及电子设备。其中，所述方法包括：构建界面对象与模型对象之间的关联关系，指令处理函数调用业务逻辑处理函数，通过所述业务逻辑处理函数更新模型数据，所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树，根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性，根据更新后的界面属性重新渲染所述用户界面。采用这种处理方式，使得不同界面之间数据相互隔离；因此，可以有效提升应用程序的可靠性。同时，对于开发者而言，只需要关心界面的展示和数据模型的处理，省去了繁琐的步骤以及遗漏的风险；因此，可以有效降低开发难度，提高开发效率和质量。
Description
技术领域
本申请涉及互联网技术领域，具体涉及用户界面处理方法和装置，以及电子设备。
背景技术
随着计算机技术的不断发展，越来越多的互联网应用基于Redux前端架构开发应用程序的用户界面部分。
Redux是一个受Flux架构以及函数式编程语言Elm启发的前端架构。Redux只专注于应用程序状态，是一个JavasSript的状态容器，所有的状态的变化都是当前状态和Action共同的作用结果。
然而，在实现本发明过程中，发明人发现该技术方案至少存在如下问题：现有的基于Redux的数据管理概念复杂，且逻辑复杂；这种处理方式，一方面使得不同界面的数据无法隔离，从而降低了应用程序的可靠性；另一方面，对普通开发者而言开发难度大，从而增大了开发成本。
发明内容
本申请提供用户界面处理方法，以解决现有技术存在的程序可靠性低、开发成本高的问题。本申请另外提供用户界面处理装置，以及电子设备。
本申请提供一种用户界面处理方法，包括：
构建界面对象与模型对象之间的关联关系；其中，所述界面对象包括与界面操作指令对应的指令处理函数，所述模型对象包括模型数据管理函数和业务逻辑处理函数，所述模型数据管理函数是从基础模型类继承的封装应用程序状态树管理功能的接口函数；
所述指令处理函数调用所述业务逻辑处理函数，通过所述业务逻辑处理函数更新所述模型对象的模型数据；
所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树；
根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性；
根据更新后的界面属性重新渲染用户界面。
可选的，还包括：
根据模型类，生成所述模型对象；以及，根据界面类，生成所述界面对象。
可选的，所述构建界面对象与模型对象之间的关联关系，包括：
通过连接函数，构建界面对象与模型对象之间的关联关系。
可选的，所述构建界面对象与模型对象之间的关联关系，包括：
构建所述映射关系；
生成所述模型对象的业务逻辑处理函数列表；
将所述函数列表绑定至所述界面对象，以使得所述指令处理函数调用所述业务逻辑处理函数。
可选的，所述模型对象通过所述模型数据管理函数，并将更新后的模型数据更新至应用程序的状态树，包括：
所述模型数据管理函数通过调用前端架构Redux提供的用于管理状态树的相关函数，将所述更新后的模型数据作为状态state存储到所述状态树中。
本申请还提供一种用户界面处理装置，包括：
关联关系构建单元，用于构建界面对象与模型对象之间的关联关系；其中，所述界面对象包括与界面操作指令对应的指令处理函数，所述模型对象包括模型数据管理函数和业务逻辑处理函数，所述模型数据管理函数是从基础模型类继承的封装应用程序状态树管理功能的接口函数；
模型数据更新单元，用于所述指令处理函数调用所述业务逻辑处理函数，通过所述业务逻辑处理函数更新所述模型对象的模型数据；
状态树更新单元，用于所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树；
界面属性更新单元，用于根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性；
用户界面渲染单元，用于根据更新后的界面属性重新渲染用户界面。
可选的，还包括：
模型对象生成单元，用于根据模型类，生成所述模型对象；
界面对象生成单元，用于根据界面类，生成所述界面对象。
可选的，所述关联关系构建单元，具体用于通过连接函数，构建界面对象与模型对象之间的关联关系。
可选的，所述关联关系构建单元包括：
映射关系构建子单元，用于构建所述映射关系；
函数列表生成子单元，用于生成所述模型对象的业务逻辑处理函数列表；
函数列表绑定子单元，用于将所述函数列表绑定至所述界面对象，以使得所述指令处理函数调用所述业务逻辑处理函数。
可选的，所述状态树更新单元，具体用于所述模型数据管理函数通过调用前端架构Redux提供的用于管理状态树的相关函数，将所述更新后的模型数据作为状态state存储到所述状态树中。
本申请还提供一种电子设备，包括：
处理器；以及
存储器，用于存储实现用户界面处理方法的程序，该设备通电并通过所述处理器运行该用户界面处理方法的程序后，执行下述步骤：构建界面对象与模型对象之间的关联关系；其中，所述界面对象包括与界面操作指令对应的指令处理函数，所述模型对象包括模型数据管理函数和业务逻辑处理函数，所述模型数据管理函数是从基础模型类继承的封装应用程序状态树管理功能的接口函数；所述指令处理函数调用所述业务逻辑处理函数，通过所述业务逻辑处理函数更新所述模型对象的模型数据；所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树；根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性；根据更新后的界面属性重新渲染用户界面。
本申请还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述各种方法。
本申请还提供一种包括指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述各种方法。
与现有技术相比，本申请具有以下优点：
本申请实施例提供的用户界面处理方法，通过封装Redux的数据管理相关概念，如store,actions creator,reducer等，对开发者只暴露界面类Page和模型类Model两个概念，构建界面对象与模型对象之间的关联关系，界面类的指令处理函数调用模型类的业务逻辑处理函数，通过业务逻辑处理函数获取更新后的模型数据，并调用模型类的封装后的模型数据管理函数，通过所述模型数据管理函数将所述模型数据更新至应用程序的状态树，并根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性，再根据更新后的界面属性重新渲染所述用户界面；采用这种处理方式，使得将redux中的action creator等概念封装起来，对外暴露的Model的action实际为redux的reducer,用来处理state的变更，而将Model中的action方法名作为redux的action type,当在Page中调用this.actionName()时Model会调用store.dispatch(action)来触发更新；由此，一方面，导致不同界面之间数据相互隔离；因此，可以有效提升应用程序的可靠性；另一方面，对于开发者而言，只需要关心界面的展示和数据模型的处理，极大简化数据流转的过程，使得程序逻辑简单清晰，自动化的完成数据到界面的映射，省去了繁琐的步骤以及遗漏的风险；因此，可以有效降低开发难度，提高开发效率和质量。
附图说明
图1本申请提供的一种用户界面处理方法的实施例的流程图；
图2是本申请提供的一种用户界面处理方法的实施例的数据管理方案的示意图；
图3是本申请提供的一种用户界面处理装置的实施例的示意图；
图4是本申请提供的一种电子设备的实施例的示意图。
具体实施方式
在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。
在本申请中，提供了用户界面处理方法和装置，以及电子设备。在下面的实施例中逐一进行详细说明。
本申请提供的技术方案，其总的发明构思为：构建基于Redux的前端框架，该框架将Redux中的action creator等概念封装起来，对外只暴露简单的Page和Model两个概念，其中Model暴露的action实际为Redux的reducer,用来处理state的变更，而将Model中的action方法名作为Redux的action type,当在Page中调用this.actionName()时，Model会调用store.dispatch(action)来触发更新。由于封装了Redux数据管理的实现细节，简化了数据流转的过程，对外只暴露简单的Page和Model两个概念，降低开发者的理解和使用成本；因此，可以有效降低开发难度，提高开发效率。同时，由于不同界面之间数据等更新处理相互隔离；因此，可以有效提升应用程序的可靠性。
第一实施例
本申请提供一种用户界面处理方法，该方法的执行主体为用户界面处理装置，该装置通常部署于服务器，但并不局限于服务器，也可以是能够实现所述用户界面处理方法的任何设备。
请参考图1，其为本申请提供的一种用户界面处理方法实施例的流程图。本申请提供的一种用户界面处理方法包括：
步骤S101：构建界面对象与模型对象之间的关联关系。
所述界面对象对应一个用户界面，用户界面包括但不限于移动应用(APP)的用户界面，例如，商品搜索页面，商品详情页面等等。
所述界面操作指令，包括但不限于加载所述用户界面的指令，例如，打开商品搜索页面；也可以是针对所述用户界面的界面元素的操作指令，例如，点击商品搜索页面中的“商品搜索”按钮，点击商品详情页面中的“立即购买”按钮，点击商品购买页面中的“提交订单”按钮等等。
所述界面对象包括与界面操作指令对应的指令处理函数。所述指令处理函数，是指针对所述界面操作指令的界面对象包括的指令处理函数。
要实现本申请提供的方法，所述用户界面处理装置要确定针对用户界面的界面操作指令。
在一个示例中，所述用户界面处理装置通过事件***，确定针对用户界面的界面元素的操作指令。例如，如果用户单击“商品搜索”页面的界面元素“商品搜索按钮”，则事件***将监听到该界面元素的单击事件，单击事件会被触发，并执行该单击事件的事件处理函数，即指令处理函数。
针对一个用户界面，可以有多种界面操作指令；相应的，与界面对象关联的模型对象，可包括多个业务逻辑处理函数，不同函数可对应不同的所述界面操作指令。
所述模型对象，是应用程序中用于处理应用程序数据逻辑的部分，例如，模型对象负责在数据库中存取数据。
所述模型对象，不仅用于处理与所述界面操作指令相关的业务逻辑的部分，还用于根据业务逻辑的处理结果更新应用程序的状态树store。
所述模型对象，负责管理所述用户界面相关的数据，例如，商品搜索页面至少包括商品搜索词和商品搜索结果两种数据，商品详情页面包括商品标题、价格、购买数量、商品详情等数据。
所述模型对象包括模型数据管理函数和业务逻辑处理函数，其中，所述模型数据管理函数是从基础模型类继承的封装应用程序状态树管理功能的接口函数。
所述基础模型类包括所述模型数据管理函数的内部技术细节，任意一个用户界面对应的模型对象均可继承所述基础模型类，从而使得开发者无需关心应用程序状态树的技术细节，只需专注于用户界面及与其对应的数据模型的开发。
步骤S102：所述指令处理函数调用所述业务逻辑处理函数，通过所述业务逻辑处理函数更新模型数据。
所述指令处理函数可首先获取与该界面操作指令相关的界面属性，并调用与界面对象连接的模型对象的相关业务逻辑处理函数，通过所述业务逻辑处理函数执行与界面操作指令对应的业务逻辑，并根据执行结果更新模型数据。
例如，界面操作指令为：根据用户输入的搜索词进行商品搜索，则与该界面操作指令相关的界面属性可包括用户输入的搜索词，该指令的指令处理函数调用模型对象包括的商品搜索函数，从数据库中检索该搜索词对应的商品检索结果，将该数据作为更新后的模型数据。
步骤S103：所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树。
本申请提供一种基于Redux的改进后的前端框架，该框架将Redux中的actioncreator等概念封装起来，对外只暴露简单的界面Page和模型Model两个概念，其中Model暴露的业务逻辑处理函数action实际为Redux的reducer,用来处理state的变更，而将Model中的action方法名作为Redux的action type,当在Page中调用this.actionName()时，Model会调用store.dispatch(action)来触发更新。
所述模型数据管理函数，用于将更新后的模型数据作为state存储到Store中，且只能将模型对象的模型数据存储到Store中，而无法更新Store中存储的其它模型对象的模型数据。
在基于Redux的前端架构中，应用程序涉及的所有state(状态)都以一个对象树的形式储存在一个单一的store(状态树)中。所述业务逻辑处理函数对数据state进行处理，所述模型数据管理函数封装了reducers等函数的使用，所述模型数据管理函数就是用于根据更新后的模型数据更新状态树。
本申请提供的方法，通过模型封装的模型数据管理函数管理应用程序的状态树；这种处理方式，使得当模型被实例化时，通过自动生成的唯一索引key，用于数据的索引，模型实例只能修改或覆盖该实例的模型数据，而无法修改或覆盖其它模型实例的模型数据，即不同模型实例的模型数据相互隔离；因此，可以有效提升大型应用程序的可靠性。
例如，用户界面为：商品搜索页；界面操作指令为：用户输入商品搜索词后，点击“搜索”按钮；本申请提供的用户界面处理装置捕获该按钮的单击事件，该事件处理函数首先获取用户输入的商品搜索词，然后调用与该界面对应的模型包括的“商品搜索”方法，该方法即为所述业务逻辑处理函数，该函数可先从数据库中查询满足“商品搜索词”的查询结果，然后更新模型的商品搜索结果数据，然后由模型封装的模型数据管理函数将商品搜索结果数据更新至应用程序的状态树中。
步骤S104：根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性。
所述映射关系，用于实现模型数据到用户界面的同步渲染，以及界面交互到模型数据的操作。其中，所述模型数据到用户界面的同步渲染，是指当模型数据发生变化时，自动更新界面对象的界面属性。
通过查询所述映射关系，即可根据更新后的模型数据更新与模型数据对应的界面属性。
要实施本申请提供的方法，先要构建模型数据与界面属性之间的映射关系。所述映射关系可采用如下方式构建：1)实例化界面类和模型类，此前需要开发者分别定义界面类、模型类，实例化后得到界面对象和模型对象；2)通过预设的连接函数，构建界面对象与模型对象之间的关联关系。例如，预设的连接函数为connect，该函数的入参为模型对象和界面对象，该函数的内部处理过程包括如下步骤：1)对模型对象的模型数据和界面对象的界面属性进行关联处理；2)生成所述模型对象的业务逻辑处理函数列表，以便所述界面对象调用。
步骤S105：根据更新后的界面属性重新渲染所述用户界面。
通过上述步骤可实时自动更新界面对象的界面属性。在实际应用中，开发者还需要使用UI绑定库，如react-redux，以根据更新后的界面属性重新渲染所述用户界面。
需要说明的是，Redux支持React、Angular、Ember、jQuery甚至纯JavaScript等UI绑定库。
其中，React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI，被认为是MVC中的V(视图)。React拥有较高的性能，代码逻辑非常简单。由于React框架允许以state函数的形式来描述界面，Redux通过action的形式来发起state变化，因此，本申请提供的方法Redux还是和React和Deku这类框架搭配起来用最好。
请参见图2，其为本申请提供的方法的实施例的数据管理方案的示例图。由图3可见，该数据管理方案涉及界面对象page和模型对象model，通过框架提供的connect连接方法，其中，model包括模型数据的定义state及一些业务逻辑处理函数actions，page包括呈现给用户的视图views，当用户与page交互时，page在用户指令对应的处理函数中调用model的业务逻辑处理函数更新模型数据，然后通过model封装的所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树，再根据connect连接方法构建的模型数据与界面属性之间的映射关系，实时自动更新与所述模型数据对应的界面属性，page根据更新后的界面属性重新渲染所述用户界面。
下面结合实例对本申请提供的方法作进一步说明。
例1，以Todo应用为例，该应用实现如下功能：捕获修改名称界面中“修改名称”按钮的单击事件，当捕获到该事件后，将用户在界面上输入的新名称更新显示在界面上。要实现该功能，开发者可定义一个TodoPage类和一个TodoModel类，其中TodoModel类继承基础Model类，TodoModel类包括模型数据的定义、和业务逻辑处理函数rename；TodoPage类继承基础Page类，TodoPage类包括渲染函数render、和指令处理函数onClick，具体可包括如下程序代码：
由例1的程序代码可见，本申请提供的方法的实现原理如下所述：1.当TodoModel被实例化时，通过自动生成的唯一索引key，用于数据的索引，其它界面的模型实例(模型对象)无法修改或者覆盖TodoModel对象的模型数据，由此可达到对不同界面的数据进行隔离的效果。2.当TodoPage和TodoModel连接时，2.1.连接方法(connect)会自动生成map方法，将模型数据到界面属性的映射自动完成，这样数据变更时既可以实时的被反馈到界面层(可依赖redux)，界面层根据新数据自动重绘(可依赖react)；2.2.连接方法还会根据TodoModel的方法，自动生成actions集合，绑定到界面层中，这样界面层既可以直接通过actions进行调用，如示例中的rename方法。
采用这种处理方式，一方面，做到了不同界面之间数据相互隔离，从而提高了应用程序的可靠性；另一方面，自动化的完成数据到界面的映射，省去了繁琐的步骤以及遗漏的风险，提高的开发效率和质量。
例2，以Some应用为例，该应用实现如下功能：在页面上显示累计数值，其中SomeModel类继承Bone包的Model类，包括模型数据的定义、和业务逻辑处理函数rename，SomePage类包括渲染函数render、和指令处理函数onClick，具体可包括如下程序代码：
例3，下面以商品搜索应用为例，对本申请提供的技术方案作进一步说明如下：
从上述实施例可见，本申请实施例提供的用户界面处理方法，通过封装Redux的数据管理相关概念，如store,actions creator,reducer等，对开发者只暴露界面类Page和模型类Model两个概念，构建界面对象与模型对象之间的关联关系，界面类的指令处理函数调用模型类的业务逻辑处理函数，通过业务逻辑处理函数获取更新后的模型数据，并调用模型类的封装后的模型数据管理函数，通过所述模型数据管理函数将所述模型数据更新至应用程序的状态树，并根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性，再根据更新后的界面属性重新渲染所述用户界面；采用这种处理方式，使得将redux中的action creator的概念封装起来，对外暴露的Model的action实际为redux的reducer,用来处理state的变更，而将Model中的action方法名作为redux的action type,当在Page中调用this.actionName()时Model会调用store.dispatch(action)来触发更新；由此，一方面，导致不同界面之间数据相互隔离；因此，可以有效提升应用程序的可靠性；另一方面，对于开发者而言，只需要关心界面的展示和数据模型的处理，极大简化数据流转的过程，使得程序逻辑简单清晰，自动化的完成数据到界面的映射，省去了繁琐的步骤以及遗漏的风险；因此，可以有效降低开发难度，提高开发效率和质量。
在上述的实施例中，提供了一种用户界面处理方法，与之相对应的，本申请还提供一种用户界面处理装置。该装置是与上述方法的实施例相对应。
第二实施例
请参看图3，其为本申请的用户界面处理装置的实施例的示意图。由于装置实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的装置实施例仅仅是示意性的。
本申请另外提供一种用户界面处理装置，包括：
关联关系构建单元301，用于构建界面对象与模型对象之间的关联关系；其中，所述界面对象包括与界面操作指令对应的指令处理函数，所述模型对象包括模型数据管理函数和业务逻辑处理函数，所述模型数据管理函数是从基础模型类继承的封装应用程序状态树管理功能的接口函数；
模型数据更新单元302，用于所述指令处理函数调用所述业务逻辑处理函数，通过所述业务逻辑处理函数更新所述模型对象的模型数据；
状态树更新单元303，用于所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树；
界面属性更新单元304，用于根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性；
用户界面渲染单元305，用于根据更新后的界面属性重新渲染用户界面。
可选的，还包括：
模型对象生成单元，用于根据模型类，生成所述模型对象；
界面对象生成单元，用于根据界面类，生成所述界面对象。
可选的，所述关联关系构建单元301，具体用于通过连接函数，构建界面对象与模型对象之间的关联关系。
可选的，所述关联关系构建单元301包括：
映射关系构建子单元，用于构建所述映射关系；
函数列表生成子单元，用于生成所述模型对象的业务逻辑处理函数列表；
函数列表绑定子单元，用于将所述函数列表绑定至所述界面对象，以使得所述指令处理函数调用所述业务逻辑处理函数。
可选的，所述状态树更新单元，具体用于所述模型数据管理函数通过调用前端架构Redux提供的用于管理状态树的相关函数，将所述更新后的模型数据作为状态state存储到所述状态树中。
第三实施例
请参考图4，其为本申请的电子设备实施例的示意图。由于设备实施例基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。下述描述的设备实施例仅仅是示意性的。
本实施例的一种电子设备，该电子设备包括：处理器401和存储器402；存储器，用于存储实现用户界面处理方法的程序，该设备通电并通过所述处理器运行该用户界面处理方法的程序后，执行下述步骤：构建界面对象与模型对象之间的关联关系；其中，所述界面对象包括与界面操作指令对应的指令处理函数，所述模型对象包括模型数据管理函数和业务逻辑处理函数，所述模型数据管理函数是从基础模型类继承的封装应用程序状态树管理功能的接口函数；所述指令处理函数调用所述业务逻辑处理函数，通过所述业务逻辑处理函数更新所述模型对象的模型数据；所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树；根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性；根据更新后的界面属性重新渲染用户界面。
本申请虽然以较佳实施例公开如上，但其并不是用来限定本申请，任何本领域技术人员在不脱离本申请的精神和范围内，都可以做出可能的变动和修改，因此本申请的保护范围应当以本申请权利要求所界定的范围为准。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
1、计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
2、本领域技术人员应明白，本申请的实施例可提供为方法、***或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
Claims (9)
1.一种用户界面处理方法，其特征在于，包括：
将前端架构Redux的数据管理相关概念封装为模型类和界面类，所述数据管理相关概念包括store对象、动作创建器action creator、reducer函数；
根据模型类生成模型对象，根据界面类生成界面对象；
构建界面对象与模型对象之间的关联关系；其中，所述界面对象包括与界面操作指令对应的指令处理函数，所述模型对象包括模型数据管理函数和业务逻辑处理函数，所述模型数据管理函数是从基础模型类继承的封装应用程序状态树管理功能的接口函数；
所述指令处理函数调用所述业务逻辑处理函数，通过所述业务逻辑处理函数更新所述模型对象的模型数据；
所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树；
根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性；
根据更新后的界面属性重新渲染用户界面。
2.根据权利要求1所述的方法，其特征在于，所述构建界面对象与模型对象之间的关联关系，包括：
通过连接函数，构建界面对象与模型对象之间的关联关系。
3.根据权利要求1所述的方法，其特征在于，所述构建界面对象与模型对象之间的关联关系，包括：
构建所述映射关系；
生成所述模型对象的业务逻辑处理函数列表；
将所述函数列表绑定至所述界面对象，以使得所述指令处理函数调用所述业务逻辑处理函数。
4.根据权利要求1所述的方法，其特征在于，所述模型对象通过所述模型数据管理函数，并将更新后的模型数据更新至应用程序的状态树，包括：
所述模型数据管理函数通过调用前端架构Redux提供的用于管理状态树的相关函数，将所述更新后的模型数据作为状态state存储到所述状态树中。
5.一种用户界面处理装置，其特征在于，包括：
封装单元，用于将前端架构Redux的数据管理相关概念封装为模型类和界面类，所述数据管理相关概念包括store对象、动作创建器action creator、reducer函数；
对象生成单元，用于根据模型类生成模型对象，根据界面类生成界面对象；
关联关系构建单元，用于构建界面对象与模型对象之间的关联关系；其中，所述界面对象包括与界面操作指令对应的指令处理函数，所述模型对象包括模型数据管理函数和业务逻辑处理函数，所述模型数据管理函数是从基础模型类继承的封装应用程序状态树管理功能的接口函数；
模型数据更新单元，用于所述指令处理函数调用所述业务逻辑处理函数，通过所述业务逻辑处理函数更新所述模型对象的模型数据；
状态树更新单元，用于所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树；
界面属性更新单元，用于根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性；
用户界面渲染单元，用于根据更新后的界面属性重新渲染用户界面。
6.根据权利要求5所述的装置，其特征在于，
所述关联关系构建单元，具体用于通过连接函数，构建界面对象与模型对象之间的关联关系。
7.根据权利要求5所述的装置，其特征在于，所述关联关系构建单元包括：
映射关系构建子单元，用于构建所述映射关系；
函数列表生成子单元，用于生成所述模型对象的业务逻辑处理函数列表；
函数列表绑定子单元，用于将所述函数列表绑定至所述界面对象，以使得所述指令处理函数调用所述业务逻辑处理函数。
8.根据权利要求5所述的装置，其特征在于，
所述状态树更新单元，具体用于所述模型数据管理函数通过调用前端架构Redux提供的用于管理状态树的相关函数，将所述更新后的模型数据作为状态state存储到所述状态树中。
9.一种电子设备，其特征在于，包括：
处理器；以及
存储器，用于存储实现用户界面处理方法的程序，该设备通电并通过所述处理器运行该用户界面处理方法的程序后，执行下述步骤：将前端架构Redux的数据管理相关概念封装为模型类和界面类，所述数据管理相关概念包括store对象、动作创建器action creator、reducer函数；根据模型类生成模型对象，根据界面类生成界面对象；构建界面对象与模型对象之间的关联关系；其中，所述界面对象包括与界面操作指令对应的指令处理函数，所述模型对象包括模型数据管理函数和业务逻辑处理函数，所述模型数据管理函数是从基础模型类继承的封装应用程序状态树管理功能的接口函数；所述指令处理函数调用所述业务逻辑处理函数，通过所述业务逻辑处理函数更新所述模型对象的模型数据；所述模型对象通过所述模型数据管理函数，将更新后的模型数据更新至应用程序的状态树；根据模型数据与界面属性之间的映射关系，更新与所述模型数据对应的界面属性；根据更新后的界面属性重新渲染用户界面。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810936445.9A CN110837367B (zh) | 2018-08-16 | 2018-08-16 | 用户界面处理方法、装置及电子设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810936445.9A CN110837367B (zh) | 2018-08-16 | 2018-08-16 | 用户界面处理方法、装置及电子设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110837367A CN110837367A (zh) | 2020-02-25 |
| CN110837367B true CN110837367B (zh) | 2022-05-27 |
Family
ID=69574256
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810936445.9A Active CN110837367B (zh) | 2018-08-16 | 2018-08-16 | 用户界面处理方法、装置及电子设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110837367B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113722037B (zh) * | 2021-09-03 | 2023-08-11 | 北京百度网讯科技有限公司 | 一种用户界面的刷新方法、装置、电子设备及存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106598556A (zh) * | 2015-10-15 | 2017-04-26 | 阿里巴巴集团控股有限公司 | 用户界面生成方法及装置 |
| CN106815016A (zh) * | 2016-12-23 | 2017-06-09 | 四川大学 | 一种基于领域驱动设计的mvvm设计模型 |
| CN107908398A (zh) * | 2017-11-08 | 2018-04-13 | 四川长虹电器股份有限公司 | 基于React技术构建web应用的方法 |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101872305B (zh) * | 2010-06-08 | 2013-01-09 | 用友软件股份有限公司 | Ui表现和业务逻辑分离方法和*** |
| US8806348B2 (en) * | 2011-05-12 | 2014-08-12 | Google Inc. | Data model generation based on user interface specification |
| CN107241311A (zh) * | 2017-05-15 | 2017-10-10 | 北京微影时代科技有限公司 | 一种实时选座方法及装置 |
| CN107544806B (zh) * | 2017-09-04 | 2018-11-09 | 江苏中威科技软件***有限公司 | 可视化表单绘制方法 |
-
2018
- 2018-08-16 CN CN201810936445.9A patent/CN110837367B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106598556A (zh) * | 2015-10-15 | 2017-04-26 | 阿里巴巴集团控股有限公司 | 用户界面生成方法及装置 |
| CN106815016A (zh) * | 2016-12-23 | 2017-06-09 | 四川大学 | 一种基于领域驱动设计的mvvm设计模型 |
| CN107908398A (zh) * | 2017-11-08 | 2018-04-13 | 四川长虹电器股份有限公司 | 基于React技术构建web应用的方法 |
Non-Patent Citations (2)
| Title |
|---|
| Towards a minimalist multimodal dialogue framework using recursive MVC pattern;Li Li;《ICMI "08: Proceedings of the 10th international conference on Multimodal interfaces》;20081020;全文 * |
| 一种改进的MVC框架在ERP***开发中的应用;叶小艳等;《计算机技术与发展》;20180516(第09期);全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110837367A (zh) | 2020-02-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111158818B (zh) | 一种页面渲染方法和装置 | |
| US20230057335A1 (en) | Deployment of self-contained decision logic | |
| US8751437B2 (en) | Single persistence implementation of business objects | |
| US9146955B2 (en) | In-memory, columnar database multidimensional analytical view integration | |
| US10678616B2 (en) | System and method for encapsulating computer communications | |
| US11093222B2 (en) | Generating interfaces from annotated entity definitions for developing applications | |
| US9524279B2 (en) | Help document animated visualization | |
| US20170206188A1 (en) | Manipulation of an ajax tree presentation | |
| WO2019233292A1 (zh) | 一种应用程序的开发方法和装置 | |
| US20120096070A1 (en) | Web application framework remoting model api | |
| US9141450B2 (en) | Embedded application communication | |
| CN115309516A (zh) | 一种应用生命周期的检测方法、装置及计算机设备 | |
| JP2021068415A (ja) | コード実行方法、装置、レンダリングデバイス、記憶媒体、及びプログラム | |
| US11194602B2 (en) | Runtime execution of entities and services in an application object runtime environment | |
| CN110837367B (zh) | 用户界面处理方法、装置及电子设备 | |
| CN115328458B (zh) | 一种业务应用开发方法及装置 | |
| CN112235132A (zh) | 动态配置服务的方法、装置、介质以及服务器 | |
| US9298473B2 (en) | System and method for a generic object access layer | |
| US11093220B2 (en) | Generating interfaces from data and service definitions for developing applications | |
| US9230022B1 (en) | Customizable result sets for application program interfaces | |
| CN115390835A (zh) | 一种小程序标签化搜索框的构建方法及设备 | |
| CN111949265A (zh) | 一种数据处理方法、装置和电子设备 | |
| CN111198899A (zh) | 应用程序中实体渲染的开发***及方法 | |
| WO2024109400A1 (zh) | 子应用页面处理方法、装置、计算机设备和存储介质 | |
| Sikora | Dart Essentials |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 40024332 Country of ref document: HK |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |