CN103984548A - 一种web应用前端框架及其构建方法、系统 - Google Patents

Abstract

本发明适用于web开发领域，提供了一种web应用前端框架及其构建方法、系统，该方法包括：基于CMD规范的前端模块加载器构建框架核心类文件层，核心类文件含有框架基本信息以及整合控件接口的方法；在核心类文件的下层构建遵循CMD模块定义规范的接口层类，接口层类与核心类对应，且接口层类与底层控件的功能属性对应；在修改和替换控件时，根据第三方控件的功能属性将其封装为符合接口层类要求的控件模块。借此，本发明能实现Web控件简单、快速、平滑的替换和修改，实现前端开发与项目页面解耦，以提高工作效率。

Description

一种web应用前端框架及其构建方法、系统

技术领域

本发明涉及web(网页)开发领域，尤其涉及一种web应用前端框架及其构建方法、系统。

背景技术

对于敏捷开发中的团队，长期处于快速开发于需求响应中，处于不同岗位上的开发人员，则需要能够根据需求快速调整自己负责的层面的代码，而Web前端在项目开发中需求的变更更加频繁。一个小型团队，Web控件更多的来自第三方，控件替换以及修改和与页面开发人员进行沟通进行知识普及，则变成前端开发人员最频繁的工作。目前解决办法：前端开发人员把新控件导入项目中，并将旧控件删除。先把旧控件调用的页面，旧控件引用路径先删除，换为新控件地址。然后将旧控件的使用一一处理掉，使用新控件API(ApplicationProgramming Interface，应用程序编程接口)来完成原有的功能，经过一一测试后，项目上的改造才算完成。接下来，还需要大量的时间与开发人员沟通讲解新控件的使用方法。

综上可知，现有技术在实际使用上显然存在不便与缺陷，所以有必要加以改进。

发明内容

针对上述的缺陷，本发明的目的在于提供一种web应用前端框架及其构建方法、系统，其能实现Web控件简单、快速、平滑的替换和修改，实现前端开发与项目页面解耦，以提高工作效率。

为了实现上述目的，本发明提供一种构建Web应用前端框架的方法，所述方法包括如下步骤：

基于CMD规范的前端模块加载器构建框架核心类文件层，核心类文件含有框架基本信息以及整合控件接口的方法；

在核心类文件的下层构建遵循CMD模块定义规范的接口层类，所述接口层类与所述核心类对应，且所述接口层类与底层控件的功能属性对应；

在修改和替换控件时，根据第三方控件的功能属性将其封装为符合所述接口层类要求的控件模块。

根据本发明的方法，基于CMD规范的前端模块加载器构建框架核心类文件层的步骤中，所述核心类文件含有框架基本信息，所述框架基本信息包括版本号、建立时间以及文字提示。

根据本发明的方法，基于CMD规范的前端模块加载器构建框架核心类文件层的步骤中，所述核心类文件含有整合控件接口的方法，所述整合控件接口的方法为将一个接口对象中的属性合并到核心类对象上的方法。

根据本发明的方法，在核心类文件的下层构建遵循CMD模块定义规范的接口层类的步骤包括：通过前端模块加载器引入底层控件，声明接口类对象，定义接口并实现，将接口对外发布以及将接口合并到核心类上。

本发明相应提供一种构建Web应用前端框架的系统，所述系统包括：

前端模块加载器，用于基于CMD规范构建框架核心类文件层，核心类文件含有框架基本信息以及整合控件接口的方法，以及在核心类文件的下层构建遵循CMD模块定义规范的接口层类，所述接口层类与所述核心类对应，且所述接口层类与底层控件的功能属性对应；

封装模块，用于在修改和替换控件时，根据第三方控件的功能属性将其封装为符合所述接口层类要求的控件模块。

根据本发明的系统，所述框架基本信息包括版本号、建立时间以及文字提示。

根据本发明的系统，所述整合控件接口的方法为将一个接口对象中的属性合并到核心类对象上的方法。

根据本发明的系统，前端模块加载器还用于在构建遵循CMD模块定义规范的接口层类时引入底层控件，声明接口类对象，定义接口并实现，将接口对外发布以及将接口合并到核心类上。

本发明相应提供一种web应用前端框架，包括：

应用层，为基于核心类文件中的API编写的运行在不同设备环境中的页面；

核心类文件层，包含由接口层通过核心文件整合在一起而形成供应用层调用的API集合；

接口层，包括基于CMD规范编写的控件API。

控件层，包括第三方控件或旧控件的API。

