CN113867728A

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

Info

Publication number: CN113867728A
Application number: CN202111167001.1A
Authority: CN
Inventors: 余良开
Original assignee: Shanghai Libo Software Technology Co ltd
Current assignee: Shanghai Libo Software Technology Co ltd
Priority date: 2021-06-24
Filing date: 2021-10-01
Publication date: 2021-12-31
Also published as: CN113377374A

Abstract

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

Description

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

技术领域

本发明涉及前端开发框架技术领域，具体是一种应用于第三代的现代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里面包含<script src＝”XXX”>要正确解析是同步脚本(默认是同步脚本，要等到所有脚本都加载完毕，才能直接组件里面的script标签里面的脚本)，还是异步脚本，并缓存起来，以便再出现同样的组件的时候，可以直接从缓存中获得这些定义信息；EDP React生命周期拥有两个独创的beforeProps、updated的两个生命周期实现。

优选的，所述EDP React路由一般用在本地单页面的应用SPA；请求先到路由，然后通过路由来加载对应的组件、HTML界面等；然后再根据对应的元素类型来执行Render渲染；所述EDP React路由一般用在本地单页面的应用SPA；请求先到路由，然后通过路由来加载对应的组件、以及全面兼容HTML，JSP/ASP/PHP服务端界面；然后再根据对应的元素类型来执行Render渲染。

优选的，所述Render渲染：支持组件，以及带有edp React Mount，或者是普通的HTML，或者是JSP/ASPX；渲染更新机制直接采用原生DOM树的遍历方式；手动更新界面：数据变化时更新的数据响应界面的方式，可以定点更新区域，以及可灵活依据实际的场景实现异步和同步实现界面的渲染。

优选的，所述EDP React核心模版指令集edp-在Render渲染中edp模版指令扮演重要角色；edp模版指令可以运行在组件中，或者是被edp React Mount的HTML中，也可以运行在普通的HTML，JSP中；因此edp模版指令无需、也不能是预先静态编译；在Render渲染的过程中，系统会遍历所有的DOM元素，并识别出带有edp-前缀的指令，这种元素是edp指令元素，然后将这种edp指令元素进行处理，即调用对应的指令解析程序对edp指令元素进行处理。

优选的，所述指令元素处理过程中，如果该元素是组件，或者是带有edp ReactMount的HTML片段(带有edp React Mount的HTML片段也是被当作组件来处理)，那么需要创建子处理过程来处理该组件；并且子组件的处理过程与它的上下文环境相隔离，只能通过edp-props来传递给子组件的属性/方法。

与现有技术相比，本发明的有益效果是：

1、无缝兼容第一代，第二代Web技术框架。第三代代码可以直接与第一代，第二代代码无缝共生。所有相关的设计，思路和实现都将这个目标放在首要。包括模版指令，组件路由设计都充分考虑这种兼容性；

2、开发人员使用EDP React可以保持原来的JavaScript开发技能，无需学习体系庞大的Node.js,NPM,Webpack,Babel等也能开发Web组件和第三代应用；

3、保持天生、完整的动态性；

4、在数据发生变化的时候，开发人员可以决定响应的界面区域，而且数据发生变化到界面响应后的处理，可以实现简单的同步处理逻辑，无需采用异步的方式获得结果，这也可以大大简化在数据发生变化到获得页面响应后的结果的处理方式，因此可以与传统的javascript的代码更好的共存和融合；

5、EDP react组件拥有集成第三方现代前端框架组件的友好性，可以无缝集成目前已经成熟的第三方生态组件，目前可集成Vue,facebook React框架下组件，这样就可以直接利用高质量的第三方组件，避免去重复造轮子；通过edp react组件封装集成后的第三方组件，对于应用方来讲，就是edp react组件，它并不知道这是原生的edp react组件，还是通过浅层封装后的第三方集成组件；因此edp react组件就可以充分利用业界大量的优秀的组件，同时，如果某一类的组件框架到了生命周期结束的时候，那么只需要将这个edpreact的集成组件更换到另外一个当红的框架的组件，而无需更改大量依赖于该组件的应用方的代码；因此这大大增强了edp react组件的生命周期的长期性可以持续进化性，鲁棒性，封装性。

附图说明

附图用来提供对本发明的进一步理解，并且构成说明书的一部分，与本发明的实施例一起用于解释本发明，并不构成对本发明的限制。在附图中：

