[发明专利]前端组件处理方法及装置

说明书

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

技术领域

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

背景技术

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

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

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

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

发明内容

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

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

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

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

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