```
      function MyPromise(execte) {
            const that = this
            that.status = 'pending'
            that.value = null
            that.reason = null
            that.onFulFilledCallbacks = []
            that.onRejectedCallbacks = []
            that.rejectedStatus = false

            that.resolve = function(val) {
                if (that.status === 'pending') {
                    that.status = 'fulfilled'
                    that.value = val
                    that.onFulFilledCallbacks.forEach(item => item(val))
                }
            }

            that.reject = function(rea) {
                if (that.status === 'pending') {
                    that.status = 'rejected'
                    that.reason = rea
                    that.onRejectedCallbacks.forEach(item => item(rea))
                }
            }

            execte(that.resolve, that.reject)
        }

        MyPromise.prototype.then = function(onFulFilled, onRejected) {
            if (onFulFilled) {
                onFulFilled = typeof onFulFilled === 'function' ?
                onFulFilled : function(data) { this.resolve(data) }
                if (this.status === 'pending') {
                    this.onFulFilledCallbacks.push(onFulFilled)
                }
            }
            
            if (!onRejected) {
                this.rejectedStatus = true
            } else {
                onRejected = typeof onRejected === 'function' ?
                onRejected : function(data) { this.reject(data) }
                if (this.status === 'pending') {
                    this.onRejectedCallbacks.push(onRejected)
                }
            }
            return this
        }

        MyPromise.prototype.catch = function(onRejected) {
            if (onRejected) {
                onRejected = typeof onRejected === 'function' ?
                onRejected : function(data) { this.reject(data) }
                if (this.rejectedStatus && this.status === 'pending') {
                    this.onRejectedCallbacks.push(onRejected)
                }
            }
            return this
        }

        const p = new MyPromise((resolve, reject) => {
            console.log(111)
            setTimeout(() => {
                reject(2222)
            }, 2000);
        })

        p.then(res => {
            console.log(res, 'res')
        }, rea => {
            console.log(rea, 'rea')
        }).catch(err => {
            console.log(err, 'err')
        })
```

prototype简单实现promsie的.then和.cacth方法

promise简单实现

```
        function DEP(test) {
            const easy_type = 'number' || 'string' || 'boolean' || undefined
            if (typeof test === easy_type || test === null) return test
            if (typeof test === 'function') {
                return !test.prototype ? eval(test.toString()) : test.bind(this)
            }
            if (test instanceof Date) return new Date(test.toString())
            const tt = Array.isArray(test) ? [] : {}
            for (let key in test) {
                if(test.hasOwnProperty(key)) {
                    if (test instanceof Array || test instanceof Object) {
                        tt[key] = DEP(test[key])
                    } else {
                        tt[key] = test[key]
                    }
                }
            }
            return tt
        }
```

原生js简单实现深拷贝(解决 方法/null拷贝丢失问题)

深拷贝

# 微前端实战(主应用: umi, 子应用: umi)

> 本文将详细描述如何创建一个微前端，如何部署上线。本文使用的主应用是umi，子应用是umi。
## 1、什么是微前端
 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。(-- 乾坤官网)

这是官网的原话。乾坤是一个库，他不涉及任何技术栈，在webpack项目(vue、react、angular) 和非webpack项目(jquery、原生js)等项目中都可以用到她。用它来将线上的多个项目联系起来，实现项目的连通性。

我们从为什么使用微前端、微前端是什么、如何使用微前端三个角度简单刨析微前端。
- 为什么使用微前端

   - 拆分巨型应用，使应用方便迭代更新
   - 兼容历史应用，实现增量开发
- 微前端是什么
微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。
- 如何使用、选择微前端
国内使用基座模式偏多
Single-Spa：最早的微前端框架，兼容多种前端技术栈。
Qiankun：基于Single-Spa，阿里系开源微前端框架。

## 2、微前端的优点和缺点
- 优点
通过路由进行跨应用程序通信
解决了大型项目如何迭代的问题
解决了多团队技术栈不同的问题，实现react和Vue等框架整合
- 缺点
有效载荷大小
环境差异配置难
业务和治理复杂

## 3、微前端项目展示
- 项目的关系图如下所示，以主应用umi为基座，子应用的umi以路由关联的形式加载。

<img style="width:100%" src="http://res.gaokai.fun/0001.svg" />

- 效果图演示
我们想要做的一个效果就是，在主应用里面，每个路由切换的时候，都会获取到微前端的全局的state数据，页面里面有一个按钮，每次点击都会将改值更新到全局state数据。当该值为0 的时候，跳转到登录页面。

<img style="width:100%" src="http://res.gaokai.fun/0001.gif" />

## 4、创建umi主应用

- 安装umi

```
 npx @umijs/create-umi-app
```

- 安装微前端qiankun插件

```
npm install @umijs/plugin-qiankun
```

在umirc.tsl里面开启微前端