图1为本发明的结构示意图。

具体实施方式

为使本发明实施方式的目的、技术方案和优点更加清楚，下面将结合本发明实施方式中的附图，对本发明实施方式中的技术方案进行清楚、完整地描述，显然，所描述的实施方式是本发明一部分实施方式，而不是全部的实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。因此，以下对在附图中提供的本发明的实施方式的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施方式。基于本发明中的实施方式，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施方式，都属于本发明保护的范围。

请参阅图1，本发明实施例中，一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，包括：访问层、前端UI层、后端；

利用EDP React的组件封装特性，通过简单方式就可以集成目前主流的Vue,facebook的React框架上的成熟组件，让调用方无需了解其他框架的技术，就想使用EDPReact原生组件一样使用第三方框架的组件。

edp-指令集动态性设计：由于edp-指令集在于是在运行期执行，为了提升性能，会cache各种指令属性和计算的值。因此，如果要在运行期实现模版指令的动态变化，就需要通知相关HTML节点/组件节点属性要清除缓存。因此要给应用开放函数API edpAttribute(domNode,attributesInJSON)，以通知框架清除cache。达到再次运行的时候，让控件/组件按变化后的值重新计算实现重新界面渲染的目标。而目前主流的现代组件框架都是编译器运行的，一般编译后，就会将模版指令编译成固化的js最终发布包，也就失去了运行期动态的更新指令/行为的能力。

EDP React集成第三方现代组件框架设计：由于第三方的第三代组件开发框架要求复杂的开发工具链和环境，因此集成主要集成第三方框架编译后的最终发布包。这样引用第三方组件就可以避开复杂的开发环境构建和打包相关的技能要求和环境。在EDPReact组件中集成的第三方组件后，对于调用方，是不知道该组件是原生的EDP React组件还是第三方组件，而调用接口(比如传递进来的属性，以及通知父组件的方法)都转为EDPReact组件的属性和方法，因此集成进来的组件如果更换实现方式，比如从第一个第三方组件更换成另外一个第三方组件，对于调用方也没有任何影响，从而实现集成组件中立性，封装性。

所述edp-指令集动态性的实现机制，为了实现性能提升首先会cache指令的属性和计算后的值。但是在运行状态需要动态增加模版指令的时候，提供edpAttribute函数以便通知框架清除cache。达到再次运行的时候，让控件/组件按变化后的模版和指令值重新计算实现重新界面渲染逻辑变化的目标。这样就会是框架拥有运行期更新模版指令的能力，具备可以与后端页面配置工具配合实现程序部署后，还可以依据客户的需求来调整和配置控件/组件的属性和行为能力。

EDP React集成第三方现代组件框架的实现机制，首先在组件的定义中，template部分，通过支持<script src＝“”defer|async>的标准方式去实现外部脚本的异步或者是同步运行。然后在script部分:1)集成Vue组件:需要将EDP React的普通对象转化成Vue的option风格的对象，包括方法和属性。并设定Vue的组件加载锚点让其render,在触发vue事件/方法的时候，如果需要回调父组件，那么需要在该方法中，调用this.emit(EDP React回调父组件的方法)来触发父组件。2)集成facebook的React组件:在script部分，要使用type＝”text/babel”来引入babel翻译和解析jsx风格的代码，然后在mounted方法里面定义，或者是定义或者是引用React组件，然后获取props，挂在锚点，并调用RreactDOM.render进行引用。通过以上方式，就可以实现对第三方框架组件的无缝集成。

EDP React路由：一般用在本地单页面的应用SPA；请求先到路由，然后通过路由来加载对应的组件，HTML界面等；然后再根据对应的元素类型来执行Render渲染；

Render渲染：支持组件，以及带有edp React Mount,或者是普通的HTML，甚至是JSP/ASPX.这也体现了EDP React能兼容第一代，第二代前端框架，因为第一代，第二代前端框架都不是组件，而只是普通的HTML或者是JSP等；

edp模版指令：在Render渲染中edp模版指令扮演重要角色；edp模版指令可以运行在组件中，或者是被edp React Mount的HTML中，也可以运行在普通的HTML，JSP中；因此edp模版指令无需是预先静态编译；在Render渲染的过程中，系统会遍历所有的DOM元素，并识别出带有edp-前缀的指令，这种元素是edp指令元素，然后将这种edp指令元素进行处理，即调用对应的指令解析程序对edp指令元素进行处理；

