Mar 31

js脚本中动态调用外部js库的研究

Javascript
看题目可能不太懂什么意思
最近做一些广告库的代码
给第三方去接入,不可能让人家在网站的head标签中给你插入一段js引用
而我考虑到 以js库的形式能以文件的方式缓存,多次使用的时候,提高下载效率
减少服务器压力。
在脚本中 首先要动态在head中插入一段js库的标签
代码如下

(function(){
    if(document.getElementById('jsid'))
    return;
    var s=document.createElement('script');
    s.type='text/javascript';
    s.id = 'jsid';
    s.src='js/test.js';
    document.getElementsByTagName('head')[0].appendChild(s);
  })();


其中 test.js 有很多工具方法,被封装在一个对象中,我在接下来的代码中需要调用
问题肯定来了,test.js 什么时候加载完成呢,立刻调用它的方法肯定找不到定义啦

思考:
去监听script标签 加载,产生一个回调方法,去触发后面的代码开始
OK 没问题,但是假如有1个以上的脚本都要用这一个JS库呢?他到底在回调中 运行哪个脚本的初始函数?
初始函数都加进去运行好了! 但是你怎么就知道所有的脚本都加载完了呢?
也就是说回调运行的初始函数 不一定都能调得到 ,所以这个方法不行
同样考虑ajax去监听加载状态,产生回调同样不行

解决方法:
在test.js 库的最后一行设置一个全局变量,变量名复杂点防止冲突 比如 $value_version_2010 = "2010.03.21";
在你的脚本这样写

(function(){
    if(typeof $value_version_2010 != "undefined"){
        //你的代码
    }else{
        setTimeout(arguments.callee,50);
    }
})();


不断去检查这个变量,不存在就延时50秒 重新执行,一旦有了值,你的代码就可以安全执行了
你可以设置个全局变量记录重新执行的次数,来防止无限执行,当然只要是全局变量 你都要考虑命名安全,尽量复杂点吧

各位看官,不知道在这方面谁还有什么高招,欢迎跟帖
tags:

to "js脚本中动态调用外部js库的研究"

  1. cindy Says:

    EMENT,请教你一个问题,怎么在js中引用第三方服务的js文件,并且执行啊?

  2. emment Says:

    看情况把,如果是在文档流加载过程中执行,就是用js 去write 一个script标签,src指向第三方js文件地址,如果你要调用其中的函数和变量,你就得监听这个script标签是否加载完成,并且写个回调的handler。 写一个全局变量,记录此文件是否被加载执行,后面用到其中的东西,以此为依据。
    如果不是在文档流中执行,可以把该js文件 以 script 标签的形式,插入到页面的head 当中来执行。

  3. hehe Says:

    可以使用队列的方式来加载

Leave a Reply