umirc.ts
```
import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      path: '/root',
      name: 'umi',
      component: '@/layouts/index',
      routes: [
        {
          path: '/root/dashboard',
          name: '总览',
          component: '@/pages/index/index',
        },
        {
          path: '/root/about',
          name: '关于我们',
          component: '@/pages/about/index',
        },
        {
          path: '/root/list',
          name: '列表',
          component: '@/pages/list/index',
        },
        {
          path: '/.', redirect: '/root/dashboard',
        },
        {
          path: '*', component: '@/pages/404/index'
        }
      ]
    },
    {
      path: '/login',
      name: '登录',
      layout: false,
      hideInMenu: true,
      component: '@/pages/login/index',
    },
    {
      name: 'umi 微应用',
      path: '/umi-app',
      microApp: 'umi_app',
    }
  ],
  fastRefresh: {},
  layout: {
    title: '微前端-乾坤',
    headerRender: false
  },
  //核心代码
  qiankun: {
    master: {
      apps: [
        {
          name: 'umi_app', // 唯一 id
          // entry: 'http://localhost:10000', // html entry
          entry: '//www.umiapp.com', // html entry
        },
      ],
    }
  }
});
```


在src文件夹下面创建一个action.ts文件

actions.ts
```
import { initGlobalState, MicroAppStateActions } from 'qiankun';

const state = {
    id: -1
};

// 初始化 state
const actions: MicroAppStateActions = initGlobalState(state);
actions.onGlobalStateChange((state, prev) => {
  // state: 变更后的状态; prev 变更前的状态
  console.log(state, prev,'&');
});
actions.setGlobalState(state);
actions.offGlobalStateChange();

export default actions
```

- 主应用里面访问全局的state状态

```
...
import actions from '../acton';
...
const Index = ()=>{
   actions.onGlobalStateChange((state, prevState) => {
        console.log('state', state, prevState);
       //TODO
    }, true);
}

export default Index
```

- 子应用修改全局状态

```
actions.setGlobalState({xxx: xxx})
```

## 5、创建umi子应用

- 安装umi

```
 npx @umijs/create-umi-app
```

- 安装微前端qiankun插件

```
npm install @umijs/plugin-qiankun
```

umirc.ts 配置

umirc.ts
```
import { defineConfig } from 'umi';
const packageName = require('./package.json').name;
const Config = require('webpack-chain')
export default defineConfig({
  publicPath: "/",
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      path: '/',
      name: '主页',
      component: '@/layouts/index',
      routes: [
        {
          path: '/index',
          name: '总览',
          component: '@/pages/index/index'
        },
        {
          path: '/list',
          name: '列表',
          component: '@/pages/list/index'
        },
        {
          path: '/form',
          name: '表单',
          component: '@/pages/form/index'
        },
        {
          path: '/detail',
          name: '详情',
          component: '@/pages/detail/index'
        },
        {
          path: '/', redirect: '/index',
        }
      ]
    }
  ],
//打包配置
  chainWebpack:(config, { webpack, env, createCSSRule }) =>{
    config
          .output
                .library(`${packageName}-[name]`)
                .libraryTarget('umd')
                .jsonpFunction(`webpackJsonp_${packageName}`)
                .globalObject('window')
                .end()
          .devServer
                    .headers({'Access-Control-Allow-Origin': '*'})
                    .hot(false)
                    .historyApiFallback(true)
                    .watchContentBase(false)
                    .end();
    return config;
  },
 
  fastRefresh: {},
  qiankun: {
    slave: {}
  },
  hash: true,  //开启打包文件的hash值后缀,
});
```

src目录下面创建app.ts 和 actions.ts

app.ts

```
import actions from './actions'
export const qiankun = {
    // 应用加载之前
    async bootstrap(props) {
    },
    // 应用 render 之前触发
    async mount(props) {
        actions.setActions(props)
    },
    // 应用卸载之后触发
    async unmount(props) {
        //   console.log('app1 unmount', props);
    },
};
```

actions.ts
```
// micro-app-vue/src/shared/actions.js
function emptyAction() {
    // 警告：提示当前使用的是空 Action
    console.warn("Current execute action is empty!");
}

class Actions {
    // 默认值为空 Action
    actions = {
        onGlobalStateChange: emptyAction,
        setGlobalState: emptyAction
    };

    /**
     * 设置 actions
     */
    setActions(actions) {
        this.actions = actions;
    }

    /**
     * 映射
     */
    onGlobalStateChange(...args) {
        return this.actions.onGlobalStateChange(...args);
    }

    /**
     * 映射
     */
    setGlobalState(...args) {
        return this.actions.setGlobalState(...args);
    }
}

const actions = new Actions();
export default actions;
```

- 子应用里面访问全局的state状态

```

...
import actions from '../acton';
...

const Index = ()=>{
   actions.onGlobalStateChange((state, prevState) => {
        console.log('state', state, prevState);
       //TODO
    }, true);
}

export default Index
```

- 子应用修改全局状态

```
actions.setGlobalState({xxx: xxx})
```

## 其他问题
- nginx上面，子应用要开启跨域访问，否则主应用fetch不到子应用的资源

<a href="https://qiankun.umijs.org/zh/faq">其他的打包问题</a>



promise简单实现

深拷贝

微前端实战基于umi