20211214

微前端

什么是微前端

搞微前端目的就是要将产品原子化，由庞大的应用体系拆分为多个模块，再根据客户业务场景进行组合。每个功能模块能单独迭代，自由集成。

微前端不是框架，不是工具/库，而是一套架构体系，它包括若干库，工具，中心化的治理平台及相关配套设施

微前端中的应用隔离

隔离问题分为主应用和微应用，微应用间进行Javascript执行环境隔离，css样式隔离

  • css样式隔离

    1. 主应用和微应用同屏渲染，会产生样式互相污染的问题，解决办法：

      • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

        在你的样式文件中，为CSS规则定义默认命名空间：

        @namespace "http://www.w3.org/1999/xhtml"; 
@namespace svg "http://www.w3.org/2000/svg";

        有了上面的声明。你就可以只为SVG原因应用CSS规则啦：

        svg|a { color: white; }

    • b. 微应用间的隔离：每次应用加载时，将应用上所有的link和style内容进行标记，然后应用卸载的时候卸载已标记的link和style即可

  • Javascript隔离

    1. 使用沙盒机制

      核心是：让局部的Javascript运行时，对外部对象的访问和修改出在可控的范围内，即无论内部如何运行，都不会影响外部的对象

Decorator装饰器

介绍

用法

    1. image-20211214165805268
    2. image-20211214165817509

    1. ​ 接受三个参数：
      1. 类的原型对象
      2. 需要装饰的属性名
      3. 装饰属性名得描述对象
    2. image-20211214170107791
    3. image-20211214172445749

Promise的值穿透

答案：

  1. .then或者.catch的奇书期望是函数，传入非函数则会发生值穿透
  2. 当then传入的不是一个函数，则将会返回上一个promise.data的值，而且每一个无效的then返回的promise状态都为resolved

Javascript的脚本延迟加载的方式有哪些

  1. defer
  2. async
  3. 动态创建DOM
  4. 使用setTimeout延迟加载js文件
  5. 将js脚本放在文档底部
posted @ 2021-12-14 22:31  梦中少女的心  阅读(34)  评论(0)    收藏  举报