组件化功能模块并快速集成的方法技术

本发明专利技术提供组件化功能模块并快速集成的方法，包括：从项目中根据功能模块抽离组件，建立异步组件；通过预处理器，建立隔离；另起入口文件，导入异步组件，提供通信和功能调用接口；进行打包处理，快速集成功能模块。本发明专利技术提供一种应用集成方法，假设了被集成的立场，处理企业对接中出现的特殊情况；在考虑到以上条件的同时，保证其他现有类似技术都有的特性，使用简单接入成本低，兼容框架，提供了js沙箱、样式隔离、数据通信、按需加载等特性在已完成的独立应用上拆分出功能模块，在第三方应用无微前端框架情况下，快速且低成本完成集成工作；实现js沙箱机制，子应用间全局变量、事件、css样式等的隔离；提升父子应用间通信效率。提升父子应用间通信效率。提升父子应用间通信效率。

【技术实现步骤摘要】
组件化功能模块并快速集成的方法


[0001]本专利技术涉及前端应用
，具体涉及组件化功能模块并快速集成的方法。

技术介绍

[0002]随着一个前端项目规模的逐渐复杂和庞大，日常协作将变得困难，不得不考虑如何规模化拆分应用；最早的方案是采用iframe，而现在更多的是各种各样的微前端方案；它们都可以做到将独立交付的多个前端应用组成整体的架构风格，而那些被分解的更小、更简单的应用也能够独立开发、测试、部署等；这些是一个团队下拆分不同应用协同开发的解决方案，而实际中遇到的问题可能稍有不同；比如a团队的独立应用，这时候需要加入b团队的微前端框架中，需要一定的改造成本，甚至并不是一个微前端框架，又希望能够快速被集成；此时用iframe方案也适用，该方案优点是简单方便，应用间完全隔离，但iframe方案的痛点无法忽视，如页面刷新状态丢失，消息模态框无法覆盖整个应用，通信困难，白屏时间长等。
[0003]因此，现有技术存在缺陷，需要提供一种新的方法解决上述问题。

技术实现思路

