A fusion interface response data method for the third generation of modern Web front-ends

Abstract

The invention discloses a fusion interface response data method applied to the third generation of modern Web front end, including EDPReact core template instruction set edp-, EDPReact component, EDP React page and EDPReact route; EDPReact core template instruction set edp-: mainly used in HTML template interface view, so that the interface has data response; EDPReact component: including HTML template, component object, HTML template support set edp-; EDPReact page: the page is ordinary HTML, ordinary HTML can also support template instruction set, can also be mounted by Mount, and can also include various standard EDPReact components, so the EDPReact page can make the interface of the previous generation compatible and have modern components; EDPReact route. The invention solves the problem that the current development of the third generation Web application is incompatible with the traditional code and architecture, which brings huge cost waste and upgrade costs.

Description

Technical Field

[0001] The present invention relates to the technical field of front-end development framework, and in particular to a fusion interface response data method applied to a third-generation modern Web front end. Background Art

[0002] From the development of .com Internet in 2001 to the launch of the second generation of Web front-end development framework represented by jQuery in August 2005, B / S architecture software has made the largest investment in the first and second generation interface frameworks. However, upgrading traditional software to the current third generation modern Web framework has serious incompatibility defects: almost 90% of the original code base must be reconstructed, the original development tools must be changed, and the developers must be upgraded to a higher level to complete it.

[0003] Therefore, traditional software needs to spend a lot of time and resources to upgrade to modern frameworks in order to continue to provide users with a modern experience.

[0004] However, the third generation of modern frameworks has extremely high requirements, and the technology is also developing and evolving rapidly. For example, as an important standard and foundation of js, it has gone through ES3, ES5, and ES6 (ECMAScript 2015). It is also necessary to understand the related technologies of packaging and compilation, such as Webpack, Gulp, Babel, Browserify, etc., which greatly increases the skills of developers and makes it impossible to seamlessly upgrade products developed with the first and second generation codes to the third generation. The most troublesome thing is that all these new things are developing and changing rapidly. Maybe after you have developed a product based on the third generation of technical frameworks, before you release it, a new version comes out and declares that the version is incompatible. This brings huge costs and uncertainties to the development of front-end products.

[0005] Runtime dynamics of edp-template instruction set: Currently, mainstream frameworks on the market, such as Google's Angular, Vue, and Facebook React, lack the dynamics of runtime instruction sets. That is, the instructions contained in the component need to be packaged and compiled to generate a release package, such as bundle.js, so that the compiled code can be executed in the front-end browser. In this way, it is impossible to dynamically change the template instructions through the program (such as the runtime interface configuration implementation tool) in the running state of js. For example, when the program is released to the customer environment, the customer's requirements are that any control on the page should be hidden, any attribute of any control should be changed, or any event script should be added to any control in order to implement the personalized needs of different customers. It is particularly emphasized that the arbitrariness here refers to the unpredictable and irregular changes in customer needs after the program is released. The dynamics of edp template instructions is to have the runtime dynamic characteristics of this product-level interface component. Using components built with edp react, pages can achieve product-level SaaS personalized deployment and PaaS deployment, while the current mainstream third-generation modern front-end js framework can only achieve predictable, limited, and fixed project software system deployment.

[0006] At the same time, the components of the current mainstream third-generation front-end component framework are compiled and packaged before execution, so they lose the runtime dynamics. In this way, it is impossible to dynamically change the component template instructions through the program (such as the runtime interface configuration implementation tool) when js is running. For example, when the program is released to the customer environment, the customer requires that any control on the page be hidden, any property of any control be changed, or any event script be added to any control, so as to implement the personalized needs of different customers.

[0007] The third generation of the current mainstream front-end component framework is not very friendly and natural to the Web Component international standard. When designing, it does not give priority to supporting the component specifications defined by this international standards organization. Therefore, component developers and users need additional tools and codes to implement it. Summary of the invention

[0008] The purpose of the present invention is to provide a fusion interface response data method applied to the third generation of modern Web front end to solve the problems in the prior art.

[0009] To achieve the above object, the present invention provides the following technical solutions: a fusion interface response data method applied to the third generation of modern Web front end, comprising: an access layer, a front end UI layer, and a back end;

[0010] EDP ​​React core template instruction set edp-: mainly used in HTML template interface views to enable the interface to respond to data, including edp-attribute, edp-execute, edp-template, edp-tmpl, edp-refresh, edp-props, slot, edp-slot, edp-render;

[0011] EDP ​​React component: The component includes HTML templates and component objects. The HTML template supports edp-; the component supports HTML files, as well as various server-side files JSP, ASP, and PHP to achieve compatibility with old codes. The component supports ordinary objects and modern Web standard WebComponent; the component life cycle supports the original beforeProps and updated life cycle methods; the notification rendering update mechanism supports two original modes: one is to asynchronously update the entire page element notification, and the other is to support both synchronous and asynchronous fixed-point update areas;

