本发明涉及前端技术领域，特别涉及一种前端页面模板复用的方法。

背景技术：

前端即网站前台部分，运行在pc端，移动端等浏览器上展现给用户浏览的网页。前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。前端开发主要职能就是把网站的界面更好地呈现给用户。

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的html和css以及javascript/ajax，现在最新的高级版本html5、css3，以及svg等。

前端技术的发展是互联网自身发展变化的一个缩影。随着互联网技术的发展，html5，css3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

在web1.0时代，由于网速和终端能力的限制，大部分网站只能呈现简单的图文信息，并不能满足用户在界面上的需求，对界面技术的要求也不高。随着硬件的完善、高性能浏览器的出现和宽带的普及，技术可以在用户体验方面实现更多种可能，前端技术领域迸发出旺盛的生命力。

随着互联网进入web2.0时代，各种类似桌面软件的web应用大量涌现，前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。

近年来，手机成为人们生活中不可或缺的一部分，成为人们身体的延伸，人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外，前端技术还能应用于智能电视、智能手表甚至人工智能领域。移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，html5，node.js的广泛应用，各类框架类库层出不穷。

在数据时代，随着互联网技术的迅速发展，产生了大量的数据，人们的工作和生活基本上都可以用数字化表示。为了直观地将数据呈现到前端页面上，并快速开发相同类型的页面，采用一种有效地页面复用方式就显得越发重要。

传统的页面复用方式是由前端工程师根据业务需求编写页面，这些页面与业务紧密相关，页面样式无法做到统一化，也就无法做到样式的重复利用。正是这种繁杂重复的工作造成了页面开发的低效化，又因为样式风格的不规范导致样式无法共享使用，降低了复用效率。

基于上述情况，本发明提出了一种前端页面模板复用的方法。

技术实现要素：

本发明为了弥补现有技术的缺陷，提供了一种简单高效的前端页面模板复用的方法。

本发明是通过如下技术方案实现的：

一种前端页面模板复用的方法，其特征在于：包括生成模板页面和利用模板生成页面两个部分，具体包括以下步骤：

第一步，根据具体需求制定出一套合适的页面主题；

第二步，结合技术规范和页面主题设计出可以复用的页面样式库，使得页面遇到的问题都能在样式库中找到解决方案；

第三步，根据可能存在的应用场景，设计出不同应用场景下的页面模板，为开发人员提供参考；

第四步，根据实际场景，挑选页面，并将页面中新加入的样式经过审核后加入样式库中。

所述第一步中，对页面模板进行结构化分析，制定页面相关元素的基本显示方式作为页面主题，包括页面主题色、页面呈现规则和页面控件标准，从而使页面模板处理变得清晰高效。

所述第二步中，由前端开发人员、具体业务组的人员以及ui(界面)设计人员共同参与设计页面样式库；具体业务组人员和ui设计人员共同参与可以针对具体需求制定正确且符合需求的页面样式，避免开发人员对不同页面使用不同样式，使得样式与每个单独页面联系过于紧密。

所述第三步中，页面模板的创建和页面主题规范密切相关，每一个页面控件的样式都有具体的样式规范；页面模板要尽可能简单，并对页面模板做统一的样式说明，每一个页面模板都清晰明了地告诉开发人员在当前情况下应该应用什么样的页面样式。

所述第四步中，根据页面具体呈现的不同内容和页面模板统一的样式说明，采用不同的页面模板；在开发页面之前正确选择页面模板，从而防止在开发页面的过程中产生新的问题，方便用户对所有页面模板做统一的样式调整。

所述第四步中，登录页面的呈现形式与具体内容页面选用不同模板，具体内容页面中又分为文字数据呈现页面与图表文字呈现页面，所述文字数据呈现页面与图表文字呈现页面分别根据需要选取不同的页面模板。

所述第四步中，在页面开发过程中，当页面根据业务需求的不同对页面样式有不同的要求的情况时，在公有样式库中寻找到所需样式，可以根据实际场景调整页面样式。

当所述公有样式库中没有所需样式时，可以在当前页面中单独定义样式。

本发明的有益效果是：该前端页面模板复用的方法，通过不断补充样式库，制定不同场景下的模板页面，不仅有效减少了页面开发周期，能够快速构建同类型的页面，同时还降低了代码维护成本以及系统的页面复杂度，最重要的是保持了页面风格的一致性，提升了用户体验。

附图说明

附图1为本发明前端页面模板复用的方法示意图。

具体实施方式

为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚明白，以下结合实施例，对本发明进行详细的说明。应当说明的是，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。

该前端页面模板复用的方法，包括生成模板页面和利用模板生成页面两个部分，具体包括以下步骤：

第一步，根据具体需求制定出一套合适的页面主题；

第二步，结合技术规范和页面主题设计出可以复用的页面样式库，使得页面遇到的问题都能在样式库中找到解决方案；

第三步，根据可能存在的应用场景，设计出不同应用场景下的页面模板，为开发人员提供参考；

第四步，根据实际场景，挑选页面，并将页面中新加入的样式经过审核后加入样式库中。

所述第一步中，对页面模板进行结构化分析，制定页面相关元素的基本显示方式作为页面主题，包括页面主题色、页面呈现规则和页面控件标准，从而使页面模板处理变得清晰高效。

所述第二步中，由前端开发人员、具体业务组的人员以及ui(界面)设计人员共同参与设计页面样式库；具体业务组人员和ui设计人员共同参与可以针对具体需求制定正确且符合需求的页面样式，避免开发人员对不同页面使用不同样式，使得样式与每个单独页面联系过于紧密。

一份完整的页面主题规范应该能让开发人员清晰明确地找到所需样式具体标准，从而快速构建起样式相同的页面。

所述第三步中，页面模板的创建和页面主题规范密切相关，每一个页面控件的样式都有具体的样式规范；页面模板要尽可能简单，并对页面模板做统一的样式说明，每一个页面模板都清晰明了地告诉开发人员在当前情况下应该应用什么样的页面样式。

模板创建人员不应该为求方便，制定意义不明的模板，这会造成页面开发时的混乱。

所述第四步中，根据页面具体呈现的不同内容和页面模板统一的样式说明，采用不同的页面模板；在开发页面之前正确选择页面模板，从而防止在开发页面的过程中产生新的问题，方便用户对所有页面模板做统一的样式调整。

所述第四步中，登录页面的呈现形式与具体内容页面选用不同模板，具体内容页面中又分为文字数据呈现页面与图表文字呈现页面，所述文字数据呈现页面与图表文字呈现页面分别根据需要选取不同的页面模板。

所述第四步中，在页面开发过程中，当页面根据业务需求的不同对页面样式有不同的要求的情况时，在公有样式库中寻找到所需样式，可以根据实际场景调整页面样式。

当所述公有样式库中没有所需样式时，可以在当前页面中单独定义样式。

与现有技术相比，该前端页面模板复用的方法，具有以下特点：

第一、通过建立通用的样式库实现了页面风格的统一，将页面样式规范化、通用化生成了通用模板，保持了页面风格的一致性，提升了用户体验。

第二、通过不断补充样式库，制定不同场景下的模板页面，能够有效减少页面开发周期，快速构建同类型的页面。

第三、依据业务需求，针对实际场景对相关页面样式进行调整，实现了样式的复用化，降低了代码维护成本以及系统的页面复杂度。

以上所述的实施例，只是本发明具体实施方式的一种，本领域的技术人员在本发明技术方案范围内进行的通常变化和替换都应包含在本发明的保护范围内。