CN109683879B - 前端组件处理方法及装置 - Google Patents

Abstract

本发明实施例涉及前端组件处理方法及装置。前端组件处理方法包括：将页面拆分成多个容器，对页面中包含的组件分类并且将关联性强的组件放在一个容器中；针对每个容器中的每个组件进行最细粒度拆分，将拆分得到的业务组件链接地存放到相应的容器中，形成拆分后的第一组件链，将拆分得到的最细粒度公共组件存入组件库，组件库中的最细粒度公共组件可以被业务组件引用，形成第二组件链；以及第一组件链或第二组件链中的待传递数据的组件将数据传入数据中心，第一组件链或第二组件链中的待获取数据的组件获取待传递数据的组件传入数据中心中的数据。通过本发明实施例，当页面刷新时可降低浏览器消耗，以及实现组件多层级组件间高效的数据传输。

Description

前端组件处理方法及装置

技术领域

本发明实施例涉及互联网技术领域，尤其涉及基于MVC框架的前端组件处理方法及装置。

背景技术

目前，在前端开发领域中，模型-视图-控制器(Model View Controller，MVC)结构的框架是开发者使用的主流框架之一。在使用此类框架的系统中，开发者可以根据需要将项目中的模块拆分为多个组件，多个组件继续拆分，通常，将要拆分的组件称为父组件，组件拆分后得到的组件称为子组件，通过在模块中引用组件，在父组件中引用子组件，可实现组件的重复利用，避免同一功能的多次开发，提高开发代码的复用性。

现有技术中，利用MVC框架对组件进行拆分时，由于组件之间没有进行分类和隔离，当页面内容刷新时，会引起页面上不相关的内容刷新，即不相关的组件的刷新，严重消耗浏览器性能。

而且目前对组件进行拆分，主要依靠工程师的个人经验和特定的项目架构特点，很难把控组件拆分的最小粒度，以至不能在开发效率、维护成本和网页性能之间找到平衡点。

另外目前组件的数据传输主要是通过组件的属性传递，当有多层级组件间数据进行传输时，通过属性进行组件之间的数据传递，会很繁琐。

发明内容

本发明实施例提供的前端组件处理方法及装置，可以根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中，当页面内容刷新时，不会引起页面上不相关组件的刷新，减少浏览器性能的消耗。针对每个容器中的每个组件进行最细粒度规则进行组件的拆分，可以在前端开发效率、维护成本和网页性能之间找到平衡点。以及针对拆分后组件链中组件之间的数据传递，是通过组件与数据中心之间的交互，实现组件之间的数据传递，可实现多层级组件间高效的数据传输。

本发明实施例的一个方面提供了前端组件处理方法，该方法包括分类步骤，根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中；拆分步骤，针对每个容器中的中的每个组件进行最细粒度拆分，将拆分得到的业务组件链接地存放到相应的所述容器中，形成拆分后的第一组件链，将拆分得到的最细粒度公共组件存入组件库，所述组件库中的最细粒度公共组件可以被业务组件引用，形成第二组件链；以及数据传递步骤，所述第一组件链或所述第二组件链中的待传递数据的组件将数据传入数据中心，所述第一组件链或所述第二组件链中的待获取数据的组件根据预设的声明，获取所述待传递数据的组件传入所述数据中心中的数据。

一种可能的实施例中，所述容器是利用浏览器可识别的分割标签得到的。

另一种可能的实施例中，针对所述容器中的业务组件，所述拆分步骤包括：对所述业务组件进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

又一种可能的实施例中，针对所述容器中的公共组件，所述拆分步骤包括：对所述公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链。

一种可能的实施例中，针对所述容器中的混合组件，所述混合组件包含业务内容和公共内容，所述拆分步骤包括：针对所述混合组件进行业务内容的DOM结构的嵌套链拆分以及业务内容的功能拆分，使所述混合组件的业务内容与所述混合组件的公共内容分离，得到对应于公共内容的分离后的公共组件与对应于业务内容的分离后的业务组件；将所述分离后的公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链；以及对所述分离后的业务组件继续进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将所述混合组件拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

