loadScript

动态注入单个 <script>,按内容去重。

scriptOnLoad 的分工:那个负责一次性批量加载若干 url(.css<link> 标签),这个负责单个脚本、支持内联正文,并且保证同一段脚本只求值一次。重复注入同一个第三方 SDK,通常意味着它的初始化副作用跑了两遍。

去重键是 type + 内容 的 md5,所以 URL 和同名的内联脚本不会互相误判。

使用

import { loadScript } from 'ranuts/utils';

// 外链脚本
await loadScript({ type: 'url', content: 'https://cdn.example.com/sdk.js' });

// 内联脚本
await loadScript({ type: 'content', content: 'window.__ready = true;' });

// 第二次调用是空操作 —— 已经求值过了
await loadScript({ type: 'url', content: 'https://cdn.example.com/sdk.js' });

API

loadScript

参数

参数 说明 类型 默认值
type 'url'src 外链加载,'content' 直接内联脚本文本 'url' | 'content' 必填
content type 为 'url' 时是地址,为 'content' 时是脚本正文 string 必填

返回

参数 说明 类型
promise 求值完成后 resolve { success: true } Promise<{ success: boolean }>

外链脚本加载失败时 reject { success: false, error }

说明

内联 script 在 append 的那一刻同步求值,之后不会再派发 load 事件。如果只等 onload,这个 Promise 在真实浏览器里永远不会 settle,所以 type: 'content' 时,append 一返回就视为完成。(jsdom 为内联脚本派发 load 事件,这也是单测看不出这个差异的原因。)