根据本发明的web应用前端框架，所述控件包括：按钮控件、标签控件、文本框控件、图片控件、浏览器控件、视频控件、音频控件。

本发明通过基于CMD规范的前端模块加载器构建框架核心类文件，所述核心类文件含有框架基本信息以及整合控件接口的方法；在核心类文件的下层构建遵循CMD模块定义规范的接口层类，所述接口层类与所述核心类对应，且所述接口层类与底层控件的功能属性对应。进行控件替换时，仅需改变控件API满足接口层需求，便完成全部工作，减少了web前端开发人员开发工作量。更换调整Web控件，无需与其他开发人员进行新控件知识普及工作。实现了web控件层与项目页面的解耦，控件调整后，可减少页面测试工作，保证了代码健壮性。可以直接兼容遵循CMD规范的第三方控件。在同一接口层下，可覆盖同类型，不同平台Web控件。使应用开发人员知识认知无需过多更新的情况下进行多平台同接口开发。

附图说明

图1是本发明一种构建Web应用前端框架的系统的框图；

图2是本发明一种web应用前端框架的示意图；

图3是本发明一种构建Web应用前端框架的方法的流程图；

图4是本发明一种实施例中将控件导入web应用前端框架的流程图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

如图1所示，本发明一种构建Web应用前端框架的系统100，系统100包括前端模块加载器10以及封装模块20。

前端模块加载器10，用于基于CMD(Common Module Definition，通用模块定义)规范构建框架核心类文件层，核心类文件含有框架基本信息以及整合控件接口的方法，以及在核心类文件的下层构建遵循CMD模块定义规范的接口层类，接口层类与核心类对应，且接口层类与底层控件的功能属性对应。具体的，框架基本信息包括版本号、建立时间以及文字提示，整合控件接口的方法为将一个接口对象中的属性合并到核心类对象上的方法。

封装模块20，用于在修改和替换控件时，根据第三方控件的功能属性将其封装为符合所述接口层类要求的控件模块。

该web应用前端框架如图2所示，web应用前端框架包括：web应用层、核心类文件层、控件接口层以及控件层。

web应用层，为基于核心类文件中的API编写的运行在不同设备环境中的页面。

核心类文件层，包含由接口层通过核心文件整合在一起而形成供应用层调用的API集合。具体的，核心类文件层包含一些简单的工具方法(如ajaxError:AJAX调用失败的回调处理方法)其他与控件相关的方法(如playWarning：播放告警声音)由接口层通过核心文件中clone方法整合在一起而形成供应用层调用的javascript的API集合。工具方法真实存在于核心文件中，控件相关方法真实存在于接口层文件中。

控件接口层，包括基于CMD规范编写的控件API。具体的，控件接口层指为每一个第三方控件或旧控件在其原有API基础上编写的基于CMD规范的适用于当前业务需求的API和基于CMD规范编写的控件API。这些API在控件层存在，并且未使用核心文件中的工具方法的情况下，可以不依赖核心文件单独使用，但并不推荐。

控件层，包括第三方控件或旧控件的API。如图2所示，该控件层的控件包括：按钮控件、标签控件、文本框控件、图片控件、浏览器控件、视频控件以及音频控件等等。

应用层调用的是核心类文件层的API，这层与控件相关的API由接口层的API拼合而成，核心类文件层主要任务将接口层的API进行拼合，对应用层展现统一模式的API，核心类文件层以下的变化对于应用层是屏蔽的；接口层是核心类文件层与具体控件相关的API的真实API，接口层是离散的，一组接口对应着一组与控件相关操作。控件层由第三方控件和旧控件组成，它们很多都已经很成熟，经过了开源社区中开发人员们的使用和测试，而开发人员一时无法基于CMD规范改造且改造成本较高。在项目前期，根据实际效果和需求，可以对其进行更换和调整，接口层编码根据控件层的变化做相应的修改即可，但接口层不能改变对外发布的接口。上层应用通过核心类文件访问控件接口，控件接口封装了底层的控件库。

进行控件替换时，仅需改变控件API满足接口层需求，便完成全部工作，减少了web前端开发人员开发工作量。更换调整Web控件，无需与其他开发人员进行新控件知识普及工作。实现了web控件层与项目页面的解耦，控件调整后，可减少页面测试工作，保证了代码健壮性。可以直接兼容遵循CMD规范的第三方控件。在同一接口层下，可覆盖同类型，不同平台Web控件。使应用开发人员知识认知无需过多更新的情况下进行多平台同接口开发。

在本发明的一个实施例中，前端模块加载器10可以选用SeaJS、KISSY等遵循CommonJS规范的模块加载框架，如采用SeaJS框架核心类文件结构如下：