另一种可能的实施例中，所述数据传递步骤包括：所述第一组件链或所述第二组件链中的待传递数据的组件将数据通过上下文模块传入数据中心；所述第一组件链或所述第二组件链中待获取数据的组件根据预设的声明，通过所述上下文模块获取所述待传递数据的组件传入所述数据中心中的数据。

又一种可能的实施例中，所述数据传递步骤之前，所述方法还包括：所述上下文模块定义数据中心中要传递数据的数据类型；所述上下文模块定义数据中心中要传递数据的参数内容。

一种可能的实施例中，所述数据中心将传入的数据的数据结构和函数结构以键值对的形式存储。

本发明实施例的另一个方面提供了前端组件处理装置，该装置包括分类单元，拆分单元以及数据传输单元。其中，分类单元，用于根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中；拆分单元，用于针对每个容器中的中的每个组件进行最细粒度拆分，将拆分得到的业务组件链接地存放到相应的所述容器中，形成拆分后的第一组件链，将拆分得到的最细粒度公共组件存入组件库，所述组件库中的最细粒度公共组件可以被业务组件引用，形成第二组件链；以及数据传递单元，用于使所述第一组件链或所述第二组件链中的待传递数据的组件将数据传入数据中心，使所述第一组件链或所述第二组件链中的待获取数据的组件根据预设的声明，获取所述待传递数据的组件传入所述数据中心中的数据。

一种可能的实施例中，所述分类单元采用如下方式得到所述容器：利用浏览器可识别的分割标签得到的。

另一种可能的实施例中，所述拆分单元采用如下方式对业务组件进行拆分：对所述业务组件进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

又一种可能的实施例中，所述拆分单元采用如下方式对公共组件进行拆分：对所述公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链。

一种可能的实施例中，所述拆分单元采用如下方式对混合组件进行拆分：针对所述混合组件进行业务内容的DOM结构的嵌套链拆分以及业务内容的功能拆分，使所述混合组件的业务内容与所述混合组件的公共内容分离，得到对应于公共内容的分离后的公共组件与对应于业务内容的分离后的业务组件；将所述分离后的公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链；以及对所述分离后的业务组件继续进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将所述混合组件拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

另一种可能的实施例中，所述数据传递单元采用如下方式进行数据传递：针对所述第一组件链或所述第二组件链中的待传递数据的组件，将代传递数据通过上下文模块传入数据中心；针对所述第一组件链或所述第二组件链中待获取数据的组件，根据预设的声明，通过所述上下文模块获取所述待传递数据的组件传入所述数据中心中的数据。

又一种可能的实施例中，所述数据传递单元还用于：在所述数据传递之前，通过所述上下文模块定义数据中心中要传递数据的数据类型；以及通过所述上下文模块定义数据中心中要传递数据的参数内容。

一种可能的实施例中，所述数据传递单元采用如下方式将数据存储到数据中心：将传入的数据的数据结构和函数结构以键值对的形式存储到所述数据中心。

一种可能的实施例中，本发明实施例还提供一种服务器，所述服务器包括：存储器，配置用于存储指令；以及处理器，配置用于调用所述指令执行上述可能的实施方式中任一所述的方法。

一种可能的实施方式中，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令在由处理器执行时，执行上述可能的实施方式中任一所述的方法。

本发明实施例提供的前端组件处理方法及装置，在组件拆分之前，根据产品功能或者产品结构将页面拆分成多个容器，将相关联的业务组件存储到对应的容器中，当页面内容刷新时，由于不相关的组件被隔离，不会引起页面上不相关的组件的刷新，减少浏览器性能的消耗。并且基于业务组件和公共组件，分别确定了组件拆分的最细粒度规则，根据组件的最细粒度进行拆分，可以实现组件开发效率、维护成本和网页性能之间的平衡，并且利用组件与数据中心的交互实现组件之间的数据传递，当多层级组件需要数据传输时，可实现两个没有调用关系的组件进行数据传递，实现组件间数据高效稳定的传输。

附图说明

图1是本发明实施例提供的基于MVC框架的前端组件处理方法实施流程图。