在指令元素处理过程中，如果该元素是组件，或者是带有edp React Mount的HTML片段(带有edp React Mount的HTML片段也是被当作组件来处理)，那么需要创建子处理过程来处理该组件；并且子组件的处理过程与它的上下文环境相隔离，只能通过edp-props来传递给子组件的属性/方法；

因此可以看出来，该框架的模版处理过程是直接采用元素DOM进行遍历，而不采用虚拟DOM；因此该框架运行前就需要能够遍历所有元素的AST元素树来实现遍历；

EDP React生命周期：在处理组件的时候，首先解析出html的template，以及script,以及Style部分，并缓存起来，以便再出现同样的组件的时候，可以直接从缓存中获得这些定义信息；

接着将组件里面定义的template的HTML挂载到该组件的宿主的DOM节点下面；并触发before Props生命周期方法，接着触发before Mount方法，然后进行render即根据组件的数据对模版进行edp指令处理，就是要将组件的数据响应和显示到界面上；然后触发mounted方法,最后触发updated方法；

如果页面有调用edp React方法时，对于已经mounted好的组件，还是先触发before Props生命周期方法，接着触发before Update方法，然后进行render即根据组件的数据对模版进行edp指令处理，就是要将组件的数据响应和显示到界面上；最后触发updated方法；

A:模版指令集：

HTML文档是由HTML元素定义的。首先为了实现现代数据自动响应界面的快速开发，需要在HTML元素中直接支持模版指令集，这样可以在不更改原来的界面和脚本的基础上无缝利用现代响应式的技术新增功能和特性。模版指令集的表达式的值在特定时候重新计算，发生变更，就会自动响应触发组件/页面的重新渲染。独创的模版指令集：edp-attribute，edp-execute，edp-template，edp-tmpl，edp-refresh，edp-props，slot插槽，edp-slot，edp-render。

【edp-attribute】:支持json对象赋值。这个指令是对html元素的属性赋值。这种方式有利于通过一个对象进行元素属性的批量赋值，提高执行效率并提升代码的复用性。

例子：

【edp-execute】：edp-execute＝”js语句”，这个指令可以在处理元素指令的时候执行。edp-execute:once:只运行一遍。edp-execute:beforeDestroy:在元素删除的时候执行。

【edp-template】：不用赋值。元素打上这个指令，该元素包含的所有子节点元素就变成了模版区域，可以支持{{变量}}取值，可以用在元素的内部区域，以及下一级元素的属性中。

例子：

</div>

【edp-tmpl】：不用赋值。元素打上这个指令，该元素包含的所有文本子节点元素就变成了模版区域。同时本元素自身的属性也支持{{变量}}取值。

例子：

【edp-refresh】：赋值true|false。如果是false，要重建元素。通过该指令，可以实现细粒度的dom元素更新。

【edp-props】:也是json对象。主要用来将json对象赋值给元素，如果该元素是组件。是直接赋值给组件的对象，也就是会将json对象覆盖到组件的对象属性中。

这个特性是本申请独有的特性。以便父组件对引用的子组件有完全的控制。而子组件的构建者也无需权衡到底那些属性是自己，那些可能是从父组件传递进来的。因此具有更大的扩展能力和灵活性。

例子：

<edp-control edp-props＝”{url:”，value:”，method:thisMyMethod}”></edp-control>

edp-props支持edp-props:once：表示该属性只会初始化的时候运行。

【slot】插槽:slot是定义在父组件定义的html片段可以被引用到子组件的内部，比如

<edp-test>

</edp-test>

【edp-slot】:是定义在子组件的模版中需要引用父组件的特定的slot中。

比如<div edp-slot＝”slot1”></div>，会将父组件的slot1的内容“1”引用到这个地方。这里引用的slot的执行上下文是子组件。因此如果在slot中是包含父组件的属性，那么只需要将父组件的属性通过edp-props传递到子组件才能获取到。

由于edp-props的独特特性，因此EDP React可以比其他市面的框架更自然，更简单，更统一的实现在slot的插槽中访问子父组件的属性。

edp-on:[change，mouseount..]:

