iframe-connector<iframe 连接器>

• description

  The plug-in library is mainly used to solve the communication mode of nested iframe, and realize the functions of callback and automatic association, management and so on

  插件库主要用来解决嵌套 iframe 的通信方式，实现回调与自动关联，管理等功能

父容器

在入口文件或者项目启动初期，或者 window.onload 等类似生命周期中

micro-options 属性描述

| 属性 | type | 描述 | 默认值 | | ---------- | -------------- | -------------------------------------- | ---------- | | resposeKey | string | <必填>响应前缀标识 | respose: | | connection | string | <必填>关联子容器标识，必须与子容器一致 | connection | | children | Array[{}] | <必填>子容器列队 | [] | | storeKey | random(string) | 可选 | - |

micro-methods

| 属性 | type | 描述 | 默认值 | | -------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------- | | dispatch | Function(data,to,callback)?.then() | data 格式为{action:'事件名称',payload:{any}} microApp.dispatch({action:'init',payload:{data:'项目初始化'}}) | respose: | | watch | Function | microApp.watch('eventName',Function(payload)) | 监听子容器的事件 | | close | Function | microApp.close() 关闭 poseMessage 事件 | |

• 父容器中挂载子容器

<template>
    <div>
        <iframe id="child-1" src="http://localhost:9527/" />
    </div>
</template>
<script setup>
import {microApp} from 'iframe-connector'
import {onmounted} from 'vue'

onMounted(() => {
    microApp.start({
        resposeKey:'respose:' // 关联key,必须设置，默认为 response:连接子容器回调关联标识符号
        connection:'connection'// 衔接子容器的关联
        children:[
            {
                name:'child-1',// 子容器别名
                id:'child-1' // 如   <iframe id="child-1">
                // host:'http://www.chpil.com:8080' // 强制关联子容器[不填写则不强制关联IP http://www.chpil.com:8080]
            }
        ],
        //  初始化共享数据
        store:{}
    })
})
</script>

父向子容器发送信息

import { microApp } from 'iframe-connector';
// any component 向容器发送

microApp.dispatch(
    {
        action: 'anyParentAction',
        payload: {
            message: '父发送的信息',
        },
    },
    'child-1', // 子容器的名称 -> children中的某一个容器的name, 自动触发对应的host并发送数据
    () => {
        console.log('子容器接受到信息回调');
    }
);

// 或者使用promise，但是这个写法只能写在【触发】函数上 比如不能写在生命周期中
microApp
    .dispatch(
        {
            action: 'anyParentAction',
            payload: {
                message: '父发送的信息',
            },
        },
        'child-1' // 子容器的名称 -> children中的某一个容器的name, 自动触发对应的host并发送数据
    )
    .then(() => {
        console.log('子容器接受到信息回调');
    });

子容器

// entry入口文件中

import { microSubApp } from 'iframe-connector';

//  挂载子容器，查找父容器的存在点
microSubApp({ name: 'child-1' });

// 监听父容器向子容器发送信息
microSubApp.watch('anyParentAction', (payload) => {
    // payload
    console.log('any to do');
});

/**
 * microSubApp.dispatch(data, toHost, callbackFunc = (store))
 */
microSubApp.dispatch(
    {
        action: 'anyChildAction',
        payload: {
            message: '子发送的信息',
        },
    },
    'child-1', // 子容器的名称 -> children中的某一个容器的name, 自动触发对应的host并发送数据
    () => {
        console.log('子容器接受到信息回调');
    }
);

父子共享数据

// 父亲容器
import { microApp } from 'iframe-connector';

// 初始化共享数据
microApp.start({
    store: {
        num: 100,
    },
});

// 修改数据中心
microApp.setStore((store) => {
    store.num = 200;
});

// 子容器中 修改数据
import { microSubApp } from 'iframe-connector';

microSubApp();

// 子容器修改数据中心
microSubApp.setStore((store) => {
    store.num = 200;
});

获取中心数据

// any component
import { microApp } from 'iframe-connector';
import { microSubApp } from 'iframe-connector';

const customData = microApp.getStore() || microSubApp.getStore();

使用方式

vue2 中使用

• 可以自定义 hooks 函数绑定到 data 或者 ref(Composition API) 上 无非就是添加了 observe 观察器
• 如论是 VUE3 还是 vue2、composition-api 或 options-api 在 tempalte 上都转义执行隐式原型链方法, 。

vue3 中直接使用 ref 绑定

react

• 同 vue2 一样可以自定义 hooks 函数，绑定到 state 上或者 hooks useState 利用闭包

奇淫巧计的背后都是函数与作用域的巧妙设计