图2是利用“容器”存放同类组件并对不同类组件进行隔离后的项目架构示例图。

图3是完成组件拆分后的项目架构示意图。

图4是建立了数据中心后的项目架构示意图。

图5是本发明实施例提供的前端组件处理装置示意图。

具体实施方式

下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。

需要注意，虽然本文中使用“第一”、“第二”等表述来描述本发明的实施方式的不同模块、步骤和数据等，但是“第一”、“第二”等表述仅是为了在不同的模块、步骤和数据等之间进行区分，而并不表示特定的顺序或者重要程度。实际上，“第一”、“第二”等表述完全可以互换使用。

本发明实施例提供的前端组件处理方法，该前端组件处理方法可应用于对前端组件的拆分以及拆分后组件链的组件之间数据传递的应用场景。在该场景下，一种可能的实施方式中，组件拆分之前，根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中，容器之间相互隔离，针对容器中的每个组件进行最细粒度拆分，得到拆分后的组件链，根据组件链中组件与数据中心的交互，实现组件之间的数据传递。

图1所示为本发明实施例提供的前端组件处理方法实施流程图。图1所示的方法执行主体可以是前端组件处理装置，该前端组件处理装置可以是客户端，也可以是在客户端中集成的前端组件处理装置，本发明实施例不做限定。参阅图1所示，该基于MVC框架的前端组件处理方法包括：

S101：分类步骤，根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中。

可能的实施方式中，本发明实施例可以根据产品功能或者页面结构将页面拆分成多个容器，其中，容器之间相互隔离并且容器是利用浏览器可识别的分割标签得到的，例如针对html，可以利用html的div得到。

当然如果针对xml、jsx或者Php等的开发环境，也可以利用相应的分割标签实现容器的功能。本发明实施例在此不再一一展开。

本发明实施例中，可以将页面上功能独立的部分，称为一个组件，组件内部包含基本的html结构和函数操作，并对外暴露出接口，让参数和函数操作可以从外部传递。并且根据产品功能或者页面结构，对页面中包含的组件进行分类，将关联性强的组件放在一个容器中。

其中，容器内部没有具体函数，在容器里存放的具体内容以目录结构形式存放，例如存储在容器中的多个关联性强的组件，以组件的目录结构形式存放。利用容器存放关联性强组件的项目架构例如可如图2所示。

S102：拆分步骤，针对每个容器中的每个组件进行最细粒度拆分，将拆分得到的业务组件链接地存放到相应的所述容器中，形成拆分后的第一组件链，将拆分得到的最细粒度公共组件存入组件库，所述组件库中的最细粒度公共组件可以被业务组件引用，形成第二组件链。

本发明实施例中，可以预先针对容器中的每个组件，进行组件的复用性的评估，将复用性低跟业务紧密相关的组件，可以称为业务组件，将复用性高在页面多个位置使用到组件可以称为公共组件。一个组件可以是只包含业务内容的业务组件，可以是只包含公共内容的公共组件，也可以是既包含业务内容又包含公共内容的混合组件。一种可能的实施方式，本发明实施例中将拆分后得到的业务组件链接的存放到容器中，形成拆分后的第一组件链。将拆分后最细粒度的公共组件存放到组件库中，以供业务组件通过import语句引用，形成第二组件链。本发明实施例为描述方便，将只有业务组件的组件链称为第一组件链，将具有业务组件和公共组件的组件链称为第二组件链。

其中，在第一组件链或者第二组件链中，将被拆分的组件称为父组件，将拆分后得到的组件称为子组件。例如，如果业务组件需要引用组件库中的公共组件，那么可以是需要引用的业务组件为父组件，被引用的公共组件为子组件。

针对容器中的组件为业务组件的拆分步骤可以为如下方式：

根据业务组件的最细粒度标准，对业务组件进行DOM结构的嵌套链拆分以及功能拆分，得到组件内部的DOM结构只有一条嵌套链，且组件内只包含单一功能的最细粒度业务组件时，停止拆分，将业务组件拆分过程中得到的所有业务组件，链接地存放到相应的容器中，形成第一组件链。

针对容器中的组件为公共组件的拆分步骤可以为如下方式：