例子如edp-on:click＝”this.nameClick()；”如果要访问自己的元素，使用this.nameClick(self).这个self就是自己DOM元素.this是组件。

也支持标准的onlick＝”this.this_.nameClick()”。在标准的事件中，this指向自身的DOM元素，通过this.this_就可以访问包含该元素的组件。

edp-render:这个是用来直接返回DOM元素的。

例子:edp-render＝”this.createMyCustomRender()”

有的时候，直接采用方法生成元素的效率更高，那么就可以采用方法的方式生成DOM，然后加入到DOM树中。

以下指令不是本申请申请专利的部分。但是作为框架的是实现整体，描述如下。

edp-style:格式如{fontSize:18+’px’}。

edp-class:格式如{active:true}。

edp-model:实现元素和数据的双向绑定。

edp-text：格式如edp-text＝”js表达式”。将表达式的结果赋值给元素的innerText。

edp-html：格式如edp-html＝”js表达式”。将表达式的结果赋值给元素的innerHTML。

edp-for:格式如edp-for＝”item in itemArray”，用来做遍历。

edp-if，edp-show:赋值true|false。可以显示和隐藏元素。

ref:赋值名称，用来将页面元素收集到this.ref(指向元属的组件对象)，以及this.refel(指向元属的DOM对象)中。方面代码访问该元素。

edp-method:methodname：

例子：edp-method:notify＝”this.notifyChange()”

这个是在组件的控件上中定义的方法名称。主要是给组件内部的emit方法调用该组的父对象的方法更新。

B:组件设计：

组件包括组件的定义，组件的生命周期，以及组件的渲染机制。

组件定义包括定义声明的方式，组件的属性，方法/事件，以及模版组成。属性是包含的各种数据；方法是组件的方法/事件，方法/事件的触发会引起数据的更新以及界面的重新渲染；模版是该组件依据组件模版的HTML以及其上的edp指令集渲染成标准的HTML。组件的生命周期依据组件的运行阶段调用阶段生命函数。组件的渲染机制就是在组件初始化，以及运行过程中，由于组件数据发生变化引起的界面渲染的机制。

组件设计：1)组件定义支持HTML文件，以及各种服务端文件如JSP，ASP，PHP，以实现对旧代码的兼容。，组件定义支持普通对象以及现代Web标准WebComponent。2)组件的生命周期支持独创的beforeProps，updated的两个生命周期方式，是的组件生命周期非常灵活，并大大方便开发人员对组件的控制能力和复用度。3)渲染更新机制，以及可定点更新区域也是申诉专利的部分。

B.1组件定义：

组件定义包括定义声明的方式，组件的属性，方法/事件，以及模版组成。组件定义：支持从各种文件(HTML，JSP/PHP中)加载组件的机制，以实现对旧代码的兼容。

定义组件两种方式：函数式，标准WebComponent的Class式。

B.1.1:组件定义的模版支持从，字符串，以及各种文件中加载。

模版支持HTML，JSP/PHP等服务端动态文件。

定义格式如下

edp.defineComponent("echart"，"xx/xx/echart.html")；也支持jsp，php等服务端动态文件。

//template中支持标准引入<script src＝”file”type＝”[module|javascript]”[defer]>，框架自动同步和异步支持。也支持是否启用现代JS模块管理。

var vm＝{id:”，name:”，age:10}；//纯粹js对象。

vm.beforeProps＝function(props){}

//对属性进行拦截的函数。可以对属性进行验证，处理和拦截。

vm.beforeMount＝function(){}

//将组件挂载到DOM树之前进行拦截的函数。

vm.mounted＝function(){}

vm.updated＝function(){}

//组件更新渲染后执行的函数。

vm.beforeDestroy＝function(){}

//组件摧毁之前调用的函数

//系统自动mix in emit函数，用来调用父组件方法，一般是更新父组件的数据。

return vm；

//如果在模块系统中，可以使用

export vm；//ES6

</script>

这里申请的专利部分是实现支持在模版中引入<script src＝”../file.js”>，以及如何创新的实现在脚本中返回组件VM对象。而不需要只能现代模块系统支持的export方面。因为这个方式对js语言的旧版本ES3，ES5支持更加兼容。

标准的方式是在模版中，引入<script src>浏览器不会处理。

为了可以保持

原有的开发方式，实现在模版中引入<script src>也要能加载<script src＝””>

