CN107894887B - 页面组件化方法、装置及计算机可读存储介质 - Google Patents

Abstract

本发明提供一种页面组件化方法，该方法包括：模块划分步骤，将页面包含的内容划分为多个组件模块；设置步骤，分别设置该页面各组件模块的功能；及组装步骤，调用模板引擎将该多个组件模块组装成一个页面组件服务。本发明将页面组件化后，可以方便嵌入不同的页面框架中，快速应对用户的差异需求，节省开发成本。本发明还提出一种电子装置及一种计算机可读存储介质。

Description

页面组件化方法、装置及计算机可读存储介质

技术领域

本发明涉及互联网技术领域，尤其涉及一种页面组件化方法、装置及计算机可读存储介质。

背景技术

随着技术的发展，页面开发的复杂度也越来越高，传统开发模式总是存在开发效率低，维护成本高等的弊端，其主要原因在于，很多时候，页面开发人员将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改的情况，造成牵一发而动全身。或者，每个系统或平台都会自行开发一套页面代码，但这套页面代码无法与其他形式不一的页面共用，导致在项目开发过程中，页面代码的通用性及灵活性太低，人力成本过高。

发明内容

本发明提供一种页面组件化方法、装置及计算机可读存储介质，将页面组件化后，可以方便嵌入不同的页面框架中，快速应对用户的差异需求，解决开发效率低，维护成本高的问题。

为实现上述目的，本发明提供一种页面组件化系统，应用于一种电子装置，该系统包括：

模块划分单元，用于将页面包含的内容划分为多个组件模块；

设置单元，用于分别设置该页面各组件模块的功能；及

组装单元，用于调用模板引擎将该多个组件模块组装成一个页面组件服务。

该电子装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的页面组件化系统，所述页面组件化系统被所述处理器执行时实现如下步骤：

模块划分步骤，将页面包含的内容划分为多个组件模块；

设置步骤，分别设置该页面各组件模块的功能；及

组装步骤，调用模板引擎将该多个组件模块组装成一个页面组件服务。

优选地，所述多个模块包括：内部元素模块、部接口调用模块及外部服务提供模块。

优选地，所述设置该页面各组件模块的功能包括：

定义该页面的内部元素；

设置该页面可以调用的外部接口；及

规定该页面可以提供给外部对象的服务。

优选地，所述定义该页面的内部元素，包括将仅供该页面使用的内容定义为内部元素；

所述设置该页面可以调用的外部接口，包括设置该页面可以调用的外部接口的相关参数；

所述规定该页面可以提供给外部对象的服务，包括将该页面包含的内容中可以与外部对象共享、供外部对象调用的部分规定为可以提供给外部对象的服务。

为实现上述目的，本发明还提供一种页面组件化方法，该方法包括：

模块划分步骤，将页面包含的内容划分为多个组件模块；

设置步骤，分别设置该页面各组件模块的功能；及

组装步骤，调用模板引擎将该多个组件模块组装成一个页面组件服务。

优选地，所述多个组件模块包括：内部元素模块、外部接口调用模块及外部服务提供模块。

优选地，所述设置该页面各组件模块的功能包括：

定义该页面的内部元素；

设置该页面可以调用的外部接口；及

规定该页面可以提供给外部对象的服务。

优选地，所述定义该页面的内部元素，包括将仅供该页面使用的内容定义为内部元素；

所述设置该页面可以调用的外部接口，包括设置该页面可以调用的外部接口的相关参数；

所述规定该页面可以提供给外部对象的服务，包括将该页面包含的内容中可以与外部对象共享、供外部对象调用的部分规定为可以提供给外部对象的服务。

此外，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有页面组件化系统，所述页面组件化系统被处理器执行时，可实现以下步骤：

模块划分步骤，将页面包含的内容划分为多个组件模块；

设置步骤，分别设置该页面各组件模块的功能；及

组装步骤，调用模板引擎将该多个组件模块组装成一个页面组件服务。

优选地，所述多个组件模块包括：内部元素模块、部接口调用模块、外部服务提供模块。

本发明提出的页面组件化方法、装置及计算机可读存储介质，在项目开发过程中，将页面包含的内容划分为多个组件模块，分别设置该页面各组件模块的功能，再调用模板引擎将该多个组件模块组装成一个页面组件服务。页面组件化后，可以方便嵌入不同的页面框架中，快速应对用户的差异需求，提高网页开发效率，提高代码复用率，降低块与块之间的耦合性。