根据公共组件的最细粒度标准，对公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件。将拆分得到的最细粒度公共组件存储至组件库，组件库中的公共组件都可以被业务组件引用而形成第二组件链。

针对容器中的组件为混合组件，即包含业务内容和公共内容的组件，拆分步骤可以为如下方式：

针对该混合组件，进行业务内容的DOM结构的嵌套链拆分以及业务内容的功能拆分，使混合组件的业务内容与组件的公共内容分离，得到对应于公共内容的分离后的公共组件与对应于业务内容的分离后的业务组件。将分离后的公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到组件内部的DOM结构只有一条嵌套链，且组件的具体功能操作函数都由外层传递的最细粒度公共组件，将拆分得到的最细粒度公共组件存储至组件库。以及对分离后的业务组件继续进行业务内容的DOM结构的嵌套链拆分以及功能拆分，得到组件内部的DOM结构只有一条嵌套链，且组件内只包含单一功能的最细粒度业务组件，将混合组件拆分过程中得到的所有业务组件，链接地存放到相应的容器中，形成第一组件链。

至此，可针对容器中的每个组件进行拆分，得到拆分后的业务组件，将拆分后业务组件链接地存放在容器中，形成拆分后的第一组件链。或者将拆分得到的最细粒度公共组件存放到组件库中，由此可完成组件拆分后的项目架构。图3示意性地示出了完成组件拆分后的项目架构，其中图3所示的一个容器中的组件1和组件2分别为所述容器中的两个组件拆分得到的最细粒度业务组件，组件1和组件2中引入了组件库中的公共组件，从而形成两条父子组件链。

针对组件内部的嵌套链的概念可如下例所示：

如果一个组件内部的DOM结构为：

所有DOM都在一个div中，这就是只有一条嵌套链，不需要再拆分；

如果组件内部的DOM结构为：

该组件内部存在两个嵌套链。需要针对该组件的DOM结构的嵌套链继续拆分。

S103：数据传递步骤，所述第一组件链或所述第二组件链中的待传递数据的组件将数据传入数据中心，所述第一组件链或所述第二组件链中的待获取数据的组件根据预设的声明，获取所述待传递数据的组件传入所述数据中心中的数据。

本发明实施例中，为实现第一组件链或第二组件链里组件之间的数据传递，可预先建立数据中心，一种可能的实施方式，本发明实施例中，数据中心定义了待传递数据的数据结构以及函数结构的存储方式，例如待传递数据的数据结构和函数结构可以是键值对的形式存储在数据中心的js文件中，其中，数据的数据结构和函数结构均未被定义，为空，为了避免数据中心里单个文件过大，在数据中心中可以根据容器划分js文件，单个js文件存放单个容器中组件的数据结构和函数结构，可能的实施方式，如果一个容器中相关的数据结构和函数结构过多，放在一个js文件导致文件过大的话，可以分成多个js文件来记录，然后存放在一个独立的目录结构中，该目录结构与容器平级。建立了数据中心后的项目架构可如图4所示。

由于上下文模块即context可以允许将参数和函数在两个没有调用关系的组件间传递，根据context的这个特性，可将context进行封装，进而实现两个没有调用关系的组件间数据的传递。

可能的实施方式中，本发明实施例中，针对context，例如可以使用context的childContextTypes来初始化数据中心中传入数据的数据类型，也就是定义了传入数据的数据结构的类型，如字符串、json对象、布尔值、数字类型等等，例如可以通过context的getChildContext设置传入数据的参数内容，例如设置传入参数的名字，传入参数的类型，或者传入参数的函数结构等形式参数的内容，此时完成了context的第一次封装，然后根据js模块化开发规范，对context进行二次封装，生成一个独立的文件，并暴露出一个对外接口，例如可以是getChildContext接口，待传入数据的组件可以通过上下文这个接口设置传入数据中心的参数的内容。

待传入数据的组件和待获取数据的组件为了使用封装后的context和数据中心建立联系，还需要在整个项目的入口文件，例如main.js文件中引入context文件，这样在项目的各个组件中都可以通过调用context暴露出的接口，例如可以是getChildContext接口，调用数据中心中的数据的具体内容，也可以在组件中声明需要用到的函数和数据，声明后组件内即可读取使用。