[0004]针对现有技术存在的问题，本专利技术提供组件化功能模块并快速集成的方法。
[0005]为实现上述目的，本专利技术的具体方案如下：
[0006]本专利技术提供组件化功能模块并快速集成的方法，包括如下步骤：
[0007]S1，从项目中根据功能模块抽离组件，建立异步组件；
[0008]S2，通过预处理器，建立隔离；
[0009]S3，另起入口文件，导入异步组件，提供通信和功能调用接口；
[0010]S4，进行打包处理，快速集成功能模块。
[0011]进一步地，步骤S1具体包括：
[0012]S101，用Promise包装组件得到异步组件，在页面渲染时加载内部组件，调用load；
[0013]S102，通过createInnerComp创建加载成功的组件；
[0014]S103，调用createVNode创建Vnode(即虚拟Dom)，渲染新的功能模块，通过render函数将Vnode渲染到真实Dom容器元素中。
[0015]进一步地，步骤S2具体包括：
[0016]S201，采用预处理器scss，通过其中的@forward with()注入css前缀；
[0017]S202，搭配css
‑
modules方案，在文件中加入<style module>，并为类名重写为$style属性，通过编译的方式修改选择器名字，得出的class将被哈希化以避免冲突；
[0018]S203，配置vite中的generateScopedName，进一步完善类名的混淆；
[0019]S204，通过以上步骤实现css的样式隔离，然后，劫持localStorage、SessionStorage为浏览器缓存数据注入前缀，劫持document元素操作，处理应用间影响。
[0020]进一步地，步骤S3具体包括：
[0021]S301，另起入口文件intergration.ts，去除route依赖，导入异步组件；
[0022]S302，重写route部分功能，将route.push替换为组件的卸载与渲染，并在window.history下的pushState、popState和replaceState添加对应处理，对地址栏和历史记录进行修改，达到正常跳转效果；
[0023]S303，将项目中的功能集中于该入口文件，定义Class类，通过ESM模块化语法提供按需导出和默认导出；
[0024]S304，配置vite中的build，开启库编译模式，进行打包处理，以此达成快速集成和灵活使用的需求。
[0025]进一步地，采用vue3中的createApp，对项目进行组件化抽离；
[0026]使用js中的class对外提供InwuInterfac接口提供通信和功能调用。
[0027]进一步地，使用vue中的css Module结合scss预处理器的变量，实现css的命名空间，达到样式隔离。
[0028]进一步地，渲染模块时采用组件懒加载的方式减少白屏时间。
[0029]采用本专利技术的技术方案，具有以下有益效果：
[0030]1.提供一种应用集成方法，假设了被集成的立场，处理企业对接中出现的特殊情况；考虑到了第三方底层框架非微前端方案或框架不统一的情况，大大降低了第三方集成交接耗费的人力和时间成本，降低第三方开发人员的维护成本，提供稳定的交付维护更新；
[0031]2.在考虑到以上条件的同时，保证其他现有类似技术都有的特性，使用简单接入成本低，兼容框架，提供了js沙箱、样式隔离、数据通信、按需加载等特性；
[0032]3.用vue3中的createApp方法，组件化抽离了项目，使用js中的class对外提供了InwuInterfac等接口提供通信和功能调用；
[0033]4.使用vue的css Module技术结合scss预处理器的变量，实现css的命名空间，达到样式隔离；
[0034]5.渲染模块时采用组件懒加载的方式减少白屏时间。
附图说明
[0035]图1是本专利技术的组件化功能模块并快速集成的方法流程图；
[0036]图2是本专利技术的组件化功能模块并快速集成的方法的系统构成图；
[0037]图3是本专利技术的组件化功能模块并快速集成的方法进行外部对接图；
[0038]图4是本专利技术的整体流程图。
具体实施方式
[0039]下面结合附图和实施例对本专利技术作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本专利技术，而非对本专利技术的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本专利技术相关的部分而非全部结构。
[0040]在本专利技术的描述中，除非另有明确的规定和限定，术语“相连”、“连接”、“固定”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或成一体；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通或两个元件的相互作用关系。对于本领域的普通技术人员而言，可以具体情况理解上述
术语在本专利技术中的具体含义。
[0041]在本专利技术中，除非另有明确的规定和限定，第一特征在第二特征之“上”或之“下”可以包括第一和第二特征直接接触，也可以包括第一和第二特征不是直接接触而是通过它们之间的另外的特征接触。而且，第一特征在第二特征“之上”、“上方”和“上面”包括第一特征在第二特征正上方和斜上方，或仅仅表示第一特征水平高度高于第二特征。第一特征在第二特征“之下”、“下方”和“下面”包括第一特征在第二特征正下方和斜下方，或仅仅表示第一特征水平高度小于第二特征。
[0042]在本实施例的描述中，术语“上”、“下”、“前”、“后”、“左”、“右”等方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述和本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.组件化功能模块并快速集成的方法，其特征在于，包括如下步骤：S1，从项目中根据功能模块抽离组件，建立异步组件；S2，通过预处理器，建立隔离；S3，另起入口文件，导入异步组件，提供通信和功能调用接口；S4，进行打包处理，快速集成功能模块。2.根据权利要求1所述的组件化功能模块并快速集成的方法，其特征在于，步骤S1具体包括：S101，用Promise包装组件得到异步组件，在页面渲染时加载内部组件，调用load；S102，通过createInnerComp创建加载成功的组件；S103，调用createVNode创建Vnode，渲染新的功能模块，通过render函数将Vnode渲染到真实Dom容器元素中。3.根据权利要求1所述的组件化功能模块并快速集成的方法，其特征在于，步骤S2具体包括：S201，采用预处理器scss，通过其中的@forward with()注入css前缀；S202，搭配css
‑
modules方案，在文件中加入<style module>，并为类名重写为$style属性，通过编译的方式修改选择器名字，得出的class将被哈希化以避免冲突；S203，配置vite中的generateScopedName，进一步完善类名的混淆；S204，通过以上步骤实现css的样式隔离，然后，劫持localStorage、Session...

【专利技术属性】
技术研发人员：谢毅，
申请(专利权)人：深圳微自然创新科技有限公司，
类型：发明
国别省市：