附图说明

图1为本发明包括页面组件化系统的电子装置较佳实施例的示例图；

图2为本发明页面组件化系统较佳实施例的功能模块图；

图3为本发明页面组件化方法较佳实施例的流程图。

附图标记：

1	电子装置
		2	网络
3	客户端
		4	数据库
10	页面组件化系统
		11	存储器
12	处理器
		13	通信总线
110	模块划分单元
		120	设置单元
130	组装单元
		20	页面
210	内部元素模块
		220	外部接口调用模块
230	外部服务提供模块

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，是本发明电子装置1较佳实施例的示例图。在本实施例中，该电子装置1可以是服务器、智能手机、平板电脑、个人电脑、便携计算机以及其他具有运算功能的电子设备。

该电子装置1包括存储器3、处理器12、通信总线13及存储在所述存储器3上并可在所述处理器12上运行的页面组件化系统10。该装置通过网络2连接一个或多个客户端3，与数据库4通信连接。所述数据库4可以是组件库。

其中，网络2可以为局域网，广域网，城域网等等类型的网络，可以为有线网络，也可以为无线网络。

客户端3可以为桌上型计算机、笔记本、平板电脑、手机，或其它可以通过网络2与装置进行通信的终端装置。

存储器3可以是高速RAM存储器，也可以是稳定的存储器（non-volatile memory），例如磁盘存储器。存储器3可以是该终端的内部存储单元，例如终端的硬盘或者内存，可选的还可以是独立于前述处理器12的存储装置。

存储器3在一些实施例中可以是电子装置1的内部存储单元，例如该电子装置1的硬盘或内存。存储器3在另一些实施例中也可以是电子装置1的外部存储器，例如电子装置1上配备的插接式硬盘，智能存储卡（Smart Media Card, SMC），安全数字卡（SecureDigital, SD），闪存卡（Flash Card）等。进一步地，存储器3还可以既包括电子装置1的内部存储单元也包括外部存储器。存储器3不仅可以用于存储安装于电子装置1的应用软件及各类数据，例如页面组件化系统10的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。

处理器12在一些实施例中可以是一中央处理器（Central Processing Unit,CPU），微处理器或其他数据处理芯片，用于运行存储器3中存储的程序代码或处理数据，例如执行页面组件化程序等。

优选地，该电子装置1还可以包括用户接口，用户接口可以包括显示屏（Display）、输入单元比如键盘（Keyboard），可选的用户接口还可以包括标准的有线接口、无线接口。

优选地，该电子装置1还可以包括显示器，在一些实施例中可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED（Organic Light-Emitting Diode，有机发光二极管）触摸器等。显示器用于显示在电子装置1中处理的信息以及用于显示可视化的用户界面。

图1仅示出了具有组件11-13以及页面组件化系统10的电子装置1，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

如图2所示，是本发明页面组件化系统10较佳实施例的功能模块图。

在本实施例中，该页面组件化系统10包括：

模块划分单元110，用于将页面20包含的内容划分为多个组件模块：内部元素模块210、外部接口调用模块220及外部服务提供模块230。例如，一个页面20的内容包括：某公司产品信息、图片、搜索栏、图标、新闻列表、文章、头部、底部、logo、广告、天气、股市行情、汇率等，将这些内容分别划分为不同的组件模块，所有与公司产品相关的信息可划分至内部元素模块210，从其他页面20或者组件库中调用的内容则划分至外部接口调用模块220，该页面20中可以与外部对象共享、供外部对象调用的内容则可划分至外部服务提供模块230。

设置单元120，用于分别设置该页面20各组件模块的功能。例如，一个页面20的内容包括：某公司产品信息、图片、搜索栏、图标、新闻列表、表格、表单、消息提示、标语切换、图片播放、导航菜单、选项卡、右键菜单、树形菜单，所述模块划分单元110将该页面20的内容划分为多个组件模块后，所述设置单元120对该多个组件模块的功能属性进行设置。

优选地，所述每个组件模块的功能分别为：

内部元素模块210：用于定义该页面20的内部元素。所述定义该页面20部元素，包括将仅供该页面20的内容定义为内部元素。例如，在页面20开发过程中，部分内容仅在该页面20展示，如，与公司产品相关的文字、图片、视频、音频等，该内容不允许其它网页调用，则将其定义为该页面20的内部元素。

