javascript - 通过 <script> 在书签中加载 jQuery 和 jQueryUI 时出现范围或计时问题？

Question

编辑:更新了详细信息以添加 Firefox/Chrome 行为的差异

我正在尝试创建一个可以加载 jQuery 和 jQueryUI 的书签。 jQuery 加载使用 javascript，但我想既然 jQuery 已加载，我会继续使用它来加载 UI。 除了让它工作之外，我真的很想了解为什么这不起作用。我仍然在思考范围/闭包/等问题。但我只是不明白为什么在 Firefox 中 $ 不起作用，而“jQuery”却起作用! $ 在 Chrome 中工作正常，但我在那里遇到了不同的问题。

注释:
1) 在 FireBug/FireFox 中，我得到 '$("head") 未定义'
2) 在 Chrome 中，“$”工作正常，但 jQueryUI 调用失败，对象 [object Object] 没有方法“dialog”
3) 回调保证 jQuery 在我尝试使用它时已加载。在 Firefox 中，如果我将“$”替换为“jQuery”(例如 jQuery("head) )，那么代码就可以工作!
4) 页面上没有其他库已在使用 $
5) 更令人沮丧的是，在 Firefox 中，如果我只是屈服并使用“jQuery”而不是“$”，然后设置 $("#jquilib").load() 的回调来调用第三个函数，jQueryUI 函数，如 .tabs() 和 .dialog() 不可用，即使回调本身是由可用的 jQueryUI 触发的!
6) 在 Chrome 中，如果我将 setTimeout() 设置为 100 毫秒，jQueryUI 问题就会消失。如果我降低到 1 毫秒或其他时间，问题仍然存在。

我正在使用这篇文章中的 getScript 函数:http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet .

下面是我的代码:

function getScript(url,success){
    var script=document.createElement('script');
    script.src=url;
    var head=document.getElementsByTagName('head')[0],
        done=false;
    // Attach handlers for all browsers
    script.onload=script.onreadystatechange = function(){
      if ( !done && (!this.readyState
           || this.readyState == 'loaded'
           || this.readyState == 'complete') ) {
        done=true;
        success();
        script.onload = script.onreadystatechange = null;
        head.removeChild(script);
      }
    };
    head.appendChild(script);
}

function initializejQueryUI(){
    if (typeof jQuery.ui == 'undefined'){
        // jQueryUI library & jQueryUI cupertino theme
        $('head').append("<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css' type='text/css' rel='stylesheet'>");
        $('head').append("<script id='jquilib' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>");
    }
    $("#jquilib").load($("<div>jQuery & UI Loaded!</div>").dialog());
}
getScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js', initializejQueryUI); // call initializejQueryUI as callback when jQuery loads

Answer 1

好的，经过多次尝试错误后弄清楚了。我继续在 Chrome 中开发我的脚本，看起来我比 Firefox 走得更远。当我完成我的小书签时，我突发奇想在 Firefox 中尝试了它，它也在那里工作!这是我学到的:

1) $("#jquilib").load($("<div>jQuery & UI Loaded!</div>").dialog());调用不起作用，因为 jQuery 在处理脚本后删除了通过 DOM 追加添加的元素!重复使用 getScript() 会更容易函数还获取 jQueryUI 并将警报放入从回调调用的函数中。我遇到的选项卡创建问题(上述问题中的第 5 项)就是这个怪癖的结果。

引用: http://api.jquery.com/append/
搜索 Karl Swedberg 说“是的，这很正常”

2) Firebug 似乎在控制台中使用了“$”，导致了像我上面描述的情况，其中“$”不起作用，但 jQuery() 起作用。似乎有一些规则控制何时释放“$”，因为如果我尝试再次运行脚本，jQuery 的 $ 快捷方式会突然起作用。这是最令人沮丧的部分，因为它看起来像是范围和/或时间问题!