这个脚本需要支持同步和异步加载(通过标准的script defer属性)。

如果脚本需要支持模块，那么也采用标准的方式<script type＝”module”>

如果模版中有如上脚本文件，需要在这些脚本都运行后才会执行组件的脚本程序。

B.1.2:edp.defineComponent("edp-test1"，templateString，vmObject)；

支持直接使用模版字符串。

B.1.3定义W3C标准组件，WebComponent

支持W3C标准组件，并且结合标准方法以及EDP React框架特有的方法。

定义格式如下：

直接采用标准的WebComponent。

这里标准的connectedCallback方法相当于一般对象的mounted方法。

这里标准的disconnectedCallback方法相当于一般对象的beforeDestroy方法。

采用Mixin方式注入beforeProps，以及updated和emit等方法，无需继承特定框架对象。

B.2这里描述框架组件的生命周期。

组件的生命周期函数在组件的不同运行阶段会自动被调用。生命周期函数包括beforeProps(pros)(每一次触发edpreact更新时候都会被调用，这样可以拦截定义在edp-props的json对象)，beforeMount(在组件挂载到HTML的DOM树上之前被调用)，mounted(在组件挂载到HTML的DOM树上之后被调用)，updated(在每一次触发edpreact更新后，以及页面重新渲染之后都会被调用，这样可以界面更新后的元素内容或者属性)，beforeDestroy(在组件周期结束时，组件被摧毁之前调用)。生命周期方法的beforeProps，updated的两个生命周期实现方式，使得组件生命周期非常灵活，并大大方便开发人员对组件的控制能力和复用度。

其他生命周期方法不申诉。

beforeProps每一次通知界面响应数据的时候，都会被调用。beforeProps(props)带一个参数，这个参数就是从edp-props获得的对象，以便从父组件向子组件传值。默认edp-props定义的json对象会直接覆盖组件的属性。也就是说edp-props定义的json对象会直接覆盖子组件对应的属性/方法。

这是跟其他所有现代框架不一样的地方：其他框架只是将这个props作为一个只读对象。

本申请这样做的好处是父组件对引用的子组件的属性和方法有完全的控制和覆盖。而子组件的构建者也无需权衡到底那些属性是自己，那些可能是从父组件传递进来的。因此具有更大的扩展能力和灵活性。

同时beforeProps的生命周期方法可以对edp-props定义的json对象进行拦截和处理，比如验证父组件传递给本组件的合法性，如果不合法，就可以直接将该属性删除，这样该属性就不会覆盖到子组件属性/方法了。

另外一个是updated方法也是每一次都调用，因此可以统一放在界面更新后，需要继续处理逻辑的场合，比如数据更新后(无论是同步或者是异步)，需要获取更新后的元素的innerHTML，或者是调用jquery进行额外的操作。而目前市面上的做法都是要写一个钩子函数，比如说是nextTicket这种方式，这种钩子函数散落在程序的不同地方，损害了软件维护性，同时也损害了方法函数的复用性。

因此组件无论是初次mount还是更新，它都会调用beforeProps，以及updated生命周期方法。

B.3组件的渲染更新机制：

组件的渲染机制就是在组件初始化，以及运行过程中，由于组件数据发生变化引起的界面渲染的机制。本申请权利要求如下创新的渲染更新机制，1)直接采用DOM树的遍历方式，2)手动更新界面：数据变化时更新的数据响应界面的方式，可以定点更新区域，以及可灵活依据实际的场景实现异步和同步实现界面的渲染。

在EDP React中渲染指令模版，使用直接DOM遍历，遍历过程只处理带有EDP React元素的指令集。这样的好处是，EDP React框架可以实现比目前市面上框架更多的元素节点：比如Vue只能处理6万个元素节点的界面，超过这个数量就会出现栈溢出，程序崩溃。而EDP React框架的能处理最多的元素节点个数是Vue的5倍。

在EDP React中，属性的变化不会引起界面的自动渲染响应更新。因此React的组件属性是单纯的，不带任何拦截或者是代理的组件变量。因此组件的属性，方法的共享和调用就可以使用最简单的传统方式，基于标准的传统的对象/类的方式(所有基于对象/类的设计模式都适用)。而无需通过各种复杂的方式，如Mixin，HOC，Hooks等复杂但是不完美的技术。