外部接口调用模块220：用于设置该页面20可以调用的外部接口。所述设置该页面20可以调用的外部接口，包括设置该页面20可以调用的外部接口的相关参数，包括接口类型、接口地址等。该页面20在开发过程中，有可能需要从其他页面调用相关共用组件，那么，该页面20则需要设置可从其他页面调用的外部接口及其相关参数，以实现不同页面内容的交互。

例如，电销结果页面组件需要获取外部软电话控件接口中电话是否有拨通、通话时长是多少，来记录和客户的通话信息。接口类型：外部软电话控件提供的是客户端3JavaScript的响应事件，电销结果页面组件通过其自身内含的跨越调用模板（如HTML5的API post Message或其它方式）调用软电话的响应事件即可获取这些信息；接口地址则按照双方约定好的接口地址访问。

外部服务提供模块230：用于规定该页面20可以提供给外部对象的服务。所述规定该页面20可以提供给外部对象的服务，包括将该页面20包含的内容中可以与外部对象共享、供外部对象调用的部分规定为可以提供给外部对象的服务。例如，一个网页A中介绍某公司的产品部分（产品图片、产品说明文字部分）可以设置为内部元素，而该页面20中关于当天天气、股市行情、汇率等与公司产品无关的部分则可定义为非内部元素，可以供外部对象调用。

优选地，外部服务提供模块230还用于设置外部对象调用所述提供给外部对象的服务的权限。例如，外部对象B、C、D，可能需要调用网页A的非内部元素即可提供给外部对象的服务，该页面A的开发者在设置外部服务的同时，还设置了具有调用这些服务权限的外部对象名单，若外部对象B、C具有调用该服务的权限，外部对象D不具有调用该服务的权限，那么，外部对象B、C可以调用网页A的服务，外部对象D则无法调用页面A的服务。

组装单元130，用于调用模板引擎将该多个组件模块组装成一个页面组件服务。例如，所述组装单元130调用某页面20所需的多个组件模块后，调用基于java的模板引擎Velocity，将该多个组件模块组装成一个页面组件服务。

优选地，所述组装单元130不仅能调用本页面20的内部元素模块210，还能数据库4的组件库中调用其他组件，或者通过外部接口调用模块220从其他页面20调用外部组件，采用模板引擎将这些内容组装成一个页面组件服务。

优选地，所述页面组件服务可理解为：在约定的接口协议下，能够进行通信、能够提供服务、可插拔的页面程序，类似于U盘的应用。

优选地，所述模板引擎还可以为：基于java的模板引擎JByte、Jamon、Beetle、FreeMarker等。

如图3所示，是本发明页面组件化方法较佳实施例的流程图。该方法可以由一个装置执行，该装置可以由软件和/或硬件实现。

在本实施例中，该页面组件化方法包括：

步骤S111，模块划分单元110将页面20包含的内容划分为多个组件模块，包括内部元素模块210、外部接口调用模块220及外部服务提供模块230。

例如，一个页面20的内容包括：某公司产品信息、图片、搜索栏、图标、新闻列表、文章、头部、底部、logo、广告、天气、股市行情、汇率等，将这些内容分别划分为不同的组件模块，所有与公司产品相关的信息可划分至内部元素模块210，从其他页面20库中调用的内容则划分至外部接口调用模块220，该页面20中可以与外部对象共享、供外部对象调用的内容则可划分至外部服务提供模块230。

步骤S112，设置单元120分别设置该页面20的各组件模块的功能。例如，一个页面20的内容包括：某公司产品信息、图片、搜索栏、图标、新闻列表、表格、表单、消息提示、标语切换、图片播放、导航菜单、选项卡、右键菜单、树形菜单，所述模块划分单元110将该页面20的内容划分为多个组件模块后，所述设置单元120对该多个组件模块的功能属性进行设置。

优选地，所述多个组件模块的功能设置如下：

内部元素模块210定义该页面20的内部元素。所述定义该页面20的内部元素，包括将仅供该页面20使用的内容定义为内部元素。例如，在页面20开发过程中，部分内容仅在该页面20展示，如与公司产品相关的文字、图片、视频、音频等，该内容不允许其它页面调用，则将其定义为该页面20的内部元素。

外部接口调用模块220设置了该页面20可以调用的外部接口。所述设置该页面20可以调用的外部接口，包括设置该页面20可以调用的外部接口的相关参数，包括接口类型、接口地址等。该页面20在开发过程中，有可能需要从其他页面调用相关共用组件，那么，该页面20则需要设置可从其他页面调用的外部接口及其相关参数，以实现不同页面内容的交互。