具体地，待传递数据的组件将数据通过context的getChildContext接口传入数据中心，待获取数据的组件根据预设的声明，通过context的getChildContext接口来获取数据中心中待传递数据的组件传入的数据。

例如一个待传递数据的组件A组件需要传递数据name给待获取数据的组件B组件，那么在A组件中需要做的操作是：将数据name当作实参，通过context暴露的公共接口，例如getChildContext接口，传入数据中心。具体地，context接收到组件A的参数后，开始按照模块中封装的数据结构和函数结构，快速更新数据中心中一个键名为name的数据，此时完成了A组件将需要传递的数据name传入了数据中心，在B组件中要做的操作是：在Types中对name的键名和类型进行声明，例如：

static contextTypes＝{

name:PropTypes.string

}

表示在B组件中可以使用一个叫name的字符串，之后在B组件内部即可使用name的值。具体地，B组件通过context暴露的公共接口，例如getChildContext接口，获取A组件传入数据中心的数据name的值。

通过以上方式，可以实现数据直接、高效的传输。

本发明实施例提供的前端组件处理方法，根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中，对每个容器中的组件按照拆分规则进行最细粒度拆分，针对拆分后组件链中的组件之间需要的数据传递，可利用预设的数据中心，通过组件和数据中心的交互，进而实现组件之间的数据传递。通过对组件分类并利用容器进行隔离，可避免当页面内容刷新时，不相关组件也会被刷新，导致消耗浏览器性能的情况。通过对组件根据最细粒度拆分规则进出拆分，可以使组件开发效率、维护成本和网页性能之间得到平衡。并且利用组件与数据中心的交互，实现了组件之间的数据传递，当多层级组件需要数据传输时，可实现两个没有调用关系的组件进行数据传递，实现组件间数据高效稳定的传输。

基于相同的发明构思，本发明实施例还提供了前端组件处理装置。

如图5所示，本发明实施例提供的前端组件处理装置500，该装置包括分类单元501，拆分单元502以及数据传递单元503。其中，分类单元501，用于根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中；拆分单元502，用于针对每个容器中的中的每个组件进行最细粒度拆分，将拆分得到的业务组件链接地存放到相应的所述容器中，形成拆分后的第一组件链，将拆分得到的最细粒度公共组件存入组件库，所述组件库中的最细粒度公共组件可以被业务组件引用，形成第二组件链；以及数据传递单元503，用于使所述第一组件链或所述第二组件链中的待传递数据的组件将数据传入数据中心，使所述第一组件链或所述第二组件链中的待获取数据的组件根据预设的声明，获取所述待传递数据的组件传入所述数据中心中的数据。

一种可能的实施例中，所述分类单元501采用如下方式得到所述容器：利用浏览器可识别的分割标签得到的。

另一种可能的实施例中，所述拆分单元502采用如下方式对业务组件进行拆分：对所述业务组件进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

又一种可能的实施例中，所述拆分单元502采用如下方式对公共组件进行拆分：对所述公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链。

一种可能的实施例中，所述拆分单元502采用如下方式对混合组件进行拆分：针对所述混合组件进行业务内容的DOM结构的嵌套链拆分以及业务内容的功能拆分，使所述混合组件的业务内容与所述混合组件的公共内容分离，得到对应于公共内容的分离后的公共组件与对应于业务内容的分离后的业务组件；将所述分离后的公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链；以及对所述分离后的业务组件继续进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将所述混合组件拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

另一种可能的实施例中，所述数据传递单元503采用如下方式进行数据传递：针对所述第一组件链或所述第二组件链中的待传递数据的组件，将代传递数据通过上下文模块传入数据中心；针对所述第一组件链或所述第二组件链中待获取数据的组件，根据预设的声明，通过所述上下文模块获取所述待传递数据的组件传入所述数据中心中的数据。

又一种可能的实施例中，所述数据传递单元503还用于：在所述数据传递之前，通过所述上下文模块定义数据中心中要传递数据的数据类型；以及通过所述上下文模块定义数据中心中要传递数据的参数内容。