在EDP React中，属性的变化如果需要引起页面更新，需要开发人员手工调用edpReact()方法进行全页面的渲染更新，这个指令是异步更新，隔5毫秒才真正执行，也就是说如果在5毫秒，如果有多次edpReact()调用请求，也只会执行一次。

如果需要定点更新元素/区域，或者是需要同步更新，使用edpReactNode(elementNode).这样就可以使用特定的元素或者是组件更新(也同时包含它的下级子元素或者是子组件更新)。而其他框架都只能实现异步界面更新。

这种手工通知的更新机制，也是目前EDP React创新的方式。它即保证了与传统代码的兼容，同时也在页面复杂的时候出现性能问题的话，可以提供外科手术式的精确和高效、而且灵活的更新机制。可以为前端性能瓶颈提供天生的优化空间和机制。

C:EDP React js端路由:

为了提升前端的响应速度和用户体验，就需要提供前端的路由。

本申请权利要求如下创新的路由文件支持和实现方式：EDP React路由支持Component组件，支持纯的HTML页面路由，也支持html片段，以及HTML template，jsp，php，asp等后端界面路由。因此打通了第三代组件化界面以及传统界面的路由，使得大量的后端已有的使用前代技术开发页面/功能无需重构，就可以被整合到现代的界面统一架构中。

目前市场上的前端路由要么只支持Component组件，也就是只有组件才能被路由，要么只支持纯的HTML页面路由，无法结合两者。

EDP React js端路由实施方式：

js端路由配置。

在router的位置锚点。

<div id＝””></div>.这种方式主要兼容是调度非组件的页面。

如果调度的是组件，也可以采用

<edp-routerview></edp-routerview>

实现说明：

通过路由配置，我们可以看到路由配置的方式：

path：就是路由路径。

component:就是定义组件。组件可以参与路由。

【file】：定义的就是传统html界面，支持xxx.html，xxx.jsp，或者是xxx.asp.一般如果是jsp还需要传递参数，因此可以使用path中的参数规则，如path:'/singleproduct/:id'，file:'/single-product.html[或者是.jsp]？id＝:id'}这样做映射。

【iframe】：定义的是，是否要将传统的file放置到iframe中，这样这个传统的界面的功能、样式就不会互相干挠到新的现代界面的样式。

【templateId】:这个对应的是<template id＝””></template>定义的html片段。这是比较简单的方式来定义一个简单路由显示的html片段，就不需要定义一个重的组件文件。

children：通过在路由中，可以设置子路由children。子路由的规则同一般路由，只是支持嵌套以实现二级，三级等多级路由。

本发明的工作原理是：EDP React路由：一般用在本地单页面的应用SPA；请求先到路由，然后通过路由来加载对应的组件，HTML界面等；然后再根据对应的元素类型来执行Render渲染；Render渲染：支持组件，以及带有edp React Mount,或者是普通的HTML，甚至是JSP/ASPX.这也体现了EDP React能兼容第一代，第二代前端框架，因为第一代，第二代前端框架都不是组件，而只是普通的HTML或者是JSP等；edp模版指令：在Render渲染中edp模版指令扮演重要角色；edp模版指令可以运行在组件中，或者是被edp React Mount的HTML中，也可以运行在普通的HTML，JSP中；因此edp模版指令无需、也不能是预先静态编译；在Render渲染的过程中，系统会遍历所有的DOM元素，并识别出带有edp-前缀的指令，这种元素是edp指令元素，然后将这种edp指令元素进行处理，即调用对应的指令解析程序对edp指令元素进行处理；在指令元素处理过程中，如果该元素是组件，或者是带有edp ReactMount的HTML片段(带有edp React Mount的HTML片段也是被当作组件来处理)，那么需要创建子处理过程来处理该组件；并且子组件的处理过程与它的上下文环境相隔离，只能通过edp-props来传递给子组件的属性/方法；因此可以看出来，该框架的模版处理过程是直接采用元素DOM进行遍历，而不采用虚拟DOM；因此该框架运行前就需要能够遍历所有元素的AST元素树来实现遍历；EDP React生命周期：在处理组件的时候，首先解析出html的template，以及script,以及Style部分，并缓存起来，以便再出现同样的组件的时候，可以直接从缓存中获得这些定义信息；接着将组件里面定义的template的HTML挂载到该组件的宿主的DOM节点下面；并触发before Props生命周期方法，接着触发before Mount方法，然后进行render即根据组件的数据对模版进行edp指令处理，就是要将组件的数据响应和显示到界面上；然后触发mounted方法,最后触发updated方法；如果页面有调用edp React方法时，对于已经mounted好的组件，还是先触发before Props生命周期方法，接着触发before Update方法，然后进行render即根据组件的数据对模版进行edp指令处理，就是要将组件的数据响应和显示到界面上；最后触发updated方法。