例如，电销结果页面组件需要获取外部软电话控件接口中电话是否有拨通、通话时长是多少，来记录和客户的通话信息，接口类型：外部软电话控件提供的是客户端3JAVASCRIPT的响应事件，电销结果页面组件通过其自身内含的跨越调用模板（如HTML5的API post Message或其它方式）调用软电话的响应事件即可获取这些信息；接口地址：按照双方约定好的接口地址访问。

外部服务提供模块230规定了该页面20可以提供给外部对象的服务。所述规定该页面20可以提供给外部对象的服务，包括将该页面包含的内容中可以与外部对象共享、供外部对象调用的部分规定为可以提供给外部对象的服务。例如，一个网页A中介绍某公司的产品部分（产品图片、产品说明文字部分）可以设置为内部元素，而该页面20中关于当天天气、股市行情、汇率等与公司产品无关的部分则可定义为非内部元素，可以供外部对象调用。

优选地，外部服务提供模块230还用于设置外部对象调用所述提供给外部对象的服务的权限。例如，外部对象B、C、D，可能需要调用网页A的非内部元素即可提供给外部对象的服务，该页面A的开发者在设置外部服务的同时，还设置了具有调用这些服务权限的外部对象名单，若外部对象B、C具有调用该服务的权限，外部对象D不具有调用该服务的权限，那么，外部对象B、C可以调用网页A的服务，外部对象D则无法调用页面A的服务。

步骤S113，组装单元130调用模板引擎将该多个组件模块组装成一个页面组件服务。例如，所述组装单元130调用某页面20所需的多个组件模块后，调用基于java的模板引擎Velocity，将该多个组件模块组装成一个页面组件服务。

优选地，所述组装单元130不仅能调用本页面20的内部元素模块210，还能数据库4的组件库中调用其他组件，或者通过外部接口调用模块220从其他页面20调用外部组件，采用模板引擎将这些内容组装成一个页面组件服务。

此外，本发明实施例还提出一种计算机可读存储介质，所述计算机可读存储介质上存储有页面组件化系统10，所述页面组件化系统10被处理器12执行时，可实现以下步骤：

步骤S111，模块划分单元110将页面20包含的内容划分为多个组件模块，包括内部元素模块210、外部接口调用模块220及外部服务提供模块230。

例如，一个页面20的内容包括：某公司产品信息、图片、搜索栏、图标、新闻列表、文章、头部、底部、logo、广告、天气、股市行情、汇率等，将这些内容分别划分为不同的组件模块，所有与公司产品相关的信息可划分至内部元素模块210，从其他页面20库中调用的内容则划分至外部接口调用模块220，该页面20中可以与外部对象共享、供外部对象调用的内容则可划分至外部服务提供模块230。

步骤S112，设置单元120分别设置该页面20的各组件模块的功能。例如，一个页面20的内容包括：某公司产品信息、图片、搜索栏、图标、新闻列表、表格、表单、消息提示、标语切换、图片播放、导航菜单、选项卡、右键菜单、树形菜单，所述模块划分单元110将该页面20的内容划分为多个组件模块后，所述设置单元120对该多个组件模块的功能属性进行设置。

所述多个组件模块的功能设置如下：

内部元素模块210定义该页面20的内部元素。所述定义该页面20的内部元素，包括将仅供该页面20使用的内容定义为内部元素。例如，在页面20开发过程中，部分内容仅在该页面20展示，如与公司产品相关的文字、图片、视频、音频等，该内容不允许其它页面调用，则将其定义为该页面20的内部元素。

外部接口调用模块220设置了该页面20可以调用的外部接口。所述设置该页面20可以调用的外部接口，包括设置该页面20可以调用的外部接口的相关参数，包括接口类型、接口地址等。该页面20在开发过程中，有可能需要从其他页面调用相关共用组件，那么，该页面20则需要设置可从其他页面调用的外部接口及其相关参数，以实现不同页面内容的交互。

例如，电销结果页面组件需要获取外部软电话控件接口中电话是否有拨通、通话时长是多少，来记录和客户的通话信息，接口类型：外部软电话控件提供的是客户端3JAVASCRIPT的响应事件，电销结果页面组件通过其自身内含的跨越调用模板（如HTML5的API post Message或其它方式）调用软电话的响应事件即可获取这些信息；接口地址：按照双方约定好的接口地址访问。

