CN108874389A - 前端页面开发框架 - Google Patents

Abstract

本发明涉及前端开发技术领域，提供一种前端页面开发框架。该前端页面开发框架包括多个页面组件、数据缓存以及框架程序。其中，多个页面组件中的每个页面组件用于在页面上展现从后端获得的数据；框架程序用于将从后端获得的数据中的、为多个页面组件中的至少两个页面组件共同使用的共有数据保存至数据缓存，以使至少两个页面组件在获取共有数据时需要从数据缓存中读取。在该前端页面开发框架中，由于在页面组件的本地并不保存共有数据的副本，从而能够保证共有数据在各页面组件之间具有一致性。开发人员无需再过多关注共有数据在各组件间的同步性问题，显著降低了开发人员的工作量。

Description

前端页面开发框架

技术领域

本发明涉前端开发技术领域，具体而言，涉及一种前端页面开发框架。

背景技术

目前，组件化是前端开发中的主要趋势之一。组件化主要针对前端的界面部分，页面上的每个可视的对象都可以称为一个组件，每个组件有独立的html、css、javascript(可以缩写为js)代码。

组件通常用于将从后端获得的数据以可视化的方式展现在页面上，不同的组件之间往往还存在数据的交互。在现有技术中，组件的数据都是各自保存的，交互起来较为复杂，常常出现各组件之间的数据不同步的情况。

发明内容

有鉴于此，本发明实施例提供一种前端页面开发框架，以解决上述技术问题。

为实现上述目的，本发明提供如下技术方案：

第一方面，本发明实施例提供一种前端页面开发框架，包括：

多个页面组件，多个页面组件中的每个页面组件用于在页面上展现从后端获得的数据；

数据缓存；

框架程序，框架程序用于将从后端获得的数据中的、为多个页面组件中的至少两个页面组件共同使用的共有数据保存至数据缓存，以使至少两个页面组件在获取共有数据时需要从数据缓存中读取。

共有数据即某些页面组件之间需要进行交互的数据，通过将共有数据保存在数据缓存中，使得所有需要使用共有数据的页面组件只能从数据缓存中获取，在页面组件的本地并不保存共有数据的副本，从而能够保证共有数据在各页面组件之间具有一致性。开发人员只需要将页面组件间需要交互的数据指定为共有数据即可，无需再通过额外的代码去保障共有数据在各组件间的一致性，显著降低了开发人员的工作量，同时也可以改善各页面组件之间的数据同步性问题。

结合第一方面，在第一方面的第一种可能的实现方式中，框架程序还用于在监听到至少两个页面组件中的任意一个页面组件触发的共有数据修改行为时，基于共有数据修改行为对数据缓存中保存的共有数据进行修改，并通知至少两个页面组件中的其他页面组件共有数据已经被修改，以使其他页面组件从数据缓存中重新读取共有数据。

共有数据在被其中一个页面组件修改后，使用该共有数据的其他页面组件将会得到通知，从而重新读取共有数据，实现了共有数据在各页面组件之间的实时自动同步。

结合第一方面，在第一方面的第二种可能的实现方式中，数据还包括仅为每个页面组件使用的私有数据，私有数据被保存在每个页面组件中。

私有数据即仅为某个页面组件自身所使用的数据，由于不涉及与其他页面组件进行交互，私有数据仍然可以保存在每个页面组件本地，由该页面组件自己负责维护。

结合第一方面，在第一方面的第三种可能的实现方式中，框架程序还用于将每个页面组件与数据进行双向绑定，以使数据的修改与页面组件的重新渲染相互同步。

实现页面组件和数据的双向绑定后，页面的文档对象模型(Document ObjectModel，DOM)能够自动与数据保持同步，无需在页面中再插入冗余的查找DOM结构的代码，从而使页面逻辑得到精简，有利于改善页面的性能。同时，DOM与数据同步后，每当修改了数据，DOM便会自动更新，开发人员无需再去过多关注如何操纵DOM更新显示的问题，只需把开发重点放在对数据的处理和维护上，即实现了所谓的数据驱动开发。