D：edp-模版指令集先进的运行期动态性实现：

正如前面所述，由于edp-指令集是在运行期执行，在首次执行的时候，为了提升性能，会cache各种指令属性和计算的值，这样在更新数据，界面组件二次计算的时候对比属性值是否改变，如果没有改变，就会跳过界面的渲染更新以提升性能。因此，如果要在运行期实现模版指令的动态变化，就需要通知相关HTML节点/组件节点属性要清除缓存。因此要给应用开放函数API edpAttribute(domNode,attributesInJSON)。这样开发者就可以通过将需要改变的模版指令放在JSON(格式如{src:”xxxx”，”edp-if”:”xxx”,”edp-on:change”:”th is.newChangeMethod()”})中，通知框架清除cache，在下一次进行edpReact,或者是edpReactNode调用通知框架依据数据自动相应界面的重新渲染时，要重新计算该节点属性，从而实现指令的动态更新功能。

E:利用edp-模版指令集先进的运行期动态性的这个创新特性，结合运行期的界面配置实施工具可以构建强大的SaaS个性化部署，PaaS部署平台。这样就可以实现：将程序发布到客户环境后，仍然能够通过行期的界面配置实施工具实现客户的任意需求：比如该客户的要求是该页面上的任意一个控件要隐藏掉，改变任意一个控件的任意属性，或者是要将任意一个控件增加任意的事件脚本，以便实现不同客户的个性化需求实施。

实现原理如下：理论上可以针对页面的任意控件，组件的属性进行更改，但是为了效率，以及从配置实施工具友好度出发，最好不要捕捉页面上的所有的控件/组件，否则在配置实施工具上就会出现上百个控件/主键配置页面，页面就很复杂。在本实现可以在可能需要拦截属性(就是该控件/属性可能会变更)，设置uid属性，这样系统就只获取有uid属性的控制/组件显示在配置实施列表，然后通过配置实施列表更改属性，并将这些更改的属性保存到数据库中，以便持久化这个属性的变更状态。然后再次刷新界面，，在调用edpReact的函数实现中，要先从数据库获取该页面所有的uid相关的更改属性并缓存。然后在遍历元素节点时，以uid属性的缓存为优先。这样就可以实现利用运行期配置edpReact组件的强大扩展能力，以实现SaaS个性化能力平台，和PaaS平台高度可编程性。

F：EDP React集成第三方现代组件框架设计：由于第三方的第三代组件开发框架要求复杂的开发工具链和环境，因此集成主要集成第三方框架编译后的最终发布包。这样引用第三方组件就可以避开复杂的开发环境构建和打包相关的技能要求和环境。

集成Vue组件的设计代码：

组件集成方：

调用方

<edp-switch edp-pros＝”{value:true}”edp-method:change＝”function

(s){alert(s)；}”

</edp-switch>

在实现中，封装了一个通用的方法mockEDPRactVMToVue，这个函数相当于可以将edpReact组件转化为Vue的option风格的组件声明方式。

集成React组件的设计代码：

调用方

<edp-hellomessage edp-pros＝”{id:’XXX’,name:’XXXX’}”

edp-method:click＝”function(s){alert(s)；}”

</edp-hellomessage>

在React组件的集成实现中，脚本的类型为text/babel(<script type＝"text/babel">)，那么在处理script脚本的使用，要引入babel处理解析的第三方包来处理。而且系统还可以解析ES6的语法，比如import,export。在使用babel处理解析后，生成的组件实例照样还需好缓存。这样在第二次使用组件的使用的无需在重新解析，可以加快系统的性能。

在EDP React组件中集成的第三方组件后，对于调用方，是不知道该组件是原生的EDP React组件还是集成第三方组件实现的组件，而调用接口(比如传递进来的属性，以及通知父组件的方法)都转为EDP React组件的属性和方法，因此集成进来的组件如果更换实现方式，比如从第一个第三方组件更换成另外一个第三方组件，对于调用方也没有任何影响，从而实现集成组件中立性，封装性。