一种可能的实施例中，所述数据传递单元503采用如下方式将数据存储到数据中心：将传入的数据的数据结构和函数结构以键值对的形式存储到所述数据中心。

一种可能的实施方式中，本发明实施例还提供一种服务器，所述服务器包括：存储器，配置用于存储指令；以及处理器，配置用于调用所述指令执行上述可能的实施方式中任一所述的方法。

一种可能的实施方式中，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令在由处理器执行时，执行上述可能的实施方式中任一所述的方法。

可能的实施方式中，本发明实施例还提供了以下实施方式：

一种可能的实施方式中，本发明实施例提供的前端组件处理方法包括：分类步骤，根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中；拆分步骤，针对每个容器中的每个组件进行最细粒度拆分，将拆分得到的业务组件链接地存放到相应的所述容器中，形成拆分后的第一组件链，将拆分得到的最细粒度公共组件存入组件库，所述组件库中的最细粒度公共组件可以被业务组件引用，形成第二组件链；以及数据传递步骤，所述第一组件链或所述第二组件链中的待传递数据的组件将数据传入数据中心，所述第一组件链或所述第二组件链中的待获取数据的组件根据预设的声明，获取所述待传递数据的组件传入所述数据中心中的数据。

一种可能的实施方式中，所述容器是利用浏览器可识别的分割标签得到的。

一种可能的实施方式中，针对所述容器中的业务组件，所述拆分步骤包括：对所述业务组件进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将拆分过程中得到的所有业务组件链接地存放到相应的容器中，形成所述第一组件链。

一种可能的实施方式中，针对所述容器中的公共组件，所述拆分步骤包括：对所述公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链。

一种可能的实施方式中，针对所述容器中的混合组件，所述混合组件包含业务内容和公共内容，所述拆分步骤包括：对所述混合组件进行业务内容的DOM结构的嵌套链拆分以及业务内容的功能拆分，使所述混合组件的业务内容与所述混合组件的公共内容分离，得到对应于公共内容的分离后的公共组件与对应于业务内容的分离后的业务组件；将所述分离后的公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链；以及对所述分离后的业务组件继续进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将所述混合组件拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

一种可能的实施方式中，所述数据传递步骤包括：所述第一组件链或所述第二组件链中的待传递数据的组件将数据通过上下文模块传入数据中心；所述第一组件链或所述第二组件链中待获取数据的组件根据预设的声明，通过所述上下文模块获取所述待传递数据的组件传入所述数据中心中的数据。

一种可能的实施方式中，所述数据传递步骤之前，所述方法还包括：所述上下文模块定义数据中心中要传递数据的数据类型；以及所述上下文模块定义数据中心中要传递数据的参数内容。

一种可能的实施方式中，所述数据中心将传入的数据的数据结构和函数结构以键值对的形式存储。

一种可能的实施方式中，本发明实施例还提供一种前端组件处理装置，所述装置包括：分类单元，用于根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中；拆分单元，用于针对每个容器中的中的每个组件进行最细粒度拆分，将拆分得到的业务组件链接地存放到相应的所述容器中，形成拆分后的第一组件链，将拆分得到的最细粒度公共组件存入组件库，所述组件库中的最细粒度公共组件可以被业务组件引用，形成第二组件链；以及数据传递单元，用于使所述第一组件链或所述第二组件链中的待传递数据的组件将数据传入数据中心，使所述第一组件链或所述第二组件链中的待获取数据的组件根据预设的声明，获取所述待传递数据的组件传入所述数据中心中的数据。

一种可能的实施方式中，所述分类单元采用如下方式得到所述容器：利用浏览器可识别的分割标签得到的。

一种可能的实施方式中，所述拆分单元采用如下方式对业务组件进行拆分：对所述业务组件进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

一种可能的实施方式中，所述拆分单元采用如下方式对公共组件进行拆分：对所述公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链。

