@datatester/op v0.2.3

火山引擎 A/B 测试开放 SDK

介绍

火山引擎 A/B 测试开放 SDK 方便用户集成 A/B 页面，提升集成体验。提供微前端/iframe 都集成方式，省掉用户大部分的手动配置。

安装

npm install @datatester/op

Api

微前端（MFE）加载方式

opInit（for React & Vue）

使用微前端加载器时需要提前执行 opInit，opInit 的作用是初始化微前端相关的资源。

示例

import { opInit } from '@datatester/op';

opInit({
  remote: 'https://ab.resource.path/remote.js',
  // 下述配置可以令主应用路由：/father/test/a/child/report 映射到微前端路由：/child/report
  base: '/father/test/a';
});

MfeLoader

MfeLoader 用于加载微前端应用/页面，是一个组件，其 api 如下：

示例 (for React)

import { MfeLoader } from '@datatester/op/react';
import React, { FC } from 'react';

const MfeComponent: FC<RouteComponentProps> = () => (
  <div>
    <div>这是宿主应用的header</div>
    <MfeLoader type="report" appId="12345" flightId="45678" templateId="12" />
  </div>
);

export default MfeComponent;

示例 (for Vue)

<template>
  <div>
    <div class="hello">
      <h1>这是宿主应用标题</h1>
      <h3>op sdk show case</h3>
    </div>
    <mfe-loader type="report" app-id="12345" flight-id="45678" template-id="12" />
  </div>
</template>

<script>
  import { MfeLoader } from '@datatester/op/vue';

  export default {
    name: 'MfePage',
    components: {
      MfeLoader,
    },
  };
</script>

createView

createView 用于创建一个新的微前端视图，是一个函数，返回一个 promise，其有两个方法：

• render: 用于渲染视图
• unmount: 用于卸载视图

具体使用请参照如下示例

示例 for vanilla js(原生js)

// 定义注册函数
import { createView } from "@datatester/op";

export async function setupAB(element: HTMLElement) {
  const view = await createView(element);
  view.render({
    type: "list",
    appId: "12345",
  });
  return view;
}

// 渲染视图
const el = document.getElementById("ab")!;
const view = await setupAB(el);

// 卸载视图
view.unmount();

iframe 加载方式

IframeLoader

IframeLoader 用于通过iframe加载页面，是一个组件，其 api 如下：

未列出iframe自身的属性

示例 (for React)

import { IframeLoader } from '@datatester/op/react';
import React, { FC } from 'react';

const IframeComponent: FC<RouteComponentProps> = () => (
  <div>
    <div>这是宿主应用的header</div>
    <IframeLoader type="report" appId="12345" flightId="45678" templateId="12" token="xxxxxxxx" />
  </div>
);

export default MfeComponent;

示例 (for Vue)

<template>
  <div>
    <div class="hello">
      <h1>这是宿主应用标题</h1>
      <h3>op sdk show case</h3>
    </div>
    <iframe-loader type="report" app-id="12345" flight-id="45678" template-id="12" token="xxxxx" />
  </div>
</template>

<script>
  import { IframeLoader } from '@datatester/op/vue';

  export default {
    name: 'IframePage',
    components: {
      IframeLoader,
    },
  };
</script>

DefaultViewManager

由用户自主配置URL路径

示例 (for React)

import { DefaultViewManager } from '@datatester/op/iframe';
import React, { FC, useEffect } from 'react';

const IframeComponent: FC<RouteComponentProps> = () => {

  const iframeRef = useRef(null);

  useEffect(() => {
    const url = `https://e168-0-183tester.datarangers-onpremise.volces.com/datatester/app/1/experiment/list?abOpConfigId=1`;
    if (!iframeRef.current) {
      iframeRef.current = new DefaultViewManager(document.getElementById('abIframeParent') as HTMLElement, {
        iframeSrc: url,
        iframeAttrs: {
          name: `x-rgw-dor=${document.cookie?.match('(^|;)\\s*x-rgw-dor\\s*=\\s*([^;]+)')?.pop() || ''}`,
          height: '800px',
          width: '100%',
          style: 'border:0px',
        },
      });
    } else {
      const iframe = document.querySelector('#abIframeParent > iframe');
      if (iframe) {
        iframe.src = url;
      }
    }
  }, [location.pathname]);

  return <div id="abIframeParent" />;
};

export default MfeComponent;