发明应用验证

依据上述专利的思路和方法，本人也开发出了已经在实际生产系统中应用的原型实现。并对这个原型实现进行的性能测试，总结如下。

性能测试：

性能：对比Vue框架，因为Vue在性能方面在各个主流框架中还是领先的，因此就对标Vue。测试用例也是采用Vue2官方的Rendering Dynamic Big Table.1000Row*10Column

标准测试：

初次加载速度：

Vue:200ms.

EDP React:340ms.

更新速度：

Vue:90.ms.

EDP React:150ms.

如果EDP React采用定点更新：

EDP React定点行更新：1ms

EDP React可以提供定点/局部更新，那么就可以达到<1ms.

将标准测试的更新更改成不同Key的测试：

初次加载速度：

Vue:220ms.

EDP React:340ms.

更新速度：

Vue:540.ms.

EDP React:150ms.

不同的Vue的Key更符合实际使用，比如是在翻页，Vue在共用DOM方面全部失效。而EDP React在这个更新场景下就胜出很多。

性能总结：

初次加载：

在简单的场景下，Vue快EDP React 15％～70％。

在实际的业务场景中，Vue快EDP React 0％～15％。

更新：

在一般的场景下，Vue快EDP React 60％～130％.

在翻页key都不一样的情况下，EDP React快Vue快190％。

EDP使用了局部更新后，就比Vue快很多很多。

极限测试：

极限测试：测试EDP React和其他现代框架最大支持的页面控件数量。支持的越多，说明该框架可应用的场景和需求越多。

在极限测试中(Safari浏览器13.1.3，Mac OS 10.15.7))

场景:

通过edp/v-for一次增加1000个行，行上只有labe和input edp/v-model.

极限结果：

这个测试EDP React全面领先。

Vue在增加到65，000行，出现错误并停止：Maximum call stack size exceeded.错误。

EDP React增加行可以达到惊人的313，000行，浏览器才出现重新载入错误。

极限测试总结：

支持极限节点个数方面，EDP是Vue4.8倍。

通过以上的发明应用验证，也充分说明了本专利的思路和方案的先进性和可行性，可以对现代的基于的Web技术开发有比较好的指导意义和经济效益。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明，尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，其特征在于：包括：访问层、前端UI层、后端；

EDPReact核心模版指令集edp-：主要用在HTML模版界面视图中，让界面具备数据响应；

EDPReact组件：组件包含HTML模版、组件对象，HTML模版支持集edp-；

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

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

2.根据权利要求1所述的一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，其特征在于：还包括EDPReact生命周期：在处理组件的时候，首先解析出html的template，以及script，以及Style部分，并缓存起来，以便再出现同样的组件的时候，可以直接从缓存中获得这些定义信息。

3.根据权利要求1所述的一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，其特征在于：所述EDPReact路由一般用在本地单页面的应用SPA；请求先到路由，然后通过路由来加载对应的组件、HTML界面；然后再根据对应的元素类型来执行Render渲染。

4.根据权利要求3所述的一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，其特征在于：所述Render渲染：支持组件，以及带有edpReactMount，或者是普通的HTML，或者是JSP/ASPX。

5.根据权利要求1所述的一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，其特征在于：所述EDPReact核心模版指令集edp-在Render渲染中edp模版指令扮演重要角色；edp模版指令可以运行在组件中，或者是被edpReactMount的HTML中，也可以运行在普通的HTML，JSP中；因此edp模版指令无需、也不能是预先静态编译；在Render渲染的过程中，系统会遍历所有的DOM元素，并识别出带有edp-前缀的指令，这种元素是edp指令元素，然后将这种edp指令元素进行处理，即调用对应的指令解析程序对edp指令元素进行处理。

6.根据权利要求5所述的一种应用于第三代的现代Web前端的融合式的界面响应数据、基于组件的开发框架，其特征在于：所述指令元素处理过程中，如果该元素是组件，或者是带有edpReactMount的HTML片段，那么需要创建子处理过程来处理该组件；并且子组件的处理过程与它的上下文环境相隔离，只能通过edp-props来传递给子组件的属性/方法。