优雅的处理挂载window上的函数可能不存在的情况
背景
在做一个Web JS SDK(A)时,内部会用到另一个Web JS SDK(B)的方法。(文中后续用A/B代替两者)
B通常会提供Script和NPM包两种使用方式
使用npm pkg的缺点
- 增加包体积
- 如果这个SDK被Web应用已经引入过页面,那么理论上可直接使用,不必要再整一个
如果SDK B包含script引入的方式,目标页面也存在可能会引入B的情况,那么优先考虑使用Script引入依赖的SDK的情况:例如
- 目标页面已经引入过JQuery(符合SDK A的使用需求),那么SDK A就可以直接使用已经存在的
$
进行操作即可,不必再创建jQuery的script - 通常页面都会接入埋点监控等基建服务SDK B,SDK A也需要通过B进行数据的上报
衍生需求
- 挂载在window上的函数不存在时,自动通过script或者polyfill(垫片方法)补全这个方法
- 调用方依旧按照SDK B的文档进行使用
window.sdkB(options)
解决方案
编写一个通用的工具函数,处理上述的衍生需求
方法定义如下
function patchWindowFun(
key: string,
value: string | Function,
options?: {
afterScriptLoad?: Function
beforeAppendScript?: Function
alreadyExistCB?: Function
async?: boolean
defer?: boolean
},
)
总共支持传入3个参数:
key
:带判断的方法在window上的属性名value
:不存在时的取值(function 表明直接使用此方法代替,string类型表明方法来源外部加载的js资源)options
:是一些可选的配置项,主要用于处理使用过外部js资源加载方法的场景afterScriptLoad
:资源加载完成后的回掉beforeAppendScript
:资源加载前的回掉alreadyExistCB
:方法如果已经存在执行的回掉async
:控制script的async属性defer
:控制script的defer属性
由于大多数web sdk都会存在需要调用特定函数或者方法进行初始化的情况,固提供了afterScriptLoad
,beforeAppendScript
,alreadyExistCB
三个钩子函数处理不同时机初始化的情况
方法实现
如果目标属性存在则直接执行相应的回掉,不做进一步处理
if (window[key]) {
alreadyExistCB && alreadyExistCB()
console.log(key, 'already exist')
return
}
目标属性不存在,传入的方法存在时直接进行赋值
// 函数直接赋值
if (typeof value === 'function') {
window[key] = value
return
}
剩余逻辑则是处理方法从外部js资源加载的情况
由于加载script大部分情况是异步的,业务代码中可能已经调用了相关方法,为此临时创建一个方法收集传入的参数
let params = []
window[key] = function () {
params.push(arguments)
}
下面的逻辑就是处理script
加载的逻辑
在js资源加载完成后通过apply
配合forEach
将提前调用方法产生的参数重新正确的执行一次
const script = document.createElement('script')
script.src = value
script.async = !!defer
script.defer = !!async
script.onload = function () {
afterScriptLoad && afterScriptLoad()
// 处理原来没处理的
params.forEach(param => {
window[key].apply(this, param)
})
}
beforeAppendScript && beforeAppendScript()
document.body.append(script)
完整源码如下
function patchWindowFun(
key: string,
value: string | Function,
options?: {
afterScriptLoad?: Function
beforeAppendScript?: Function
alreadyExistCB?: Function
async?: boolean
defer?: boolean
},
) {
// 存在不处理
const { alreadyExistCB, afterScriptLoad, beforeAppendScript, defer, async } = options || {}
if (window[key]) {
alreadyExistCB && alreadyExistCB()
console.log(key, 'already exist')
return
}
// 函数直接赋值
if (typeof value === 'function') {
window[key] = value
return
}
// script url
if (typeof value === 'string') {
let params = []
window[key] = function () {
params.push(arguments)
}
const script = document.createElement('script')
script.src = value
script.async = !!defer
script.defer = !!async
script.onload = function () {
afterScriptLoad && afterScriptLoad()
// 处理原来没处理的
params.forEach(param => {
window[key].apply(this, param)
})
}
beforeAppendScript && beforeAppendScript()
document.body.append(script)
}
}
小结
目前的方法实现仅适用于,调用的方法相对独立不影响正常的交互
如果业务代码依赖方法的返回值,那么异步通过script
加载的方法方式将不太适用
优雅的处理挂载window上的函数可能不存在的情况的更多相关文章
- 油猴Tampermonkey 全局函数 它的注入函数都在 onload里面,直接写函数 都是内部函数,外部要是调用,就要挂靠到window上
油猴Tampermonkey 全局函数 它的注入函数都在 onload里面,直接写函数 都是内部函数,外部要是调用,就要挂靠到window上 window.like111 = function (){ ...
- window上利用pip安装pandas
官网推荐的是直接使用Anoconda,它集成了pandas,可以直接使用.安装挺简单的,有windows下的安装包.如果不想安装庞大的Anoconda,那就一步一步用pip来安装pandas.下面我主 ...
- vuejs件同一个挂载点上切换组
vuejs件同一个挂载点上切换组 动态组件 http://cn.vuejs.org/guide/components.html#动态组件 多个组件可以使用同一个挂载点,然后动态地在它们之间切换.使用保 ...
- 在window上安装pandas
之前在ubuntu上安装pandas,用的easy_install.这次在window上同样方法装遇到"unable to find vcvarsall.bat",看一些网上帖子好 ...
- linux和window下mkdir函数问题(转-锦曦月)
通过WIN32宏进行判断 window下mkdir函数 #include<direct.h> int _mkdir( const char *dirname ); linux下 ...
- iOS UIButton加在window上点击无效果问题
UIButton加在window上,点击没有效果,找了很久,原来是没有加上这名:[self.window makeKeyAndVisible]; self.window = [[UIWindow al ...
- linux和window下mkdir函数
通过WIN32宏进行判断 window下mkdir函数 #include<direct.h> int _mkdir( const char *dirname ); linux下 ...
- 【原】window上安装elasticserach
[window上安装elasticserach] 系统环境:2008R2 x64测试安装用的服务器IP:192.168.12.52elasticsearch版本:2.3.4JDK版本:jdk 1.8. ...
- 关于Windows高DPI的一些简单总结(Window上一般默认是96 dpi 作为100% 的缩放比率)
我们知道,关于高DPI的支持, Windows XP时代就开始有了, 那时关于高DPI的支持比较简单, 但是从Vista/Win7 到现在Win8 /Win8.1, Windows关于高DPI的支持已 ...
- 如果是在有master上开启了该参数,记得在slave端也要开启这个参数(salve需要stop后再重新start),否则在master上创建函数会导致replaction中断。
如果是在有master上开启了该参数,记得在slave端也要开启这个参数(salve需要stop后再重新start),否则在master上创建函数会导致replaction中断.
随机推荐
- 下载Apache软件基金的软件和项目(Hadoop相关组件)
一.下载Hadoop相关组件,可以到Apache软件基金的资源目录: Apache 分发目录地址:https://dlcdn.apache.org/ 二.下载软件 方法一:在页面中找到需要下载的软件目 ...
- Hive实战
1.使用hive实现WordCount (1) 创建数据库 create database wordcount; (2) 创建外部表 create external table word_data(l ...
- 【Android逆向】算法还原2
这题比较简单 1. app-release.apk 安装至手机 提示需要输入账号和密码 2. jadx 打开看看 public native boolean check(byte[] bArr, by ...
- Dubbo使用APISIX作为网关
为什么使用网关 Dubbo服务本身没有暴露HTTP接口,客户端(如:Web,APP)无法直接调用其提供的方法. 而APISIX可以通过dubbo-proxy插件为Dubbo服务提供外部访问的HTTP接 ...
- Telegraph多线程下载器v0.5--tkinter
介绍 最近在拿python写一点小工具,结合之前的多线程.线程池技术做了个GUI版的Telegraph图册批量下载工具. 因为开发平台是在Mac,虽然对Windows平台的也进行了打包,但最垃圾的Wi ...
- 【LeetCode回溯算法#01】图解组合问题
组合问题 力扣题目链接(opens new window) 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合. 示例: 输入: n = 4, k = 2 输出: [ [2 ...
- iOS日志操作与开发,你真的会重视吗
iOS中常用日志和上报系统浅析 类CocoaLumberjack日志框架架构浅析 Crash的类型介绍和常用收集方案 常用上报技术方案对比和分析
- 从零开始学Spring Boot系列-返回json数据
欢迎来到从零开始学Spring Boot的旅程!在Spring Boot中,返回JSON数据是很常见的需求,特别是当我们构建RESTful API时.我们对上一篇的Hello World进行简单的修改 ...
- signature hdr data: BAD, no. of btyes(9088) out of range 问题排查与解决方案
在使用yum工具安装gcc的时候,报出了signature hdr data: BAD, no. of btyes(9088) out of range 的问题 这是由于centos8中rpm工具存在 ...
- 【Azure Redis 缓存】Redis的监控方式? 是否有API接口调用来获取监控值
问题描述 对于PaaS的Azure Cache for Redis,Azure中有哪些监控方式?是否能有api接口调用来获取监控值? 问题答案 1) 在Redis的门户中,使用Metrics查看Red ...