@datafe/bifrost

彩虹桥 iframe 微前端解决方案

重大更新

从原来的构造函数式调用改为了函数式调用 (这样做的原因是将代码彻底向函数式改造，更方便阅读、扩展、维护)，省去了使用 this 的心智负担

new Bifrost({}) => Bifrost({})

new Bifrost.Model({}) => Birfost.Model({})

用法

引入包

mnpm install --save @datafe/bifrost

创建父页面实例

import Bifrost from '@datafe/bifrost'
const bifrost = Bifrost(
	{
			el,
			name: 'client',
			classList: ['child'],
			url: ${window.location.href}client.html
	}
).sendHandshake().then((child) => {
	child.on('some-event'， （ev） => {
	})
	child.get('height').then(data => {
	})
setTimout(() => {
  child.call('upBackground', '#fff')
}, 5000)
})

创建子页面实例

Bifrost.Model(
    {
        upRouting: (hash: string) => {
            location.hash = hash;
        },
        height: () => document.body.offsetHeight,
        upBackground: (color: string) => {
            document.body.style.background = color;
        }
    },
    true
)
    .sendHandshake()
    .then((parent: ParentApi) => {
        document.body.addEventListener("click", ev => {
            parent.emit("client1-click", { x: ev.pageX, y: ev.pageY });
        });
        window.addEventListener("hashchange", () => {
            document.body.innerText = `触发hash更新, ${location.hash}`;
        });
    })
    .catch((err: Error) => {
        console.log(err.message);
    });

其他 api

父页面 setUrl, 修改 iframe 页面的地址， 自动握手 bifrost.setUrl('newUrl').then((childApi) => {}) 父页面设置回调内容(需要在握手之前设置) bifrost.setFuncAfterHandshake((childApi) => {}) 这俩方法主要是在需要切换 iframe 时候用到。 握手成功后， 父页面可监控子页面发送的事件(on)， 也可以调用子页面对外暴露的方法（get 和 call） 子页面在初始化时对外暴露方法，如 upRouting，height 等， 也可以向父页面发送事件(emit)

sendHandshake(opt)方法（建设中）

opt: string[] | (origin: string): boolean => {} 对子页面许可域进行校验， 校验失败， 握手失败, 抛出 601 校验失败。

错误码说明

402: "参数无效",
403: "创建失败",
404: "握手失败",
405: "上下文未打通",
500: "未定义错误",
501: "缺少模型",
502: "握手通讯超时",
601: "校验失败"