核心类文件是框架的主干，它的基本信息包括“版本号”、“建立时间”、文字提示等，例如：

整合控件接口的方法实际上就是将一个接口对象中的属性合并到核心类对象上的方法。例如：

在jquery环境下，该方法如下：

前端模块加载器10还用于在构建遵循CMD模块定义规范的接口层类时引入底层控件，声明接口类对象，定义接口并实现，将接口对外发布以及将接口合并到核心类上。

下面通过一个具体实施例说明前端模块加载器10如何在核心类文件的下层构建遵循CMD模块定义规范的接口层类。构建一个接口模块步骤包括：

将其合并到核心类上

coreJS.clone(dialog)；

下面通过一个实例说明如何构建一个控件的接口。例如：项目中需要一个弹出框控件，经过比对选用了lhgdialog控件。以下针对该控件进行CMD模块定义接口层改造。查看其文档可以发现，该控件的API中配置参数很多，title(窗口的标题)，content(窗口中加载的内容)、min(是否显示最小化按钮)、max(是否显示最大化按钮)、button(自定义按钮)、width(指定窗口的宽度)、height(指定窗口的高度)等等。对于项目，仅需要窗口中加载的内容、窗口id、窗口标题必填，其他的配置参数可选即可，打开窗口的接口可定义为：

具体的，控件接口层应遵循以下规则：

一、控件接口过于复杂，则在此层上进行简化。具体简化方法可以参照上文如何构建一个控件的接口的实例。

二、控件接口过于细碎无法实现一个独立的功能，则将几个相关的控件按照逻辑组织并进行封装。例如有这样的需求：弹出窗口并播放声音。这时就需要同时引入窗口和声音两个控件层模块，然后再上层定义一个弹出窗口并播放声音的接口，调用底层的窗口模块的弹出方法和声音模块的模仿方法。

三、接口层的创建以满足业务需求为目的，保证更换下层控件时，不影响框架支持的项目。

四、保证接口的独立性，每个控件仅有一个类，使其在脱离核心类模块也可以独立使用，也即核心类文件仅仅是将控件接口进行了合并，每一个控件的接口是一个独立的类，可以单独调用。对于己方独立开发的控件，可不增加接口层，但要遵循CMD规范开发，将可供外调用的接口放出，外部调用接口遵循与第三方接口层类同样规则。为每个接口层类增加扩展方法，使其在有核心类的情况下，可将接口方法扩展到核心类上。开发中，在项目中调用时最先引用核心类模块，然后按需引入当前页面业务所需的控件。需要控件替换时，不改变原有接口层，仅改变下层控件方法来满足接口层要求。

该控件层的控件包括：按钮控件、标签控件、文本框控件、图片控件、浏览器控件、视频控件以及音频控件等等。

本发明通过基于CMD规范的前端模块加载器构建框架核心类文件，所述核心类文件含有框架基本信息以及整合控件接口的方法；在核心类文件的下层构建遵循CMD模块定义规范的接口层类，所述接口层类与所述核心类对应，且所述接口层类与底层控件的功能属性对应。进行控件替换时，仅需改变控件API满足接口层需求，便完成全部工作，减少了web前端开发人员开发工作量。更换调整Web控件，无需与其他开发人员进行新控件知识普及工作。实现了web控件层与项目页面的解耦，控件调整后，可减少页面测试工作，保证了代码健壮性。可以直接兼容遵循CMD规范的第三方控件。在同一接口层下，可覆盖同类型，不同平台Web控件。使应用开发人员知识认知无需过多更新的情况下进行多平台同接口开发。

图3是本发明一种构建Web应用前端框架的方法的流程图，该方法包括如下步骤：

步骤S301，基于CMD规范的前端模块加载器构建框架核心类文件，核心类文件含有框架基本信息以及整合控件接口的方法；

步骤S302，在核心类文件的下层构建遵循CMD模块定义规范的接口层类，接口层类与核心类对应，且接口层类与底层控件的功能属性对应。

步骤S303，在修改和替换控件时，根据第三方控件的功能属性将其封装为符合接口层类要求的控件模块。

图4是本发明一种实施例中将控件导入web应用前端框架的流程图，该流程包括：

步骤S401，确定控件需求。

步骤S402，是否有满足CMD规范要求第三方控件，若否则进入步骤S403，是则进入步骤S407。

步骤S403，改造不符合规范的控件。

步骤S404，是否为前端人员开发的控件。若是则进入步骤S405，否则进入步骤S406。

步骤S405，基于CMD规范改造。

