fet-block

Appearance

桩代码流程 ​

桩代码仅负责拉取并执行 fetBlockLogic.js，因此其代码逻辑流程相对比较简单。见以下流程图红色圈出的部分：

流程思路 ​

  1. 先看本地localstorage是否有 fetBlockLogic.js 的内容，如果有则直接执行
  2. 然后立刻去远程拉取最新的 fetBlockLogic.js，并将最新的远程内容更新到本地localstroage。

代码 ​

以下代码对应 src/stub/main.js

js
import { nativeXhrRequest } from "../tools/xhr";
import { execScript } from '../tools/dom';

// logicUrl即远程logic主逻辑文件地址
const logicUrl = {
  prod: `https://www.unpkg.com/fet@${pkgVersion}/umd/react.production.min.js`,
  dev: `/dist/fetBlockLogic@${pkgVersion}.umd.js`
}[process.env.NODE_ENV]

const LOCAL_STORAGE_FET_BLOCK_LOGIC_KEY = 'fet_block_logic_js_content'

export async function init(options = {}) {
  console.log('stub exec', logicUrl)
  if (options.configUrl) {
    window.fetBlockConfigUrl = configUrl
  }
  // 1. 读取本地配置并执行
  const logicContentFromLocal = localStorage.getItem(LOCAL_STORAGE_FET_BLOCK_LOGIC_KEY)
  if (logicContentFromLocal && logicContentFromLocal.includes('fetBlock')) {
    execScript(logicContentFromLocal);
  }
  // 2. 异步拉取远程配置
  const logicContent = await nativeXhrRequest({
    url: logicUrl,
    method: 'get'
  })
  localStorage.setItem(LOCAL_STORAGE_FET_BLOCK_LOGIC_KEY, logicContent?.body)
  if (!logicContentFromLocal && logicContent?.body && logicContent?.body.includes('fetBlock')) {
    execScript(logicContent?.body)
  }
}

开发环境我们直接采用本地example下的index.html进行开发调试，因此引用/dist下的产物。生产环境此处直接使用unpkg cdn厂商地址。