买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！

申请/专利权人：上海金融期货信息技术有限公司

摘要：本发明公开了一种基于JS入口的前端运行时远程组件共享机制的方法，使得前端应用中的各个子应用能够独立开发、独立部署、独立运行，在整个生命周期内保持松耦合关系。其技术方案为：首先通过构造JS立即执行函数方式，将依赖模块作为函数参数的方式来达到依赖模块隔离，避免在主应用中，各个子应用的依赖互相影响。其次，本发明通CSS的AST方式，为每个CSS选择器添加命名空间，达到各个子应用的样式独立，不会冲突。本发明在运行时生成DIV标签，并将DIVID通知到子应用，子应用获取ID后执行渲染逻辑，将子应用页面挂载到对应DIV中，达到在一个页面中挂载多个相同子应用实例并保持独立的功能。

主权项：1.一种基于JS入口的前端运行时远程组件共享机制的方法，其特征在于，方法包括构建阶段的处理和运行阶段的处理，其中：构建阶段的处理包括各子应用在构建阶段生成自身的描述文件和入口文件，入口文件包括JS入口文件和CSS入口文件，将前端应用中的HTML元素编译为JS代码混入JS资源，将前端应用中的CSS资源通过CSS入口文件加载；运行阶段的处理流程包括：步骤1：启动主应用和子应用，主应用生成一个全局的EventBus实例；步骤2：主应用加载子应用的描述文件，获取子应用名称、资源地址、路由信息数据；步骤3：主应用启动加载模块，其中包括：主应用动态生成一个DIV标签，主应用加载并执行子应用的JS入口文件和CSS入口文件，子应用JS执行时，检查是否存在全局的EventBus实例，若存在则使用该EventBus实例，若不存在则主动生成EventBus实例并作为全局EventBus实例，主应用通过初始化事件将DIV标签的标识号通过事件的方式通知给子应用，其中不同的子应用监听的事件名称不同；步骤4：子应用监听初始化事件，收到主应用发送的ID的通知后执行渲染逻辑，将JS中的HTML挂载到该ID对应的DIV标签中，以使在一个页面中挂载多个相同子应用实例并保持独立；其中，在构建阶段通过webpack打包工具将子应用打包成静态资源，生成JS入口文件、CSS入口文件、描述文件，完成上线部署；其中，在构建阶段的生成入口文件的处理中，通过使用JS立即执行函数的方式对JS代码进行封装，将子应用的依赖模块作为JS立即执行函数的参数，生成JS入口文件，以使不同的子应用的JS只能访问该子应用的依赖模块，避免在主应用中的各个子应用的依赖互相影响。

全文数据：

权利要求：

百度查询： 上海金融期货信息技术有限公司 基于JS入口的前端运行时远程组件共享机制的方法