跟着老师的视频看 qiankun 源码，做一下知识点笔记。因为乾坤是对 single-spa 再封装，所以需要我把 single-spa 看完，才能
好好的对比下，乾坤多了哪些，sspa 少了哪些。

singlespa 没有样式隔离、没有 js 隔离执行，会多个 app 会污染 window
singlespa 只实现了路由劫持和应用加载方案

0.临时笔记

其实乾坤就是创建了沙盒，就是把远程资源 html js css 其他资源加载过来， html 的脚本 style 也都搞出来，
正则表达式处理字符串

判断浏览器是否？？？处理 css，用加标签或者 shadowdom 来隔离样式

js 脚本执行也是，判断？？？，来决定使用快照 window 或者 proxy window，然后 app 的 js 执行在一个带处理后 window 闭包里面

然后加了通信方法？
就这！如上

其实这样封装，就是为了做一个通信的规范吧，要不然每个开发写自己 app 的时候，任意写通信的规则，这样就比较痛苦了！

1.知识点关键字

web component

shadowdom

proxy

快照沙箱/proxy 代理沙箱

eval 和 new Function 【参考】

Javascript 严格模式下 eval 和 new Function 的解析问题?
Javascript 在 strict mode（严格模式）下，　
eval 解析function字符串中不允许携带 with(x) 表达式,
但是在 new Function的情况却可以携带 with(x) 这样的表达式，
目前不能翻墙, 所以求问一下这是为什么，顺便求科普一下解决方案，
需要在strict mode 下使用eval来解析匿名function做为返回.

我们知道，在strict mode下，with是被禁止使用的，但是new Function却可以? 如果说new Function底层也是去调用了eval,那么为什么eval不行呢? 或者有没有什么很神奇的hack方法


解释

'use strict';
var evalIsEvil = 'var obj = {prop: 1}; with(obj) { console.log(obj.prop); }';
// eval(evalIsEvil); // error
var myeval = eval;
myeval(evalIsEvil); // pass
(0, eval)(evalIsEvil); // pass
// 这是因为规定只规定了eval在直接调用的情况下会strict mode

市面上比较成熟的微前端框架

我自己的理解

看了好久视频，感觉微前端做的主要工作就是，
解决跨域问题（我想错了，先跑出个问题：子 app 的请求地址会被修改吗，否则必然会跨域啊），

举个例子说吧，以前 iframe 这种方式的时候，请求回来 html css js 该怎么样就怎么样；
现在微前端说不！！

它 get 请求 html，成字符串，用正则方式，处理 css link script src style script 这几个各有两种方式，后面说

然后把 html 里面的文本生成 dom 对象，啊吧啦啊吧啦操作。。。

这里要做到 css 样式隔离和 js 全局变量隔离

css 和 js 也是和 html 一样，当作字符串内容请求回来，正则搞！，牛皮！

css 有两种方式：shadowdom / 正则替换 class ，例如在 style 每一个 class 加上前缀【xxxapp-id】.class{}，同时在 htmldom 上也修改对应的 class。
；如上是不是就可以做好样式的隔离问题了

js 隔离也有两种方式：最新 api-proxy 去查 / with 方法（这个看上面的知识点，strict 模式下不能用，可以修改函数名字重新赋值一个，也可以用 new Function）。
；如上就做到了 js 全局变量的隔离，以供切换 app 的时候切换。

就是做了这么个事儿吧！不知道我理解的对不对

今天又想到一个问题，需要我跑一个项目试验一下，子 app 的 ajax 请求肯定是自己的域名或者 ip 端口啥的，肯定跨域啊，难道正则 js 的时候，做了 api 的正则？？我不理解这里咋操作的。

看qiankun源码笔记

0.临时笔记

1.知识点关键字

市面上比较成熟的微前端框架

我自己的理解