步骤S406，基于CMD规范进行接口封装。

步骤S407，完成。

在步骤S405和步骤S406中，“基于CMD规范改造”和“基于CMD规范进行接口封装”的区别在于是否有下层的文件(控件层)，接口是否实现具体功能。基于CMD规范改造，需要修改原有的控件代码按照如下格式编写：

该上例中，具体功能弹出窗口test是在接口类文件中实现的。

基于CMD规范进行接口封装，下层有控件，控件改造成本较高。例如：

对该控件进行“基于CMD规范进行接口封装”：

从上例可以看出，基于CMD规范进行接口封装，具体的功能是在控件文件中实现的。

综上所述，本发明通过基于CMD规范的前端模块加载器构建框架核心类文件，所述核心类文件含有框架基本信息以及整合控件接口的方法；在核心类文件的下层构建遵循CMD模块定义规范的接口层类，所述接口层类与所述核心类对应，且所述接口层类与底层控件的功能属性对应。进行控件替换时，仅需改变控件API满足接口层需求，便完成全部工作，减少了web前端开发人员开发工作量。更换调整Web控件，无需与其他开发人员进行新控件知识普及工作。实现了web控件层与项目页面的解耦，控件调整后，可减少页面测试工作，保证了代码健壮性。可以直接兼容遵循CMD规范的第三方控件。在同一接口层下，可覆盖同类型，不同平台Web控件。使应用开发人员知识认知无需过多更新的情况下进行多平台同接口开发。

当然，本发明还可有其它多种实施例，在不背离本发明精神及其实质的情况下，熟悉本领域的技术人员当可根据本发明作出各种相应的改变和变形，但这些相应的改变和变形都应属于本发明所附的权利要求的保护范围。

Claims (10)

1.一种构建Web应用前端框架的方法，其特征在于，所述方法包括如下步骤：

基于CMD规范的前端模块加载器构建框架核心类文件层，核心类文件含有框架基本信息以及整合控件接口的方法；

在核心类文件的下层构建遵循CMD模块定义规范的接口层类，所述接口层类与所述核心类对应，且所述接口层类与底层控件的功能属性对应；

在修改和替换控件时，根据第三方控件的功能属性将其封装为符合所述接口层类要求的控件模块。

2.根据权利要求1所述的方法，其特征在于，基于CMD规范的前端模块加载器构建框架核心类文件层的步骤中，

所述核心类文件含有框架基本信息，所述框架基本信息包括版本号、建立时间以及文字提示。

3.根据权利要求1所述的方法，其特征在于，基于CMD规范的前端模块加载器构建框架核心类文件层的步骤中，

所述核心类文件含有整合控件接口的方法，所述整合控件接口的方法为将一个接口对象中的属性合并到核心类对象上的方法。

4.根据权利要求1所述的方法，其特征在于，在核心类文件的下层构建遵循CMD模块定义规范的接口层类的步骤包括：

通过前端模块加载器引入底层控件，声明接口类对象，定义接口并实现，将接口对外发布以及将接口合并到核心类上。

5.一种构建Web应用前端框架的系统，其特征在于，所述系统包括：

前端模块加载器，用于基于CMD规范构建框架核心类文件层，核心类文件含有框架基本信息以及整合控件接口的方法，以及在核心类文件的下层构建遵循CMD模块定义规范的接口层类，所述接口层类与所述核心类对应，且所述接口层类与底层控件的功能属性对应；

封装模块，用于在修改和替换控件时，根据第三方控件的功能属性将其封装为符合所述接口层类要求的控件模块。

6.根据权利要求5所述的系统，其特征在于，所述框架基本信息包括版本号、建立时间以及文字提示。

7.根据权利要求5所述的系统，其特征在于，所述整合控件接口的方法为将一个接口对象中的属性合并到核心类对象上的方法。

8.根据权利要求5所述的系统，其特征在于，前端模块加载器还用于在构建遵循CMD模块定义规范的接口层类时引入底层控件，声明接口类对象，定义接口并实现，将接口对外发布以及将接口合并到核心类上。

9.一种web应用前端框架，其特征在于，包括：

应用层，为基于核心类文件中的API编写的运行在不同设备环境中的页面；

核心类文件层，包含由接口层通过核心文件整合在一起而形成供应用层调用的API集合；

接口层，包括基于CMD规范编写的控件API。

控件层，包括第三方控件或旧控件的API。

10.根据权利要求9所述的web应用前端框架，其特征在于，所述控件包括：按钮控件、标签控件、文本框控件、图片控件、浏览器控件、视频控件、音频控件。