一种前端Web表现与数据分离以及页面快速响应的方式的制作方法
【专利摘要】本发明特别涉及一种前端Web表现与数据分离以及页面快速响应的方式。该前端Web表现与数据分离以及页面快速响应的方式，将Web开发中前后端分离，引入JS模块加载器Require JS和模板渲染引擎art Template，将功能模块化、页面模板化，实现页面表现与数据的分离；通过监听页面请求url hash的变化实现不同页面的路由控制进行页面的跳转，进而实现页面的快速响应。
【专利说明】
一种前端Web表现与数据分离以及页面快速响应的方式
技术领域
[0001]本发明涉及计算机软件应用技术领域，特别涉及一种前端Web表现与数据分离以及页面快速响应的方式。
【背景技术】
[0002]随着近几年前端的野蛮生长以及前端应用的多元化和复杂化，整个技术形态已经跟几年前纯做页面的时代迥异。传统开发模式中往往是单独页面独立管理页面所需的所有文件，存在页面结构混乱、资源重复加载、路径变化繁琐等诸多隐患。
[0003]在传统网站的前端实现中，往往存在大量的数据获取与非语义化标签代码掺杂的现象，导致页面的数据更新、维护以及改版过程繁琐，大量静态资源的重复请求致使页面的加载响应速度变慢，用户体验不尽人意。
[0004]为了解决日益复杂的web业务需求及体量，本发明提出了一种前端Web表现与数据分离以及页面快速响应的方式。该方式遵循AMD规范，引入模块加载工具和页面渲染引擎，将JS功能模块化、页面模板化，构造了一个良好的Web开发架构，以此将页面所需动态数据以及展现结构进行剥离；同时通过对页面请求URL HASH值的变化来实现不同页面的路由控制，项目目录结构更加清晰的同时也避免了静态资源的重复加载，解决了页面数据更新维护及加载速度等方面的诸多问题。
【发明内容】
[0005]本发明为了弥补现有技术的缺陷，提供了一种简单高效的前端Web表现与数据分离以及页面快速响应的方式。
[0006]本发明是通过如下技术方案实现的:
一种前端Web表现与数据分离以及页面快速响应的方式，其特征在于:将Web开发中前后端分离，引入JS模块加载器Require JS和模板清染引擎art Template，将功能模块化、页面模板化，实现页面表现与数据的分离;通过监听页面请求url hash的变化实现不同页面的路由控制进行页面的跳转，进而实现页面的快速响应。
[0007]所述JS模块加载器RequireJS将各个单独页面功能按照AMD规范来定义为独立的模块，独立的模块负责数据获取以及对模板的渲染调用，进而实现了模块文件与模板文件的完全分离和项目的目录结构的组织;所述JS模块加载器Require JS使用程序调用的方式加载JS文件，对外暴露统一的功能加载入口 init方法，由加载管理器统一调用。
[0008]hash的展现结构同项目的目录结构保持良好的对应，配合JS模块加载器RequireJS，每个hash对应着唯一的功能模块，且都暴露对外调用方法，方便统一管理，内容的改变不需要重新加载整个页面，使Web应用更具有响应性。
[0009]所述模板渲染引擎artTemplate采用预编译方式，将静态页面结构定义为模板，数据部分通过模板渲染引擎art Template提供的标签格式进行组织展现，模板调试器能够精确定位到引发渲染错误的模板语句，使模板在编写过程中可以调试。
[0010]本发明的有益效果是:该前端Web表现与数据分离以及页面快速响应的方式，遵循AMD规范，引入模块加载工具和页面渲染引擎，将JS功能模块化、页面模板化，构造了一个良好的Web开发架构，以此将页面所需动态数据以及展现结构进行剥离；同时通过监控页面请求url hash值的变化来实现不同页面的路由控制，项目目录结构更加清晰的同时也避免了静态资源的重复加载，解决了页面数据更新维护及加载速度等方面的诸多问题。
[0011]该前端Web表现与数据分离以及页面快速响应的方式，不仅可以进行前端页面的快速开发，项目还能够保持良好的功能组织结构体系，对于既有功能的维护以及新功能的开发拓展都可轻松完成;有效解决了页面目录、功能组织混乱等问题，使项目保存良好的前后端分离，实现了功能页面切换资源的按需加载，使页面结构以及项目目录结构更加清晰，具有良好的可移植性与可访问性；同时，也避免了因为单个模板出错导致整个应用崩溃的情况发生，让开发变得高效，带来了更好的用户体验。
【附图说明】
[0012]附图1为本发明前端Web表现与数据分离以及页面快速响应的方式示意图。
【具体实施方式】
[0013]为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本发明进行详细的说明。应当说明的是，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
[0014]该前端Web表现与数据分离以及页面快速响应的方式，将Web开发中前后端分离，引入JS模块加载器Require JS和模板清染引擎art Template，将功能模块化、页面模板化，实现页面表现与数据的分离;通过监听页面请求url hash的变化实现不同页面的路由控制进行页面的跳转，进而实现页面的快速响应。
[0015]所述JS模块加载器RequireJS将各个单独页面功能按照AMD规范来定义为独立的模块，独立的模块负责数据获取以及对模板的渲染调用，模块文件与模板文件完全分离，进而实现了模块文件与模板文件的完全分离和项目的目录结构的组织；所述JS模块加载器Require JS使用程序调用的方式加载JS文件，既能防止js阻塞页面的渲染，又大大提高代码可读性;对外暴露统一的功能加载入口 init方法，由加载管理器统一调用。
[0016]hash的展现结构同项目的目录结构保持良好的对应，配合JS模块加载器RequireJS，每个hash对应着唯一的功能模块，且都暴露对外调用方法，方便统一管理，内容的改变不需要重新加载整个页面，使Web应用更具有响应性，带来了更好的用户体验。
[0017]所述模板渲染引擎artTemplate采用预编译方式让性能有了质的飞跃，，将静态页面结构定义为模板，数据部分通过模板渲染引擎art Template提供的标签格式进行组织展现，模板调试器能够精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。
【主权项】
1.一种前端Web表现与数据分离以及页面快速响应的方式，其特征在于:将Web开发中前后端分离，引入JS模块加载器Require JS和模板清染引擎art Template，将功能模块化、页面模板化，实现页面表现与数据的分离;通过监听页面请求url hash的变化实现不同页面的路由控制进行页面的跳转，进而实现页面的快速响应。2.根据权利要求1所述的前端Web表现与数据分离以及页面快速响应的方式，其特征在于:所述JS模块加载器Require JS将各个单独页面功能按照AMD规范来定义为独立的模块，独立的模块负责数据获取以及对模板的渲染调用，进而实现了模块文件与模板文件的完全分离和项目的目录结构的组织;所述JS模块加载器Require JS使用程序调用的方式加载JS文件，对外暴露统一的功能加载入口 init方法，由加载管理器统一调用。3.根据权利要求1或2所述的前端Web表现与数据分离以及页面快速响应的方式，其特征在于:hash的展现结构同项目的目录结构保持良好的对应，配合JS模块加载器RequireJS，每个hash对应着唯一的功能模块，且都暴露对外调用方法，方便统一管理，内容的改变不需要重新加载整个页面，使Web应用更具有响应性。4.根据权利要求1所述的前端Web表现与数据分离以及页面快速响应的方式，其特征在于:所述模板渲染引擎art Template采用预编译方式，将静态页面结构定义为模板，数据部分通过模板渲染引擎art Template提供的标签格式进行组织展现，模板调试器能够精确定位到引发渲染错误的模板语句，使模板在编写过程中可以调试。
【文档编号】G06F9/44GK106020823SQ201610334147
【公开日】2016年10月12日
【申请日】2016年5月19日
【发明人】靳志凯, 李永信
【申请人】浪潮电子信息产业股份有限公司