结合第一方面的第三种可能的实现方式，在第一方面的第四种可能的实现方式中，每个页面组件均包括组件模板、组件样式以及组件脚本，框架程序具体用于扫描组件模板并获得组件模板中配置好的绑定逻辑，以及用于基于绑定逻辑将组件模板与数据进行双向绑定。

在页面组件化后，将页面的DOM与数据绑定变得容易，只需要按照上述方法将页面组件与数据绑定即可，并且这一过程都由框架程序自动完成，开发人员无需关注其具体细节。

结合第一方面或第一方面的第一种至第四种中的任意一种可能的实现方式，在第一方面的第五种可能的实现方式中，前端页面开发框架为单页面应用的开发框架，单页面应用包括主页面以及能够嵌入到主页面的子页面，子页面能够以标签化的方式使用多个页面组件中的任意一个页面组件，框架程序还用于加载并渲染子页面。

单页面应用具有良好的交互体验，同时有效实现了前后端分离，减轻了服务器的压力，本发明实施例提供的前端页面开发框架也可以用于开发单页面应用。

结合第一方面的第五种可能的实现方式，在第一方面的第六种可能的实现方式中，子页面包括页面主文件、页面样式文件以及页面脚本文件，框架程序具体用于在单页面应用的当前URL地址切换子页面对应的URL地址时，从URL地址中的锚点部分获得子页面的页面标识，基于页面标识读取单页面应用配置的子页面的路由信息，并基于路由信息加载页面主文件、页面样式文件以及页面脚本文件，以及基于页面主文件、页面样式文件以及页面脚本文件渲染子页面。

单页面应用的开发人员只需要开发子页面以及配置子页面的路由信息即可，其他大部分工作均可以交给本发明实施例提供的前端页面开发框架完成，开发过程简单高效，技术门槛较低。

结合第一方面或第一方面的第一种至第四种中的任意一种可能的实现方式，在第一方面的第七种可能的实现方式中，前端页面开发框架还包括供多个页面组件共同使用的公共脚本模块，公共脚本模块包括：

数据通信模块，数据通信模块包括用于每个页面组件与后端进行通信的至少一种函数方法；

数据操作模块，数据操作模块包括用于每个页面组件操作数据的至少一种函数方法；

页面操作模块，页面操作模块包括用于每个页面组件操作组件模板的至少一种函数方法；

通用变量模块，通用变量模块包括多个页面组件共同使用的至少一个常量。

即实现了前端页面开发框架的脚本的模块化，有助于减少冗余代码，便于前端页面开发框架的开发和完善。

结合第一方面或第一方面的第一种至第四种中的任意一种可能的实现方式，在第一方面的第八种可能的实现方式中，前端页面开发框架还包括供多个页面组件共同使用的公共样式模块，公共样式模块包括：

公共格式化样式，公共格式化样式包括多个页面组件公共使用的样式；

响应式布局样式，响应式布局样式包括兼容不同终端设备尺寸的样式；

字体图标样式，字体图标样式包括至少一种字体样式和/或至少一种图标样式。

即实现了前端页面开发框架的样式的模块化，有助于减少冗余代码，便于前端页面开发框架的开发和完善。

结合第一方面或第一方面的第一种至第四种中的任意一种可能的实现方式，在第一方面的第九种可能的实现方式中，多个页面组件包括：

颗粒组件，颗粒组件包括可复用的组件片段；

标签组件，标签组件包括至少一个颗粒组件，标签组件为用于不含业务逻辑的展现或不含业务逻辑的交互的页面组件；

业务组件，业务组件包括至少一个标签组件，业务组件为用于包含业务逻辑的展现或包含业务逻辑的交互的页面组件。

页面组件可以被构建为上述层次化的结构，使得页面组件的代码在最大程度上得到复用，同时也使页面组件在使用时更加灵活方便，可以适应于不同的应用场景。