[0012] EDP ​​React page: The page is ordinary HTML, which can also support template instruction sets, can be mounted, and can also contain various standard EDP React components. Therefore, EDP React pages can make the previous generation interface compatible with modern components;

[0013] EDP ​​React routing: React routing is like a path commander, guiding various pages and components to display page / component content according to the path of user operations; React routing can control page jumps and component jumps; page jumps controlled by EDP routing support traditional HTML, JSP / PHP, ASPX jumps, and also support iframe page jumps; therefore, it is also fully compatible with previous generation interface development technologies.

[0014] Preferably, the EDP React life cycle is also included: when processing a component, the HTML template, script, and Style parts are first parsed and cached, so that when the same component appears again, these definition information can be directly obtained from the cache; when processing a component, the HTML template, script, and Style parts are first parsed. For the script part, if the template contains <script src＝”xxx”>要正确解析是同步脚本(默认是同步脚本，要等到所有脚本都加载完毕，才能直接组件里面的script标签里面的脚本)，还是异步脚本，并缓存起来，以便再出现同样的组件的时候，可以直接从缓存中获得这些定义信息；EDP React生命周期拥有两个独创的beforeProps、updated的两个生命周期实现。

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

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

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

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

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

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

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

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

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

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

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

[0026] 图1为本发明的结构示意图。具体实施方式

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

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

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

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

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

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

[0033] 优选的，还包括EDP React生命周期：在处理组件的时候，首先解析出html的template，以及script，以及Style部分，并缓存起来，以便再出现同样的组件的时候，可以直接从缓存中获得这些定义信息；在处理组件的时候，首先解析出html的template，以及script，以及Style部分，对于script部分的脚本，如果在template里面包含<script src＝”XXX”>要正确解析是同步脚本(默认是同步脚本，要等到所有脚本都加载完毕，才能直接组件里面的script标签里面的脚本)，还是异步脚本，并缓存起来，以便再出现同样的组件的时候，可以直接从缓存中获得这些定义信息；EDP React生命周期拥有两个独创的beforeProps、updated的两个生命周期实现。

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

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

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

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

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

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

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

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

[0042] 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进行引用。通过以上方式，就可以实现对第三方框架组件的无缝集成。

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

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

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

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

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

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

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

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

[0051] A:模版指令集：

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

[0053]

edp-attribute

[0054] 例子：

[0055] <div edp-attribute＝”{src:”，href:”}”>

[0056]

edp-execute

[0057]

edp-template

[0058] 例子：

[0059]

[0060] {{key}}

[0061] <img id＝”{{this.imageId}}”>

[0062]

[0063]

edp-tmpl

[0064] 例子：

[0065] <div edp-tmpl title＝”{{title}}”id＝”{{id}}”>{{key}}

[0066]

edp-refresh

[0067]

edp-props

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

[0069] 例子：

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

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

[0072]

slot

[0073] <edp-test>

[0074] <div slot＝”slot1”>1

[0075] <div slot＝”slot2”>2

[0076] < / edp-test>

[0077]

edp-slot

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[0095] edp-method:methodname：

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

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

[0098] B:组件设计：

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

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

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

[0102] B.1组件定义：

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

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

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

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

[0107] 定义格式如下

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

[0109] <template>< / template>

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

[0111] <style>< / stype>

[0112] <script>

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

[0114] vm.beforeProps＝function(props){}

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

[0116] vm.beforeMount＝function(){}

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

[0118] vm.mounted＝function(){}

[0119] vm.updated＝function(){}

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

[0121] vm.beforeDestroy＝function(){}

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

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

[0124] return vm；

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

[0126] export vm； / / ES6

[0127] < / script>

[0128] The patent application here is to support the introduction of <script src＝”.. file.js”>，以及如何创新的实现在脚本中返回组件VM对象。而不需要只能现代模块系统支持的export方面。因为这个方式对js语言的旧版本ES3，ES5支持更加兼容。

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

[0130] 为了可以保持

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

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

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

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

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

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

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

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

[0139] 定义格式如下：

[0140] edp.defineWebComponent("echart"，templateString，MyHTMLElement)；

[0141] class MyElement extends HTMLElement{

[0142] constructor(){

[0143] super()；

[0144] }

[0145] beforeProps(props){

[0146] }

[0147] beforeMount(){

[0148] }

[0149] connectedCallback(){ / / 相当于mounted方法

[0150] }

[0151] updated(){

[0152] }

[0153] disconnectedCallback(){ / / 相当于beforeDestroy方法。

[0154] }

[0155] }

[0156] 直接采用标准的WebComponent。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[0176] C:EDP React js端路由:

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

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

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

