是否有可能在加载jQuery之前预先注册处理程序?

Is it possible to pre-register handlers before jQuery is loaded?

本文关键字：注册 处理 程序 有可能 加载 jQuery 是否      更新时间：2023-09-26

在页面上加载jQuery的情况较晚，但依赖于jQuery可用的javascript在 jQuery之前加载是一种非常常见的情况，特别是如果您遵循将脚本更接近</body>的做法。

所以基本上我想从这里开始:

<script>
  someFunctionThatUsesLateJQuery(){ [code that relies on jQuery] }
</script>
...
<script src="jquery.js"></script>
<script>
  $(function(){
    someFunctionThatUsesLateJQuery();
  });
</script>

到像这样的东西:

<script>
  _$.ready(function(){ [code that relies on jQuery] });
</script>
...
<script src="jquery.js"></script>

很像异步统计跟踪(la谷歌分析)，有没有什么东西，让你注册javascript函数调用执行一旦jQuery加载没有得到可怕的$ is undefined错误?

我的意思是要发生而不需要注册和注销超时/间隔

有没有/是否有可能添加某种预注册变量到jQuery，它识别和处理一旦它被加载?

用例:

值得注意的是，我得到的具体用例是一个插入式JS小部件，我希望在<script>放置的场景中发生一些DOM操作，因此在jQuery加载发生在</body>附近的情况下，在jQuery加载之前出现非常真实的可能性。

然后我不想通过要求用户在代码执行的正确点(这将取决于他们的实现)注册一个特定的函数调用来进一步增加用户的负担…我想让它"just work"

rich在这里建议。你可以试试这个:

(function() {
    var runMyCode = function($) {
        // jquery-dependent code here
        $("#foo").data('bar', true);
    };
    var timer = function() {
        if (window.jQuery && window.jQuery.ui) {
            runMyCode(window.jQuery);
        } else {
            window.setTimeout(timer, 100);
        }
    };
    timer();
})();

我还发现了一个更复杂的解决方案，但我个人更喜欢上面的解决方案。

不超时更新:

<script>
var runMyCode = function($) {
    // jquery-dependent code here
    $("#foo").data('bar', true);
};
</script>
...
<script src="jquery.js"></script>
<script>
    $(function(){
        runMyCode(window.jQuery);
    });
</script>

当您的所有函数调用都移动到data-attributes时，您可以尝试使用通用和流行的解决方案。然后，在加载jQuery时，抛出所有具有这些属性的DOM元素并运行该函数。即，而不是函数调用，你添加data-type='load' data-function='YourNamespace.yourFunctionName'和之后的窗口。

加载事件，通过$('[data-type="load"]')选择所有元素，迭代它们并执行函数调用。

UPD:猜测，异步函数排队模式可能是有用的阅读:什么'谷歌分析异步设计模式的名称和它在哪里使用?

如果你注入jQuery脚本include，那么你可以监听onload事件。

function loadJS(url, onloadCallback, elId){
//Inject script include into HEAD
    var scriptEl = document.createElement('script');
    scriptEl.type = 'text/javascript';
    scriptEl.src = url;
    if(elId)scriptEl.id = elId;
    document.getElementsByTagName('head')[0].appendChild(scriptEl);
    if(onloadCallback){
        scriptEl.onload = scriptEl.onreadystatechange = function(){
            if(!scriptEl.readyState || (scriptEl.readyState === 'complete' || scriptEl.readyState === 'loaded')){
                onloadCallback();
                scriptEl.onload = scriptEl.onreadystatechange = null;
            }
        }
    }
}
loadJS("http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function(){
    console.log( window.$ );
});

也许我没有完全理解用例，但是RequireJS听起来对你来说可能是一个很好的选择:

https://github.com/requirejs/example-jquery-shim 

define(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});
相关文章：