页面中的某个js注入时间不确定,而且提供了ready事件,我怎么在使用时确保他一定存在呢?

小蚊酱
  • 4.8k

比如有个全局变量STS,这个变量所在的js文件是客户端注入到我们的页面里的,注入到页面后并初始化完成后会执行一个ready事件。可是这个js文件的注入时间却无法保证,我们只能每次都检测一下,如果存在则直接使用,不存在的话,需要ready一下:

if( window.STS ){
    load();
}else{
    document.addEventListener('stsready', function(){
        load();
    })
}

可是我在使用这个变量里的方法时,总不能每次都这样写一遍检测STS是否存在吧:

const tip = function( msg ){
    STS.showTip(msg);
}
if( window.STS ){
    tip( Date.now() );
}else{
    document.addEventListener('stsready', function(){
        tip( Date.now() );
    })
}

有没有通过Promise或者什么方式来包装一下,每次使用时都能保证全局变量存在,如果不存在就先暂时存储起来,等ready事件执行后,再一并执行呢?

function BB(){

}
var bb = new BB();
bb.invoke('showTip', Date.now());

比如这样的,通过BB包装一下,然后后面我直接使用即可,这样我就能调用到STS中的showTip方法,不用再每次都检测STS了。 谢谢了

回复
阅读 1.8k
3 个回答
✓ 已被采纳

使用Promise编写一个ready函数,然后调用一下即可:

class BB {
    __ready = false;

    constructor() {

    }

    ready() {
        if (this.__ready || window.STS) {
            return Promise.resolve(window.STS);
        }
        return new Promise((resolve) => {
            document.addEventListener('stsready', function(){
                this.__ready = true;
                resolve();
            })
        })
    }

    async invoke(fn, ...params) {
        await this.ready();
        fn.bind(null, ...params);
    }
}

var bb = new BB();
bb.invoke('showTip', Date.now());

感觉这个解决思路引入了不少问题;既然这样,如果这个注入进来的 JS 文件不包含动态内容的话,可不可以封装成 SDK 直接给前端使用?

建一个任务数组,并监听这个数组对象,sts不存在时将需要执行的回调存起来,ready完成和数组变化时都去检查任务队列长度 依次调用回调 回调然后在任务队列数组删除该回调 这样你就不用去管他是否加载了,没加载就会把任务依次挂起,加载完成了就会先把一个任务放进任务队列,然后立即拿出来执行

宣传栏