javascript - 使用 jQuery 从单个加载语句中的多个文件调用函数

Question

我试图用jQuery实现最基本的include，即在DOM准备好时从多个文件加载函数，但显然事实证明并没有如此琐碎:

index.html

<script type="text/javascript" src="res/scripts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        alert("Hello world!");
        foo();
        bar();
    });
</script>

scripts.js

function foo(){
        alert("Hello from foo!");
}

function bar(){
        alert("Hello from bar!");
}

alert("Hello world!"); 是唯一按预期执行的语句。与之前的策略 (window.attachEvent) 一样，检查文件夹位置

我尝试将 .ready() 语句移至 scripts.js 文件，但这并没有多大帮助。

任何建议我都会非常感激。非常感谢。

更新

目前我正在以这种方式处理加载函数:

// Based on "Flexible JavaScript events" by John Resig: http://goo.gl/xLn4S
function addEvent( obj, type, fn ) {
    if ( obj.attachEvent ) {
        obj['e'+type+fn] = fn;
        obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
        obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
        obj.addEventListener( type, fn, false );
}

function removeEvent( obj, type, fn ) {
    if ( obj.detachEvent ) {
        obj.detachEvent( 'on'+type, obj[type+fn] );
        obj[type+fn] = null;
    } else
        obj.removeEventListener( type, fn, false );
}

addEvent(window, 'load', foo);
addEvent(window, 'load', bar);

Answer 1

$(document).ready() 在 dom 完成后执行，这可能发生在下载外部 javascript 文件之前，因此 foo 和 bar 可能尚未定义。