优雅的处理Window.Fun可能不存在的情况

时间：2022-09-09 17:49:14

优雅的处理Window.Fun可能不存在的情况

背景

在做一个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的文档进行使用
  1. window.sdkB(options)

解决方案

编写一个通用的工具函数，处理上述的衍生需求

方法定义如下

  1. functionpatchWindowFun(
  2. key:string,
  3. value:string|Function,
  4. options?:{
  5. afterScriptLoad?:Function
  6. beforeAppendScript?:Function
  7. alreadyExistCB?:Function
  8. async?:boolean
  9. defer?:boolean
  10. },
  11. )

总共支持传入3个参数:

  1. key：带判断的方法在window上的属性名
  2. value：不存在时的取值(function 表明直接使用此方法代替，string类型表明方法来源外部加载的js资源)
  3. options：是一些可选的配置项，主要用于处理使用过外部js资源加载方法的场景
  • afterScriptLoad：资源加载完成后的回掉
  • beforeAppendScript：资源加载前的回掉
  • alreadyExistCB：方法如果已经存在执行的回掉
  • async：控制script的async属性
  • defer：控制script的defer属性

由于大多数web sdk都会存在需要调用特定函数或者方法进行初始化的情况，固提供了afterScriptLoad,beforeAppendScript,alreadyExistCB三个钩子函数处理不同时机初始化的情况

方法实现

如果目标属性存在则直接执行相应的回调，不做进一步处理

  1. if(window[key]){
  2. alreadyExistCB&&alreadyExistCB()
  3. console.log(key,'alreadyexist')
  4. return
  5. }

目标属性不存在，传入的方法存在时直接进行赋值

  1. //函数直接赋值
  2. if(typeofvalue==='function'){
  3. window[key]=value
  4. return
  5. }

剩余逻辑则是处理方法从外部js资源加载的情况

由于加载script大部分情况是异步的，业务代码中可能已经调用了相关方法，为此临时创建一个方法收集传入的参数

  1. letparams=[]
  2. window[key]=function(){
  3. params.push(arguments)
  4. }

下面的逻辑就是处理script加载的逻辑

在js资源加载完成后通过apply配合forEach将提前调用方法产生的参数重新正确的执行一次

  1. constscript=document.createElement('script')
  2. script.src=value
  3. script.async=!!defer
  4. script.defer=!!async
  5. script.onload=function(){
  6. afterScriptLoad&&afterScriptLoad()
  7. //处理原来没处理的
  8. params.forEach(param=>{
  9. window[key].apply(this,param)
  10. })
  11. }
  12. beforeAppendScript&&beforeAppendScript()
  13. document.body.append(script)

完整源码如下

  1. functionpatchWindowFun(
  2. key:string,
  3. value:string|Function,
  4. options?:{
  5. afterScriptLoad?:Function
  6. beforeAppendScript?:Function
  7. alreadyExistCB?:Function
  8. async?:boolean
  9. defer?:boolean
  10. },
  11. ){
  12. //存在不处理
  13. const{alreadyExistCB,afterScriptLoad,beforeAppendScript,defer,async}=options||{}
  15. if(window[key]){
  16. alreadyExistCB&&alreadyExistCB()
  17. console.log(key,'alreadyexist')
  18. return
  19. }
  21. //函数直接赋值
  22. if(typeofvalue==='function'){
  23. window[key]=value
  24. return
  25. }
  27. //scripturl
  28. if(typeofvalue==='string'){
  29. letparams=[]
  30. window[key]=function(){
  31. params.push(arguments)
  32. }
  34. constscript=document.createElement('script')
  35. script.src=value
  36. script.async=!!defer
  37. script.defer=!!async
  38. script.onload=function(){
  39. afterScriptLoad&&afterScriptLoad()
  40. //处理原来没处理的
  41. params.forEach(param=>{
  42. window[key].apply(this,param)
  43. })
  44. }
  45. beforeAppendScript&&beforeAppendScript()
  46. document.body.append(script)
  47. }
  48. }

小结

目前的方法实现仅适用于，调用的方法相对独立不影响正常的交互

如果业务代码依赖方法的返回值，那么异步通过script加载的方法方式将不太适用

原文链接：https://mp.weixin.qq.com/s/SIA7j9RWUykTmWMpMuOZIQ

标签：

相关文章