动态重载JS文件

我有一个test.js文件,里面有一个test()函数。我在开发过程中要经常修改这个test函数,为了看一下程序的运行效果,我在测试运行的时候,要重新刷新一下网页,然后登录,选菜单,经过好几次点击之后触发test()函数,很麻烦。考虑到我修改的仅仅是一个JS文件,我就想能不能在触发test()函数的地方,先重载一下我修改过的JS文件,类似于在python中用reload命令重载一个模块,这样我就不用刷新整个网页了。google一番之后,找到了答案。代码如下:

  1. 先定义一个动态加载js文件的函数 reload_script,它会重载js文件,在完成载入之后触发callback函数
  2. 然后在触发test函数的地方,不再直接调用test()函数。而是先调用reload_script,然后把test()函数作为一个callback传递给reload_script

[js]
function reload_script(jsfile,callback ){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type='text/javascript';
script.src =jsfile;
script.onload = callback;
head.appendChild(script);
}
function reload(){
reload_script("test.js",function(){
// test()是定义在test.js中的函数
// 每次重载test.js之后,都会执行新的test()函数
test();
});
}
[/js]
以上方法在万恶的IE中不起作用,但是我也只用Firefox调试,所以无视IE了。

VIA

Comments