第二方面，本发明实施例提供一种计算机存储介质，计算机存储介质中存储有计算机程序指令，计算机程序指令被计算机的处理器读取并运行时，执行第一方面或第一方面的任意一种可能的实施方式提供的前端页面开发框架的功能。

第三方面，本发明实施例提供一种电子设备，包括处理器以及计算机存储介质，计算机存储介质中存储有计算机程序指令，计算机程序指令被处理器读取并运行时，执行第一方面或第一方面的任意一种可能的实施方式提供的前端页面开发框架的功能。

为使本发明的上述目的、技术方案和有益效果能更明显易懂，下文特举实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了一种可应用于本发明实施例中的终端设备的结构框图；

图2示出了本发明实施例提供的单页面应用的示意图；

图3示出了本发明实施例提供的前端页面开发框架的组件化示意图；

图4示出了本发明实施例提供的前端页面开发框架的模块化示意图；

图5示出了本发明实施例提供的前端页面开发框架的架构模式示意图。

具体实施方式

下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

图1示出了一种可应用于本发明实施例中的终端设备100的结构框图。如图1所示，终端设备100包括存储器102、存储控制器104、处理器106以及网络单元108等。这些组件通过一条或多条通讯总线/信号线110相互通讯。

存储器102可用于存储软件程序以及模块，如本发明实施例中的前端页面开发框架对应的程序指令/模块，处理器106通过运行存储在存储器102内的软件程序以及模块，从而实现本发明实施例提供的前端页面开发框架的功能。

存储器102可以是，但不限于，随机存取存储器(Random Access Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read－OnlyMemory，PROM)，可擦除只读存储器(Erasable Programmable Read－Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable Programmable Read－Only Memory，EEPROM)等。处理器106以及其他可能的组件对存储器102的访问可在存储控制器104的控制下进行。

