加载 jQuery 之前运行的增强.js 库 onScriptLoaded

Question

请使用 Filament Group 的渐进式增强功能查看此演示enhance.js 库

修改为：-

<script type="text/javascript" src="../_shared/EnhanceJS/enhance.js"></script>
<script type="text/javascript"> 
// Run capabilities test
enhance({
loadScripts: [
 {src: 'js/excanvas.js', iecondition: 'all'},
 '../_shared/jquery.min.js',
 'js/visualize.jQuery.js',
 'js/example.js'
],
loadStyles: [
'css/visualize.css',
'css/visualize-dark.css'
] 
}); 

    alert($);

</script> 

我在警报中收到“$ is undefined error”，大概是因为 jQuery 有尚未加载。

注意 - 警报（$）只是为了调试 - 我正在尝试用它做一些事情，例如 $('some-selector') - 并且没有 $(handler) 或 $(document).ready 等要么工作 - jquery 未加载，$ 未定义。

增强的 onScriptLoaded 看起来应该可以解决这个问题，但是如果我添加进去

onScriptsLoaded:[runMyCode()]

，稍后

function runMyCode()
{
    alert("runMyCode was called");
    alert($);
}

第一个警报会起作用，但 $ 仍然没有定义。

如果我在按钮的单击事件上调用 runMyCode 它确实有效。

所以问题是 - 一旦所有脚本都完成使用enhance.js 的加载，如何运行代码？

PS 在 IE8/FF3/Chrome7 中验证了相同的问题

Answer 1

我认为这就是您想要的，请注意 < code>onScriptsLoaded 直接用作回调，因此它应该是一个函数，而不是数组：

enhance({
   loadScripts: [
    {src: 'js/excanvas.js', iecondition: 'all'},
    '../_shared/jquery.min.js',
    'js/visualize.jQuery.js',
    'js/example.js'
   ],
   loadStyles: [
    'css/visualize.css',
    'css/visualize-dark.css'
   ],
   onScriptsLoaded: function() { alert($); }
});

或者更一般地，对于函数，仅传递引用，如下所示：

   onScriptsLoaded: runMyCode

原因 onScriptsLoaded： [runMyCode()]“有点”的作用是立即调用runMyCode函数（在该行运行时，不 > 当脚本完成时）并根据该结果创建一个数组。当脚本完成时，这实际上会抛出一个错误，因为 onScriptsLoaded 应该是一个回调函数，而不是一个数组。

Answer 2

我认为这可能是一个问题：

onScriptsLoaded:[runMyCode()]

您尝试过吗（假设数组符号是正确的）：（编辑 - 它不正确）

onScriptsLoaded: [runMyCode]

？第一种方法是在设置库时调用函数。您只想传递对函数的引用。

编辑实际上它应该是：

onScriptsLoaded: runMyCode

我不知道数组来自哪里； “enhance.js”文档中绝对没有提到它。