[0180] EDP React js端路由实施方式：

[0181] js端路由配置。

[0182]

[0183] 在router的位置锚点。

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

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

[0186] <edp-routerview>< / edp-routerview>

[0187] 实现说明：

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

[0189] path：就是路由路径。

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

[0191]

file

[0192]

iframe

[0193]

templateId

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

[0195] 本发明的工作原理是：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方法。

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

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

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

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

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

[0201] 集成Vue组件的设计代码：

[0202] 组件集成方：

[0203]

[0204] 调用方

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

[0206] (s){alert(s)；}”

[0207] < / edp-switch>

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

[0209] 集成React组件的设计代码：

[0210]

[0211]

[0212] 调用方

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

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

[0215] < / edp-hellomessage>

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

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

[0218] 发明应用验证

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

[0220] 性能测试：

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

[0222] 标准测试：

[0223] 初次加载速度：

[0224] Vue:200ms.

[0225] EDP React:340ms.

[0226] 更新速度：

[0227] Vue:90.ms.

[0228] EDP React:150ms.

[0229] 如果EDP React采用定点更新：

[0230] EDP React定点行更新：1ms

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

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

[0233] 初次加载速度：

[0234] Vue:220ms.

[0235] EDP React:340ms.

[0236] 更新速度：

[0237] Vue:540.ms.

[0238] EDP React:150ms.

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

[0240] 性能总结：

[0241] 初次加载：

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

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

[0244] 更新：

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

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

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

[0248] 极限测试：

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

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

[0251] 场景:

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

[0253] 极限结果：

[0254] 这个测试EDP React全面领先。

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

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

[0257] 极限测试总结：

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

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

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

Claims

1. A fusion interface response data method applied to the third generation of modern Web front end, characterized by: Includes EDPReact core template instruction set edp-, EDPReact components, EDPReact pages, and EDP React routing; EDPReact core template instruction set edp-: mainly used in HTML template interface views to enable the interface to respond to data, including edp-attribute, edp-execute, edp-template, edp-tmpl, edp-refresh, edp-props, slot, edp-slot, edp-render; EDPReact component: includes HTML templates, component objects, and HTML template support set edp-; the component supports HTML files, as well as various server-side files JSP, ASP, and PHP to achieve compatibility with old codes. The component supports ordinary objects and modern Web standard WebComponent; the component life cycle supports the original beforeProps and updated life cycle methods; Rendering update mechanism, which can update the area at a fixed point; EDPReact page: The page is ordinary HTML, which can also support template instruction sets, or HTML can be mounted as component behavior by edpReactMount, or can contain various standard EDPReact components. Therefore, EDPReact pages can make the previous generation interface compatible with modern components; EDPReact routing: React routing is like a path commander, guiding various pages and components to display page / component content according to the path of user operation; React routing can control page jumps and component jumps; EDP ​​routing control page jump supports traditional HTML, JSP / PHP, ASPX jump, and also supports iframe page jump; Therefore, it is also fully compatible with previous generation interface development technology; EDP React routing supports Component components, pure HTML page routing, HTML fragments, and HTML template, jsp, php, and asp backend interface routing; The EDPReact core template instruction set edp- plays an important role in Render rendering. The edp template instruction can be run in a component, or in HTML that is edpReactMount, or in ordinary HTML, JSP; therefore, the edp template instruction does not need to be statically compiled in advance; during the Render rendering process, the system will traverse all DOM elements and identify instructions with the edp- prefix, which is an edp instruction element, and then process the edp instruction element, that is, call the corresponding instruction parser to process the edp instruction element; during the instruction element processing process, if the element is a component, or an HTML fragment with edp React Mount, then a sub-processing process needs to be created to process the component; and the processing process of the sub-component is isolated from its context environment, and can only be passed to the sub-component's attributes / methods through edp-props; The EDPReact routing is used in local single-page applications SPA; the request first goes to the routing, and then the corresponding components are loaded through the routing, and it is fully compatible with HTML, JSP / ASP / PHP server-side interfaces; then Render is performed according to the corresponding element type; The Render rendering: supports components and page fragments mounted by the edpReactMount function, either ordinary HTML or JSP / ASPX; the rendering update mechanism directly adopts the native DOM tree traversal method; manual interface update: the data response interface method updated when the data changes, the area can be updated at a fixed point, and the interface rendering can be flexibly realized asynchronously and synchronously according to the actual scenario.

2. According to claim 1, a fusion interface response data method applied to the third generation of modern Web front end is characterized in that: It also includes the EDP React life cycle: when processing components, first parse the HTML template, script, and Style parts, and cache them, so that when the same component appears again, you can get these definition information directly from the cache; the EDP React life cycle has two original life cycle implementations: beforeProps and updated.

Images