处理器106可以是一种集成电路芯片，具有信号的处理能力。上述的处理器106可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、微控制单元(MicroController Unit，MCU)、网络处理器(Network Processor，NP)或者其他常规处理器；还可以是专用处理器，包括数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuits，ASIC)、现场可编程门阵列(FieldProgrammable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。

网络单元108用于接收以及发送网络信号，网络信号可以包括无线信号或者有线信号。

可以理解，图1所示的结构仅为示意，终端设备100还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

第一实施例

目前通常认为单页面应用具有交互体验良好，有效分离前后端，有效减轻服务器压力等优点，是一种比较流行的基于页面的应用程序。本发明第一实施例提供的前端页面开发框架可以用于，但不限于用于开发单页面应用，在第一实施例中以前端页面开发框架应用于单页面应用的开发为例进行阐述，但并不应当视为对前端页面开发框架的应用范围的限制。

图2示出了本发明实施例提供的单页面应用的示意图。单页面应用包括前端(图2中的客户端)和后端(图2中的服务端)，客户端可以是基于本发明实施例提供的前端页面开发框架所开发的应用程序，服务端可以包括服务程序(图2中的Services)以及数据库(图2中的DB)，后端主要用于对前端提供服务，包括将数据发送到前端用于渲染页面，或者接收前端从页面上获得的数据并进行处理以及存储。于本发明实施例中，前端运行的环境可以是图1示出的终端设备100，终端设备100可以是个人计算机、移动设备、智能穿戴设备、车载设备等能够连接计算机网络并具有运算处理能力的设备，当然不限于物理硬件设备，例如也可以是虚拟机。后端的运行环境可以是服务器，当然不限于物理硬件设备，例如也可以是虚拟服务器。

参照图2，单页面应用包括一个主页面以及一个或多个子页面。其中，主页面通常是一个html文件，第一实施例提供的前端页面开发框架可以打包为一个js文件，由主页面负责引入，除此之外，主页面可以不包含其他内容。主页面可以由前端页面开发框架提供，也可以由单页面应用的开发人员自行编写。

子页面能够嵌入到主页面上并显示，在各子页面间进行切换时，仅仅是加载子页面，重新渲染子页面所在的区域，并不会导致主页面的重新加载。每个子页面可以包括页面主文件(图2中的page.html)、页面样式文件(图2中的page.css)以及页面脚本文件(图2中的page.js)。子页面应当由单页面应用的开发人员进行编写或配置。

前端页面开发框架包括多个页面组件、数据缓存以及框架程序。其中，页面组件对应于页面上的某个可视化对象，例如按钮、输入框等都可以是一个页面组件。页面组件用于将从后端获得的数据展现在页面上，其展现方式可以是直接展现数据的内容，也可以是展现根据数据所确定的可视化对象的某种状态。页面组件可以实现为符合w3c的WebComponents标准的方式。具体而言，每个页面组件均包括组件模板(图2中最左侧的Template)、组件样式(图2中最左侧的css)以及组件脚本(图2中最左侧的Javascript)。对于单页面应用而言，每个子页面均可以使用前端页面开发框架所提供的一个或多个页面组件，如图2中的页面主文件所示。

页面样式文件用于指定子页面的样式以及页面组件的样式，页面脚本文件用于实现页面的逻辑以及指定页面组件所要使用的数据，如图2所示。

数据缓存(图2中的store)用于实现不同页面组件之间的数据共享，以确保不同页面组件之间的数据同步性。

框架程序(图未示出)用于实现前端页面开发框架的主要功能，其具体功能将在后文中依次介绍，框架程序可以实现为一个单独的js脚本。

下面介绍数据缓存的具体作用。各组件所使用的数据可以分为两种，一种是私有数据，仅为页面组件自身使用，可以保存在页面组件的组件脚本中，由页面组件自身负责维护。另一种是共有数据，即为至少两个页面组件所共同使用的数据，或者说该数据涉及至少两个页面组件之间交互。一个页面组件可以包括私有数据或共有数据中的一种数据或者同时包括两种数据。

需要进行交互的页面组件可以是同一个子页面上的页面组件，也可以是不同子页面上的页面组件。在现有技术中，需要交互的页面组件各自保存共有数据的副本，通常需要开发人员编写额外的代码来确保共有数据在各组件间的一致性。对于单页面应用而言，由于一次只能加载一个子页面，因此在由一个子页面切换到另一个子页面后，之前的子页面中的页面组件的共有数据将会丢失，因此在子页面切换时需要开辟存储空间对这些共有数据进行保存，也需要开发人员编写额外的代码。可见，在现有技术中，页面组件间的数据交互需要靠单页面应用的开发人员来保障，费时费力。

而在第一实施例提供的前端页面开发框架中，共有数据被保存在数据缓存中，需要进行交互的页面组件均从数据缓存中读取共有数据，但在各页面组件种并不保存共有数据的副本。因此任意一个页面组件对共有数据的修改，都时从实质上修改了共有数据，当其他页面组件再次从数据缓存中读取共有数据时，即可以获得共有数据的新的值，从而其他页面组件可以基于共有数据的新的值进行刷新显示，从而确保共有数据在各页面组件之间的一致性。同时，对于子页面之间进行切换的情况，由于共有数据都保存在数据缓存中，而数据缓存是属于前端页面开发框架的一部分，并不受页面本身是否加载的影响，因此不必担心数据丢失的问题。

进一步的，页面组件在修改共有数据时会触发共有数据修改行为，例如调用数据缓存提供的Set接口，调用参数为共有数据的名称以及需要设置的值，框架程序实时监听共有数据修改行为，一旦共有数据修改行为被触发，框架程序将基于上述调用参数修改数据缓存中的共有数据，并在修改完成后通知其他会使用该共有数据的页面组件，这些页面组件在收到通知后立即重新从数据缓存中读取该共有数据，实现页面组件的刷新显示等行为，即实现了共有数据在各页面组件之间的实时自动同步。从而，开发人员只需要将页面组件间需要交互的数据指定为共有数据即可，交由数据缓存以及框架程序去负责共有数据的维护，从而大幅减轻了开发人员的负担。

继续参照图2，对于共有数据，其在从后端获取时就被保存到数据缓存中，使用共有数据的页面组件只能从数据缓存中获取共有数据，而不能直接从后端获取共有数据，从而可以进一步保证共有数据在各页面组件之间的一致性。当然，对于私有数据则不存在此限制，页面组件可以直接从后端获取私有数据。

如果第一实施例提供的前端页面开发框架用于开发单页面应用，在具体实施时该框架还可以包括用于保存子页面路由信息的配置文件(图2中的Router)中，该配置文件记录了每个子页面的页面标识与该子页面的页面主文件、页面样式文件以及页面脚本文件之间的对应关系，例如pageid＜——＞(page.html，page.css，page.js)，其中，字符串pageid即为子页面的页面标识，每个子页面具有不同的页面标识，(page.html，page.css，page.js)即为子页面的路由信息。在子页面切换时，单页面应用中的当前URL地址会切换为某个子页面对应的URL地址，该地址中的锚点部分(也称为hash)即为所要切换至的子页面的页面标识，例如.../#/pageid。框架程序从URL地址中解析出页面标识，并读取保存有路由信息的配置文件，然后基于页面标识从中查找获得该子页面的路由信息。然后，框架程序基于路由信息加载页面主文件、页面样式文件以及页面脚本文件，并基于页面主文件、页面样式文件以及页面脚本文件渲染子页面。

可见，第一实施例提供的前端页面开发框架能够实现单页面应用中的子页面切换、加载以及渲染的工作，开发人员只需要开发子页面以及配置子页面的路由信息即可，大大减小了开发人员的工作量，开发过程简单高效，技术门槛较低。而在开发子页面时，由于前端页面开发框架已经预置了大量可以直接使用的页面组件，开发人员可以直接以标签化的方式使用这些页面组件，框架程序能够自动识别这些自定义的标签，从而进一步简化开发过程，加快开发进度，同时提高代码的可读性。其中，标签化是指直接以html标签的形式使用页面组件，例如，＜com1＞表示一个名为com1的页面组件。并且，根据上面的阐述，通过设置数据缓存，解决了页面组件之间数据交互问题，让开发人员的工作变得更加简单。

进一步的，在一种实施方式中，页面组件被构建为层次结构。

图3示出了本发明实施例提供的前端页面开发框架的组件化示意图。参照图3，前端页面开发框架提供的页面组件至少包括三个层次，分别是颗粒组件、标签组件以及业务组件。

其中，颗粒组件是最基本的页面组件，包括可复用的组件片段。标签组件包括至少一个颗粒组件，标签组件为用于不含业务逻辑的展现或不含业务逻辑的交互的页面组件，例如，点击按钮弹出一个对话框，按钮和对话框的组合可以看作标签组件，这种组合非常常见，例如点击按钮登录失败弹出一个对话框，其本身具有很高的通用性，并不包含任何特定的业务逻辑。业务组件包括至少一个标签组件，业务组件为用于包含业务逻辑的展现或包含业务逻辑的交互的页面组件，其中，业务逻辑一般是指某项特殊的需求所对应的逻辑，不具备通用性，因此业务组件通常可以根据某项需求专门进行开发。

将页面组件构建为层次化的结构，使得页面组件的代码在最大程度上得到复用，同时也使页面组件在使用时更加灵活方便，开发人员可以根据不同的应用场景使用页面组件或者基于已有的页面组件开发新的页面组件。

进一步的，在一种实施方式中，前端页面开发框架还可以包括供多个页面组件共同使用的公共脚本模块和/或公共样式模块，即实现了前端页面开发框架的脚本的模块化和/或样式的模块化。

图4示出了本发明实施例提供的前端页面开发框架的模块化示意图。参照图4，图4中的前端页面开发框架同时包括公共脚本模块和公共样式模块，当然在其他一些实施方式中，前端页面开发框架也可以只包括其中一个模块。

其中，公共脚本模块具体包括数据通信模块(图4中的Ajax模块)、数据操作模块(图4中的Util模块)、页面操作模块(图4中的Html模块)以及通用变量模块(图4中的Constant模块)，其主要内容是各页面组件使用的或者供子页面使用的函数方法以及常量。

具体而言，数据通信模块包括用于页面组件与后端进行通信的至少一种函数方法；数据操作模块包括用于页面组件操作数据的至少一种函数方法；页面操作模块包括用于页面组件操作组件模板的至少一种函数方法；通用变量模块包括多个页面组件共同使用的至少一个常量，这些常量可以包括不同国家语言的版本，便于开发多语言应用。

公共样式模块具体包括公共格式化样式(图4中的Reset.css)、响应式布局样式(图4中的responsive.css)以及字体图标样式(图4中的iconfont.css)，其主要内容是各页面组件使用的或者供子页面使用的样式。

具体而言，公共格式化样式包括多个页面组件公共使用的样式；响应式布局样式包括兼容不同终端设备100尺寸的样式；字体图标样式包括至少一种字体样式和/或至少一种图标样式。

通过将脚本和/或样式模块化，有利于脚本和样式的复用，减少冗余代码，便于前端页面开发框架的完善以及应用程序的开发。

进一步的，在一种实施方式中，页面组件和页面组件使用的数据可以进行双向绑定，即实现所谓的MVVM(Model－View－ViewModel)架构模式。图5示出了本发明实施例提供的前端页面开发框架的架构模式示意图。参照图5，该架构模式包括Model层、View层以及ViewModel层。其中，Model层为页面组件的数据，包括上面提到的共有数据和私有数据，View层为组件模板，ViewModel层为控制层，从Model层获取数据，并渲染到View层上。数据的双向绑定即Model层和View层之间的双向绑定，可以由ViewModel层实现。

具体而言，框架程序在每个子页面加载时，对子页面中的页面组件的组件模板进行扫描，获得组件模板中配置好的绑定逻辑，基于绑定逻辑就可以将组件模板与数据进行双向绑定，这一绑定过程在页面组件化以后变得非常简单。

实现页面组件和数据的双向绑定后，View层和Model层之间能够自动交互，从而实现子页面的DOM结构自动与数据保持同步，进而每当修改了数据，子页面的DOM结构便会自动更新，导致页面组件的重新渲染，无需像现有技术中一样通过在DOM结构中安插大量的查找代码进行数据更新，精简了页面逻辑，同时使得数据逻辑和界面逻辑相分离，开发人员无需再去过多关注如何操纵DOM更新显示的问题，只需把开发重点放在对数据的处理和维护上，即实现了所谓的数据驱动开发。

综上所述，本发明第一实施例提供的前端页面开发框架具有组件化、模块化的特点，能够显著提高页面应用程序的开发效率，降低开发难度。同时，通过设置数据缓存，大大简化了页面组件之间的数据同步过程，降低了对数据进行维护的难度。此外，该前端页面开发框架支持子页面的路由配置，能够用于单页面应用的开发。

第二实施例

本发明第二实施例提供一种计算机存储介质，计算机存储介质中存储有计算机程序指令，计算机程序指令被计算机的处理器读取并运行时，实现本发明实施例提供的前端页面开发框架的功能。该计算机存储介质可以实现为，但不限于图1示出的存储器102。

第三实施例

本发明第三实施例提供一种电子设备，包括处理器以及计算机存储介质，计算机存储介质中存储有计算机程序指令，计算机程序指令被处理器读取并运行时，实现本发明提供的前端页面开发框架的功能。该电子设备可以实现为，但不限于图1示出的终端设备100。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在存储介质中，包括若干指令用以使得计算机设备执行本发明各个实施例所述方法的全部或部分步骤。前述的计算机设备包括：个人计算机、服务器、移动设备、智能穿戴设备、网络设备、虚拟设备等各种具有执行程序代码能力的设备，前述的存储介质包括：U盘、移动硬盘、只读存储器、随机存取存储器、磁碟、磁带或者光盘等各种可以存储程序代码的介质。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

Claims (10)

1.一种前端页面开发框架，其特征在于，包括：

多个页面组件，所述多个页面组件中的每个页面组件用于在页面上展现从后端获得的数据；

数据缓存；

框架程序，所述框架程序用于将从所述后端获得的所述数据中的、为所述多个页面组件中的至少两个页面组件共同使用的共有数据保存至所述数据缓存，以使所述至少两个页面组件在获取所述共有数据时需要从所述数据缓存中读取。

2.根据权利要求1所述的页面开发框架，其特征在于，所述框架程序还用于在监听到所述至少两个页面组件中的任意一个页面组件触发的共有数据修改行为时，基于所述共有数据修改行为对所述数据缓存中保存的所述共有数据进行修改，并通知所述至少两个页面组件中的其他页面组件所述共有数据已经被修改，以使所述其他页面组件从所述数据缓存中重新读取所述共有数据。

3.根据权利要求1所述的前端页面开发框架，其特征在于，所述数据还包括仅为所述每个页面组件使用的私有数据，所述私有数据被保存在所述每个页面组件中。

4.根据权利要求1所述的前端页面开发框架，其特征在于，所述框架程序还用于将所述每个页面组件与所述数据进行双向绑定，以使所述数据的修改与所述页面组件的重新渲染相互同步。

5.根据权利要求4所述的前端页面开发框架，其特征在于，所述每个页面组件均包括组件模板、组件样式以及组件脚本，所述框架程序具体用于扫描所述组件模板并获得所述组件模板中配置好的绑定逻辑，以及用于基于所述绑定逻辑将所述组件模板与所述数据进行双向绑定。

6.根据权利要求1－5中任一项所述的前端页面开发框架，其特征在于，所述前端页面开发框架为单页面应用的开发框架，所述单页面应用包括主页面以及能够嵌入到所述主页面的子页面，所述子页面能够以标签化的方式使用所述多个页面组件中的任意一个页面组件，所述框架程序还用于加载并渲染所述子页面。

7.根据权利要求6所述前端页面开发框架，其特征在于，所述子页面包括页面主文件、页面样式文件以及页面脚本文件，所述框架程序具体用于在所述单页面应用的当前URL地址切换所述子页面对应的URL地址时，从所述URL地址中的锚点部分获得所述子页面的页面标识，基于所述页面标识读取所述单页面应用配置的所述子页面的路由信息，并基于所述路由信息加载所述页面主文件、所述页面样式文件以及所述页面脚本文件，以及基于所述页面主文件、所述页面样式文件以及所述页面脚本文件渲染所述子页面。

8.根据权利要求1－5中任一权项所述的前端页面开发框架，其特征在于，所述前端页面开发框架还包括供所述多个页面组件共同使用的公共脚本模块，所述公共脚本模块包括：

数据通信模块，所述数据通信模块包括用于所述每个页面组件与所述后端进行通信的至少一种函数方法；

数据操作模块，所述数据操作模块包括用于所述每个页面组件操作所述数据的至少一种函数方法；

页面操作模块，所述页面操作模块包括用于所述每个页面组件操作组件模板的至少一种函数方法；

通用变量模块，所述通用变量模块包括所述多个页面组件共同使用的至少一个常量。

9.根据权利要求1－5中任一权项所述的前端页面开发框架，其特征在于，所述前端页面开发框架还包括供所述多个页面组件共同使用的公共样式模块，所述公共样式模块包括：

公共格式化样式，所述公共格式化样式包括所述多个页面组件公共使用的样式；

响应式布局样式，所述响应式布局样式包括兼容不同终端设备尺寸的样式；

字体图标样式，所述字体图标样式包括至少一种字体样式和/或至少一种图标样式。

10.根据权利要求1－5中任一权项所述的前端页面开发框架，其特征在于，所述多个页面组件包括：

颗粒组件，所述颗粒组件包括可复用的组件片段；

标签组件，所述标签组件包括至少一个所述颗粒组件，所述标签组件为用于不含业务逻辑的展现或不含业务逻辑的交互的页面组件；

业务组件，所述业务组件包括至少一个标签组件，所述业务组件为用于包含业务逻辑的展现或包含业务逻辑的交互的页面组件。