一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架

摘要

本发明公开了一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，包括：访问层、前端UI层、后端；EDPReact核心模版指令集edp‑：主要用在HTML模版界面视图中，让界面具备数据响应；EDPReact组件：组件包含HTML模版、组件对象，HTML模版支持集edp‑；EDPReact页面：页面是普通的HTML，普通的HTML也可以支持模版指令集、也可以是被Mount挂载、也可以包含各种标准的EDPReact组件，因此EDPReact页面可以让前代的界面兼容，同时具备现代组件；EDPReact路由。本发明，解决了目前开发第三代Web应用不兼容传统的代码和架构带来成本巨大的浪费和升级成本；并可以无缝过度到现代的WebComponent标准，以及可以无缝集成目前已经成熟的第三方生态组件。

说明书

技术领域

本发明涉及前端开发框架技术领域，具体是一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架。

背景技术

从2001年的.com互联网开发发展，到2005年8月，推出以jQuery为代表的第二代Web前端开发框架到现在，B/S架构的软件在第一、二代的界面框架上，做了最大量的投资。但是传统软件升级到目前的第三代现代Web框架却有非常的不兼容的缺陷：几乎要重构原来90％的代码基，改变原来的开发工具，和提升开发人员到更高的水平才能完成。

因此传统的软件要花大量的时间和资源才能升级到现代框架上来，才能持续给用户现代的体验。

但是，第三代的现代框架要求极高，技术也在快速发展和进化，比如作为js的重要标准和基础，经历了ES3，ES5，ES6(ECMAScript 2015)。还需要了解打包和编译的相关技术，如Webpack,Gulp,Babel,Browserify等等，这大大增加了开发人员的技能，以及让第一代，第二代代码开发的产品无法无缝升级到第三代。而最麻烦的是，所有这些新东西都在飞快地发展和变化中。可能您基于三代技术框架开发完产品后，还没有发布，新的版本就出来了，而且宣布版本不兼容。这给前端产品研发带来巨大的成本和不确定性。

edp-模版指令集的运行期动态性:目前市面上主流的框架如google的Angular,Vue,facebook React都缺乏运行期指令集的动态性。就是组件里面包含的指令需要经过打包编译生成发布包，比如bundle.js，以便在前端浏览器执行的编译后代码。这样就无法在js的运行状态下，再动态通过程序(比如运行期的界面配置实施工具)改变模版指令。打个比方，将程序发布到客户环境，该客户的要求是该页面上的任意一个控件要隐藏掉，改变任意一个控件的任意属性，或者是要将任意一个控件增加任意的事件脚本，以便实现不同客户的个性化需求实施。特别强调的是，这里的任意性是指发布程序后，不可预见性的、无规律的客户需求变化。而edp模版指令的动态性就是拥有这个构建产品级的界面组件的运行期动态特性。使用edp react构建的组件，页面可以实现产品级别的SaaS个性化部署，PaaS部署，而目前主流的第三代现代前端js框架都只能实现可预见性、有限性，固定性的项目软件系统部署。

同时目前主流的第三代前端组件框架的组件都是编译打包后执行，因此都失去了运行期动态性，这样就无法在js的运行状态下，再动态通过程序(比如运行期的界面配置实施工具)改变组件的模版指令。打个比方，将程序发布到客户环境，该客户的要求是该页面上的任意一个控件要隐藏掉，改变任意一个控件的任意属性，或者是要将任意一个控件增加任意的事件脚本，以便实现不同客户的个性化需求实施。

目前主流的前端组件框架第三代对Web Component国际标准支持并不是很友好和自然，在设计时，并不优先支持这个国际标准组织定义的组件规范。因此需要组件开发使用方额外的工具和代码来实现。

发明内容

本发明的目的在于提供一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，以解决现有技术中的问题。

为实现上述目的，本发明提供如下技术方案：一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，包括：访问层、前端UI层、后端；

EDP React核心模版指令集edp-：主要用在HTML模版界面视图中，让界面具备数据响应，其包括edp-attribute、edp-execute、edp-template、edp-tmpl、edp-refresh、edp-props、slot插槽、edp-slot、edp-render；

EDP React组件：组件包含HTML模版、组件对象，HTML模版支持集edp-；组件支持HTML文件，以及各种服务端文件JSP、ASP、PHP，以实现对旧代码的兼容，组件定持普通对象以及现代Web标准WebComponent；组件的生命周期支持独创的beforeProps、updated的两个生命周期方式；通知渲染更新机制，独创支持两种模式：一种是异步的更新整个页面元素通知，还是一种是可以同时支持同步和异步的可定点更新区域；

EDP React页面：页面是普通的HTML，普通的HTML也可以支持模版指令集、也可以是被Mount挂载、也可以包含各种标准的EDP React组件，因此EDP React页面可以让前代的界面兼容，同时具备现代组件；

EDP React路由：React路由就像是路径指挥员，引导各种页面和组件按照用户操作的路径显示出页面/组件内容；React路由可以管控页面跳转，也可以管控组件跳转；EDP路由管控的页面跳转支持传统的HTML、JSP/PHP、ASPX跳转，还支持iframe页面跳转；因此也是全面兼容前代界面开发技术。

优选的，还包括EDP React生命周期：在处理组件的时候，首先解析出html的template，以及script，以及Style部分，并缓存起来，以便再出现同样的组件的时候，可以直接从缓存中获得这些定义信息；在处理组件的时候，首先解析出html的template，以及script，以及Style部分，对于script部分的脚本，如果在template里面包含

这里申请的专利部分是实现支持在模版中引入