一种可能的实施方式中，所述拆分单元采用如下方式对混合组件进行拆分：针对所述混合组件进行业务内容的DOM结构的嵌套链拆分以及业务内容的功能拆分，使所述混合组件的业务内容与所述混合组件的公共内容分离，得到对应于公共内容的分离后的公共组件与对应于业务内容的分离后的业务组件；将所述分离后的公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链；以及对所述分离后的业务组件继续进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；将所述混合组件拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

一种可能的实施方式中，所述数据传递单元采用如下方式进行数据传递：针对所述第一组件链或所述第二组件链中的待传递数据的组件，将代传递数据通过上下文模块传入数据中心；针对所述第一组件链或所述第二组件链中待获取数据的组件，根据预设的声明，通过所述上下文模块获取所述待传递数据的组件传入所述数据中心中的数据。

一种可能的实施方式中，所述数据传递单元还用于：在所述数据传递之前，通过所述上下文模块定义数据中心中要传递数据的数据类型；以及通过所述上下文模块定义数据中心中要传递数据的参数内容。

一种可能的实施方式中，所述数据传递单元采用如下方式将数据存储到数据中心：将传入的数据的数据结构和函数结构以键值对的形式存储到所述数据中心。

一种可能的实施方式中，本发明实施例还提供一种服务器，所述服务器包括：存储器，配置用于存储指令；以及处理器，配置用于调用所述指令执行上述可能的实施方式中任一所述的方法。

一种可能的实施方式中，本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令在由处理器执行时，执行上述可能的实施方式中任一所述的方法。

可以理解的是，本发明实施例中尽管在附图中以特定的顺序描述操作，但是不应将其理解为要求按照所示的特定顺序或是串行顺序来执行这些操作，或是要求执行全部所示的操作以得到期望的结果。在特定环境中，多任务和并行处理可能是有利的。

本发明实施例涉及的方法和装置能够利用标准编程技术来完成，利用基于规则的逻辑或者其他逻辑来实现各种方法步骤。还应当注意的是，此处以及权利要求书中使用的词语“装置”和“模块”意在包括使用一行或者多行软件代码的实现和/或硬件实现和/或用于接收输入的设备。

此处描述的任何步骤、操作或程序可以使用单独的或与其他设备组合的一个或多个硬件或软件模块来执行或实现。在一个实施方式中，软件模块使用包括包含计算机程序代码的计算机可读介质的计算机程序产品实现，其能够由计算机处理器执行用于执行任何或全部的所描述的步骤、操作或程序。

出于示例和描述的目的，已经给出了本发明实施的前述说明。前述说明并非是穷举性的也并非要将本发明限制到所公开的确切形式，根据上述教导还可能存在各种变形和修改，或者是可能从本发明的实践中得到各种变形和修改。选择和描述这些实施例是为了说明本发明的原理及其实际应用，以使得本领域的技术人员能够以适合于构思的特定用途来以各种实施方式和各种修改而利用本发明。

Claims (14)

1.前端组件处理方法，其中，所述方法包括：

分类步骤，根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中；

拆分步骤，根据业务组件的最细粒度拆分标准和公共组件的最细粒度拆分标准，针对每个容器中的每个组件进行最细粒度拆分，将拆分得到的业务组件链接地存放到相应的所述容器中，形成拆分后的第一组件链，将拆分得到的最细粒度公共组件存入组件库，所述组件库中的最细粒度公共组件可以被业务组件引用，形成第二组件链，所述公共组件的最细粒度拆分标准为组件内部只有一条嵌套链且具体功能操作函数都由外层传递；以及

数据传递步骤，所述第一组件链或所述第二组件链中的待传递数据的组件将数据通过上下文模块传入数据中心，所述第一组件链或所述第二组件链中的待获取数据的组件根据预设的声明，通过所述上下文模块获取所述待传递数据的组件传入所述数据中心中的数据，所述上下文模块定义数据中心中要传递数据的数据类型，以及所述上下文模块定义数据中心中要传递数据的参数内容。

2.根据权利要求1所述的方法，其中，所述容器是利用浏览器可识别的分割标签得到的。

3.根据权利要求1所述的方法，其中，针对所述容器中的业务组件，所述拆分步骤包括：

对所述业务组件进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；