外部服务提供模块230规定了该页面20可以提供给外部对象的服务。所述规定该页面20可以提供给外部对象的服务，包括将该页面包含的内容中可以与外部对象共享、供外部对象调用的部分规定为可以提供给外部对象的服务。例如，一个网页A中介绍某公司的产品部分（产品图片、产品说明文字部分）可以设置为内部元素，而该页面20中关于当天天气、股市行情、汇率等与公司产品无关的部分则可定义为非内部元素，可以供外部对象调用。

步骤S113，组装单元130调用模板引擎将该多个组件模块组装成一个页面组件服务。例如，所述组装单元130调用某页面20所需的多个组件模块后，调用基于java的模板引擎Velocity，将该多个组件模块组装成一个页面组件服务。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (5)

1.一种页面组件化方法，其特征在于，所述方法包括：

模块划分步骤，将页面包含的内容划分为多个组件模块；所述多个组件模块包括：内部元素模块、外部接口调用模块及外部服务提供模块；将该页面中所有与公司产品相关的信息内容划分至所述内部元素模块，将从其他页面或者组件库中调用的内容划分至所述外部接口调用模块，以及将该页面中可以与外部对象共享、供外部对象调用的内容划分至所述外部服务提供模块；

设置步骤，分别设置该页面各组件模块的功能；及

组装步骤，调用模板引擎将该多个组件模块组装成一个页面组件服务；

所述设置该页面各组件模块的功能包括：

定义该页面的内部元素；

设置该页面可以调用的外部接口；及

规定该页面可以提供给外部对象的服务；

所述外部服务提供模块还用于设置外部对象调用所述提供给外部对象的服务的权限。

2.如权利要求1所述的页面组件化方法，其特征在于：

所述定义该页面的内部元素，包括将仅供该页面使用的内容定义为内部元素；

所述设置该页面可以调用的外部接口，包括设置该页面可以调用的外部接口的相关参数；

所述规定该页面可以提供给外部对象的服务，包括将该页面包含的内容中可以与外部对象共享、供外部对象调用的部分规定为可以提供给外部对象的服务。

3.一种页面组件化装置，其特征在于，该装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的页面组件化系统，所述页面组件化系统被所述处理器执行，可实现如下步骤：

模块划分步骤，将页面包含的内容划分为多个组件模块；所述多个组件模块包括：内部元素模块、部接口调用模块及外部服务提供模块；将该页面中所有与公司产品相关的信息内容划分至所述内部元素模块，将从其他页面或者组件库中调用的内容划分至所述外部接口调用模块，以及将该页面中可以与外部对象共享、供外部对象调用的内容划分至所述外部服务提供模块；

设置步骤，分别设置该页面各组件模块的功能；及

组装步骤，调用模板引擎将该多个组件模块组装成一个页面组件服务；

所述设置该页面各组件模块的功能包括：

定义该页面的内部元素；

设置该页面可以调用的外部接口；及

规定该页面可以提供给外部对象的服务；

所述外部服务提供模块还用于设置外部对象调用所述提供给外部对象的服务的权限。

4.如权利要求3所述的页面组件化装置，其特征在于，

所述定义该页面的内部元素，包括将仅供该页面使用的内容定义为内部元素；

所述设置该页面可以调用的外部接口，包括设置该页面可以调用的外部接口的相关参数；

所述规定该页面可以提供给外部对象的服务，包括将该页面包含的内容中可以与外部对象共享、供外部对象调用的部分规定为可以提供给外部对象的服务。

5.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有页面组件化系统，所述页面组件化系统被处理器执行时实现如下步骤：

模块划分步骤，将页面包含的内容划分为多个组件模块；所述多个组件模块包括：内部元素模块、部接口调用模块及外部服务提供模块；将该页面中所有与公司产品相关的信息内容划分至所述内部元素模块，将从其他页面或者组件库中调用的内容划分至所述外部接口调用模块，以及将该页面中可以与外部对象共享、供外部对象调用的内容划分至所述外部服务提供模块；

设置步骤，分别设置该页面各组件模块的功能；及

组装步骤，调用模板引擎将该多个组件模块组装成一个页面组件服务；

所述设置该页面各组件模块的功能包括：

定义该页面的内部元素；

设置该页面可以调用的外部接口；及

规定该页面可以提供给外部对象的服务；

所述外部服务提供模块还用于设置外部对象调用所述提供给外部对象的服务的权限。

Images