Async 脚本装入器
允许在单页应用程序中同步地加载脚本和样式(或者其他的,事实上):
- 使用测试确保代码只装入一次
- 脚本装入后, 正在调用
- 如果脚本已经装入, 正在运行回调
- 不屏蔽主线程
理由
在整合了众多来自大型、知名供应商的第三方SDK之后,我得出的结论是,没有标准接口,整个事情就变成了一个雷区,包括召回器、计时器、随机图书专用装载器模块,以及窗口上的全局对象,导致XSS风险和其他各种不良行为。 本单元旨在提供一种标准方式来装载第三方依赖性.
使用量
您将一个 urls 列表传递给装入器, 以及检查您的页面是否准备好的方法, 以及何时拨回调用 .
Urls可以是脚本或样式表.
脚本标记
您可以像这样使用模块, 用于从 example.com 中加载的库, 当加载时, 它会给全局窗口对象添加一个名为 PROVIDER 的属性 .
<script>
import loader from '@beyonk/async-script-loader'
const url = '//example.com/sdk/1.0.0/lib.js'
function test () {
return !!window.PROVIDER
}
function callback () {
window.PROVIDER.someFunction()
}
loader([
{ type: 'script', url }
], test, callback)
</script>
您可以通过脚本标记的选项 .
<script>
loader([
{ type: 'script', url, options: { async: true, defer: true } } // these are the default options
], test, callback)
</script>
样式标记
您可以包含任意数量的标记,包括样式标记.
上个装入后,将调用回调.
<script>
import loader from '@beyonk/async-script-loader'
loader([
{ type: 'script', url: '//example.com/sdk/1.0.0/lib.js' },
{ type: 'script', url: '//example.com/sdk/1.0.0/lib2.js' },
{ type: 'style', url: '//example.com/sdk/1.0.0/style.css' }
], () => {
return !!window.PROVIDER
}, () => {
window.PROVIDER.someFunction()
})
</script>
别再哭了!
内入脚本 / 内入 Css
您可以通过传递配置属性来对任意一种标签使用内置内容 content 换成 联 合 国 url。这将将内容写入标签的正文,而不是设定为 href 或者说 src 属性 url 所以别管了 content 工作的时候.
<script>
import loader from '@beyonk/async-script-loader'
loader([
{ type: 'script', content: 'console.log("foo");' },
{ type: 'style', content: '* { color: red; }' }
],
() => false, // always load
() => () // no-op
)
</script>