将拆分过程中得到的所有业务组件链接地存放到相应的容器中，形成所述第一组件链。

4.根据权利要求1所述的方法，其中，针对所述容器中的公共组件，所述拆分步骤包括：

对所述公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；

将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链。

5.根据权利要求1所述的方法，其中，针对所述容器中的混合组件，所述混合组件包含业务内容和公共内容，所述拆分步骤包括：

对所述混合组件进行业务内容的DOM结构的嵌套链拆分以及业务内容的功能拆分，使所述混合组件的业务内容与所述混合组件的公共内容分离，得到对应于公共内容的分离后的公共组件与对应于业务内容的分离后的业务组件；

将所述分离后的公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；

将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链；以及

对所述分离后的业务组件继续进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；

将所述混合组件拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

6.根据权利要求1所述的方法，其中，所述数据中心将传入的数据的数据结构和函数结构以键值对的形式存储。

7.前端组件处理装置，其中，所述装置包括：

分类单元，用于根据产品功能或者页面结构将页面拆分成多个容器，对页面中包含的组件分类，并且将关联性强的组件放在一个容器中；

拆分单元，用于根据业务组件的最细粒度拆分标准和公共组件的最细粒度拆分标准，针对每个容器中的每个组件进行最细粒度拆分，将拆分得到的业务组件链接地存放到相应的所述容器中，形成拆分后的第一组件链，将拆分得到的最细粒度公共组件存入组件库，所述组件库中的最细粒度公共组件可以被业务组件引用，形成第二组件链，所述公共组件的最细粒度拆分标准为组件内部只有一条嵌套链且具体功能操作函数都由外层传递；以及

数据传递单元，用于使所述第一组件链或所述第二组件链中的待传递数据的组件将数据通过上下文模块传入数据中心，使所述第一组件链或所述第二组件链中的待获取数据的组件根据预设的声明，通过所述上下文模块获取所述待传递数据的组件传入所述数据中心中的数据，所述上下文模块定义数据中心中要传递数据的数据类型，以及所述上下文模块定义数据中心中要传递数据的参数内容。

8.根据权利要求7所述的装置，其中，所述分类单元采用如下方式得到所述容器：利用浏览器可识别的分割标签得到的。

9.根据权利要求7所述的装置，其中，所述拆分单元采用如下方式对业务组件进行拆分：

对所述业务组件进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；

将拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

10.根据权利要求7所述的装置，其中，所述拆分单元采用如下方式对公共组件进行拆分：

对所述公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；

将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链。

11.根据权利要求7所述的装置，其中，所述拆分单元采用如下方式对混合组件进行拆分：

针对所述混合组件进行业务内容的DOM结构的嵌套链拆分以及业务内容的功能拆分，使所述混合组件的业务内容与所述混合组件的公共内容分离，得到对应于公共内容的分离后的公共组件与对应于业务内容的分离后的业务组件；

将所述分离后的公共组件进行DOM结构的嵌套链拆分以及功能操作函数拆分，得到只有一条嵌套链的DOM结构且具体功能操作函数都由外层传递的最细粒度公共组件；

将拆分得到的所述最细粒度公共组件存储至组件库，所述最细粒度公共组件可以被业务组件引用，形成第二组件链；以及

对所述分离后的业务组件继续进行DOM结构的嵌套链拆分以及功能拆分，最终得到只有一条嵌套链的DOM结构且只包含单一功能的最细粒度业务组件；

将所述混合组件拆分过程中得到的所有业务组件链接地存放到相应的所述容器中，形成所述第一组件链。

12.根据权利要求7所述的装置，其中，所述数据传递单元采用如下方式将数据存储到数据中心：将传入的数据的数据结构和函数结构以键值对的形式存储到所述数据中心。

13.一种服务器，其中，所述服务器包括：

存储器，配置用于存储指令；以及

处理器，配置用于调用所述指令执行权利要求1-6中任一项所述的方法。

14.一种计算机可读存储介质，其中，所述计算机可读存储介质存储有计算机可执行指令，所述计算机可执行指令在由处理器执行时，执行权利要求1-6中任一项所述的方法。

Images